Create a To-Do List App with HTML, CSS and JavaScript
Welcome to an exciting coding journey where we create a functional and visually stunning JavaScript Todo List App from scratch! In this comprehensive tutorial, I’ll guide you step-by-step through building a Todo List application using HTML, CSS and JavaScript, while integrating cool animations and persistent local storage functionality. Let’s dive in!
Overview
- Learn to implement CRUD Operations (Create, Read, Update, Delete) for task management.
- Explore localStorage integration, enabling tasks to persist even after refreshing or closing the browser.
- Add sleek animations for task creation and deletion, making the app dynamic and user-friendly.
By the end, you’ll have a fully functional Todo List App that’s not only practical but also aesthetically pleasing.
Build a Todo List App?
Todo list apps are perfect for:
- Boosting Productivity: Organize tasks and manage your day efficiently.
- Learning Web Development: This project helps you master fundamental concepts like DOM manipulation, event handling, and localStorage.
Set Up Your Project
- Create a new folder named
TodoApp. - Inside the folder, create three files:
index.html(structure)style.css(design)script.js(functionality)
Build the Basic HTML Structure
Start with a clean HTML boilerplate in index.html. Link the style.css and script.js files for styling and interactivity.
code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="todo-header">
<h2>Todo List</h2>
<img src="images/notebook.gif" alt="Notebook" height="50">
</div>
<div class="todo-body">
<input type="text" id="todoInput" placeholder="Add your items">
<button id="addBtn">+</button>
</div>
<ul id="todoList"></ul>
<p id="alertMessage"></p>
</div>
<script src="script.js"></script>
</body>
</html>
Style Your Todo App with CSS
Make your app visually appealing by adding the following to style.css:
codebody {
font-family: 'Poppins', sans-serif;
background: linear-gradient(to bottom, #78c1f3, #ffffff);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: #fff;
padding: 20px;
border-radius: 10px;
width: 400px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.todo-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.todo-body {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
#todoInput {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
#addBtn {
padding: 10px;
background: limegreen;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
Implement JavaScript Functionality
In script.js, add the core functionality:
codeconst todoInput = document.getElementById("todoInput");
const addBtn = document.getElementById("addBtn");
const todoList = document.getElementById("todoList");
const alertMessage = document.getElementById("alertMessage");
let todos = JSON.parse(localStorage.getItem("todos")) || [];
function displayTodos() {
todoList.innerHTML = "";
todos.forEach((todo, index) => {
const li = document.createElement("li");
li.innerHTML = `
<span ${todo.completed ? 'style="text-decoration: line-through;"' : ''}>
${todo.text}
</span>
<button onclick="toggleComplete(${index})">✔</button>
<button onclick="deleteTask(${index})">🗑️</button>
`;
todoList.appendChild(li);
});
}
function addTask() {
const task = todoInput.value.trim();
if (!task) {
showAlert("Please enter a task.");
return;
}
todos.push({ text: task, completed: false });
localStorage.setItem("todos", JSON.stringify(todos));
todoInput.value = "";
displayTodos();
showAlert("Task added successfully!");
}
addBtn.addEventListener("click", addTask);
Complete & Delete Tasks
codefunction toggleComplete(index) {
todos[index].completed = !todos[index].completed;
localStorage.setItem("todos", JSON.stringify(todos));
displayTodos();
}
function deleteTask(index) {
todos.splice(index, 1);
localStorage.setItem("todos", JSON.stringify(todos));
displayTodos();
}
function showAlert(message) {
alertMessage.textContent = message;
setTimeout(() => (alertMessage.textContent = ""), 3000);
}
Add Animations
Make the app more dynamic by adding animations to style.css:
codeli {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Test and Customize
Test your app by adding, completing, and deleting tasks. You can customize further by:
- Adding priorities for tasks.
- Setting due dates.
- Styling completed tasks differently.
Conclusion
You’ve built a functional Todo List App with cool animations and local storage integration. This project is a fantastic way to practice core JavaScript concepts and improve your web development skills.