Building a To-Do App in HTML, CSS, & JavaScript

To-Do App with Pure HTML, CSS, and JS

In today’s rapidly changing world, staying organized is essential. A to-do list is a simple yet powerful tool for managing tasks and prioritizing work.

This article will walk you through the steps to create an efficient to-do list app from scratch using HTML, CSS, and pure JavaScript. This project is ideal for beginners who want to build a functional web app.

Here is the working code. You can edit it to make improvements, but don’t worry, we’ll explain what the code does in detail later.

To-Do List in Pure HTML, CSS and JavaScript

The Foundation: HTML and CSS

Before we add JavaScript magic, we’ll set the stage with HTML and CSS. These two technologies provide structure and style for our to-do list app.

HTML Structure

Our to-do list app will have a title, container for the list, input field for adding new tasks, and button for adding them. Here’s the HTML structure:

<h1>To-Do List</h1>
<ul class="todo-list"></ul>
<input type="text" class="todo-input" placeholder="Add a new task..." />
<button type="button" class="todo-add-button">Add</button>

CSS Styling

We’ll use CSS to style our to-do list, making it visually appealing and user-friendly. The CSS code defines the font, background color, and styling for our app. Here’s an example:

body {
  font-family: sans-serif;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-item {
  cursor: pointer;
}

.todo-item.done {
  text-decoration: line-through;
}

.todo-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

.todo-add-button {
  background-color: #000;
  color: #fff;
  padding: 10px;
  margin-bottom: 10px;
}

JavaScript for Enhanced Functionality

JavaScript is the powerhouse of our to-do list app, adding interactivity and functionality to our static structure.

Adding New Tasks

We’ll create a function to add new tasks to our list. The function takes the input value, creates a new list item, and appends it to the list. Here’s the function:

function addTask(task) {
  const listItem = document.createElement('li');
  listItem.textContent = task;
  listItem.classList.add('todo-item');

  const todoList = document.querySelector('.todo-list');
  todoList.appendChild(listItem);
}

This function ensures that new tasks are added to our list when we click the “Add” button.

Marking Tasks as Done

Another important feature of a to-do list is the ability to mark tasks as done. We can achieve this by toggling a “done” class on the list item. Here’s the code:

function markTaskAsDone(listItem) {
  listItem.classList.toggle('done');
}

document.addEventListener('click', (event) => {
  const listItem = event.target;
  if (listItem.classList.contains('todo-item')) {
    markTaskAsDone(listItem);
  }
});

With this code, we can easily mark and unmark tasks as done by clicking on them.

Editing Tasks

Sometimes, we need to edit our tasks. We’ll make this possible with a double-click event on a task. The task will become an input field, allowing us to edit its content. Here’s the code:

document.addEventListener('dblclick', (event) => {
  const listItem = event.target;
  if (listItem.classList.contains('todo-item')) {
    listItem.contentEditable = true;
    listItem.focus();
  }
});

This function enables you to edit your tasks easily.

Saving Edits

After editing a task, we need a way to save our changes. We’ll do this by checking for an “Enter” key press or blur event on the input field. Here’s the code:

document.addEventListener('keypress', (event) => {
  const listItem = event.target;
  if (listItem.contentEditable && event.key === 'Enter') {
    listItem.contentEditable = false;
  }
});

document.addEventListener('blur', (event) => {
  const listItem = event.target;
  if (listItem.contentEditable) {
    listItem.contentEditable = false;
  }
});

With this code, your edits are saved when you press “Enter” or click outside the input field.

The Take-away

In this step-by-step guide, we’ve built an efficient and user-friendly to-do list app using HTML, CSS, and pure JavaScript. It’s a great project for beginners to gain hands-on experience in web development.

You can further customize and enhance your to-do list by adding features like:

• Task deletion
• Due dates
• Categories
• Priority levels
• Filters
• Notifications

Feel free to experiment and make it your own. With this app, you can keep track of your tasks and stay organized in your daily life. Remember, simplicity can be powerful, and this to-do list is a testament to that.

Now, take what you’ve learned and build your own web applications. Happy coding!

Original Article

Want to learn more about modern JavaScript?

Sign up for my Modern JavaScript Course today and learn how to build powerful and interactive web applications using the latest JavaScript features. You’ll learn everything from the basics of JavaScript syntax to advanced topics like asynchronous programming and functional programming.

In this course, you’ll build a variety of real-world projects, including a to-do list app, a weather app, and a chat app. You’ll also learn how to use popular JavaScript libraries and frameworks like React and Node.js.

If you’re serious about learning modern JavaScript, then my course is the perfect place to start. Sign up today and start coding!

Enroll Now for — Mastering Modern JavaScript for Advanced Web Development