Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

NW6 | Rabia Avci | JS2 Module | [TECH ED] Build todo-list app | Week 4 #222

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

NW6 | Rabia Avci | JS2 Module | [TECH ED] Build todo-list app | Week 4 #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46a1f95
implemented populate and add task actions
RbAvci Jan 24, 2024
ab28ead
implemented check and trash actions
RbAvci Jan 24, 2024
4c2847a
implemented styling
RbAvci Jan 24, 2024
5eef4bf
title name
RbAvci Jan 26, 2024
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
Binary file added .../assets/pattern_squares-2_1_4_0-0_180_2__ee6d4d_293241_e0fbfc_3d5a80_98c1d9.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 28 additions & 17 deletions week-3/todo-list/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,36 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<title>Todo List</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
Copy link

Choose a reason for hiding this comment

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

I like how you've included font awesome for the icons - icons are always a nice touch!

/>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<form>
<div>
<input type="text" placeholder="New todo..." />
</div>
<div>
<button type="submit">Add Todo</button>
<button
type="button"
id="remove-all-completed"
class="btn btn-primary mb-3"
>
Remove all completed
</button>
</div>
</form>
<script src="script.js"></script>
<container class="content">
<section class="list-group">
<ul id="todo-list" ></ul>
</section>
<section>
<form>
<div>
<input id="todo-input" type="text" placeholder="New todo..." />
</div>
<div>
<button id="add-todo" type="submit">Add Todo</button>
<button
type="button"
id="remove-all-completed"
class="btn btn-primary mb-3"
Copy link

Choose a reason for hiding this comment

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

Doesn't look like you're using these class names in the CSS. They look like classes from Bootstrap CSS. When copy pasting always make sure you tidy up the code so that you can be certain to understand why it works :)

>
Remove all completed
</button>
</div>
</form>
</section>
</container>
Copy link

Choose a reason for hiding this comment

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

I love your use of semantic HTML and the consistant naming conventions 👍

</body>
</html>
62 changes: 59 additions & 3 deletions week-3/todo-list/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,54 @@
let list = document.getElementById("todo-list");

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.

for (const item of todos) {
addItem(item.task);
}
}

function addItem(task) {
if (!task){
alert("To-do is required!");
Copy link

Choose a reason for hiding this comment

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

good catch here

Copy link

Choose a reason for hiding this comment

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

👍

return;
}

const item = document.createElement("li");
item.innerText = `${task} `;

const btnSpan = document.createElement("span");
btnSpan.setAttribute("class", "badge bg-primary rounded-pill");

const iCheck = document.createElement("i");
iCheck.setAttribute("class", "fa fa-check");
iCheck.addEventListener("click", function () {
const classList = item.classList;
classList.contains("done")
? classList.remove("done")
: classList.add("done");
Copy link

Choose a reason for hiding this comment

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

Could use .toggle() here if you wanted next time - it's a helpful function to save writing extra code https://stackoverflow.com/questions/18880890/how-do-i-toggle-an-elements-class-in-pure-javascript

});

const iTrash = document.createElement("i");
iTrash.setAttribute("class", "fa fa-trash");
iTrash.addEventListener("click", function () {
list.removeChild(item);
});

btnSpan.appendChild(iCheck);
btnSpan.appendChild(iTrash);

item.appendChild(btnSpan);

list.appendChild(item);
}

document.getElementById("add-todo").addEventListener("click", function (event) {
addNewTodo(event);
document.getElementById("todo-input").value = "";
});


// These are the same todos that currently display in the HTML
// You will want to remove the ones in the current HTML after you have created them using JavaScript
let todos = [
Expand All @@ -17,9 +63,19 @@ 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 newTodo = document.getElementById("todo-input").value;
addItem(newTodo);
}

// 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).

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


function deleteAllCompletedTodos() {
// Write your code here...
}
const doneItems = list.querySelectorAll(".done");
for (const item of doneItems) {
list.removeChild(item);
}
Copy link

Choose a reason for hiding this comment

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

All in all, some solid functional code here. It could probaly benefit from a refactor and some comments but we're not exspecting perfection here - it works that's the main thing. Good work!


}
47 changes: 47 additions & 0 deletions week-3/todo-list/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,48 @@
:root {
font-size: xx-large;
}

body {
background-image: url(assets/pattern_squares-2_1_4_0-0_180_2__ee6d4d_293241_e0fbfc_3d5a80_98c1d9.png);
Copy link

Choose a reason for hiding this comment

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

Loving the background image!

}

.content {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Copy link

Choose a reason for hiding this comment

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

Good use of flex 👍


input {
font-size: xx-large;
border: solid 2px #293241;
border-radius: 1rem;
padding: 15px 32px;
margin-top: 1rem;
}

button {
background-color: #293241;
border-color: aliceblue;
font-size: large;
border-radius: 1rem;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
margin-top: 1rem;
}
.done {
text-decoration: line-through;
}

.list-group {
background-color: #293241;
font-size: xx-large;
border-radius: 1rem;
border: solid;
color: white;
padding: 10px 25px;
text-align: center;
}
Copy link

Choose a reason for hiding this comment

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

Some really nice styles, consistant theming etc, no issues I can see except that the delete and completed buttons might be a bit nicer with a bit of spacing