Building a Simple To-Do List App with JavaScript and HTML/CSS

on


 Creating a to-do list app is a fantastic way to practice your web development skills. This project will help you understand the basics of JavaScript, HTML, and CSS by building a functional and interactive application. In this guide, we’ll walk through the steps to create a simple to-do list app from scratch.

1. Setting Up the HTML Structure

Start by creating a basic HTML file that will serve as the structure for your to-do list app. This file will include the input field for adding new tasks, a button to submit them, and a list to display the tasks.

HTML:

html
<!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>My To-Do List</h1>
        <input type="text" id="taskInput" placeholder="Enter a new task...">
        <button id="addTaskBtn">Add Task</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

This structure includes a text input for entering tasks, a button for adding them, and an unordered list (<ul>) where the tasks will be displayed.

2. Styling with CSS

Next, let's add some basic styling to make the to-do list look nice and organized. Create a CSS file named styles.css and style the app components.

CSS (styles.css):

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

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

h1 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
}

input[type="text"] {
    padding: 10px;
    width: 80%;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

button {
    padding: 10px;
    width: 100%;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
}

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

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

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

li.done {
    text-decoration: line-through;
    color: #aaa;
}

This CSS file styles the container, input field, button, and list items. It also includes a .done class that will be used to strike through completed tasks.

3. Adding Functionality with JavaScript

Now that we have the structure and styling in place, it’s time to add functionality with JavaScript. Create a script.js file and write the code that will handle adding tasks, marking them as complete, and removing them.

JavaScript (script.js):

javascript
// Select DOM elements
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

// Add event listener to the button
addTaskBtn.addEventListener('click', addTask);

// Function to add a new task
function addTask() {
    const taskText = taskInput.value.trim();

    if (taskText !== '') {
        const li = document.createElement('li');

        // Create task text
        const taskSpan = document.createElement('span');
        taskSpan.textContent = taskText;

        // Create delete button
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = 'Delete';
        deleteBtn.classList.add('deleteBtn');

        // Add event listener for marking task as done
        taskSpan.addEventListener('click', () => {
            taskSpan.classList.toggle('done');
        });

        // Add event listener for deleting the task
        deleteBtn.addEventListener('click', () => {
            taskList.removeChild(li);
        });

        li.appendChild(taskSpan);
        li.appendChild(deleteBtn);
        taskList.appendChild(li);

        taskInput.value = '';
    } else {
        alert('Please enter a task');
    }
}

Explanation:

  • DOM Elements: We first select the necessary DOM elements: the task input, add task button, and task list.
  • Event Listener: We add an event listener to the "Add Task" button that triggers the addTask function when clicked.
  • Adding Tasks: The addTask function creates a new list item (<li>) for each task. It checks if the input is not empty, then creates a text span and a delete button.
  • Marking Tasks as Done: Clicking on the task text toggles the .done class, which strikes through the task.
  • Deleting Tasks: Clicking the delete button removes the task from the list.

4. Testing the App

With the HTML, CSS, and JavaScript files in place, open your index.html file in a web browser. You should see a simple to-do list interface where you can add tasks, mark them as completed by clicking on them, and remove them by clicking the delete button.

5. Enhancements and Further Ideas

You’ve built a basic to-do list app, but there are many ways to enhance and expand it:

  • Local Storage: Save tasks to the browser’s local storage so they persist even after the page is refreshed.
  • Edit Tasks: Allow users to edit tasks after they’ve been added.
  • Categories or Tags: Add the ability to categorize tasks or add tags to filter them.
  • Due Dates: Let users assign due dates to tasks and sort them accordingly.

Building a simple to-do list app is a great project to practice your web development skills. By combining HTML, CSS, and JavaScript, you’ve created a functional app that demonstrates how these technologies work together to create interactive web applications. Keep experimenting and adding features to make the app your own!

Comments

Post a Comment