Skip to content

ITP-JAN-LONDON|FOROGH AGHAEIYARIJANI|MODULE-DATA-GROUP|WEEK3|SPRINT3|TO-DO-LIST|Create ToDos #477

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

ITP-JAN-LONDON|FOROGH AGHAEIYARIJANI|MODULE-DATA-GROUP|WEEK3|SPRINT3|TO-DO-LIST|Create ToDos #477

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ed75bb
Create ToDos
Apr 2, 2025
1673544
problem solving
Apr 8, 2025
fc5b3ad
problem solving
Apr 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Sprint-3/todo-list/index.html
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did these two icons checkIcon and trashIcon appear in your browser when you test this app?

I asked ChatGPT which CSS library most likely have those classes defined, and it suggested these:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

After I included the above code in index.html, two icons show up for each to do item.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resolved

Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<title>ToDos</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
Expand Down
56 changes: 56 additions & 0 deletions Sprint-3/todo-list/script.js
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

todos array is the application state.

All the code to render the list based on todos should be defined in populateTodoList() (but not in the call back functions assigned to checkIcon and trashIcon).

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resolved

Original file line number Diff line number Diff line change
@@ -1,6 +1,37 @@
function populateTodoList(todos) {
let list = document.getElementById("todo-list");
// Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element.
list.innerHTML = "";

todos.forEach((todo) => {
let li = document.createElement("li");
li.className =
"list-group-item d-flex justify-content-between align-items-center";
li.textContent = todo.task;

let span = document.createElement("span");
span.className = "badge bg-primary rounded-pill";

let checkIcon = document.createElement("i");
checkIcon.className = "fa fa-check me-2";
checkIcon.style.cursor = "pointer";
checkIcon.addEventListener("click", () => {
li.style.textDecoration =
li.style.textDecoration === "line-through" ? "none" : "line-through";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code to apply line-through should be place outside of this callback function.

Inside this callback function, focus on updating the application states, then call populateTodoList() to update the view in the following manner:

checkIcon.addEventListener("click", () => {
  // Change the "completed" property of the current task
  populateTodoList(todos); // update view
});

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resolved

});

let trashIcon = document.createElement("i");
trashIcon.className = "fa fa-trash";
trashIcon.style.cursor = "pointer";
trashIcon.addEventListener("click", () => {
li.remove();
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing the DOM element does not affect the application states. In other words, the statement at line 27 does not delete the corresponding element in array todos. As a result, when a new todo task is added after some items were deleted, the previously "deleted" items will reappear.

Instead, you should delete the corresponding item in the array todos, then call populateTodoList(todos) to update the view.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resolved


span.appendChild(checkIcon);
span.appendChild(trashIcon);
li.appendChild(span);
list.appendChild(li);
});
}

// These are the same todos that currently display in the HTML
Expand All @@ -17,9 +48,34 @@ function addNewTodo(event) {
// The code below prevents the page from refreshing when we click the 'Add Todo' button.
event.preventDefault();
// Write your code here... and remember to reset the input field to be blank after creating a todo!
let inputField = document.querySelector("input[type='text']");
let taskText = inputField.value.trim();
if (taskText !== "") {
todos.push({ task: taskText, completed: false });
populateTodoList(todos);
inputField.value = "";
}
}

document.querySelector("form").addEventListener("submit", addNewTodo);

document
.getElementById("remove-all-completed")
.addEventListener("click", deleteAllCompletedTodos);

// Advanced challenge: Write a fucntion that checks the todos in the todo list and deletes the completed ones (we can check which ones are completed by seeing if they have the line-through styling applied or not).
function deleteAllCompletedTodos() {
// Write your code here...
let list = document.getElementById("todo-list");
let items = list.getElementsByTagName("li");

for (let i = items.length - 1; i >= 0; i--) {
if (items[i].style.textDecoration === "line-through") {
items[i].remove();
}
}

todos = todos.filter((todo) => {
return ![...list.children].some((li) => li.textContent.includes(todo.task));
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What would happened if two todo tasks have identical task property value but only one of the tasks is completed?
Why not filter todos based on the completed property of the element?

And after you updated todos, just call populateTodoList(todos) to update the view. You don't need the code at lines 69-77.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

resolved

}