Skip to content

Commit 9f0ecfa

Browse files
TacticalReaderTacticalReader
authored
Update script.js
1 parent 8e36e5d commit 9f0ecfa

File tree

1 file changed

+308
-0
lines changed

1 file changed

+308
-0
lines changed

‎script.js‎

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,309 @@
11
img alt="${category.title}" src="${category.img}"
2+
3+
let categories = [
4+
{
5+
title: "Personal",
6+
img: "boy.png",
7+
},
8+
{
9+
title: "Work",
10+
img: "briefcase.png",
11+
},
12+
{
13+
title: "Shopping",
14+
img: "shopping.png",
15+
},
16+
{
17+
title: "Coding",
18+
img: "web-design.png",
19+
},
20+
{
21+
title: "Health",
22+
img: "healthcare.png",
23+
},
24+
{
25+
title: "Fitness",
26+
img: "dumbbell.png",
27+
},
28+
{
29+
title: "Education",
30+
img: "education.png",
31+
},
32+
{
33+
title: "Finance",
34+
img: "saving.png",
35+
},
36+
];
37+
let tasks = [
38+
{
39+
id: 1,
40+
task: "Go to market",
41+
category: "Shopping",
42+
completed: false,
43+
},
44+
{
45+
id: 2,
46+
task: "Read a chapter of a book",
47+
category: "Personal",
48+
completed: false,
49+
},
50+
{
51+
id: 3,
52+
task: "Prepare presentation for meeting",
53+
category: "Work",
54+
completed: false,
55+
},
56+
{
57+
id: 4,
58+
task: "Complete coding challenge",
59+
category: "Coding",
60+
completed: false,
61+
},
62+
{
63+
id: 5,
64+
task: "Take a 30-minute walk",
65+
category: "Health",
66+
completed: false,
67+
},
68+
{
69+
id: 6,
70+
task: "Do a 20-minute HIIT workout",
71+
category: "Fitness",
72+
completed: false,
73+
},
74+
{
75+
id: 7,
76+
task: "Watch an educational video online",
77+
category: "Education",
78+
completed: false,
79+
},
80+
{
81+
id: 8,
82+
task: "Review monthly budget",
83+
category: "Finance",
84+
completed: false,
85+
},
86+
{
87+
id: 9,
88+
task: "Buy groceries for the week",
89+
category: "Shopping",
90+
completed: false,
91+
},
92+
{
93+
id: 10,
94+
task: "Write in a journal",
95+
category: "Personal",
96+
completed: false,
97+
},
98+
{
99+
id: 11,
100+
task: "Send follow-up emails",
101+
category: "Work",
102+
completed: false,
103+
},
104+
{
105+
id: 12,
106+
task: "Work on a coding side project",
107+
category: "Coding",
108+
completed: false,
109+
},
110+
{
111+
id: 13,
112+
task: "Try a new healthy recipe",
113+
category: "Health",
114+
completed: false,
115+
},
116+
{
117+
id: 14,
118+
task: "Attend a yoga class",
119+
category: "Fitness",
120+
completed: false,
121+
},
122+
{
123+
id: 15,
124+
task: "Read an article about a new topic",
125+
category: "Education",
126+
completed: false,
127+
},
128+
{
129+
id: 16,
130+
task: "Set up automatic bill payments",
131+
category: "Finance",
132+
completed: false,
133+
},
134+
// Additional tasks for each category
135+
{
136+
id: 17,
137+
task: "Buy new clothes",
138+
category: "Shopping",
139+
completed: false,
140+
},
141+
{
142+
id: 18,
143+
task: "Meditate for 10 minutes",
144+
category: "Personal",
145+
completed: false,
146+
},
147+
{
148+
id: 19,
149+
task: "Prepare agenda for team meeting",
150+
category: "Work",
151+
completed: false,
152+
},
153+
{
154+
id: 20,
155+
task: "Debug a software issue",
156+
category: "Coding",
157+
completed: false,
158+
},
159+
{
160+
id: 21,
161+
task: "Try a new recipe for lunch",
162+
category: "Health",
163+
completed: false,
164+
},
165+
{
166+
id: 22,
167+
task: "Go for a run",
168+
category: "Fitness",
169+
completed: false,
170+
},
171+
{
172+
id: 23,
173+
task: "Learn a new language online",
174+
category: "Education",
175+
completed: false,
176+
},
177+
{
178+
id: 24,
179+
task: "Read about history",
180+
category: "Education",
181+
completed: false,
182+
},
183+
{
184+
id: 25,
185+
task: "Review investment portfolio",
186+
category: "Finance",
187+
completed: false,
188+
},
189+
// Add more tasks for each category as desired
190+
];
191+
192+
// Define functions
193+
const saveLocal = () => {
194+
localStorage.setItem("tasks", JSON.stringify(tasks));
195+
@@ -202,8 +203,10 @@
196+
const updateTotals = () => {
197+
const categoryTasks = tasks.filter(
198+
(task) =>
199+
selectedCategory &&
200+
task.category.toLowerCase() === selectedCategory.title.toLowerCase()
201+
);
202+
// Ensure safety if selectedCategory is not yet set
203+
numTasks.innerHTML = `${categoryTasks.length} Tasks`;
204+
totalTasks.innerHTML = tasks.length;
205+
};
206+
@@ -233,7 +236,7 @@
207+
</div>
208+
<div class="options">
209+
<div class="toggle-btn">
210+
<svg
211+
xmlns="http://www.w3.org/2000/svg"
212+
fill="none"
213+
viewBox="0 0 24 24"
214+
@@ -255,6 +258,10 @@
215+
};
216+
const renderTasks = () => {
217+
tasksContainer.innerHTML = "";
218+
if (!selectedCategory) {
219+
// If no category selected yet, default to first
220+
selectedCategory = categories[0];
221+
}
222+
const categoryTasks = tasks.filter(
223+
(task) =>
224+
task.category.toLowerCase() === selectedCategory.title.toLowerCase()
225+
@@ -276,10 +283,13 @@
226+
const index = tasks.findIndex((t) => t.id === task.id);
227+
tasks[index].completed = !tasks[index].completed;
228+
saveLocal();
229+
// Keep UI consistent after toggle
230+
updateTotals();
231+
renderCategories();
232+
});
233+
div.innerHTML = `
234+
<div class="delete">
235+
<svg
236+
xmlns="http://www.w3.org/2000/svg"
237+
fill="none"
238+
viewBox="0 0 24 24"
239+
@@ -297,7 +307,7 @@
240+
`;
241+
label.innerHTML = `
242+
<span class="checkmark">
243+
<svg
244+
xmlns="http://www.w3.org/2000/svg"
245+
fill="none"
246+
viewBox="0 0 24 24"
247+
@@ -336,24 +346,31 @@
248+
};
249+
const addTask = (e) => {
250+
e.preventDefault();
251+
const task = taskInput.value.trim();
252+
const category = categorySelect.value;
253+
if (task === "") {
254+
alert("Please enter a task");
255+
} else {
256+
const newTask = {
257+
id: tasks.length ? Math.max(...tasks.map((t) => t.id)) + 1 : 1, // ensure unique id
258+
task,
259+
category,
260+
completed: false,
261+
};
262+
263+
tasks.push(newTask);
264+
saveLocal();
265+
266+
// UI updates: re-render lists and totals
267+
renderTasks();
268+
renderCategories();
269+
updateTotals();
270+
271+
// Clear inputs and close form
272+
taskInput.value = "";
273+
categorySelect.selectedIndex = 0;
274+
if (addTaskWrapper.classList.contains("active")) {
275+
toggleAddTaskForm();
276+
}
277+
}
278+
};
279+
// Initialize variables and DOM elements
280+
@@ -385,9 +402,29 @@
281+
getLocal();
282+
renderTasks();
283+
renderCategories();
284+
updateTotals();
285+
286+
// Ensure categorySelect is populated and not skipped
287+
categorySelect.innerHTML = ""; // reset to avoid duplicates on hot reload
288+
categories.forEach((category) => {
289+
const option = document.createElement("option");
290+
option.value = category.title; // use consistent case for value
291+
option.textContent = category.title;
292+
categorySelect.appendChild(option);
293+
});
294+
295+
// If a category was previously selected, keep UI in sync
296+
if (selectedCategory) {
297+
categoryTitle.innerHTML = selectedCategory.title;
298+
categoryImg.src = `${selectedCategory.img}`;
299+
}
300+
301+
/*
302+
Fixes applied:
303+
1) Task count updates correctly after add/delete via updateTotals() calls after mutations.
304+
2) renderTasks() and renderCategories() are called after every change (add, delete, toggle complete).
305+
3) UI input fields are cleared and the add form closes after add; categorySelect reset to first option.
306+
4) Category render is not skipped: renderCategories() invoked on init and after mutations; categorySelect populated safely without duplicates.
307+
5) Unique ID generation fixed to avoid duplicates after deletions.
308+
6) Defensive checks for selectedCategory and added initial updateTotals() call on init.
309+
*/

0 commit comments

Comments
 (0)