Making a todo application with HTML CSS and JS

In these days we were working on an interactive todo application.

Upto now we have implemented

We learnt how to use different HTML, CSS and JS knowledge to implement an application.
We lerant about the forEach loops again
We learnt about higher order functions on array like map, reduce, filter (we only used filter for this problem) we will talk more about these functions in the next class
We applied getElementById, addEventListener, innerHTML and form field value to add interactivity to our application
We learnt about CSS attribute based selectors element[attribute=value]{style to apply} and parallel selector to select same level element element1 + element2 which gets element2 which is located parallel to element1 visually this HTML is like -

<element1>
    ...
</element1>
<element2>
    ...
</element2>  <!-- This element is targetted -->

Day 5 bonus content (after most of you went to watch the football match) A way to center a div only horizontally with margin: auto
challenge for you is to take the code and implement a system so that you can fix the todo status resetting on deleting the todo
we learnt about the * selector to select anything in HTML
(BONUS) We talked a bit about psudoelements.
This code now contains the solution to storing the checkbox value

Resources

Difference ways to center a div - a blog post by me

Codes

Centering a div horizontally

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cemtering a div 3</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>This is to be centered</div>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    min-height: 100vh;
}

div{
    margin: 0 auto;
    width: fit-content;
}

Todo list application with HTML, CSS and JS

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple TODO</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>TODO App</h1>
        <form id="todo_form">
            <input type="text" id="todo_text" required>
            <input type="submit" value="Add Todo">
        </form>
        <div id="todo_list" class="todo_list">
            <!-- We wrote this part on day 4 and then commented on day 5 -->
            <!-- Because we tested the style on day 4 and implemented the adding of new todo in JS in day 5  -->
            <!-- <div class="todo_list_item">
                <input type="checkbox" id="todo_checkbox_1">
                <span>Do Homework</span>
            </div>  
            <div class="todo_list_item">
                <input type="checkbox" id="todo_checkbox_2">
                <span>Go to Gym</span>
            </div>   -->
        </div>
    </div>

    <script src="./app.js"></script>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

body{
    background-color: rgb(187, 202, 214);
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.container{
    background-color: white;
    padding: 20px;
    border-radius: 20px;
}

form{
    margin: 20px 0;
    width: 100%;
}

form input[type="submit"]{
    cursor: pointer;
}

form input{
    padding: 10px 20px;
    
}

h1{
    font-size: 2rem;
    text-align: center;
}

.todo_list{
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.todo_list_item{
    display: flex;
    align-items: center;
    gap: 10px;
}

.todo_list_item *{
    display: block;
}

.todo_list_item input[type='checkbox']{
    width: 1.3em;
    height: 1.3em;
}

.todo_list_item input[type='checkbox']:checked + span{
    text-decoration: line-through;
}

.todo_list_item button{
    margin-left: auto;
}

app.js

let form = document.getElementById("todo_form");

let todo_text = document.getElementById("todo_text");
let total_todos = 0

let todos = []

form.addEventListener("submit", function(e) {
    e.preventDefault();
    let text = todo_text.value;
    let new_todo = {
        id: total_todos,
        text: text,
        isDone: false
    }
    todos.push(new_todo);
    update();
    total_todos += 1;
    todo_text.value = "";
})

const todo_list_container = document.getElementById("todo_list")

function update() {
    todo_list_container.innerHTML = ""
    todos.forEach(todo => {
        //check the new addition to the checkbox
        todo_list_container.innerHTML += 
        `
        <div class="todo_list_item">
            <input type="checkbox" id="todo_checkbox_${todo.id}" ${todo.isDone && "checked"}>
            <span>${todo.text}</span>
            <button id="todo_delete_${todo.id}">Delete Todo</button>
        </div> 
        `
    })

    todos.forEach(todo => {
        document.getElementById(`todo_delete_${todo.id}`).addEventListener("click", () => {

            todos = todos.filter((e) => e.id !== todo.id);
            update();
            // .map()
            // .reduce()
            // .filter()
            // .sorted()
        })
        //This is how we keep the update of checkboxes
        document.getElementById(`todo_checkbox_${todo.id}`).addEventListener("click", () => {

            todos = todos.map((e) => {
                if(e.id == todo.id){
                    e.isDone = !e.isDone
                } 
                return e
            });
            update();
            // .map()
            // .reduce()
            // .filter()
            // .sorted()
        })
    })
}

/* arrow function explained */

//() => {function body }

/*
let update = () => {
    //body
}
*/