Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

  1. 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.
  2. When a user clicks the #theme-switcher-button and selects a theme, a message related to the selected theme from the themes array should be displayed in the aria-live=“polite” element. i can’t pass this two pls help me

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Theme Switcher</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <button id="theme-switcher-button" aria-haspopup="true" aria-expanded="false" aria-controls="theme-dropdown">Switch Theme</button>
  <ul id="theme-dropdown" role="menu" aria-labelledby="theme-switcher-button" hidden>
    <li id="theme-dark" role="menuitem" >Dark</li>
    <li id="theme-green" role="menuitem">Green</li>
    <li id="theme-blue" role="menuitem">Blue</li>
    <li id="theme-red" role="menuitem">Red</li>
  </ul>
  <h2 id="status" aria-live="polite"></h2>
  <script src="./script.js"></script>
</body>
</html>

/* file: styles.css */
body {
  margin: 0;
  font-family: sans-serif;
  transition: background 0.3s, color 0.3s;
  
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

#status {
  text-align: center;
  min-height: 20px;
}

/* file: script.js */
const themes = [{name: "theme-dark",message:"the god of light"}
,{name: "theme-green",message:"super tiger of hidden leaf"}
,{name:"theme-blue",message:"blue sky no limit"}
,{name:"theme-red",message:"super red red red red uzumaki"}]
const btn = document.getElementById("theme-switcher-button")
const dropList = document.getElementById("theme-dropdown")
btn.addEventListener('click',()=>{
  dropList.hidden = !dropList.hidden
  btn.setAttribute("aria-expanded",dropList.hidden?"false":"true")
  statusOut.textContent = ""
})
const statusOut = document.getElementById("status")
console.log(themes[1].name.slice(themes[1].name.indexOf("-")+1))
const listChoice = document.querySelectorAll("[role=menuitem]")
listChoice.forEach(theme=>{
  theme.addEventListener("click",()=>{
    document.body.classList.remove("theme-dark","theme-green","theme-blue","theme-red")
     let id = theme.id
     let getTheme = themes.find(elem=>elem.name===id)
     if(getTheme){
        statusOut.textContent=getTheme.message
     document.body.classList.add(getTheme.name)
     }
     dropList.hidden = !dropList.hidden
     btn.setAttribute("aria-expanded",dropList.hidden?"false":"true")
  })
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

  1. 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.

  2. When a user clicks the #theme-switcher-button and selects a theme, a message related to the selected theme from the themes array should be displayed in the aria-live=“polite” element.

  3. My code did’t pass the 21 and 27 test i don’t understand why

4

The JS code doesn´t change any color, but it seems the tests doesn´t checking it.
Should it be an issue?

  1. Please try console.log() commands like this to find out whats the value of the li elements:
// It logs the value of `theme-green`
console.log(document.getElementById("theme-green").value)

What do you think? How can you fix it?

Maybe solving this fixes test 27 too. I recommend to fix 21. first.

1 Like
5

it console.log out 0 i don’t understand i read some solving issuse this theme-tracker and saw some remove the “theme-[color]” in the object name and i test out and it pass

removed by moderator

nearly just change the change the name obj in array object but my first code i still don’t understand why i can’t pass 21 and 27 and what value they want the textconent compare or st else btw tks you very much, i really appreciate for you help and rep

1 Like
6

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
7

Gratulations for solving the issues on your own!

The test are just simply that strict. They are probably looking for the values after the theme-. That´s why you were asked in user story 5 and 11 to use the “theme-” format, so they can run properly.

I remember I used the value="" attribute (hence the test asked for the value of the li) for solving the same problem and it worked for me anno.
That´s why I suggested it, but it seems that´s not the test case then.

I think I open an issue for revising this Lab.

1 Like
8

Congratulations on solving the challenge! You should be proud of your achievement…we are! But we are removing your working solution, so it is not available to others who have not yet done the work to get there. Again, congrats!

1 Like