How to Build a To-Do List App Using JavaScript: Step-by-Step Guide

Javascript
28 Oct 2024 05:36 PM

Creating a to-do list app is an excellent project for beginners to practice JavaScript. Let’s walk through building one from scratch!

Features We Will Build:

  • Add new tasks
  • Mark tasks as complete
  • Remove tasks
  • Store tasks in local storage (so they persist after a refresh)

Step 1: Set Up the Project Structure

We’ll need three files:

  1. index.html – for the layout
  2. styles.css – to style the app
  3. script.js – to handle the logic

File Structure

/ToDoListApp  
│  
├── index.html  
├── styles.css  
└── script.js

Step 2: Write HTML (index.html)

<!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>
    <form id="task-form">
      <input type="text" id="task-input" placeholder="Add a new task..." required />
      <button type="submit">Add Task</button>
    </form>
    <ul id="task-list"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

Step 3: Style the App (styles.css)

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

.container {
  width: 400px;
  background-color: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 10px;
}

h1 {
  text-align: center;
  margin-bottom: 10px;
}

form {
  display: flex;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
}

button {
  padding: 10px;
  font-size: 16px;
  border: none;
  background-color: #28a745;
  color: white;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

button:hover {
  background-color: #218838;
}

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

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

li.completed {
  text-decoration: line-through;
  background-color: #d4edda;
}

button.delete {
  background-color: #dc3545;
  margin-left: 10px;
  border-radius: 5px;
}

button.delete:hover {
  background-color: #c82333;
}

Step 4: Add JavaScript Logic (script.js)

// Select elements
const taskForm = document.getElementById('task-form');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');

// Load tasks from local storage
document.addEventListener('DOMContentLoaded', loadTasks);

// Add a new task
taskForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const task = taskInput.value.trim();
  if (task) {
    addTask(task);
    saveTask(task);
    taskInput.value = '';
  }
});

// Add task to the UI
function addTask(task) {
  const li = document.createElement('li');
  li.innerHTML = `
    <span>${task}</span>
    <div>
      <button class="complete">✔️</button>
      <button class="delete">❌</button>
    </div>
  `;
  taskList.appendChild(li);

  // Complete task functionality
  li.querySelector('.complete').addEventListener('click', () => {
    li.classList.toggle('completed');
  });

  // Delete task functionality
  li.querySelector('.delete').addEventListener('click', () => {
    li.remove();
    removeTask(task);
  });
}

// Save task to local storage
function saveTask(task) {
  const tasks = getTasksFromStorage();
  tasks.push(task);
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Remove task from local storage
function removeTask(task) {
  const tasks = getTasksFromStorage();
  const filteredTasks = tasks.filter((t) => t !== task);
  localStorage.setItem('tasks', JSON.stringify(filteredTasks));
}

// Get tasks from local storage
function getTasksFromStorage() {
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  return tasks;
}

// Load tasks into UI
function loadTasks() {
  const tasks = getTasksFromStorage();
  tasks.forEach((task) => addTask(task));
}

Step 5: Test the App

  1. Open the index.html file in your browser.
  2. Add new tasks through the input field and click "Add Task."
  3. Mark tasks as complete by clicking the ✔️ button.
  4. Remove tasks using the ❌ button.
  5. Reload the page to see the tasks persist thanks to local storage.

 

Conclusion

You’ve just built a fully functional to-do list app using HTML, CSS, and JavaScript! You can now enhance it further with additional features such as task filtering or categorization.

This project demonstrates the essentials of DOM manipulation, event handling, and working with local storage in JavaScript—key concepts for front-end development.

Let me know if you'd like to explore enhancements or additional features for the app!

 

 

 

1
13