We earlier learn about Document Object Model (DOM) and how we can Manipulate in Vanilla JavaScript.

Now in this post we will implement what we have learn so far about DOM manipulation. We will make Item list in which we will add new item and delete item we will also filter in search.

Before we start If you did not check our previous posts, go and check out

DOM Selectors, DOM node tree and Event Listeners.

Let’s start

Project in Vanilla JavaScript

HTML :

we will add our content in HTML.

CSS :

Now we will make our content Beautiful with help of CSS.

tem listter in VanillaJavaScript codeparadox

After Css and Html

The best part

we will make our list dynamic and filterable in  Vanilla JavaScript .

JavaScript :

First we will make function in which we will add Course items in List.

 

Now, we will Make a function in which we will delete course items from the list.

After this, we will add new function where we will filter our courses in search box.

Result :

See the Pen DOM Manipulation in JavaScript by Suraj Sharma (@codeparadox) on CodePen.


Suraj Sharma

Developer who never forgets semicolon.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: