Create a simple todo list app
Today we are going to build a simple to-do list using HTML, CSS and JavaScript. This will be a fun little project that will surely give you some good practice on your Front-end development skills.
This todo app will allow users to add, remove, and modify tasks easily and effectively. You can easily integrate this lightweight code inside your project to create to-do lists on the fly according to your needs.
Let's get started!
Add Bootstrap 5 to your project
The first thing we need to do is set up our project and add our HTML code. We will use a <div> tag to create a container for our to-do list and then we'll add our JavaScript later on.
Let's first add our Bootstrap 5 cdn into the <head> section of our HTML file.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
Once that's done, let's add our HTML code into our <body> section.
Add the todo list HTML code
<div class="container rounded-3 border-dark border border-2 my-5 bg-white" style="height:auto;">
<div>
<h1 class="h1">To Do List</h1>
<div class="row">
<div class="col-8">
<input class="py-3 form-control shadow" placeholder="Add a task" type="text" id="inputText">
</div>
<div class="col-2">
<button id="addButton" onclick="addList()" class=" mt-2 btn btn-success"> Add Task</button>
</div>
</div>
</div>
<hr>
<div class="row rounded bg-white">
<div class="col-12">
<ul class="list-group" id="list"></ul>
</div>
</div>
</div>
Great! we have our html code implemented. Now it's time to add our JavaScript.
let input = document.getElementById("inputText");
let list= document.getElementById("list");
let minimalValue = 3;
let listNum = 0;
addList=()=>{
// get
let inputText = filterList(input.value);
// set
if (inputText) {
list.innerHTML += `<li class=" my-3 py-3 shadow list-group-item " id="list${listNum}">
<div class="row">
<div class="col-1">
<input class="" type="checkbox" id="check${listNum}" onclick="done(${listNum})">
</div>
<div class="col-6">
<span class="h4" id="text${listNum}"> ${inputText} </span>
</div>
<div class="col-4">
<button class="btn btn-danger" onclick="deleteList(${listNum})">Delete</button>
<button class="btn btn-primary" onclick="editList(${listNum})">Edit</button>
</div>
</div>
</li> `;
input.value=" ";
listNum++;
}
}
done=(listId)=>{
let checkbox = document.getElementById(`check${listId}`);
let current = document.getElementById(`text${listId}`);
let classExit=current.classList.contains("text-decoration-line-through");
if (classExit == true) {
current.classList.remove("text-decoration-line-through");
}else{
current.classList.add("text-decoration-line-through");
}
}
// filter the list
filterList=(x)=>{
if (x) {
if (x.length >= minimalValue) {
return x;
}
else{
alert("Please enter more than 3 words")
}
}
else{
return false;
}
}
// edit list
editList=(listId)=>{
let currentText = document.getElementById(`text${listId}`);
let newText = prompt("Type a new task",currentText.innerHTML);
if (filterList(newText)) {
currentText.innerHTML = newText;
}
}
// delete list
deleteList=(listId)=>{
let current = document.getElementById(`text${listId}`).innerHTML;
let deleteComfirm = confirm(`Are you sure you want to delete the task:${current}?`);
if (deleteComfirm) {
let p = document.getElementById("list")
let c = document.getElementById(`list${listId}`);
p.removeChild(c);
}
else{
console.log("deleted");
}
};
Great! we have our JavaScript code implemented. We should be able to now add tasks to our to-do list and it will update dynamically. Let's give it a shot!
Thanks for reading! If you enjoyed this article please give it a like. Thanks again and see you in the next article!