Creating an interactive to-do list using JavaScript involves manipulating the Document Object Model (DOM) to update the HTML dynamically and handling user interactions. Below is a detailed guide to help you craft an interactive to-do list using HTML, CSS, and JavaScript.

1. Set Up Your HTML Structure:

    
    
    
    


    

        
To-Do List
        
        Add Task
        

    
    

2. Style Your To-Do List (styles.css):

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

.container {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

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

button {
    background-color: #4caf50;
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
}

3. Implement JavaScript Logic (script.js):

document.addEventListener('DOMContentLoaded', function () {
    // Check if there are tasks in local storage
    if (localStorage.getItem('tasks')) {
        // Load tasks from local storage
        document.getElementById('taskList').innerHTML = localStorage.getItem('tasks');
    }
});

function addTask() {
    // Get the task input value
    var taskInput = document.getElementById('taskInput');
    var taskText = taskInput.value;

    // Check if the input is not empty
    if (taskText.trim() !== '') {
        // Create a new list item
        var li = document.createElement('li');
        li.innerHTML = `
            ${taskText}
            Remove
        `;

        // Append the new task to the task list
        document.getElementById('taskList').appendChild(li);

        // Save tasks to local storage
        saveTasksToLocalStorage();

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

function removeTask(button) {
    // Get the parent list item and remove it
    var li = button.parentElement;
    li.remove();

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

function saveTasksToLocalStorage() {
    // Get all tasks and convert to HTML string
    var tasksHtml = document.getElementById('taskList').innerHTML;

    // Save tasks to local storage
    localStorage.setItem('tasks', tasksHtml);
}

4. Explanation:

• HTML Structure: The HTML file contains a form with an input field, a button to add tasks, and an unordered list to display tasks.
• CSS Styling: The CSS file provides basic styling for the to-do list, making it visually appealing.
• JavaScript Logic:
  • The ‘addTask’ function adds a new task to the list.
  • The ‘removeTask’ function removes a task when the corresponding “Remove” button is clicked.
  • The ‘saveTasksToLocalStorage’ function saves the current tasks to local storage.
• Local Storage: Tasks are stored in the browser’s local storage, allowing the to-do list to persist even if the user refreshes the page.

5. Usage:

• Open the HTML file in a browser.
• Add tasks using the input field and “Add Task” button.
• Remove tasks by clicking the “Remove” button next to each task.
• Tasks will persist even if you refresh the page, thanks to local storage.

This guide provides a solid foundation for creating an interactive to-do list, but you can always enhance and customize it further based on your specific requirements.