My-JavaScript-Projects/todoList.html at main · Hamda-ibrahim/My-JavaScript-Projects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
    <head>
        <style>
            body{
                font-family: Arial;
            }

            .todo-grid,
            .todo-input-grid{
                display:grid;
                grid-template-columns:  200px 150px 100px;
                column-gap: 10px;
                row-gap: 10px;
                align-items: center;
            }

            .todo-input-grid{
                align-items: stretch;
            }

            .name-input,
            .due-date-input{
                font-size: 15px;
                padding:6px;
            }

            .addBtn{
                padding:6px;
                font-size: 15px;
                background-color: green;
                color: white;
                border:none;
                cursor: pointer
            }

            .delBtn{
                background-color: darkred;
                color:white;
                border:none;
                padding-top:10px;
                padding-bottom:10px;
                cursor:pointer;
                font-size:15px;
            }
        </style>
    </head>
    <body>

        <p>Todo List</p>
        <div class="todo-input-grid">
            <input type="text" placeholder="Task Name" class="js-input name-input">
            <input type="date" class="js-dueDate-input due-date-input">
            <button class="addBtn" onclick="addTodoList();
            ">Add</button>
            <p class="taskCounter"></p>
        </div>


        <div class="js-todoList-res todo-grid"></div>


        <script>

            const savedTodo = localStorage.getItem('todo');
            let todoList = savedTodo ? JSON.parse(savedTodo) : [];
            // let todoList = [{
            //     name: "make dinner",
            //     dueDate: "05-6-2026",
            // }, {
            //     name: "wash Dishes",
            //     dueDate: "07-6-2026",
            // }];


            renderTodoList();

            function renderTodoList(){
                let todoListHTML = "";

                for (let i = 0; i < todoList.length; i++){
                    let todoObject = todoList[i];


                    //Destructuring
                   // const name = todoObject.name;
                    //const dueDate = todoObject.dueDate;

                    const {name, dueDate} = todoObject; //this does the same as the two above lines

                    let html = `
                    <div> ${name} </div>
                    <div>${dueDate} </div>
                    <button onclick="
                    todoList.splice(${i},1);
                    renderTodoList();
                    " class="delBtn">Delete</button>`;

                    todoListHTML += html;
                }


                console.log(todoListHTML);
                document.querySelector('.js-todoList-res').innerHTML = todoListHTML;

                document.querySelector('.taskCounter').innerHTML = `Tasks: ${todoList.length}`

            }

            function addTodoList(){
                let inputElement = document.querySelector('.js-input');

                let todoListValue = inputElement.value;

                let dateInputElement = document.querySelector('.js-dueDate-input');

                let dueDate = dateInputElement.value;

                if(!todoListValue || !dueDate){
                    alert("Please fill in all fields.");
                    return;
                }

                todoList.push({
                    name:        todoListValue,
                    dueDate: dueDate
            });

                inputElement.value = "";

                localStorage.setItem('todo', JSON.stringify(todoList));

                // localStorage.setItem

                renderTodoList();

                console.log(todoList);
            }
        </script>
    </body>
</html>