Skip to content

Commit 18a1c0a

Browse files
Samuel-othienoSamuel-othieno
authored
Merge pull request #7 from Samuel-othieno/develop
tcyuiop
2 parents 70b2e2a + aeec16d commit 18a1c0a

File tree

3 files changed

+261
-127
lines changed

3 files changed

+261
-127
lines changed

‎dom.js‎

Lines changed: 71 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
const listEl = document.getElementById("list");
2-
const create_btn_el = document.getElementById("create");
2+
const create_btn_el = document.getElementById("create");
3+
const themeToggleBtn = document.getElementById("theme-toggle");
34

45
let todos = [];
56

67
create_btn_el.addEventListener("click", CreateNewTodo);
8+
themeToggleBtn.addEventListener("click", toggleTheme);
79

8-
function CreateNewTodo () {
10+
function CreateNewTodo() {
911
const item = {
1012
id: new Date().getTime(),
1113
text: "",
1214
complete: false
13-
}
15+
};
1416

1517
todos.unshift(item);
1618

@@ -26,7 +28,7 @@ function CreateNewTodo () {
2628

2729
function createTodoElement(item) {
2830
const itemEl = document.createElement('div');
29-
itemEl.classList.add("item")
31+
itemEl.classList.add("item");
3032

3133
const checkbox = document.createElement("input");
3234
checkbox.type = "checkbox";
@@ -46,20 +48,20 @@ function createTodoElement(item) {
4648

4749
const edit_btn_el = document.createElement("button");
4850
edit_btn_el.classList.add("FA-icons", "edit-btn");
49-
edit_btn_el.innerHTML = "<i class='fa fa-pen'></i>"
50-
51+
edit_btn_el.innerHTML = "<i class='fa fa-pen'></i>";
52+
5153
const remove_btn_el = document.createElement("button");
52-
edit_btn_el.classList.add("FA-icons", "remove-btn");
54+
remove_btn_el.classList.add("FA-icons", "remove-btn");
5355
remove_btn_el.innerHTML = "<i class='fa fa-circle-minus'></i>";
5456

5557
actionsEl.append(edit_btn_el);
5658
actionsEl.append(remove_btn_el);
57-
59+
5860
itemEl.append(checkbox);
5961
itemEl.append(inputEl);
6062
itemEl.append(actionsEl);
6163

62-
// MY EVENTS
64+
// Event Listeners
6365
checkbox.addEventListener("change", () => {
6466
item.complete = checkbox.checked;
6567

@@ -92,34 +94,79 @@ function createTodoElement(item) {
9294
itemEl.remove();
9395

9496
save();
95-
})
97+
});
9698

97-
return {itemEl, inputEl, edit_btn_el, remove_btn_el };
99+
return { itemEl, inputEl, edit_btn_el, remove_btn_el };
98100
}
99101

100-
function DisplayTodos(){
101-
load ();
102+
function DisplayTodos() {
103+
load();
102104

103-
for (let i = 0; i < todos.length; i++) {
104-
const item = todos[i];
105+
const fragment = document.createDocumentFragment();
105106

107+
todos.forEach(item => {
106108
const { itemEl } = createTodoElement(item);
109+
fragment.appendChild(itemEl);
110+
});
107111

108-
listEl.append(itemEl);
109-
}
112+
listEl.appendChild(fragment);
110113
}
111114

112115
DisplayTodos();
113116

114117
function save() {
115-
const save = JSON.stringify(todos);
116-
117-
localStorage.setItem("my_todos", save);
118+
try {
119+
const save = JSON.stringify(todos);
120+
localStorage.setItem("my_todos", save);
121+
} catch (error) {
122+
console.error("Error saving to localStorage", error);
123+
}
118124
}
119125

120126
function load() {
121-
const data = localStorage.getItem("my_todos");
122-
if (data) {
123-
todos = JSON.parse(data);
127+
try {
128+
const data = localStorage.getItem("my_todos");
129+
if (data) {
130+
todos = JSON.parse(data);
131+
}
132+
} catch (error) {
133+
console.error("Error loading from localStorage", error);
134+
}
135+
}
136+
137+
function toggleTheme() {
138+
document.body.classList.toggle("dark-theme");
139+
}
140+
141+
// CSS for responsiveness and themes
142+
const style = document.createElement('style');
143+
style.innerHTML = `
144+
.item {
145+
display: flex;
146+
justify-content: space-between;
147+
align-items: center;
148+
padding: 10px;
149+
border-bottom: 1px solid #ccc;
150+
}
151+
.actions {
152+
display: flex;
153+
gap: 10px;
154+
}
155+
.dark-theme {
156+
background-color: #333;
157+
color: #fff;
158+
}
159+
.dark-theme .item {
160+
border-bottom: 1px solid #555;
161+
}
162+
@media (max-width: 600px) {
163+
.item {
164+
flex-direction: column;
165+
align-items: flex-start;
166+
}
167+
.actions {
168+
margin-top: 10px;
169+
}
124170
}
125-
}
171+
`;
172+
document.head.appendChild(style);

‎index.html‎

Lines changed: 37 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,43 @@
11
<!DOCTYPE html>
22
<html lang="en">
33

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>todos</title>
8-
<link rel="stylesheet" href="./styles.css">
9-
<script src="https://kit.fontawesome.com/bff5048a88.js" crossorigin="anonymous"></script>
10-
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
11-
</head>
12-
13-
<body>
14-
<main class="container">
15-
16-
<div class="todos">
17-
<header>
18-
<h1>todos</h1>
19-
<span><i class="fa-solid fa-clipboard-list"></i></span>
20-
<h2>Add your first todo</h2>
21-
<p>What do you want to get done today?</p>
22-
<button id="create"><i class="fa-solid fa-plus"></i></button>
23-
</header>
24-
25-
<div class="todo-list" id="list">
26-
<div class="item">
27-
28-
<input type="checkbox" />
29-
<input type="text" value="e.g. go to the gym" disabled />
30-
31-
<div class="actions">
32-
33-
<button class="FA-icons edit-btn">
34-
<i class='fa fa-pen'></i>
35-
</button>
36-
37-
<button class="FA-icons remove-btn">
38-
<i class='fa fa-circle-minus'></i>
39-
</button>
40-
41-
</div>
42-
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Todo List</title>
8+
<link rel="stylesheet" href="./styles.css">
9+
<script src="https://kit.fontawesome.com/bff5048a88.js" crossorigin="anonymous"></script>
10+
<script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
11+
</head>
12+
13+
<body>
14+
<main class="container">
15+
<section class="todos">
16+
<header>
17+
<h1>Todos</h1>
18+
<span><i class="fa-solid fa-clipboard-list" aria-hidden="true"></i></span>
19+
<h2>Add your first todo</h2>
20+
<p>What do you want to get done today?</p>
21+
<button id="create" aria-label="Create new todo"><i class="fa-solid fa-plus" aria-hidden="true"></i></button>
22+
</header>
23+
24+
<div class="todo-list" id="list">
25+
<article class="item">
26+
<input type="checkbox" aria-label="Mark todo as complete" />
27+
<input type="text" value="e.g. go to the gym" disabled aria-label="Todo description" />
28+
<div class="actions">
29+
<button class="FA-icons edit-btn" aria-label="Edit todo">
30+
<i class='fa fa-pen' aria-hidden="true"></i>
31+
</button>
32+
<button class="FA-icons remove-btn" aria-label="Remove todo">
33+
<i class='fa fa-circle-minus' aria-hidden="true"></i>
34+
</button>
4335
</div>
44-
</div>
36+
</article>
4537
</div>
38+
</section>
39+
</main>
40+
<script src="./dom.js"></script>
41+
</body>
4642

47-
</main>
48-
<script src="./dom.js"></script>
49-
</body>
50-
51-
</html>
43+
</html>

0 commit comments

Comments
 (0)