How To Create To-Do List App Using HTML CSS And JavaScript

In the fast-paced world of client work, efficiency and clarity are key. Recently, I had the opportunity to develop a sleek and efficient To-Do List application a mini project that showcased the power of simplicity and functionality. Built using HTML, CSS, and JavaScript, this app was designed to help users organize their tasks effortlessly. Let’s dive into the process and key features that made this project a success.

Project Overview

The goal was to create a user-friendly To-Do List application with a clean interface and seamless functionality. It needed to:

• Allow users to add tasks quickly
• Mark tasks as completed
• Delete tasks when necessary
• Ensure a smooth and responsive experience

Using HTML for structure, CSS for styling, and JavaScript for interactivity, I built a fully functional app that delivers on these requirements.

Adding Tasks

The app starts with a simple input box where users can type a task and click an “Add” button. Here’s the HTML structure for the input area:

<div class="task-input">
  <input type="text" id="task" placeholder="Add a new task" />
  <button id="add-task">Add</button>
</div>

Using JavaScript, I captured the user’s input and dynamically added it to the task list:

const addTaskButton = document.getElementById('add-task');
const taskInput = document.getElementById('task');
const taskList = document.getElementById('task-list');

addTaskButton.addEventListener('click', () => {
  const task = taskInput.value.trim();
  if (task) {
    const taskItem = document.createElement('li');
    taskItem.innerHTML = `${task} <button class="delete">Delete</button>`;
    taskList.appendChild(taskItem);
    taskInput.value = '';
  }
});

Marking Tasks as Completed

Each task can be clicked to toggle its completion state. CSS was used to style completed tasks:

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

The interactivity was achieved with an event listener:

taskList.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('completed');
  }
});

Deleting Tasks

Tasks also have a delete button, allowing users to remove them:

taskList.addEventListener('click', (e) => {
  if (e.target.classList.contains('delete')) {
    e.target.parentElement.remove();
  }
});

Design Considerations

Minimalistic Design

To maintain a sleek look, I used a minimalistic design with subtle colors and a clean layout. Here’s a snippet of the CSS:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.task-input {
  display: flex;
  gap: 10px;
}

task-list li {
  list-style: none;
  margin: 5px 0;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

Responsiveness

The app is fully responsive, adapting seamlessly to different screen sizes. Media queries ensure usability on both desktop and mobile devices.

Lessons Learned

1. Focus on User Experience: Simple features like task highlighting and a clear interface make a big difference.
2. The Power of Vanilla JavaScript: JavaScript provides all the tools necessary to build dynamic applications without additional libraries.
3. Testing Across Devices: Ensuring cross-device compatibility was crucial for a smooth user experience.

Final Thoughts

This mini project was a rewarding experience, blending design and development to create a practical tool for daily use. Whether you’re a beginner looking to practice web development skills or a professional building tools for clients, a To-Do List app is a fantastic project to showcase your capabilities.