GreatStack Watch on YouTube

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

3 min read 3 months ago
Published on Oct 03, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you will learn how to create a simple To-Do List app using HTML, CSS, and JavaScript. This app allows users to add tasks, mark them as completed, and delete them. Additionally, it will utilize Local Storage to save tasks even after the browser is closed. This project is perfect for beginners looking to improve their web development skills.

Step 1: Set Up Your Project

  1. Create a Project Folder

    • Make a new folder on your computer and name it ToDoListApp.

  2. Create HTML, CSS, and JavaScript Files

    • Inside the ToDoListApp folder, create three files:
      • index.html
      • styles.css
      • script.js

  3. Add Basic HTML Structure

    • Open index.html and add the following code:
    <!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>
        <input type="text" id="taskInput" placeholder="Add a new task">
        <button id="addTaskBtn">Add</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: Style Your App with CSS

  1. Open styles.css
    • Add the following styles to make your app visually appealing:
    body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}
.container {
    max-width: 500px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
    text-align: center;
}
input {
    width: calc(100% - 100px);
    padding: 10px;
}
button {
    padding: 10px;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}
.completed {
    text-decoration: line-through;
    color: gray;
}

Step 3: Implement JavaScript Functionality

  1. Open script.js
    • Start by adding the following code to manage tasks:
    const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

function renderTasks() {
    taskList.innerHTML = '';
    tasks.forEach((task, index) => {
        const li = document.createElement('li');
        li.textContent = task.text;
        li.className = task.completed ? 'completed' : '';
        
        li.addEventListener('click', () => {
            task.completed = !task.completed;
            localStorage.setItem('tasks', JSON.stringify(tasks));
            renderTasks();
        });

        const closeBtn = document.createElement('span');
        closeBtn.textContent = '❌';
        closeBtn.addEventListener('click', (e) => {
            e.stopPropagation();
            tasks.splice(index, 1);
            localStorage.setItem('tasks', JSON.stringify(tasks));
            renderTasks();
        });
        
        li.appendChild(closeBtn);
        taskList.appendChild(li);
    });
}

addTaskBtn.addEventListener('click', () => {
    if (taskInput.value) {
        tasks.push({ text: taskInput.value, completed: false });
        taskInput.value = '';
        localStorage.setItem('tasks', JSON.stringify(tasks));
        renderTasks();
    }
});

renderTasks();

Conclusion

You have now created a functional To-Do List app using HTML, CSS, and JavaScript. The app allows adding, marking, and deleting tasks, all while using Local Storage to keep the list persistent.

Key Takeaways

  • Set up your project with HTML, CSS, and JavaScript files.
  • Use Local Storage to maintain data across sessions.
  • Style your app to improve user experience.

Next Steps

  • Experiment with additional features, such as task editing or categorizing tasks.
  • Explore more JavaScript projects to further enhance your skills.

Table of Contents

Recent