Project: To-Do List

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.

WP Twitter Auto Publish Powered By : XYZScripts.com