+ 7

How to do a progress bar on my ToDo List?

I have this To Do List ( https://code.sololearn.com/Wa8JJ3X043qF/#html ) and at the bottom of the page it shows how many tasks there are total and how many are completed in this format "1 of 3 remaining". this comes from this HTML line "<span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>" . I am trying to figure out a way to put a progress bar below that will automatically update as a percentage of tasks completed. so for example 1 of 3 tasks remaining means I am about 67% completed on all my tasks and I would like a progress bar to display that and update automatically. The problem I have is that I don't know how to define these variable values that are being "watched" via this AngularJS code. https://code.sololearn.com/Wa8JJ3X043qF/#html

31st Oct 2017, 3:21 PM
Logan
Logan - avatar
3 Respuestas
+ 6
Thanks Vincent Blankfield! that was a lot easier than I was expecting it to be.
5th Nov 2017, 10:27 AM
Logan
Logan - avatar
+ 2
Add this: <div><progress value={{todoList.remaining()}} max={{todoList.todos.length}}></progress></div> after this: <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
5th Nov 2017, 7:57 AM
deFault
0
Something not related to this question: You should remember the items of the to-do list in localStorage or JS Cookies. Here is my remembering to-do list (doesn't have a progress bar, though) https://code.sololearn.com/Wie9N5341bD8/#html
14th Dec 2017, 7:12 AM
Lil Taco
Lil Taco - avatar