How to create a todo list in javascript

html Collage Projects Free Projects Javascript Project Rishabh saini July 26, 2023

How to create a todo list in javascript

Title: JavaScript Project for Advanced Day 1 – Building an Interactive To-Do List

Advanced To-Do List

By: Updategadh

Section 1: HTML Structure – Laying the Foundation

To begin our journey, we need to create a solid foundation for our to-do list. We’ll start by crafting the HTML structure to organize our tasks and input field.

HTML Code:

htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced To-Do List - Day 1</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Advanced To-Do List</h1>
        <div class="input-container">
            <input type="text" id="taskInput" placeholder="Add a new task...">
            <button id="addButton">Add</button>
        </div>
        <ul id="taskList">
            <!-- Tasks will be dynamically added here -->
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

How-to-build-an-AI-System- How to create a todo list in javascript

In this HTML structure, we’ve set up a container to hold our to-do list. Inside the container, we have an input field to add new tasks and a button to add them. The tasks will be displayed as an unordered list (<ul>).

Java-web-project-configuration How to create a todo list in javascript — How to create a todo list

Section 2: Styling with CSS – Designing the User Interface

A visually appealing user interface is crucial for a captivating to-do list. Let’s sprinkle our project with some CSS magic to make it truly enchanting.

CSS Code:

cssCopy code/* Code Style: CSS styles for our interactive to-do list */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 500px;
    margin: 20px auto;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 20px;
}

h1 {
    text-align: center;
    color: #007bff;
}

.input-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#taskInput {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#addButton {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#addButton:hover {
    background-color: #0056b3;
}

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

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

.deleteButton {
    background-color: #ff4545;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.deleteButton:hover {
    background-color: #d42c2c;
}

We’ve designed a clean and elegant interface for our to-do list in this CSS code. The styles highlight the input field, the “Add” button, and each task.

Section 3: JavaScript Magic – Adding Functionality

Now comes the exciting part: adding the JavaScript magic to make our to-do list interactive. We’ll use JavaScript to add tasks, mark them as completed, and delete them when necessary.

JavaScript Code:

javascriptCopy code// Code Style: JavaScript code for our interactive to-do list
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 === "") return;

    const taskItem = document.createElement("li");
    taskItem.innerHTML = `
        <span>${taskText}</span>
        <button class="deleteButton">Delete</button>
    `;

    taskList.appendChild(taskItem);
    taskInput.value = "";

    const deleteButton = taskItem.querySelector(".deleteButton");
    deleteButton.addEventListener("click", deleteTask);
}

function deleteTask(event) {
    const taskItem = event.target.parentElement;
    taskList.removeChild(taskItem);
}

In this JavaScript code, we’ve created functions to add and delete tasks. When the “Add” button is clicked, a new task is added to the list. When the “Delete” button for each task is clicked, the task is removed from the list.

javascript How to create a todo list in javascript — How to create a todo list

Section 4: Styling with CSS – Adding Interactivity

To further enhance the interactivity of our to-do list, we’ll add some CSS transitions to make it feel more responsive.

CSS Code:

cssCopy code/* Code Style: Additional CSS styles for interactive elements */
button {
    transition: background-color 0.3s ease;
}

button:active {
    transform: scale(0.95);
}

These CSS styles add a smooth transition effect to buttons when they are clicked, making the experience