All you need to do is add the simple.js library to your html file. In the head tag just add this line of code:

<script src="https://cdn.jsdelivr.net/gh/kgsensei/[email protected]/simple.min.js"></script>

Get element by id, will return html element as object. Function name stands for Get ID.

gid("example_id") // Will return html object, same as document.getElementById()

Get elements by class name, will return html elements as an array of objects. Function name stands for Get Class Name.

gcn("example_class_name") // Will return html object array, same as document.getElementsByClassName()

Check if element with id exists, will return bool. Function name stands for ID Exists.

idex("example_id") // Will return bool

Append HTML to html object, will add specified html

gid("example_id").addHTML("Hello World!") // Will add 'Hello World!' to end of the #example_id content

Prepend HTML to html object, will add specified html

gid("example_id").preHTML("Hello World!") // Will add 'Hello World!' to start of the #example_id content

Set HTML content in html object, will set specified html

gid("example_id").setHTML("Hello World!") // Will set #example_id content to 'Hello World!'

Set text content in html object, will set specified text

gid("example_id").setText("Hello World!") // Will set #example_id content to 'Hello World!'

Mirror of insertAdjacentHTML.beforeBegin

gid("example_id").insertBefore("<i>Hello World!</i>")

Mirror of insertAdjacentHTML.afterBegin

gid("example_id").insertTop("<i>Hello World!</i>")

Mirror of insertAdjacentHTML.beforeEnd

gid("example_id").insertBottom("<i>Hello World!</i>")

Mirror of insertAdjacentHTML.afterEnd

gid("example_id").insertEnd("<i>Hello World!</i>")

Set element attribute

gid("example_id").setAttr("data-key", "value") // Sets the 'data-key' attribute on #example_id to 'value'

Get element attribute

gid("example_id").getAttr("data-key") // Gets the value of the 'data-key' attribute on #example_id

Hide html element by id

gid("example_id").hide() // Will hide #example_id from viewport (display: none)

Show html element by id

gid("example_id").show() // Will un-hide #example_id from viewport (display: block)

Get element width

gid("example_id").width() // Will return pixel value for width

Get element height

gid("example_id").height() // Will return pixel value for height

Get element top position

gid("example_id").top() // Will return pixel value for top

Get element left position

gid("example_id").left() // Will return pixel value for left

Value getter/setter for inputs

gid("example_id").val() // Will get the input value for #example_id
gid("example_id").val("") // Will set the input value for #example_id
gid("example_id").val("placeholder") // Will set the input value for #example_id

Get parent element

gid("example_id").parent() // Gets the parent element of #example_id

Add event listener, usage is the same as normal. Function name stands for Add Event Listener.

gid("example_id").ael() // Will add event listener

// Full Example:
gid("example_id").ael("click", myFunction)

function myFunction(evt) {
    alert("Hello World!")
}

Remove event listener, usage is the same as normal. Function name stands for Remove Event Listener.

gid("example_id").rel() // Will remove event listener

// Full Example:
gid("example_id").rel("click", myFunction)

function myFunction() {
    alert("Hello World!")
}

Use the localStorage API to save data to the local machine

simple.save(<key>, <data>) // Saves data to key

Use the localStorage API to load data from the local machine

simple.load(<key>) // Loads data from key

Get current page width in pixels, updates on window resize

simple.page.width // Current page width in pixels

Get current page height in pixels, updates on window resize

simple.page.height // Current page height in pixels

Pick random item from array

[1, 2, 3, 4, 5].sample() // Will return any one item from array

Check if string is uppercase

"Hello World!".isUpper() // Will return false
"HELLO WORLD!".isUpper() // Will return true

Check if string is lowercase

"Hello World!".isLower() // Will return false
"hello world!".isLower() // Will return true

Check if string is empty, except for whitespace

"".isEmpty() // Will return true
" ".isEmpty() // Will return true
"_".isEmpty() // Will return false

Invert string case

"Hello World".invertCase() // Will return "hELLO wORLD"

Parse JSON data from string, same as JSON.parse()

'{"key": "value"}'.JSONify() // Will return JSON data parsed from string

Generate random integer between min and max value (inclusive)

simple.randint(min, max) // Will return integer between or of values
simple.randint(0, 1) // Will return either 0 or 1
simple.randint(0, 2) // Will return 0, 1, or 2

Capitalize first letter in string

"hello".capitalize() // Will return 'Hello'

Add class to element

gid("example_id").classAdd("test-class-name")

Remove class from element

gid("example_id").classRemove("test-class-name")

Opens a given URL in a new tab

simple.openURL("https://example.com") // Will open example.com in a new tab