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 CSS 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 skeleton 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</span><span class="p">${</span><span class="nx">listNum</span><span class="p">}</span><span class="s2">">
<div class="row">
<div class="col-1">
<input class="" type="checkbox" id="check</span><span class="p">${</span><span class="nx">listNum</span><span class="p">}</span><span class="s2">" onclick="done(</span><span class="p">${</span><span class="nx">listNum</span><span class="p">}</span><span class="s2">)">
</div>
<div class="col-6">
<span class=" h4" id="text</span><span class="p">${</span><span class="nx">listNum</span><span class="p">}</span><span class="s2">"> </span><span class="p">${</span><span class="nx">inputText</span><span class="p">}</span><span class="s2"> </span>
</div>
<div class="col-4">
<button class=" btn btn-danger" onclick="deleteList(</span><span class="p">${</span><span class="nx">listNum</span><span class="p">}</span><span class="s2">)">Delete</button>
<button class=" btn btn-primary" onclick="editList(</span><span class="p">${</span><span class="nx">listNum</span><span class="p">}</span><span class="s2">)">Edit</button>
</div>
</div>
</li>;
input.value=" ";
listNum++;
}
}
done=(listId)=>{
let checkbox = document.getElementById(check</span><span class="p">${</span><span class="nx">listId</span><span class="p">}</span><span class="s2">);
let current = document.getElementById(text</span><span class="p">${</span><span class="nx">listId</span><span class="p">}</span><span class="s2">);
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</span><span class="p">${</span><span class="nx">listId</span><span class="p">}</span><span class="s2">);
let newText = prompt("Type a new task",currentText.innerHTML);
if (filterList(newText)) {
currentText.innerHTML = newText;
}
}
// delete list
deleteList=(listId)=>{
let current = document.getElementById(text</span><span class="p">${</span><span class="nx">listId</span><span class="p">}</span><span class="s2">).innerHTML;
let deleteComfirm = confirm(Are you sure you want to delete the task:</span><span class="p">${</span><span class="nx">current</span><span class="p">}</span><span class="s2">?);
if (deleteComfirm) {
let p = document.getElementById("list")
let c = document.getElementById(list</span><span class="p">${</span><span class="nx">listId</span><span class="p">}</span><span class="s2">);
p.removeChild(c);
}
else{
console.log("deleted");
}
};
Conclusion
Great! we have our JavaScript code implemented. We should now be able to add tasks to our to-do list and it will update dynamically.
🤝 Thank you so much for taking time out of your day to read this Article! I hope it helped you out and you learned something new today! Please leave a comment if you have anything you'd like to add.
☕️ If you enjoy reading my content Buy me a coffee as it will help me continue to make awesome quality blogs!
👨🏽💻 For more Web Dev code snippets, tips, and tricks check out my Grepper Platform
🎨 You can also check out my Portfolio here
🐦 You can also follow me on Twitter to check out my self-taught journey as well as more bite-sized tips on web development.
Top comments (0)