# Docs

{% hint style="info" %}
**THESE DOCS ARE NOT COMPLETE!**
{% endhint %}

### Methods

* [#get](#get "mention")
* [#edit](#edit "mention")
* [#addclass](#addclass "mention")
* [#removeclass](#removeclass "mention")
* [#setcss](#setcss "mention")
* [#on](#on "mention")
* [#hide](#hide "mention")
* [#show](#show "mention")
* [#loop](#loop "mention")

{% hint style="info" %}
The `elem` parameter is a parameter used by almost all of the quick.js methods, and takes either a querySelector ("#editMe", ".className", "p", etc) or an Element object ("`document.getElementById()`", "`document.getElementByClassName()`", "`_.get()`", etc)
{% endhint %}

### get()

Gets an element using a querySelector and returns an Element object.\
\
Usage: `_.get(elem)`

Example:

```markup
<p id="editme"></p>
<script>
    var elem = _.get("#editme")
    _.edit(elem, "hello there")
</script>
```

### edit()

Edits an element's innerHTML

Usage: `.edit(elem, text)`

Parameters:

> `text` accepts any string or number

Example:

<pre class="language-markup"><code class="lang-markup">&#x3C;p id="editme">&#x3C;/p>

<strong>&#x3C;script>
</strong>    var edit = _.get("#editme")
    _.edit(edit, "I was edited!") // -> &#x3C;p id="editme">I was edited!&#x3C;/p>
    
    _.edit("#editme", "I was edited again!") // -> &#x3C;p id="editme">I was edited again!&#x3C;/p>
&#x3C;/script>
</code></pre>

### addClass()

Add a class to an element.

Usage: `.addClass(elem, property, value)`

Parameters:

> `property` takes a CSS property
>
> `value` takes a value that works with `property`

Example:

```markup
<p id="#changeClass">My class will be changed!</p>

<script>
    _.addClass("#changeClass", "text") // <p id="changeClass" class="text">
</script>
```

### removeClass()

Removes a class from an element

Usage: `_.removeClass(elem, classname)`

Parameters:

> `classname` takes a name of an element class

Example:

```markup
<p id="editme" class="removeMe keepMeHere"></p>
<script>
    var elem = _.get("#editme")
    _.removeClass(elem, "removeMe") // -> <p id="editme" class="keepMeHere"></p>
</script>
```

### setCSS()

Removes a class from an element

Usage: `_.setCSS(elem, property, value)`

Parameters:

> `property` takes the name of a CSS class
>
> `value` takes a valid CSS value of `property`

Example:

```markup
<p id="editme">I will red!</p>
<script>
    var elem = _.get("#editme")
    _.setCSS(elem, "color", "red") // -> <p id="editme">I will be red!</p> (colored red)
    _.setCSS("#editme", "font-size", "25px") // -> <p id="editme">I will be red!</p> (colored red and 25px)
</script>
```

### on()

Add an event listener to an element

Usage: `_.on(elem, event, callback)`

Parameters:

> `event` takes any HTML event
>
> `callback` takes any callback function

Example:

```markup
<p id="clickme">Click me!</p>
<script>
    var elem = _.get("#clickme")
    _.on(elem, "click", function() {
        alert("I was clicked!");
    })
</script>
```

### hide()

Hide an element on the document.

Usage: `.hide(elem)`

Example:

```markup
<p id="hideme">I will be hidden!</p>

<script>
    _.hide("#hideme") // Element is now hidden
</script>
```

### show()

Show an element.

Usage: `.show(elem)`

Example:

```markup
<p id="showme">I will be shown!</p>

<script>
    _.hide("#showme") // Element is now hidden
    _.show("#showme") // Element is now shown
</script>
```

### loop()

Loop a function an amount of times

Usage: `.loop(times, function)`

Parameters:

> `times` takes an integer
>
> `function` takes any JavaScript function

Example:

```markup
<script>
    _.loop(5, function() {
        document.write("Hello!")
    }) // "Hello!" was written 5 times
</script>
```