codeschmiede-toolkit/README.md

A/B Test Development Toolkit

# codeSchmiede A/B Testing Toolkit <!-- omit in toc -->

- [Getting started](#getting-started)
  - [Install](#install)
  - [Usage Example](#usage-example)
- [Helper](#helper)
  - [waitFor](#waitfor)
  - [waitForSync](#waitforsync)
  - [ready](#ready)
- [Wrapper](#wrapper)
  - [qs](#qs)
  - [qsa](#qsa)
  - [addClass](#addClass)
  - [removeClass](#removeClass)
- [Utils](#utils)
  - [isMobile](#ismobile)
  - [getWidth](#getwidth)
  - [getCookie](#getcookie)
  - [setCookie](#setcookie)
- [License](#license)

# Getting started
This toolkit is designed to help you creating A/B tests. Have fun using it!

**Questions or feedback?**
<br/>
team@codeschmiede.de

## Install

```sh
$ npm install codeschmiede-toolkit
```

```sh
$ yarn add codeschmiede-toolkit
```

## Usage Example
```js
import { waitFor } from 'codeschmiede-toolkit';

waitFor('#example', (example) => {
    // do something...
});
```

# Helper

## waitFor

The `waitFor` function is using [document.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) internally.


```js
waitFor('.example', (example) => {
    // do something...
});
```

`waitFor` is also working with a function as a selector. 

```js
waitFor(
    () => return window.example === true, 
    () => {
        // do something...
    }
);
```

## waitForSync

```js
(async () => {

    const body = await waitForSync("body");
    // do something...
})();
```

## ready

The `ready` function is using the [DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event) Event. 

```js
ready(() => {
    // do something...
});
```

# Wrapper

## qs

The `qs` function is just a wrapper for [document.querySelector()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).

> An Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.

```js
const node = qs('#example');

// do something...
node.textContent = 'My new text...';
```

## qsa

The `qsa` function is just a wrapper for [document.querySelectorAll()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll).

> A non-live NodeList containing one Element object for each element that matches at least one of the specified selectors or an empty NodeList in case of no matches.

```js
const nodeList = qsa('.example');

// do something...
[...nodeList].forEach(item => { ... });
```

## addClass

The `addClass` function is just a wrapper for [element.classList.add](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList).


```js
addClass(element, 'classNameToAdd');
```

## removeClass

The `removeClass` function is just a wrapper for [element.classList.remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList).

```js
removeClass(element, 'classNameToAdd');
```

# Utils

## isMobile

```js
const isMobileDevice = isMobile();

if(isMobileDevice){
    // do something for mobile traffic...
} else {
    // do something for desktop traffic...
}
```
## getWidth

```js
const browserWidth = getWidth();
// do something...
```
## getCookie

[JavaScript Cookies](https://www.w3schools.com/js/js_cookies.asp)

```js
const myCookkie = getCookie('myCookie');
// do something...
```

## setCookie

[JavaScript Cookies](https://www.w3schools.com/js/js_cookies.asp)

```js
setCookie ('myCookie', 'myValue', 90);
// do something...
```

# License
Copyright (c) 2024 **codeSchmiede GmbH & Co. KG**.

Licensed under The [MIT License](./LICENSE.md) (MIT).

[**codeSchmiede GmbH & Co. KG**](https://www.codeschmiede.de/)