Building a To-Do List App with HTML, CSS & JavaScript

Table of Contents

Introduction

Building a To-Do List App is a great project for beginner web developers. It teaches you how to manipulate the DOM (Document Object Model), use JavaScript events, and implement basic logic in an app. In this article, we’ll walk through every step of building this app, explaining each line of code in detail. Whether you’re just starting out or have a bit of experience with HTML, CSS, and JavaScript, this guide will help you understand the core concepts and get you building your own projects.

What We Will Build

Our To-Do List App will have the following features:

  1. Add tasks to the list.
  2. Mark tasks as completed.
  3. Delete tasks from the list.
  4. The app will be styled simply using CSS to look nice.

Step 1: Setting Up Your HTML Structure

We begin by creating the basic structure of our web page. This will include an input field for entering tasks, a button to add tasks, and a list where tasks will be displayed.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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 a new task">
        <button id="addTaskBtn">Add Task</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Explanation:

  1. HTML Tags:
    • <html>, <head>, and <body> are the basic building blocks of any HTML document.
    • Inside the <head>, we set the character encoding and viewport properties to make the app responsive.
    • The <link> tag links to an external CSS file (styles.css) for styling our page.
    • Inside the <body>, we have a <div> with a class of container. This will hold all our elements and ensure our app is well-organized.
    • The <input> tag creates a text field where users can type in tasks.
    • The <button> tag is used to add tasks to the list when clicked.
    • The <ul> element will hold the list of tasks (<li> elements).

Step 2: Styling with CSS

We will now style the page to make it look more visually appealing. The design will be simple, but we will focus on making the To-Do List neat and easy to use.

CSS Code:

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styling */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Container Styling */
.container {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    width: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Header Styling */
h1 {
    text-align: center;
    color: #333;
}

/* Input Field and Button Styling */
#taskInput {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#addTaskBtn {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#addTaskBtn:hover {
    background-color: #45a049;
}

/* Task List Styling */
#taskList {
    list-style-type: none;
    padding: 0;
}

#taskList li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    padding: 10px;
    margin: 5px 0;
    border-radius: 4px;
}

.completed {
    text-decoration: line-through;
    color: grey;
}

button.delete {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

button.delete:hover {
    background-color: darkred;
}

Explanation:

  • Reset CSS: The * { margin: 0; padding: 0; } resets all the margins and paddings to avoid inconsistencies across browsers.
  • Body Styling: The body is styled to make the app center-align on the screen, with a light background color.
  • Container Styling: The .container class styles the box that holds the input field, button, and list. It has a white background and rounded corners.
  • Header Styling: The heading (h1) is centered and colored dark gray.
  • Input and Button Styling: Both the input and button elements are styled to look uniform. The button changes color when hovered.
  • Task List Styling: The list items (li) are styled with padding, background color, and rounded corners. Tasks that are marked as completed are crossed out with the completed class.

Step 3: Adding Interactivity with JavaScript

Finally, we’ll add the JavaScript to make the app functional. This includes adding tasks to the list, marking them as completed, and deleting them.

JavaScript Code:

// Access DOM elements
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

// Function to create a new task
function createTask(taskContent) {
    const taskItem = document.createElement('li');
    taskItem.textContent = taskContent;

    // Create a delete button for each task
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Delete';
    deleteBtn.classList.add('delete');
    deleteBtn.onclick = () => {
        taskItem.remove();
    };

    // Append delete button to task item
    taskItem.appendChild(deleteBtn);

    // Add event listener to mark task as completed
    taskItem.onclick = () => {
        taskItem.classList.toggle('completed');
    };

    // Append task item to task list
    taskList.appendChild(taskItem);
}

// Add task when button is clicked
addTaskBtn.onclick = () => {
    const taskContent = taskInput.value.trim();
    if (taskContent) {
        createTask(taskContent);
        taskInput.value = ''; // Clear the input field
    }
};

// Add task when Enter key is pressed
taskInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        addTaskBtn.click();
    }
});

Explanation:

  1. Accessing DOM Elements:
    • We get references to the input field (taskInput), button (addTaskBtn), and the task list (taskList) using document.getElementById().
  2. Creating Tasks:
    • The createTask() function is responsible for creating new tasks. It takes a string (taskContent) as an argument, creates a new <li> element, and adds the task text.
  3. Delete Button:
    • A delete button is created for each task using document.createElement('button'). The button is styled and has an onclick event that removes the task item when clicked.
  4. Mark as Completed:
    • We add an onclick event to each task item (taskItem) that toggles the completed class, which crosses out the task when clicked.
  5. Add Task on Button Click or Enter Key:
    • The addTaskBtn.onclick function adds a new task when the button is clicked. The taskInput.value.trim() makes sure the task text isn’t empty.
    • We also add an event listener for the Enter key so users can add tasks by pressing Enter.

Conclusion

Congratulations! You’ve successfully built a fully functional To-Do List App with HTML, CSS, and JavaScript. Along the way, you’ve learned essential skills like manipulating the DOM, handling user interactions, and adding basic logic to an app. This project is not only a great way to practice your coding skills but also helps you understand the core concepts of web development.

If you found this tutorial helpful or have any questions, feel free to leave a comment below! I’d love to hear about your experience, any challenges you faced, or what you’d like to learn next. Your feedback is always appreciated, and if you’re interested in more beginner-friendly tutorials, don’t forget to subscribe and check back for more content.

Happy coding!

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

Want to keep up with our blog?

Get our most valuable tips right inside your inbox, once per month!

Related Posts

Coding Challenges & Projects, Uncategorized
0
Would love your thoughts, please comment.x
()
x