To-Don't List
Don't do these things
9% of your tasks are completed.
Remember the x simple to-don'ts above and you should be pretty much set for life.
Building a list of items is pretty straightforward using HTML, CSS, and JavaScript. The HTML contains the structure for the items and the progress bar. JavaScript is used to advance the progress bar as items are checked, and CSS makes everything look nice.
To build the list above follow these three steps:
Create HTML input elements for each item in your list.
Use JavaScript to find and count the number of inputs. Total = x.
The progress bar uses role="progressbar" to be accessible. The width of the bar is calculated as: percentage = (checked / total) * 100.
Lastly, create a simple function to update the width of the progress bar each time the inputs are toggled. This makes the progress bar interactive depends on using input.
Inspiration for this project from Zoë Bijl!