How to Build a To-Do List App with JavaScript?

ElevatEd
Coding
August 24, 2024

Building a To-Do List App with JavaScript is a practical and fun way to learn programming. Imagine having a digital checklist where you can add tasks, mark them as complete, and even delete them when done. This app mimics jotting down tasks on a paper list but with added digital flexibility. For instance, you can organize tasks by priority, set reminders, or categorize them by project. Learning to create this app not only teaches JavaScript fundamentals but also equips you with skills applicable to organizing daily tasks, managing projects, or even collaborating with others efficiently. Let's dive into creating your own To-Do List App step-by-step using JavaScript!

Begin Your Child's Coding Adventure Now!

What is a To-Do List App?

Building a To-Do List App is like having a digital planner where you can list tasks you need to complete. It's handy for organizing daily chores, homework assignments, or work tasks efficiently. Imagine using it to jot down groceries you need to buy, upcoming project deadlines, or even personal goals like workouts or reading lists. These apps let you add tasks, mark them as done, and often prioritize or categorize them for better organization. They're like a smart assistant that helps you stay on track with your responsibilities and goals, making life more organized and less stressful. Creating one with JavaScript can teach you valuable coding skills while improving your productivity!

Building a To-Do List App with JavaScript

HTML: Provides the structure for the app with an input field to add tasks, a button to add tasks, and a list (ul) to display tasks.

CSS: Styles the app for a clean and user-friendly interface, including input fields, buttons, and task list items.

JavaScript: Handles the logic for adding tasks (addTask function) and deleting tasks (deleteTask function). Tasks are added dynamically to the list, and each task has a delete button to remove it from the list.

Code for To-Do List App

1. HTML

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</body>

</html>

2. CSS

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

.container {

width: 80%;

max-width: 600px;

background-color: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

h1 {

text-align: center;

}

input[type="text"] {

width: 70%;

padding: 10px;

margin-right: 10px;

border: 1px solid #ccc;

border-radius: 4px;

}

button {

padding: 10px 20px;

border: none;

background-color: #4caf50;

color: white;

border-radius: 4px;

cursor: pointer;

}

button:hover {

background-color: #45a049;

}

ul {

list-style-type: none;

padding: 0;

}

li {

display: flex;

justify-content: space-between;

align-items: center;

padding: 10px;

margin-bottom: 8px;

border-bottom: 1px solid #ccc;

}

li span {

flex: 1;

}

.delete-btn {

background-color: #f44336;

color: white;

padding: 6px 12px;

border: none;

border-radius: 4px;

cursor: pointer;

}

.delete-btn:hover {

background-color: #da190b;

}

3. Javascript

// Selecting elements from the DOM

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

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

// Function to add a new task

function addTask() {

const taskText = taskInput.value.trim();

if (taskText === '') return; // Don't add empty tasks

// Creating a new list item

const li = document.createElement('li');

li.innerHTML = `

<span>${taskText}</span>

<button class="delete-btn" onclick="deleteTask(this)">Delete</button>

// Appending the new list item to the task list

taskList.appendChild(li);

// Clearing the input field after adding the task

taskInput.value = '';

}

// Function to delete a task

function deleteTask(btn) {

const li = btn.parentElement;

li.remove();

}

This simple example demonstrates the core functionality of a To-Do List App using JavaScript. You can further enhance it by adding features such as editing tasks, marking tasks as completed or storing tasks in local storage for persistence across sessions.

Similar Projects in Javascript

Weather App: Build an app that fetches weather data from an API based on user input (e.g., city name) and displays current weather conditions.
Expense Tracker: Develop an application that allows users to add and track their expenses. Include features like categorizing expenses and displaying summary reports.
Quiz App: Create a quiz application where users can answer multiple-choice questions. Display the score at the end and provide feedback on correct and incorrect answers.
Note-taking App: Build an app where users can write and save notes. Include features for editing, deleting, and categorizing notes.
Task Manager: Develop a task management application where users can add, edit, and delete tasks. Include features such as task prioritization and due dates.

Each project will help you practice JavaScript fundamentals such as DOM manipulation, event handling, and working with APIs, depending on the complexity and additional features you choose to implement.

Learn to build a To-Do List App with JavaScript by creating a user interface to add tasks, mark them as completed, and remove them dynamically. This project teaches fundamental skills in DOM manipulation and event handling in JavaScript.