How to create a To-Do List app using JavaScript

by

Welcome to our comprehensive guide on creating a to-do list app from scratch using JavaScript. In this tutorial, we’ll take you through each step of the process, from setting up the HTML structure to adding dynamic functionality with JavaScript. By the end, you’ll have a fully functional to-do list app that you can customize and expand according to your needs.

1.Understanding the Project

Before we start coding, let’s outline the main features of our to-do list app. Our app will allow users to:

  • Add new tasks to the list.
  • Mark tasks as completed.
  • Remove tasks from the list.

2. Setting Up the HTML Structure

Let’s begin by creating the basic HTML structure for our app. Create a new HTML file named index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>To-Do List App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <input type="text" id="taskInput" placeholder="Add new task...">
        <button id="addTaskBtn">Add Task</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Explanation

  • We’ve created a simple HTML structure consisting of a container div (`.container`) to hold our app’s elements.
  • Inside the container, we have a heading (`<h1>`) with the title “To-Do List”, an input field (`<input>) with the id taskInput for adding new tasks, a button (<button>) with the id addTaskBtn to add tasks, and an unordered list (‘<ul>`) with the id `taskList` to display tasks.

3.Styling with CSS

Now, let’s add some styles to make our app visually appealing. Create a new file named styles.css and add the following CSS code. save styles.css file in the same folder where index.html file is saved.

Want to know about basic CSS? 

/* styles.css */

.container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

h1 {
    text-align: center;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    display: block;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: #fff;
    cursor: pointer;
    margin-bottom: 10px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 10px;
    margin-bottom: 5px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.completed {
    text-decoration: line-through;
    opacity: 0.5;
}

Explanation

  • We’ve styled the container to center it on the page and give it a border, border radius, and background color.
  • The heading is centered, and the input field and button are styled for consistency and visual appeal.
  • List items have padding, margin, and border to create a neat layout.
  • Completed tasks will have a line-through text decoration and reduced opacity for visual distinction.

4.Adding JavaScript Functionality

It’s time to add interactivity to our app using JavaScript. Create a new file named script.js and add the following JavaScript code and save the file where HTML and CSS files are saved.

// script.js

const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

// Function to add a new task
function addTask() {
    const taskText = taskInput.value.trim();
    if (taskText !== '') {
        // Create a new list item
        const li = document.createElement('li');
        li.textContent = taskText;
        
        // Create a delete button for the task
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = '❌';
        deleteBtn.classList.add('delete-btn');
        deleteBtn.addEventListener('click', removeTask);
        
        // Append the delete button to the list item
        li.appendChild(deleteBtn);
        
        // Append the list item to the task list
        taskList.appendChild(li);
        
        // Clear the input field after adding the task
        taskInput.value = '';
        
        // Add event listener to toggle task completion on click
        li.addEventListener('click', toggleTask);
    }
}

// Function to toggle task completion
function toggleTask() {
    this.classList.toggle('completed');
}

// Function to remove a task
function removeTask(event) {
    const taskItem = event.target.parentElement;
    taskList.removeChild(taskItem);
}

// Event listener for adding tasks
addTaskBtn.addEventListener('click', addTask);

Explanation

  • We’ve defined functions to add tasks, toggle task completion, and remove tasks from the list.
  • The addTask function creates a new list item for the task entered by the user, along with a delete button to remove the task.
  • The toggleTask function toggles the completion status of a task when clicked.
  • The removeTask function removes a task from the list when the delete button is clicked.
  • Event listeners are added to the add task button and list items to trigger the corresponding functions.

You’ve successfully built your own to-do list app using HTML, CSS, and JavaScript. This project has provided you with valuable experience in web development and JavaScript programming. Feel free to customize and expand your app with additional features to suit your needs.

Leave a Comment