How to Build a ToDo List App Using HTML, CSS, and JavaScript

Categories: JavaScript

In this article, you will learn how to create a fully functional ToDo List app using HTML, CSS, and JavaScript. By following this step-by-step guide, even beginners can build a simple yet interactive task management tool. This app will allow you to add, edit, and delete tasks dynamically, helping you understand the core concepts of DOM manipulation, styling, and user interaction.

If you prefer a visual walkthrough, you can watch the video tutorial here: YouTube Tutorial.

Managing tasks effectively is an essential part of staying productive in our busy lives. One of the simplest yet most practical ways to organize your day is by using a ToDo List app. Today, I’m going to show you how to create your very own ToDo List application using HTML, CSS, and JavaScript from scratch. This tutorial is beginner-friendly, and by the end, you’ll have a fully functional ToDo List app that you can use or even expand for personal projects.

If you prefer watching a video walkthrough, I highly recommend this YouTube tutorial:

Watch the Video Tutorial: Build a ToDo List App

The video provides a step-by-step visual explanation which complements this written guide.

Why Build a ToDo List App?

Before jumping into the code, let’s understand why creating a ToDo List app is a great exercise for beginners and even intermediate developers:

Practical Application: You will learn how to handle real-life tasks using web technologies.
DOM Manipulation Practice: Working with JavaScript to dynamically add, edit, and delete tasks enhances your understanding of the Document Object Model (DOM).
Styling Skills: Using CSS to make your app visually appealing.
Functional Programming: Handling user input and updating the UI in real-time.

Tools You Will Need

To build this ToDo List app, you don’t need any fancy tools. Just these basics:

A code editor (like Visual Studio Code, Sublime Text, or Atom)
A modern web browser (Chrome, Firefox, Edge)
Basic knowledge of HTML, CSS, and JavaScript

HTML Code :

HTML provides the skeleton for your app. Here’s the structure we are going to use:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How To Build Todo List App Using HTML CSS And Javascript </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <section class="todowrap">
    <div class="todo-container">
      <div class="add-task-wrap">
        <form action="" id="add-task-form">
          <div class="list-input-box">
            <input type="text" class="input-filed" placeholder="Add new task" id="add-task-input">
            <button class="btn-sub" type="submit" id="add-task-submit">Add Task</button>
          </div>
        </form>
      </div>
    </div>

    <div class="todo-container todo-task-list">
      <h1 class="heading-tasklist">Tasks List</h1>
      <div id="todo-tasks">
        <!-- <div class="list-input-box">
          <input type="text" class="input-filed" placeholder="Add new task" readonly>
          <button class="btn-sub">edit</button>
          <button class="btn-sub">delete</button>
        </div> -->
      </div>
    </div>


  </section>
  <script src="script.js"></script>
</body>

</html>

Explanation:

<section class="todowrap">: The main wrapper for our app.
<div class="todo-container">: Contains the input field and task list.
Form & Input: Lets users type in their tasks.
id="todo-tasks": The container where all tasks will be dynamically added.

CSS Code:

To make our ToDo List visually appealing, we will style it using CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.todowrap {
  background-color: #3b7bcb;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 5%;
}

.todo-container {
  background-color: #fff;
  max-width: 600px;
  width: 100%;
  padding: 30px;
}

.add-task-wrap {
  padding: 16px;
  text-align: center;
  opacity: 1;
  background-color: #2196f3;
  color: #344767;
  box-shadow: #00000024 0rem 0.25rem 1.25rem 0rem,
    #00bbd466 0rem 0.4375rem 0.625rem -0.3125rem;
}

.list-input-box {
  display: flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: 10px;
}

.input-filed {
  border: 0;
  height: 30px;
  margin: 0px;
  width: 70%;
  color: #495057;
  padding: 20px;
  font-size: 18px;
  outline: none;
}

.btn-sub {
  width: 120px;
  height: 40px;
  padding: 0 3px;
  background-color: #fff;
  border: none;
  letter-spacing: 0;
  color: #2196f3;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 700;
}

.todo-task-list {
  margin-top: 30px;
}

.heading-tasklist {
  font-size: 24px;
  color: #2196f3;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 15px;
}

Styling Highlights:

Flexbox Layout: Ensures tasks and input are aligned properly.
Modern Colors: Blue shades give a clean, professional look.
Responsive Design: The app will look good on desktops and mobile devices.

