Vanilla JS Browser Default Java Script

By | September 21, 2015


Vanilla JS Browser Default Java Script

Recent days many are discussing about Vanilla JS a ZERO KB framework, it is basically plain/default JavaScript like vanilla ice cream (default flavor) and it is not really a library or a framework. Nowadays JavaScript DOM methods has been improved a lot, it is very powerful in speed operations per second. So that you no need to use any external libraries like Jquery etc.. If you are working for simple mobile or web application, I suggest use following plain JavaScript scripts.

Vanilla JS Browser Default Java Script




The term Vanilla is refers to raw or plain JavaScript.

Start Vanilla – The Document Ready Event
Code runs after the browser finishes loading the document, including images and banner ads.

Click Event
Contains plain JavaScript code, here linkID is the ID name of anchor tag. You can prevent the default behavior by calling e.preventDefault();

Hide & Show Div
The divBlock slowly disappears when clicked hideLink.

Add & Remove Class
Applying and Removing a HTML Class.

CSS Code
You have to include following CSS code within the tag HEAD of the document

You can use following code with in the function HTMLElement.classList, this allows to add or remove the class of an element.

Toggle Class
This method simply toggles the visibility of elements, here the code is adding and removing the class hidden.

Mouse Over & Mouse Out
Changing the div behavior based on mouse moments.


Here grid is the class name of div tags. Using this calling the selected DOM element.

CSS Code

Live POST Update and Delete Records with Vanilla JS

A simple demo project, you can instantly upload and delete news feed without refreshing the page.

Update box with news feed result. Live Demo

Ajax Post
Contains JavaScript code querySelector(“#updateButton”).addEventListener(“click”, function(){}updateButton is the ID name of the button. Usingdocument.getElementById(“updateText”).value; calling update textbox value. I did simplified a function called vanillaGetPost, you will find this in vanillaFunctions.js. Take a look at the Live Demo

You have to write database connection for inserting update.

Delete Records
Using this.parentNode calling parent DIV DOM element and applying fadeOut effect.

Final JavaScript Code
You can include all of the code here.

Download the script, you will find out vinillaFunctions.js

vanillaGetPost Function
Ajax function for POST and GET methods.

vanillaFadeEffect Function
FadeIn and FadeOut animation effect.