DEV Community

Cover image for To-Do List using HTML, CSS and JavaScript
Hrushikesh Kokardekar
Hrushikesh Kokardekar

Posted on

To-Do List using HTML, CSS and JavaScript

Hello Developers 👩‍💻👩‍💻👩‍💻

Creating a To-Do List is a basic Application for a beginner . Today in this post we will be creating a basic To-Do List using HTML , CSS and JavaScript.

HTML will contain only certain Elements . Like input box to take user input , a button to add item. Codepen will be given below.

The Important part here is JavaScript. We will be using the concept of createElement() and appendChild() . createElement() is used to create a new HTML elements like "li", "p" and many more. appendChild()is used to append the created element as a child of specified HTML Element.

So the logic here is to create an new "li" (list item) HTML element and a "delete button" onclick of "ADD" button.

I've styled my To-Do List according to my own styling and code will be provided to you but it is more preferable to add your own styling .

You can see the Codepen below :

Hope You like the post and gained some knowledge.

You can Add more to this like giving an error message if user clicks on add button without entering any item in input box.

If you have any doubts you can ask in comment section.

Suggestions are always welcomed.

Meet You in Next Post
Till Then Happy Coding 👩‍💻👩‍💻👩‍💻

Top comments (0)