Simple Js

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

CDN

Script Tag

<script src="https://cdn.jsdelivr.net/npm/@jidan/simple-js/dist/simple.umd.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");

Set Metadata

to set html metadata

Usage

Simple.metadata(data: object)

Example

Simple.metadata
(
 {
     title: "Simple Js"
 }
);

Object Data

{
  title: "Page Title",
  description: "Page Description",
  keywords: "library, simplejs",
  ogTitle: "Open Graph Title",
  ogDescription: "Open Graph Description",
  ogImage: "https://example.com/og-image.png",
  twitterTitle: "Twitter Title",
  twitterDescription: "Twitter Description",
  twitterImage: "https://example.com/twitter-image.png",
  favicon: "https://example.com/favicon.ico",
  robots: "noindex, nofollow",
  themeColor: "#ffffff",
  appleTouchIcon: "https://example.com/apple-touch-icon.png"
}

Text Time ( Lyrics )

to display text sequentially, similar to the typing effect but slightly different (usually for music lyrics)

Usage

Simple.textTime(element: string | HTMLElement, text: string, delay: number, duration: number)

Example

Simple.textTime("#lyrics", "Something bad is 'bout to happen to me", 11000, 4100);

Highlight Text

to highlight selected text

Usage

Simple.highlightText(bgColor?: string, textColor?: string)

Example

//Combinate with copy event
//The text will be highlighted after the user presses copy
Simple.copy("#text", () => Simple.highlightText())

Text to Speech

convert text to speech

Usage

Simple.textSpeech(text?: string)

Example

//Combinate with event copy
//The text will change into sound when you copy the text.
Simple.copy("#text", () => Simple.textSpeech())

Generate Unique Id

to generate a unique id

Usage

Simple.useId(name?: string)

Example

console.log(Simple.useId()) //Output: j-1
console.log(Simple.useId("sigma")) //Output sigma-2

Create New Element

to create html elements

Usage

Simple.create(parentElement: string | HTMLElement, newElement: string, content: string)

Example

Simple.create(".container", "h1", "Hello World!")

merge objects

to merge objects

Usage

Simple.deepMerge(target: object, source: object)

Example

const name = {
    name: "Joe Goldberg"
};
const age = {
    age: 20
};

const data = Simple.deepMerge(name, age);
console.log(data) // Output: {name: "Joe Goldberg", age: 20}

Effect Typing Looping

to add typing animation to html text elements

Usage

Simple.typing(element: string | HTMLElement, text: string, speed?: number, delay?: number)

Example

Simple.typing("#text", "Hello World!")
//default speed: 100ms, delay: 500ms

Trigger Scroll

to trigger a class when scrolling, for example if the element is in the viewport, it will add a class to that element and if it leaves the viewport, the class will be removed

Usage

Simple.triggerScroll(triggerElement: string | HTMLElement, triggedElement: string | HTMLElement, className: string) 

Example

Css

.container {
  position: relative;
  width: 100px;
  height: 100px;
  background: rgba(0,0,0,0);
  margin: 10px 0 10px 0;
}

.object {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: green;
  transform: translateX(-150%);
  transition: all .5s;
}

.scrolled {
  opacity: 1;
  transform: translateX(100%);
}

Javascript

Simple.triggerScroll(".container", ".object", "scrolled") 

Text Lyrics ( Node Js )

create progress text in console

Usage

Simple.lyrics(text: string, delay: number, duration: number);

Example

Simple.lyrics("I admit it, another ho got me finished", 9500, 3000);  

Other Syntax

cape ngetik, jadi gua kasih sintaks nya aja

Simple.css(element: string | HTMLElement, property: string, value: string)
Simple.text(element: string | HTMLElement, text: string)
Simple.html(element: string | HTMLElement, html: string, append?: boolean)
Simple.on(element: string | HTMLElement, event: string, callback: function)
Simple.scrollTo(element: string | HTMLElement) 
Simple.toLink(url: string)
Simple.clone(element: string | HTMLElement, deep?: boolean)
Simple.cloneAppend(element: string | HTMLElement, deep?: boolean)
Simple.toggleClass(element: string | HTMLElement, class: string)
Simple.clipboard(text: string, callback?: function)
Simple.device()
Simple.shuffleArray(array)
Simple.textTimeConsole(text: string, delay: number)
Simple.copy(element: string | HTMLElement, callback: function)
Simple.dragAndDrop(elementSelector: string | HTMLElement, dropZone?: string | HTMLElement)
Simple.formatNumber(number: number, country: string) //Example country: "id-ID"
Simple.scrollToBottom()
Simple.scrollToTop()
Simple.randomColor()
Simple.capitalize(text: string)
Simple.arrayUnique(array)
Simple.getRandomInt(min: number, max: number)
Simple.hexToRGB(hex: string)
Simple.rgbToHex(r: number, g: number, b: number)
Simple.encrypt(text: string)
Simple.decrypt(encryptedText: string)
Simple.generateGradient(direction?: string)
Simple.limitText(text: string, maxLength: number)
Simple.setCookie(name: string, value: string, days: number)
Simple.getCookie(name: string)

Components Syntax

Button

Usage

Simple.Button(options?: object, className?: string)

Options

const options = {
  text: "Click Me", //Default: "Default Button"
  color: "green", //Default: black
  colorText: "white", //Default: white
  size: "20px", //Default: 16px
  icon: "", //optional 
  hoverEffect: "scale", //optional
  smooth: true, //optional def: false
  transition: ".3s" //optional, include: smooth
}

Example

const button = Simple.Button({color: "red"});

document.body.appendChild(button)

Support

Saweria

Link

My Portfolio  · 

My Github  ·