If you are learning web development, one of the best beginner projects is building a to do list in JavaScript. It’s simple, practical, and helps you understand how JavaScript works with HTML and CSS. It’s simple but very useful for practicing DOM manipulation, event handling, and dynamic elements. In this post, I’ll explain how this project works with the code provided.
Key Features:
Input Field: Easily add your tasks by typing them into the input field provided.
Add Note Button: Click the “Add Note” button to append your task to the To-Do List.
Dynamic List: The To-Do List dynamically updates, displaying your tasks in an ordered list format.
How to Use:
Start by typing your task in the “Write Note” input field.
Click the “Add Note” button to add the task to your To-Do List.
How to Create a To Do List in JavaScript ?
I have already created this project and explained it step by step in my YouTube video. You can check the full tutorial here:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>To-Do App</title>
</head>
<body>
<div class="container">
<div>
<h3>JavaScript To-DO List App</h3>
</div>
<div class="section-one">
<input type="text" placeholder="Write Note" name="" id="userInput">
<button id="addNote">Add Note</button>
</div>
<div class="section-two">
<ol type="1" id="list"></ol>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>CSS Code:
*{
margin: 0;
padding: 0;
}
body{
font-family: Arial;
background: skyblue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
display: flex;
flex-direction: column;
background: #fff;
justify-content: flex-start;
height: 80vh;
width: 500px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 5px #292929;
}
.section-one{
display: flex;
background-color: deepskyblue;
padding: 20px;
border-radius: 5px;
border: 1px solid skyblue;
}
.section-one input{
padding: 10px;
font-size: 14px;
width: 80%;
}
.section-one button{
padding: 10px;
width: 20%;
cursor: pointer;
}
.section-two{
margin-top: 20px;
}
.container h3{
text-align: center;
padding: 10px;
color: crimson;
text-transform: capitalize;
}
.section-two{
display: flex;
padding: 20px;
border-radius: 5px;
border: 1px solid deepskyblue;
height: 400px;
overflow: scroll;
}
#list{
position: relative;
width: 100%;
padding: 20px;
}
#list li{
padding: 10px 0 10px 0;
border-bottom: 1px solid;
}
.removebtn{
position: absolute;
right: 20px;
padding: 2px 8px 3px 8px;
background-color: crimson;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}JavaScript Code:
let btn=document.querySelector("#addNote");
btn.addEventListener('click',addNote);
function addNote(){
let note=document.querySelector("#userInput").value;
if(note.trim()==""){
alert("Field is required");
return false;
}
let li=document.createElement('li');
li.innerHTML=`${note}<button onclick='deleteLi(this)'
class='removebtn'><i class="fa fa-trash-o" aria-hidden="true"></i>
Remove</button>`;
let ol=document.querySelector("#list");
ol.appendChild(li);
document.querySelector("#userInput").value="";
}
function deleteLi(button){
let li=button.parentElement;
li.remove();
}Download Link:
Try It Yourself
Now it’s your turn! Just open the HTML file in your browser, type something in the input box, and hit Add. Your task will instantly appear on the list. Don’t like it anymore? Just click Remove and it’s gone!
This little project may look simple, but it shows the real power of JavaScript—taking user input, updating the page without reload, and giving you full control of the content.
With just a few lines of code, you’ve built your first interactive to do list in JavaScript. Keep experimenting, and soon you’ll be creating bigger and smarter web apps!
