Todo project #1
Todo project #1
Conversation
There was a problem hiding this comment.
Hi @iLynette ,
Good job so far!
HIGHLIGHTS!
- No linters errors.💯
- Descriptive Readme.md. 💯
There are some issues that you still need to work on to go to the next project but you are almost there!
Required Changes ♻️
Check the comments under the review.
Optional suggestions
Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
src/index.js
Outdated
| todos.forEach((todos) => { | ||
| todoList.innerHTML += ` | ||
| <div class="one"> | ||
| <input type="checkbox"> |
There was a problem hiding this comment.
- The checkbox should be check if the completed is
true, iffalseit should be unchecked. Please kindly fix this issue by using this code<input type="checkbox" ${todos.completed ? 'checked' : ''}>}. It will add checked dynamically from the data 👋👍
src/index.js
Outdated
| function allTasks() { | ||
| todoList.innerHTML = ''; | ||
| todos.forEach((todos) => { | ||
| todoList.innerHTML += ` | ||
| <div class="one"> | ||
| <input type="checkbox"> | ||
| <p>${todos.description}</p> | ||
| <i class="fas fa-ellipsis-v"></i> | ||
| </div> | ||
| `; | ||
| }); | ||
| } |
There was a problem hiding this comment.
- Please make sure the tasks appear in order of the
indexvalues for each task.
For example, the apple appears first on the list because its index is1, and orange is second. It helps a lot when you connect it with localStorage
const todos = [
{
description: 'orange',
completed: false,
index: 2,
},
{
description: 'apple',
completed: true,
index: 1,
},
];
There was a problem hiding this comment.
Thank you for the review, i have fixed the issues
There was a problem hiding this comment.
Hi @iLynette,
Congratulations! 🎉 Project Approved ✅
Your project is complete! There is nothing else to say other than... it's time to merge it 🚀
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
|
Thank you @dasileker |
In this project I implemented the following;
Set up a new project with webpack
Create an index.html file and HTML markup here. Create an empty To Do List placeholder.
Create an index.js file and set an array of some simple to do tasks (array of objects). Each task object should contain three keys:
description [string].
completed [bool].
index: [number].
Wrote a function to iterate over the tasks array and populate an HTML list item element for each task.
On page, load render the dynamically created list of tasks in the dedicated placeholder.