JavaScript Code:

Now comes the fun part – making the app interactive with JavaScript.

window.addEventListener("load", () => {
  const form = document.getElementById("add-task-form");
  const addtask = document.getElementById("add-task-input");
  const todotask_el = document.getElementById("todo-tasks");

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const taskvalue = addtask.value;
    if (!taskvalue) {
      alert("please fill out the task");
    } else {
      todotask_el.classList.add("add-task-wrap");
      const list_input_box_el = document.createElement("div");
      list_input_box_el.classList.add("list-input-box");
      const input_filed_element = document.createElement("input");
      input_filed_element.type = "text";
      input_filed_element.classList.add("input-filed");
      input_filed_element.setAttribute("readonly", "readonly");
      input_filed_element.value = taskvalue;
      const edit_el = document.createElement("button");
      edit_el.classList.add("btn-sub");
      edit_el.innerHTML = "edit";
      const delete_el = document.createElement("button");
      delete_el.classList.add("btn-sub");
      delete_el.innerHTML = "delete";

      list_input_box_el.appendChild(input_filed_element);
      list_input_box_el.appendChild(edit_el);
      list_input_box_el.appendChild(delete_el);
      todotask_el.appendChild(list_input_box_el);

      addtask.value = "";

      edit_el.addEventListener("click", () => {
        if (edit_el.innerHTML == "edit") {
          edit_el.innerHTML = "save";
          input_filed_element.removeAttribute("readonly");
          input_filed_element.focus();
        } else {
          input_filed_element.setAttribute("readonly", "readonly");
          edit_el.innerHTML = "edit";
        }
      });

      delete_el.addEventListener("click", () => {
        todotask_el.removeChild(list_input_box_el);
      });
    }
  });
});

How It Works:

Adding Tasks: When the user submits a task, a new input field and buttons are created dynamically.
Editing Tasks: Clicking the edit button toggles the field between read-only and editable.
Deleting Tasks: Clicking delete removes the task from the list instantly.
Input Validation: Ensures users cannot add empty tasks.

Testing Your App

After building your app, it’s crucial to test:

Add multiple tasks to ensure all are saved properly.
Try editing tasks to check if changes are saved correctly.
Delete a task to see if the task is removed instantly.
Check responsiveness on mobile and desktop.

Benefits of Building Your Own ToDo List App

Enhances Coding Skills: Working with HTML, CSS, and JS together improves your web development skills.
Project for Portfolio: This project is a great addition to your coding portfolio.
Customizable: You can add features like due dates, reminders, and categories as you learn more.

Conclusion

Creating a ToDo List app using HTML, CSS, and JavaScript is a fantastic beginner project. Not only does it give you practical skills, but it also builds confidence in working with front-end technologies. You can expand this app, integrate it with databases, or even turn it into a mobile app in the future.

By following this guide, you now have a fully functional ToDo List app that you built from scratch, complete with editing and deleting functionality. Start coding today, and watch your productivity grow while sharpening your coding skills!

Live Demo

Navigation Bar

How to Build a ToDo List App Using HTML, CSS, and JavaScript

Watch the Video Tutorial: Build a ToDo List App

Why Build a ToDo List App?

Tools You Will Need

HTML Code :

Explanation:

CSS Code:

Styling Highlights:

JavaScript Code:

How It Works:

Testing Your App

Benefits of Building Your Own ToDo List App

Conclusion

Responsive Navbar with Social Media Icons in HTML, CSS & JS

How to Create a Multi Step Form with Step Progress Bar Using HTML, CSS, and JavaScript

How to Create a Stylish File Upload Form Using HTML, CSS, and JavaScript

About Us

FOLLOW US

How to Build a ToDo List App Using HTML, CSS, and JavaScript

Watch the Video Tutorial: Build a ToDo List App

Why Build a ToDo List App?

Tools You Will Need

HTML Code :

Explanation:

CSS Code:

Styling Highlights:

JavaScript Code:

How It Works:

Testing Your App

Benefits of Building Your Own ToDo List App

Conclusion

Related

Responsive Navbar with Social Media Icons in HTML, CSS & JS

How to Create a Multi Step Form with Step Progress Bar Using HTML, CSS, and JavaScript

How to Create a Stylish File Upload Form Using HTML, CSS, and JavaScript