London | 25-ITP-May | Halimatou Saddiyaa | Sprint 3 | Todo list#765
London | 25-ITP-May | Halimatou Saddiyaa | Sprint 3 | Todo list#765Halimatou-saddiyaa wants to merge 6 commits intoCodeYourFuture:mainfrom
Conversation
Sprint-3/todo-list/index.html
Outdated
| /> | ||
| </div> | ||
| <div> | ||
| <button type="submit" class="btn btn-primary mt-2">Add Todo</button> |
There was a problem hiding this comment.
small design tip: if you have two buttons side by side (especially buttons with different functions), make sure to distinguish them by colour.
There was a problem hiding this comment.
Thanks for the suggestion. I've changed the color of one of the button.
Sprint-3/todo-list/script.js
Outdated
| return; | ||
| } | ||
|
|
||
| if (newTask !== "") { |
There was a problem hiding this comment.
solid implementation. side note: when you run checks like this, you should also run a check for the opposite scenario. for example, when newTask is empty, the add todo button should give feedback that the input field is empty but I understand this is outside the scope of this assignment. it is just something for you to note moving forward.
There was a problem hiding this comment.
Thanks, I'll keep it in mind for my next projects.
There was a problem hiding this comment.
you can give it a try right now. when the button is clicked but the input field is empty, display a simple message telling the user to write something.
There was a problem hiding this comment.
I’ve added a message that alerts the user if they try to submit an empty input field.
Sprint-3/todo-list/script.js
Outdated
| trashIcon.setAttribute("aria-hidden", "true"); | ||
| trashIcon.addEventListener("click", () => { | ||
| const index = todos.indexOf(todo); | ||
| if (index > -1) { |
There was a problem hiding this comment.
this is an okay solution but there is a better way to do this. have you explored other array methods?
There was a problem hiding this comment.
I've replaced this by an array filtering method inside a function
| @@ -1,25 +1,73 @@ | |||
| function populateTodoList(todos) { | |||
There was a problem hiding this comment.
this function handles both data updates and UI changes, it works fine for a small task like this but when you work on much larger projects, you want to be able to reuse certain functions. in that case, keeping your code as modular as possible is the recommended approach.
There was a problem hiding this comment.
I've refactored my code to create other functions to handle data updates and UI changes
|
Thank you for reviewing my PR @sambabib |
| todo.completed = !todo.completed; | ||
| } | ||
|
|
||
| function removeTodo(todos, todo) { |
There was a problem hiding this comment.
very good. it's much cleaner and reusable.
|
@sambabib I've changed my code to implement the suggested corrections. |
| let input = document.getElementById("todoInput"); | ||
| let newTask = input.value.trim(); | ||
|
|
||
| if (newTask === "") { |
There was a problem hiding this comment.
good job handling this edge case. well done!
Learners, PR Template
Self checklist
Changelist
I've implemented the Todo list app with the following requirements:
Please review my PR.
Questions
Ask any questions you have for your reviewer.