How to do a progress bar on my ToDo List?

Question

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

Answer 1

Thanks Vincent Blankfield! that was a lot easier than I was expecting it to be.

Answer 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>

Answer 3

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