Rewrite Highlight Words to a project briefing

[SallyMcGrath]

Project Brief: Highlight Words

As a user, I want to be able to highlight individual words in a paragraph with a specific colour by clicking on them.

User Stories:

As a user, I want to see a block of text displayed on the page.
As a user, I want to see a dropdown menu containing different color options.
As a user, I want to select a color from the dropdown menu.
As a user, I want to click on a word in the paragraph to highlight it with the selected color.
As a user, I want the highlighted word to change color if I select a different color from the dropdown.
As a user, I want to be able to remove the highlight from a word if I click on it again or select the "none" option in the dropdown.

Acceptance Criteria:

• The paragraph of text is rendered using JavaScript.
• The dropdown menu is displayed on the page.
• The dropdown menu contains different colour options.
• When a word is clicked, its background colour changes to the colour selected in the dropdown.
• If the "none" option is selected in the dropdown, the background colour of the clicked word is removed.
• The Lighthouse Accessibility score is 100.
• The UI is simple and easy to use.

[SallyMcGrath]

Test notes:

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

[SallyMcGrath]

@Dedekind561 reminding you about this - I'm just looking through JS2 now and I see there are zillions of step by steps still