@jidan/simple-js v1.0.10

Simple Js

This package is to shorten the syntax in JavaScript, the library features are simple.

CDN

Installation

import Simple from "https://cdn.jsdelivr.net/npm/@jidan/simple-js@1.0.7/dist/simple.esm.js"

Example

<script type="module">
    import Simple from "https://cdn.jsdelivr.net/npm/@jidan/simple-js@1.0.7/dist/simple.esm.js"
</script>

NPM

Installation

npm init -y
npm install parcel-bundler @jidan/simple-js 

Usage

import Simple from "@jidan/simple-js"

Run Project

npx parcel index.html

Syntax

Get Dom

to get the object model document

Usage

Simple(element: string)

Example

//without variables
Simple("#id");
//with variabel
const elementId = Simple("#id");

Event Click

to add a click event to an html element

Usage

Simple.click(element: string | HTMLElement, callback: function)

Example

Simple.click("#button", () => alert("Click"));

Event Double Click

to add a double click event to an html element

Usage

Simple.dbclick(element: string | HTMLElement, callback: function)

Example

Simple.dbclick("#button", () => alert("Double click"));

Event Hover

to add a hover event to an html element

Usage

Simple.hover(element: string | HTMLElement, enter: function, out?: function)

Example

//callback for out is not required ( opsional )

//without out 
Simple.hover("#button", () => alert("Enter"));

//with out
Simple.hover("#button", () => alert("enter"), () => alert("out"))

Show Element

to show html elements or set display to "block"

Usage

Simple.show(element: string | HTMLElement)

Example

Simple.show("#button");

Hide Element

to hide html elements or set display to "none"

Usage

Simple.show(element: string | HTMLElement)

Example

Simple.show("#button");

Toggle show/hide Element

to toggle the html element to sho(display: block) or hide (display: none)

Usage

Simple.toggle(element: string | HTMLElement)

Example

Simple.toggle("#button");

Add Class

to add class to html element

Usage

Simple.addClass(element: string | HTMLElement, class: string)

Example

Simple.addClass("#button", "color");

Remove Class

to remove class to html element

Usage

Simple.removeClass(element: string | HTMLElement, class: string)

Example

Simple.removeClass("#button", "color");