-
Notifications
You must be signed in to change notification settings - Fork 1
/
requirements.txt
55 lines (40 loc) · 2.49 KB
/
requirements.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
To Do List web application that is connected to the ATDAPI service
Goal: https://altcademy-to-do-list-api.herokuapp.com/demo
ATDAPI service: https://altcademy-to-do-list-api.herokuapp.com/
My unique API key for ATDAPI service:
- [x] You should use jQuery for this project.
- [x] Set up GitHub repo and push changes to GitHub.
- [x] Set up GitHup Page for this project once it is finished.
*Minimum requirements:*
- [x] A list of tasks rendered in the DOM based on data from the ATDAPI server.
- [x] Each task has a description, a remove button, and a mark complete/active button.
- [x] Each task has an input element and a button that lets user add a new task.
*Bonus feature:*
- [x] A toggle to show Active/Complete/All tasks only
Additional steps:
- [x] Add README.
- [ ] Fix accessibility for all event listeners.
- [ ] Check that GitHub Page is working.
- [ ] Fix BS cols for xs devices - items and buttons should still be in the same row.
- [ ] Add background image.
- [ ] Add project to portfolio.
-[x] Show how many items are left in footer
-[x] Toggle all checkbox should be unchecked when all todos are removed.
------------------------------
*Pointers:*
Start by defining basic HTML and CSS structures for your To Do List. Then move on to writing JavaScript. It will help you figure out the DOM element structures you are dynamically adding to the Document.
After the document has loaded, we should make an AJAX request to get all existing tasks. The response stores the tasks in an array. Consider using a loop to dynamically add each task to the DOM.
When writing event handlers for tasks, such as deleting a task, wait for the the AJAX response for deleting the task to come back as successful before removing the task from the DOM.
Work on a single criterion at a time. Start with getting the list of tasks and rendering them on the DOM.
-------------
WHAT I LEARNED:
- Template literals can be used for complete expressions like a conditional using a ternary operator. To add a conditional within a template literal in HTML, I had to wrap the `` around the whole expression, like this:
var newToDo = `<li class="todo-item" data-id="${element.id}">
<div class="show-todo-item">
<input class="toggle" type="checkbox" data-id="${element.id}" ${(element.completed ? 'checked' : '')}>
<label>${element.content}</label>
<button class="destroy">Remove</button>
</div>
<input type="text" class="edit-todo-item">
</li>`;
- Put counter variables inside ajax request so they are read every time the request runs.