Create a To-Do List App with HTML, CSS and JavaScript

JavaScript
Written by Rick Bowen (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:

  1. Boosting Productivity: Organize tasks and manage your day efficiently.
  2. Learning Web Development: This project helps you master fundamental concepts like DOM manipulation, event handling, and localStorage.

Set Up Your Project

  1. Create a new folder named TodoApp.
  2. 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.

Related blog posts

Load more
Know More About FSIBLOG
Useful Pages

2024 © FSIBLOG. All Rights Reserved.