How to install Grunt on Mac OSX

Grunt is a JavaScript task runner, a tool used to automatically perform frequently used tasks like minify CSS, SASS compilation and watching JS files for changes and much more. You can install Grunt on Mac OSX using npm (node packaging manager). Following are the most common tasks performed using grunt:   Uglify Javascript code. Concat multiple file. Watch files for changes Code validation with jsHint etc. Copy files from one location to another. Before installing Grunt, update your npm package (This might need sudo based on your system permission ).

or

If you are using sudo option, you are asked …

Continue Reading

Javascript : Event binding on Dynamically created element

Whenever we bind events to DOM element, events got attached with all elements which are there in DOM but same events will not get attached to any element which is added dynamically. in order to understand event binding, let’s consider a below DOM structure.

Let’s apply some Styling to above HTML block.

Finally, let’s attach a addEventListener to element with class list-item.

Now if i click on final link, it will translate 30px in Y-axis. You can test the same in Codepen here. Now let’s add a dynamic DIV element with class list item and wrap it inside element with class …

Continue Reading