In this project you will be creating a todo website with a starter DOM file.
- Fork and clone this repo
- You do not need to edit
engine.js
nor components folder ( but you need to take a look in them to get the classes names ) - This project has zero styling, so its on your todo ๐
- You will be writing your beloved
javascript
code in theindex.js
- There are a lot of sample codes, remove it once you are done
index.html
is not fully done, add the tags that you need so the code can run- Example of how the layout can look like:
Note: You have to be creative and unique with your styling
Tools
- Empty array called
tasks
- Empty Array called
categories
- A function called
addTask()
- A function called
addCategory()
- A function called
taskChecked()
- A function called
filterTasks()
- A function called
renderTasks(array, html-id)
- A function called
filterTasks(array, html-id)
Hints
- Use
onclick
when needed - Some functions will be reused, so think carefully
- What does the the
select
tag do? - What does
option
tag do? Where can it be found? - How is
engine.js
reading fromindex.js
,categoryItem.js
, andtaskItem.js
- What does components folder contains?
- What does
engine.js
do? - Try all functions inside the
engine.js
- Complete the code in away that the task added can be
pushed
into the array as an object (tasks must be an array of objects)
tasks = [
{ id: 0, title: "Game of thrones", category: "Movies", done: false },
{ id: 1, title: "Toy Story 4", category: "Movies", done: false },
];
- Make sure that the function is being called from the
index.html
- Render the array
tasks
on the page
- Complete the code in away that the category added can be
pushed
into the array
categories = ["Movies", "Grociries"];
- Make sure that the function is being called from the
index.html
- Render the array
category
on the page (Note: the array will be rendered in the dropdown list) - Make sure the added category will be displayed in both dropdown menus, by using
renderCategories(array, html-id)
- View the
taskChecked()
function and test it - Make sure that it updates the original
tasks
list - And render
tasks
to the page
- This function will display the tasks that have the same category chosen by the dropdown menu
- Test
filterTasks()
to see what it can give you, then use it in your advantage - Do not forget to render it on the page
- Make sure that you have build your objects correctly
- This function will work only when the filter by done is checked
- Reuse
filterTasks()
- Filter the
tasks
array based ondone:true
- Render the filtered tasks in away only the done tasks are shown
- When the checkbox is not checked, the whole tasks must appear (Not the filtered one)