Progress bar

[CorinaMurg]

Description

The quiz features now a progress bar that changes with user input.

Accessibility Approach By using the semantic HTML tag progress, along with some JavaScript logic, we ensure that the progress bar is accessible:

• screen readers announce the addition of a new tag and also when progress reaches half or full completion
• the label contains a span element with a visually hidden class in order for screen readers to announce the status of the progress bar

Related Issue

Closes #25

Acceptance Criteria (AC)

• [x] For every right tag the user writes in the input field, a progress bar should show their progress.

Type of Changes

	Type
✓	✨ : Enhancement

Screenshots

Testing Steps / QA Criteria

To test, start adding tags to the list:

• The blue fill of the progress bar should increase as the list populates.
• If using a screen reader, it should announce with each tag how many total tags have been added.
• After 6 items have been added, the screen reader announcement should be different: Your progress: 6 tags added. This is 5%. Great job.
• Similar when 12 items are added: Your progress: 12 tags added. This is 10%. Great job. PLEASE NOTE THAT THE ABOVE 2 CASES WERE ADDED JUST FOR TESTING PURPOSES
• After half of the tags (ie 62) have been added, the screen reader announcement should be: Your progress: 62 added. This is 50% completion. Way to go. You are halfway there.
• Similar when all tags have been added: Your progress: 124 tags added. This is 100% completion. Congratulations. You have completed the challenge.

[netlify[bot]]

✅ Deploy Preview for html-tag-quiz ready!

Name	Link
🔨 Latest commit	fce4e91c4e93c2a55e17f2f677349b73483a6660
🔍 Latest deploy log	https://app.netlify.com/sites/html-tag-quiz/deploys/6535091149a9ac00086fc31f
😎 Deploy Preview	https://deploy-preview-28--html-tag-quiz.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[YuriDevAT]

For the UI we can create a separate issue. Functionality is prio No1.

[YuriDevAT]

It seems the branch has conflicts in the index.js file. After resolving them in your forked branch I am happy to merge the PR 😀