tonic-js v1.0.6

Tonic JS

Tonic JS is a general purpose javascript library aimed at improving the speed at which javascript is written. It has a ton of methods that you can use for : -

• DOM manipulation
• String accessibility
• Array methods
• Minimizing syntax
• Animations

Usage

First run the command : - npm i tonic-js

Then you will be able to use the module.

The syntax will look as follows :-

const tonic = require('tonic')

tonic.<method>(<parameter>)

Methods

Tonic offers a variety of methods :-

String methods

• kebabCase

  • parameters: string to be converted

  • syntax: kebabCase('hello world')

  • output: hello-world

• titleCase

  • parameters: string to be converted

  • syntax: titleCase('hello world')

  • output: Hello World

• snakeCase

  • parameters: string to be converted

  • syntax: snakeCase('hello world')

  • output: hello_world

• longestWord

  • parameters: string

  • syntax: longestWord("Hello Mountains")

  • output: Mountains

Array methods

• contains

  • aim: Know if an array contains a value
  • parameters: array, value
  • syntax: contains(1,2,3, 3)
  • output: true

• strings

  • aim: Get all strings of an array
  • parameters: array
  • syntax: strings("Hey", 6, 3)
  • output: Hey

• unique

  • aim: Get all unique values of array
  • parameters: array
  • syntax: unique("Hey", "Hey", 3, 5, 5, 7)
  • output: Hey,3,5,7

• numbers

  • aim: Get all numbers of an array
  • parameters: array
  • syntax: numbers("Hey", 6, 3)
  • output: 6,3

DOM mainpulation

• tn

  • aim: Select items from DOM
  • parameters: query
  • syntax: tn("h1")
  • output: \Text\

• hasClass

  • aim: Check if an item has a class
  • parameters: element, class, callback (optional)
  • syntax: hasClass(tn("h1") (this selects the "h1" element), ".hello") You can also put an additional callback
  • output: false

• removeClass

  • aim: Remove a class
  • parameters: element, class
  • syntax: removeClass(tn("h1") (this selects the "h1" element), "hello") You can also put an additional callback
  • output: "hello" class is removed from \ element

• addClass

  • aim: Add a class
  • parameters: element, class
  • syntax: addClass(tn("h1") (this selects the "h1" element), "hello")
  • output: "hello" class is added to the \ element

• setCss

  • aim: Change CSS properties
  • parameters: element, css property, changed value
  • syntax: setCss(tn("h1") (This selects the "h1" element), "background-color", "red")
  • output: Background becomes red for \ element

• setText

  • aim: Change text of an element
  • parameters: element, text
  • syntax: setText(tn("h1") (This selects the "h1" element), "Hello World")
  • output: Text becomes "Hello World" for \ element

• click

  • aim: Add a click event listener
  • parameters: element, callback
  • syntax: click(tn("h1") (This selects the "h1" element), function() {console.log("Hello World")})
  • output: "Hello World" gets logged when \ element is clicked

• keypress

  • aim: Add a keypress event listener
  • parameters: element, callback
  • syntax: keypress(window , function() {console.log("Hello World")})
  • output: "Hello World" gets logged when a key is pressed (since we added the event listener to the window)

Animation

• blink

  • aim: add a fade-in and fade-out animation
  • parameters: element, timeout
  • syntax: blink(tn("h1") (This selects the "h1" element), 300)
  • output: Blink animatino set for \ on load after 300 milliseconds (the timeout)

• fadeIn

  • aim: add a fade-in animation
  • parameters: element, timeout
  • syntax: fadeIn(tn("h1") (This selects the "h1" element), 300)
  • output: \ element fades in on load after 300 milliseconds (the timeout)

• fadeOut

  • aim: add a fade-out animation
  • parameters: element, timeout
  • syntax: fadeOut(tn("h1") (This selects the "h1" element), 300)
  • output: \ element fades out on load after 300 milliseconds (the timeout)

Minimizing Syntax

• repeat

  • aim: Run a for loop till a certain count
  • parameters: times to repeat, callback
  • syntax: repeat(9, function(index) {console.log(index)})
  • explaination: When you run this function, it loops a variable until it reaches the max limit. It also passes the variable as a parameter so that it can be used for array manipulation
  • output: \ element fades out on load after 300 milliseconds (the timeout)