TODO APP in Javascript

Techinfo

December 27, 2024

To clarify the purpose of each section of the HTML, JavaScript, and CSS code, I added comments.
In HTML, comments explain what input fields and buttons do, while in JavaScript, comments explain what each function and variable does.
It is easier to understand the styling choices made for the elements if CSS comments are included.
By doing so, anyone reading the code can quickly grasp its structure and functionality.
Enjoy your coding!

//todo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Link to the external CSS file for styling the Todo app -->
    <link rel="stylesheet" href="todo.css">
    <title>TODO</title>
</head>
<body>

    <!-- Main heading for the Todo application -->
    <h1 id="main-heading">Todo App</h1>
    <div class="grid-container">
        <!-- Input field for entering a new Todo item -->
        <input id="todo-input" type="text" placeholder="Enter TODO">
        <!-- Input field for selecting a due date for the Todo item -->
        <input id="todo-date" type="date">
        <!-- Button to add the Todo item, triggers the addTodo function -->
        <button class='btn-todo' onclick="addTodo();">Add</button>
    </div>
    <!-- Container to display the list of Todo items -->
    <div class="todo-container grid-container"></div>

    <!-- Link to the external JavaScript file for functionality -->
    <script src="todo.js"></script>
</body>
</html>

//todo.js

let todoList = []; // Initialize an empty array to hold Todo items
displayItems(); // Call the function to display existing Todo items

function addTodo(){
    // Select the input field for the Todo item
    let inputElement = document.querySelector("#todo-input");
    // Select the input field for the due date
    let dateElement = document.querySelector("#todo-date");
    // Get the value of the Todo item from the input field
    let todoItem = inputElement.value;
    // Get the value of the due date from the input field
    let todoDate = dateElement.value;
    // Add the new Todo item and its due date to the todoList array
    todoList.push({item: todoItem, dueDate : todoDate});
    // Clear the input field for the Todo item
    inputElement.value = '';
    // Clear the input field for the due date
    dateElement.value = '';
    // Call the function to display the updated list of Todo items
    displayItems();
}

function displayItems() {
    // Select the container where Todo items will be displayed
    let containerElement = document.querySelector(".todo-container");
    let newHtml = ''; // Initialize an empty string to build the HTML for Todo items
    
    // Loop through each Todo item in the todoList array
    for(let i = 0; i < todoList.length; i++){
        // Get the item and due date for the current Todo
        let item = todoList[i].item;
        let dueDate = todoList[i].dueDate;
        // Build the HTML for displaying the Todo item and its due date
        newHtml += `
        <span>${item}</span>
        <span>${dueDate}</span>
        <!-- Button to delete the Todo item, triggers the delete function -->
        <button class='btn-delete' onclick="todoList.splice(${i}, 1); displayItems();">Delete</button>
        `;
    }
    // Update the inner HTML of the container to display the new list of Todo items
    containerElement.innerHTML = newHtml;
}

/* todo.css */

body{
    /* Set the font for the entire body */
    font-family: 'Courier New', Courier, monospace;
}

#main-heading {
    /* Center the main heading */
    text-align: center;
}

.grid-container{
    /* Define a grid layout for the container */
    display: grid;
    grid-template-columns: 200px 150px 100px; /* Set the column sizes */
    column-gap: 20px; /* Space between columns */
    row-gap: 10px; /* Space between rows */
    margin-top: 10px; /* Space above the grid */
    align-items: center; /* Center items vertically */
}

#todo-input, #todo-date {
    /* Style for the input fields */
    font-size: 15px; /* Set font size */
    padding: 10px 5px; /* Add padding */
}

.btn-delete {
    /* Style for the delete button */
    background-color: red; /* Set background color */
    color: aliceblue; /* Set text color */
    border: none; /* Remove border */
    border-radius: 10px; /* Round the corners */
    padding: 15px 0px; /* Add padding */
    cursor: pointer; /* Change cursor to pointer on hover */
}

.btn-todo {
    /* Style for the add button */
    background-color: green; /* Set background color */
    color: aliceblue; /* Set text color */
    border: none; /* Remove border */
    border-radius: 10px; /* Round the corners */
    padding: 15px 0px; /* Add padding */
    cursor: pointer; /* Change cursor to pointer on hover */
}