Simple.js Docs


Setup/Installation

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://dev.kgsensei.dev/simple.min.js"></script>

Dom Manipulation

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() {
    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!")
}

Data Storage

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

Page Variables

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

Data Manipulation/Creation

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'

UI Tools

Add class to element
gid("example_id").classAdd("test-class-name")
Remove class from element
gid("example_id").classRemove("test-class-name")

Miscellaneous

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