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
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>)
Tonic offers a variety of methods :-
-
-
parameters
: string to be converted -
syntax
: kebabCase('hello world') -
output
: hello-world
-
-
-
parameters
: string to be converted -
syntax
: titleCase('hello world') -
output
: Hello World
-
-
-
parameters
: string to be converted -
syntax
: snakeCase('hello world') -
output
: hello_world
-
-
-
parameters
: string -
syntax
: longestWord("Hello Mountains") -
output
: Mountains
-
-
-
aim
: Know if an array contains a value -
parameters
: array, value -
syntax
: contains([1,2,3], 3) -
output
:true
-
-
-
aim
: Get all strings of an array -
parameters
: array -
syntax
: strings(["Hey", 6, 3]) -
output
: [ Hey ]
-
-
-
aim
: Get all unique values of array -
parameters
: array -
syntax
: unique(["Hey", "Hey", 3, 5, 5, 7]) -
output
: [ Hey,3,5,7 ]
-
-
-
aim
: Get all numbers of an array -
parameters
: array -
syntax
: numbers(["Hey", 6, 3]) -
output
: [ 6,3 ]
-
-
-
aim
: Select items from DOM -
parameters
: query -
syntax
: tn("h1") -
output
: <h1>Text</h1>
-
-
-
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
-
-
-
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 <h1> element
-
-
-
aim
: Add a class -
parameters
: element, class -
syntax
: addClass(tn("h1") (this selects the "h1" element), "hello") -
output
: "hello" class is added to the <h1> element
-
-
-
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 <h1> element
-
-
-
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 <h1> element
-
-
-
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 <h1> element is clicked
-
-
-
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)
-
-
-
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 <h1> on load after 300 milliseconds (the timeout)
-
-
-
aim
: add a fade-in animation -
parameters
: element, timeout -
syntax
: fadeIn(tn("h1") (This selects the "h1" element), 300) -
output
: <h1> element fades in on load after 300 milliseconds (the timeout)
-
-
-
aim
: add a fade-out animation -
parameters
: element, timeout -
syntax
: fadeOut(tn("h1") (This selects the "h1" element), 300) -
output
: <h1> element fades out on load after 300 milliseconds (the timeout)
-
-
-
aim
: Run afor
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
: <h1> element fades out on load after 300 milliseconds (the timeout)
-