Create your Own To-Do List App with Just CSS, HTML, & JavaScript | Devhubspot
Hey friends, today in this blog, you’ll learn how to create a complete Todo List App in HTML CSS & JavaScript. Crud operation means to create, read, and delete. If you’re an absolute beginner, this to-do will be a little bit difficult for you to create.
For beginners, you can try to create this easy Todo List App in JavaScript. In this todo, there are no features for completing tasks so, it will be easy for you to create than the current one.
If you don’t know, the to-do list app is a list of things that need to be done or want to be done. Okay, without further delay, let’s back to this project.
Steps For Creating To-Do List
To create a To-Do using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.html
file. The file name must be index and its extension .html - Create a
style.css
file. The file name must be style and its extension .css - Create a
script.js
file. The file name must be script and its extension .js
To start, add the following HTML codes to your index.html
file to create a basic layout for the To-Do.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>To-Do List App - Devhubspot</title> <link rel="stylesheet" href="./styles.css"> </head> <body> <div class="container"> <div class="todo-app"> <h2>To-Do List</h2> <div class="row"> <input type="text" id="input-box" placeholder="Add your task"> <button onclick="addTask()">Add</button> </div> <ul id="list-container"> <!-- <li class="checked">Task 1</li> <li class="">Task 1</li> --> </ul> </div> </div> </body> <script src="./script.js"></script> </html>
Next, add the following CSS codes to your style.css
file to style the captcha generator and make it interactive and beautiful.
*{ margin: 0; padding: 0; font-family: 'Poppins', sans-serif; box-sizing: border-box; } .container{ width: 100%; min-height: 100vh; background: linear-gradient(135deg, #5473cf, #2b2562); padding: 10px; } .todo-app{ width: 100%; max-width: 600px; background-color: #fff; margin: 100px auto 20px; padding: 40px 30px 70px; border-radius: 10px; } .todo-app h2{ color: #5473cf; display: flex; align-items: center; margin-bottom: 20px; } .row{ display: flex; align-items: center; justify-content: space-between; background: #ededed; border-radius: 30px; padding-left: 20px; margin-bottom: 24px; } input{ flex: 1; border: none; outline: none; background: transparent; padding: 10px; font-size: 14px; } button{ border: none; outline: none; padding: 16px 50px; background: #5473cf; color: #fff; font-size: 16px; cursor: pointer; border-radius: 40px; } ul li{ list-style: none; font-size: 16px; padding: 12px 8px 12px 50px; user-select: none; cursor: pointer; position: relative; } ul li::before{ content: ''; position: absolute; height: 28px; width: 28px; background-image: url('images/unchecked.png'); background-size: cover; background-position: center; top: 8px; left: 8px; } ul li.checked{ color: #5473cf; text-decoration: line-through; } ul li.checked::before{ background-image: url('images/checked.png'); } ul li span{ position: absolute; right: 0; top: 5px; width: 40px; color: #555; height: 40px; font-size: 20px; line-height: 40px; text-align: center; border-radius: 50%; } ul li span:hover{ background: #5473cf; color: #fff; }
Finally, add the following JavaScript code to your script.js
file to make the to dynamic list and delete or manage locally
const inputBox = document.getElementById("input-box"); const listContainer = document.getElementById("list-container"); function addTask(){ if(!inputBox.value){ return alert("You must write something!"); } let li = document.createElement("li"); li.innerHTML = inputBox.value; listContainer.appendChild(li); let span = document.createElement("span"); span.innerHTML = "\u00d7"; li.appendChild(span); inputBox.value = ""; storeDate(); } listContainer.addEventListener("click", function(e){ if(e.target.tagName === "LI"){ e.target.classList.toggle("checked"); storeDate(); }else if(e.target.tagName === "SPAN"){ e.target.parentElement.remove(); storeDate(); } }, false); function storeDate(){ localStorage.setItem("todaData", listContainer.innerHTML); } function showTask(){ listContainer.innerHTML = localStorage.getItem("todaData"); } showTask();