Table of Contents
- Introduction
- Creating Todo Form Layout in HTML (index.html)
- Styling Todo Form and List using CSS (style.css)
- Todo Project communication with LocalStorage using JavaScript (script.js)
- Video Tutorial
Introduction
Create a Todo Project using HTML, CSS and Vanilla JavaScript along with LocalStorage. Below is the project demo image.
Creating Todo Form Layout in HTML (index.html)
The HTML layout for this project is very simple. We have a div with class “todo-container” and have a form inside it. The form only has an input field and an unordered list with class “tasks” that will display all the todo tasks stored in local storage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo Application</title>
<!-- Imported font awesome icons library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="todo-container">
<h1> Todo List </h1>
<form class="form">
<input type="text" class="input" placeholder="Enter your task" autocomplete="off" autofocus>
<ul class="tasks">
<!-- This section will display all todos from local storage -->
</ul>
</form>
</div>
<script src="script.js"></script>
</body>
</html>Styling Todo Form and List using CSS (style.css)
We are using todo-container as flexbox to align the form and list in the center of the document.
* {
margin: 0;
padding: 0;
}
body {
font-family: cursive;
background-color: #009949;
}
.todo-container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 100vh;
}
.todo-container h1 {
color: #fff;
margin-bottom: 20px;
}
.form {
position: relative;
box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
width: 400px;
background-color: navajowhite;
border-radius: 10px;
color: #333;
}
.input {
width: 100%;
box-sizing: border-box;
padding: 20px;
border-radius: 10px 10px 0 0;
border: 0;
font-size: 20px;
font-family: cursive;
}
.input::placeholder {
color: lightgray;
}
.tasks {
padding: 0;
margin: 0;
}
.tasks li {
list-style-type: none;
padding: 15px;
font-family: cursive;
position: relative;
}
.tasks li + li {
border-top: dotted;
border-color: darkgray;
}
.tasks li .fas {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.tasks li .fa-trash {
color: red;
right: 20px;
}
.tasks li .fa-check-square {
color: green;
right: 40px;
}
.tasks li.checked {
color: darkslategrey;
text-decoration: line-through;
}
.tasks li.checked .fa-check-square {
color: darkslategrey;
}
Todo Project communication with LocalStorage using JavaScript (script.js)
All the heavy lifting is done by JavaScript. We have two functions addTodo to add tasks and updateLocalStorage to update the localstorage for several events like adding new task, updating the completed status of the task and removing the task.
Please refer to the comments in the code for more information.
// select all elements
const formEl = document.querySelector('.form');
const inputEl = document.querySelector('.input');
const tasksEl = document.querySelector('.tasks');
// fetch the tasks from localstorage and convert to json
let list = JSON.parse(localStorage.getItem("tasks"));
// if there is some tasks stored in localstorage, display them
if(list) {
list.forEach(task => {
addTodo(task);
});
}
// call addTodo method on form submit i.e., a todo is added
formEl.addEventListener("submit", (e) => {
e.preventDefault();
addTodo();
});
// function to add todo and update local storage after adding
function addTodo(task) {
let newTask = inputEl.value;
if(task) {
newTask = task.name;
}
const liEl = document.createElement("li");
if(task && task.checked) {
liEl.classList.add("checked");
}
liEl.innerText = newTask;
const checkBtnEl = document.createElement("div");
checkBtnEl.innerHTML = `
<i class="fas fa-check-square"></i>
`;
liEl.appendChild(checkBtnEl);
const trashBtnEl = document.createElement("div");
trashBtnEl.innerHTML = `
<i class="fas fa-trash"></i>
`;
liEl.appendChild(trashBtnEl);
tasksEl.appendChild(liEl);
inputEl.value = "";
checkBtnEl.addEventListener("click", () => {
liEl.classList.toggle("checked");
updateLocalStorage();
});
trashBtnEl.addEventListener("click", () => {
let del = confirm("Are you sure to delete this task?");
if(del) {
liEl.remove();
updateLocalStorage();
}
});
updateLocalStorage();
}
// function to update localstorage on each todo addition, completed/not completed
// or deleted
function updateLocalStorage() {
const liEls = document.querySelectorAll('.tasks li');
list = [];
liEls.forEach(liEl => {
list.push({
name: liEl.innerText,
checked: liEl.classList.contains("checked")
});
});
localStorage.setItem("tasks", JSON.stringify(list));
}