Are you looking to build a simple and useful application to help you manage your tasks? A to-do list app is a perfect project to get started with JavaScript! In this guide, we will walk you through the process of creating a to-do app in JavaScript from scratch, using HTML, CSS, and JavaScript. Whether you're a beginner or someone looking to refresh your skills, this tutorial will make learning fun and practical.

Why Build a Todo App?

A to-do list app is a common project for beginners who want to learn web development. It offers a practical way to practice and apply various programming concepts like DOM manipulation, event handling, and local storage. Moreover, it's a great tool to keep track of your personal tasks and boost your productivity. So, let's dive into the basics and start building!

Setting Up the Project

Before we begin writing code, let’s set up the basic structure of our project. We need three files to get started:

• index.html – This will contain the structure of the app.
• styles.css – This will define the styling and layout of our to-do app.
• app.js – This is where we will write our JavaScript code to make the app interactive.

Create a folder for your project and inside that folder, create the three files. Once that’s done, open index.html in your code editor, and let’s get started!

Step 1: Writing the HTML Structure

We will begin by creating the basic structure of the app using HTML. Our to-do app will have an input field for typing tasks, a button to add tasks, and a list to display the added tasks. Here’s the HTML code to set up the structure:

    
    
    
    


    

        
My Todo List
        
        Add Task
        

    
    

In the code above, we’ve set up a simple layout for the to-do app. There’s an input field where users can type new tasks, a button to add the tasks to the list, and an empty <ul> element where the tasks will appear.

Step 2: Styling the App with CSS

Now that we have the basic structure, let’s make it look nice with some CSS. In your styles.css file, add the following code:

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

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

h1 {
    text-align: center;
}

#todo-input {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#add-btn {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#add-btn:hover {
    background-color: #45a049;
}

#todo-list {
    list-style-type: none;
    padding: 0;
}

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

#todo-list li button {
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#todo-list li button:hover {
    background-color: #c0392b;
}

This CSS will give our app a clean and modern look. We’ve added some padding, borders, and background colors to the elements to make them look more appealing. The to-do list items will also have a delete button to remove tasks.

Step 3: Writing the JavaScript Code

Now comes the fun part – making the app interactive! We will write JavaScript to allow users to add tasks to the list, delete them, and store the tasks in local storage so they remain even after the page is refreshed.

const addButton = document.getElementById('add-btn');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');

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

// Add a new task
addButton.addEventListener('click', addTask);

// Function to add task
function addTask() {
    const taskText = todoInput.value;
    if (taskText === '') return;

    // Create a new list item
    const li = document.createElement('li');
    li.innerHTML = `${taskText} Delete`;

    // Append the list item to the todo list
    todoList.appendChild(li);

    // Clear the input field
    todoInput.value = '';

    // Save tasks to local storage
    saveTasks();
}

// Function to delete task
todoList.addEventListener('click', function (e) {
    if (e.target.classList.contains('delete-btn')) {
        e.target.parentElement.remove();
        saveTasks();
    }
});

// Save tasks to local storage
function saveTasks() {
    const tasks = [];
    const taskItems = todoList.getElementsByTagName('li');
    for (let item of taskItems) {
        tasks.push(item.firstChild.textContent.trim());
    }
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Load saved tasks from local storage
function loadTasks() {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(task => {
        const li = document.createElement('li');
        li.innerHTML = `${task} Delete`;
        todoList.appendChild(li);
    });
}

In this code:

• We add event listeners to handle user actions like clicking the "Add Task" button or deleting a task.
• When a task is added, it gets appended to the list and stored in local storage.
• The delete button allows users to remove tasks, and the changes are saved to local storage.
• When the page is loaded, the saved tasks are retrieved from local storage and displayed in the list.

Step 4: Testing the App

Now that we’ve set up everything, it’s time to test the app. Open your index.html file in your browser, and you should see your to-do list app. Try adding some tasks, deleting them, and refreshing the page to see if the tasks persist (they should!).

Conclusion

Congratulations! You’ve just built a functional to-do list app using JavaScript. With this project, you’ve learned how to work with HTML, CSS, and JavaScript to create an interactive web application. The skills you gained here can be applied to more complex projects, and the possibilities are endless. Keep experimenting, and don’t forget to have fun with it!