ProductPromotion
Logo

Java.Script

made by https://0x3d.site

Building a To-Do List App with Vanilla JavaScript
Creating a to-do list app is a classic project for learning JavaScript. It involves many fundamental concepts and provides a tangible outcome. In this guide, we’ll walk through the process of building a simple to-do list app using only vanilla JavaScript. This project will help you understand how to manipulate the DOM, manage application state, and persist data using local storage.
2024-09-06

Building a To-Do List App with Vanilla JavaScript

Introduction to the Project and Tools Needed

Project Overview

In this project, we’ll build a to-do list application that allows users to:

  • Add new tasks
  • Edit existing tasks
  • Delete tasks
  • Mark tasks as completed
  • Persist tasks using local storage so that the data is saved across page reloads

Tools and Technologies

  • HTML: For structuring the content.
  • CSS: For styling the application.
  • JavaScript: For adding interactivity and functionality.
  • Local Storage: To save tasks across page reloads.

No external libraries or frameworks are needed for this project. We'll be using plain JavaScript to handle all functionality.

Setting Up the Project Structure

1. Create the Project Folder

Start by creating a new folder for your project. Inside this folder, create the following files:

  • index.html
  • styles.css
  • script.js

2. Set Up the HTML

Open index.html and set up the basic structure of your web page:

<!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>

3. Set Up the CSS

Open styles.css and add some basic styling to make your app look neat:

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

.container {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 300px;
}

h1 {
    margin-top: 0;
}

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

#task-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px;
    border: none;
    background-color: #28a745;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

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

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

li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

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

button.delete {
    background-color: #dc3545;
}

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

button.edit {
    background-color: #007bff;
}

button.edit:hover {
    background-color: #0069d9;
}

Creating Functions for Adding, Editing, and Deleting Tasks

1. Set Up the JavaScript File

Open script.js and start by selecting the necessary elements:

// Select DOM 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);

2. Add a Task

Create a function to handle adding tasks:

// Function to add a task
function addTask(e) {
    e.preventDefault();

    // Create task item
    const taskText = taskInput.value;
    if (!taskText) return;

    const li = document.createElement('li');
    li.classList.add('task-item');
    li.innerHTML = `
        <span>${taskText}</span>
        <div>
            <button class="edit">Edit</button>
            <button class="delete">Delete</button>
        </div>
    `;

    // Add event listeners to the buttons
    li.querySelector('.edit').addEventListener('click', editTask);
    li.querySelector('.delete').addEventListener('click', deleteTask);

    // Append to the task list
    taskList.appendChild(li);

    // Save to local storage
    saveTaskToLocalStorage(taskText);

    // Clear input field
    taskInput.value = '';
}

// Add task on form submit
taskForm.addEventListener('submit', addTask);

3. Edit a Task

Create a function to handle editing tasks:

// Function to edit a task
function editTask(e) {
    const taskItem = e.target.closest('li');
    const taskText = taskItem.querySelector('span').textContent;
    taskInput.value = taskText;

    // Remove the task from the list
    taskItem.remove();

    // Remove from local storage
    removeTaskFromLocalStorage(taskText);
}

4. Delete a Task

Create a function to handle deleting tasks:

// Function to delete a task
function deleteTask(e) {
    const taskItem = e.target.closest('li');
    const taskText = taskItem.querySelector('span').textContent;

    // Remove task from the list
    taskItem.remove();

    // Remove from local storage
    removeTaskFromLocalStorage(taskText);
}

5. Save and Load Tasks

Implement functions to save tasks to and load tasks from local storage:

// Function to save a task to local storage
function saveTaskToLocalStorage(taskText) {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.push(taskText);
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Function to remove a task from local storage
function removeTaskFromLocalStorage(taskText) {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks = tasks.filter(task => task !== taskText);
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Function to load tasks from local storage
function loadTasks() {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(taskText => {
        const li = document.createElement('li');
        li.classList.add('task-item');
        li.innerHTML = `
            <span>${taskText}</span>
            <div>
                <button class="edit">Edit</button>
                <button class="delete">Delete</button>
            </div>
        `;
        li.querySelector('.edit').addEventListener('click', editTask);
        li.querySelector('.delete').addEventListener('click', deleteTask);
        taskList.appendChild(li);
    });
}

Styling the App and Adding Features

1. Improving Styling

You can enhance the styling to make the app look more polished. Here’s how you might adjust the CSS to include hover effects, transitions, or additional layout improvements.

2. Adding Features

  • Mark Tasks as Completed: Add a feature to toggle the completion state of tasks. Update the addTask function to include a checkbox, and handle the checked state in the editTask and deleteTask functions.

  • Drag-and-Drop Reordering: Implement drag-and-drop functionality to reorder tasks. This involves more advanced JavaScript techniques and additional libraries like SortableJS, but you can start by implementing basic JavaScript drag-and-drop.

Conclusion with Further Improvement Ideas

Congratulations! You’ve built a basic to-do list app with vanilla JavaScript. Here are a few ideas for further improving the app:

  • User Authentication: Add user authentication to allow multiple users to manage their tasks.
  • Advanced Features: Implement recurring tasks, due dates, or priority levels.
  • Mobile Responsiveness: Ensure that the app is fully responsive and works well on mobile devices.
  • Framework Integration: Consider rewriting the app using a JavaScript framework like React or Vue to learn about modern development practices.

This project provides a solid foundation for understanding core JavaScript concepts and building interactive web applications. Experiment with additional features and enhancements to deepen your knowledge and skills. Happy coding!

Articles
to learn more about the javascript concepts.

More Resources
to gain others perspective for more creation.

mail [email protected] to add your project or resources here 🔥.

FAQ's
to learn more about Javascript.

mail [email protected] to add more queries here 🔍.

More Sites
to check out once you're finished browsing here.

0x3d
https://www.0x3d.site/
0x3d is designed for aggregating information.
NodeJS
https://nodejs.0x3d.site/
NodeJS Online Directory
Cross Platform
https://cross-platform.0x3d.site/
Cross Platform Online Directory
Open Source
https://open-source.0x3d.site/
Open Source Online Directory
Analytics
https://analytics.0x3d.site/
Analytics Online Directory
JavaScript
https://javascript.0x3d.site/
JavaScript Online Directory
GoLang
https://golang.0x3d.site/
GoLang Online Directory
Python
https://python.0x3d.site/
Python Online Directory
Swift
https://swift.0x3d.site/
Swift Online Directory
Rust
https://rust.0x3d.site/
Rust Online Directory
Scala
https://scala.0x3d.site/
Scala Online Directory
Ruby
https://ruby.0x3d.site/
Ruby Online Directory
Clojure
https://clojure.0x3d.site/
Clojure Online Directory
Elixir
https://elixir.0x3d.site/
Elixir Online Directory
Elm
https://elm.0x3d.site/
Elm Online Directory
Lua
https://lua.0x3d.site/
Lua Online Directory
C Programming
https://c-programming.0x3d.site/
C Programming Online Directory
C++ Programming
https://cpp-programming.0x3d.site/
C++ Programming Online Directory
R Programming
https://r-programming.0x3d.site/
R Programming Online Directory
Perl
https://perl.0x3d.site/
Perl Online Directory
Java
https://java.0x3d.site/
Java Online Directory
Kotlin
https://kotlin.0x3d.site/
Kotlin Online Directory
PHP
https://php.0x3d.site/
PHP Online Directory
React JS
https://react.0x3d.site/
React JS Online Directory
Angular
https://angular.0x3d.site/
Angular JS Online Directory