Project: To-Do List

by

Project: To-Do List

Step 1: HTML Structure

Create an HTML file named index.html and set up the basic structure.

<!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</title>

    <link rel=”stylesheet” href=”styles.css”>

</head>

<body>

    <div class=”container”>

        <h1>To-Do List</h1>

        <input type=”text” id=”taskInput” placeholder=”Enter a task”>

        <button id=”addButton”>Add Task</button>

        <ul id=”taskList”></ul>

    </div>

    <script src=”script.js”></script>

</body>

</html>

Step 2: CSS Styling

Create a CSS file named styles.css for basic styling.

body {

    font-family: Arial, sans-serif;

    background-color: #f0f0f0;

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

}

.container {

    background-color: #fff;

    padding: 20px;

    border-radius: 5px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    width: 300px;

}

h1 {

    font-size: 24px;

    margin-bottom: 10px;

}

input {

    width: 100%;

    padding: 8px;

    margin-top: 5px;

    border: 1px solid #ccc;

    border-radius: 3px;

}

button {

    display: block;

    margin: 10px auto;

    padding: 8px 16px;

    background-color: #007bff;

    color: #fff;

    border: none;

    border-radius: 3px;

    cursor: pointer;

}

ul {

    list-style-type: none;

    padding: 0;

}

li {

    padding: 8px;

    border-bottom: 1px solid #ccc;

}

Step 3: JavaScript Logic

Create a JavaScript file named script.js for the application logic.

const taskInput = document.getElementById(“taskInput”);

const addButton = document.getElementById(“addButton”);

const taskList = document.getElementById(“taskList”);

addButton.addEventListener(“click”, addTask);

function addTask() {

    const taskText = taskInput.value.trim();

    if (taskText !== “”) {

        const taskItem = document.createElement(“li”);

        taskItem.textContent = taskText;

        taskList.appendChild(taskItem);

        taskInput.value = “”;

    }

}

Step 4: Testing

Open the index.html file in a web browser. You should see a To-Do List with an input field, a “Add Task” button, and a list of tasks.

Congratulations! You’ve successfully created a simple To-Do List using HTML, CSS, and JavaScript. This project demonstrates how you can interact with user input, create and manipulate DOM elements, and create a dynamic list of tasks.

Here’s the detailed breakdown of the JavaScript code:

  • We start by getting references to the HTML elements we’ll be interacting with: taskInput, addButton, and taskList.
  • We attach an event listener to the “Add Task” button (addButton). This listener is set to call the addTask function when the button is clicked.
  • The addTask function is defined. This function:
    • Retrieves the value entered in the taskInput field and trims any leading or trailing whitespace.
  • We check if the trimmed taskText is not an empty string.
    • If the text is not empty, we create a new <li> element using document.createElement(“li”).
    • We set the text content of the created <li> element to the taskText.
    • We append the created <li> element to the taskList.
    • We reset the value of the taskInput to an empty string to clear the input field.

By following these steps, the code creates a simple To-Do List that allows you to add tasks dynamically. This project demonstrates how JavaScript can be used to create and manipulate DOM elements based on user interaction.