We all can agree that creating projects are the best way to learn javascript or any programming language. I wanted to learn JavaScript so I took a project and started to build it using all the documentation and Youtube tutorials of DOM available out there.

Idea : Idea was to create a simple webpage where you can keep track of how much money you lent to someone or how much money you own from someone.

So this idea needed DOM very much because of the taking input from the input box, creating new div, giving it a class and id, and appending it to new container where all the details will be displayed.

Functionalities

There are basically 2 functionality one is where you can fill the data or money you own/lent and another where you can add new members in the list.

Add new data : On triggering add data event using Add button Js is taking input from html page three checkbox and amount, and storing it in an array. Then it is creating a new div to which we are giving class which is already designed using css. Now there is empty div under the Data heading where it will be appended using appendChild method. Data will be deleted using that X button.

Code:

Implementation:

Add new Friend: Just enter new friend name in Add a friend section and add him in members list. In the code we are taking name as an input string and appending it to members list div after finding it using DOM.

Code :

Implementation:

It is very light weight project but it will clear all the DOM concepts on implementation. Here is github repo link if someone wants to check out code.

This is linkfor project which is live on github.

Thank you so much for reading.

Happy coding!!