To-Do App Tutorial

Welcome to this tutorial! Here, we'll walk through the steps to build a simple To-Do app using HTML, CSS, and JavaScript. Follow along, and by the end, you'll have a fully functional app!

Step 1: HTML Structure

First, we'll create the basic HTML structure for our To-Do app. We'll need a form to add tasks and a list to display them.

        <div class="container">
            <h1>To-Do App</h1>
            <form id="todo-form">
                <input type="text" id="todo-input" placeholder="Enter a new task..." required>
                <button type="submit" id="todo-button">Add Task</button>
            </form>
            <ul id="todo-list"></ul>
        </div>
        

This code creates a form with an input field for adding new tasks and a button to submit them. Below the form, we have an empty list (<ul>) where our tasks will be displayed.

Step 2: CSS Styling

Next, let's add some basic CSS to style the app. We'll make it look clean and modern.

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 20px;
        }

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

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

        #todo-input {
            flex: 1;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }

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

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

        .todo-item {
            display: flex;
            justify-content: space-between;
            background: #f9f9f9;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        .todo-item button {
            background: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 4px;
        }

        .todo-item button:hover {
            background: #c82333;
        }
        

This CSS adds styling to the container, form, and task list to give the app a neat and user-friendly appearance.

Step 3: JavaScript Functionality

Finally, we'll add JavaScript to make the app functional. We'll handle task creation, display, and deletion.

        <script>
        // Wait for the DOM to be fully loaded
        document.addEventListener('DOMContentLoaded', () => {
            const todoForm = document.getElementById('todo-form');
            const todoInput = document.getElementById('todo-input');
            const todoList = document.getElementById('todo-list');

            // Add event listener to the form
            todoForm.addEventListener('submit', function(event) {
                event.preventDefault(); // Prevent the form from submitting
                const task = todoInput.value.trim(); // Get and trim the input value
                if (task) {
                    addTask(task); // Add the task if it's not empty
                    todoInput.value = ''; // Clear the input field
                }
            });

            // Function to add a task to the list
            function addTask(task) {
                const li = document.createElement('li');
                li.className = 'todo-item';
                li.innerHTML = `
                    ${task}
                    <button class="delete-button">Delete</button>
                `;
                todoList.appendChild(li);

                // Add delete functionality
                li.querySelector('.delete-button').addEventListener('click', () => {
                    todoList.removeChild(li);
                });
            }
        });
        </script>
        

This JavaScript code handles adding new tasks to the list and deleting them when the "Delete" button is clicked. The `addTask` function creates a new list item (<li>) with the task text and a delete button.

Conclusion

And that's it! You've successfully created a simple To-Do app using HTML, CSS, and JavaScript. Feel free to expand on this by adding features like task editing, task prioritization, or local storage to save tasks between sessions.