jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-27 11:01:38 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): clarify instructions for theme switcher lab (#66404)

Browse Source
This commit is contained in:
jtrang
2026-03-12 17:50:21 -04:00
committed by GitHub
parent ce2520d9a6
commit bc978ac657
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/english/blocks/lab-theme-switcher/687ad7be1ff45032ccf1d92f.md
View File

@@ -28,7 +28,7 @@ In this lab, you will build an app that switches between different themes. When
4. Your `ul` element should have at least two `li` elements with a `role` attribute set to `"menuitem"` and text of your choice representing a different theme.
5. Each of your `li` elements should have an `id` attribute that starts with `theme-` and ends with the theme you set for the `li` element text. For example, if one of your themes is `Light` then your `id` should be `theme-light`.
6. You should have an element with an `aria-live` attribute set to `"polite"`.
7. You should have a `themes` array with at least two objects that each contain a `name` and `message` property. The `name` will represent a different theme and the `message` will display when the theme switches. You are free to come up with `name` and `message` values of your choice but the `name` values should match one of the options you set in your `li` items.
7. You should have a `themes` array with at least two objects that each contain a `name` and `message` property. The `name` will represent a different theme and the `message` will display when the theme switches. You are free to come up with `name` and `message` values of your choice but the `name` values should match the text content of your `li` elements.
8. When a user clicks on the `#theme-switcher-button`, the `#theme-dropdown` element should display the available themes.
9. When the `#theme-dropdown` element is displayed, the `aria-expanded` attribute should be set to `"true"` for the `button` element.
10. When the users clicks on the `#theme-switcher-button` while the `#theme-dropdown` element is displayed, the menu should be closed and the `hidden` attribute should be added and the `aria-expanded` attribute should be set to `"false"`.
@@ -209,7 +209,7 @@ themes?.forEach(theme => {
})
```
Each of your `name` property values should match one of the values you provided for the `li` elements. Make sure these values are all in lowercase.
Each of your `name` property values should match the text content of one of your `li` elements. Make sure these values are all in lowercase.
```js
const listItems = [...document.querySelectorAll("ul li")]?.map(li => li.textContent.toLowerCase().trim());