Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

I can’t get past test 15 (Each of your li elements should have an id attribute that starts with theme- and ends with the corresponding theme for that element. Make sure your id value is all lowercase.) although I’ve checked everything many times. I also had to use some workarounds to get past test 21 and 27, which I saw many people had trouble with. I’m not sure if there is any issue with this Lab or if I’m missing one tiny detail. Thanks in advance for any help.

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 id="body" class="">
<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 role="menuitem" id="theme-light">theme-light</li>
  <li role="menuitem" id="theme-dark">theme-dark</li>
</ul>

<p id="status" aria-live="polite"></p>

<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;
}
button {
  margin: 10px 10px 0 5px;
  padding: 10px;
  border-radius: 10px;
  width: 120px;
  background: linear-gradient(yellow, orange);
  border: 1px solid darkorange;
}
button:hover {
  background: darkorange;
}

li {
  list-style-type: none;
  margin: 10px 10px 10px 5px;
  width: 100px;
  padding: 10px;
  border-radius: 10px;
}
#theme-light {
  background: linear-gradient(white, lightblue, cyan);
  border: 1px solid lightblue;
  color: black;
}
#theme-light:hover {
  background: cyan;
}
#theme-dark {
  background: linear-gradient(darkgrey, gray, black);
  border: 1px solid gray;
  color: white;
}
#theme-dark:hover {
  background: gray;
}
#status {
  text-align: center;
  min-height: 20px;
}
.theme-light {
  background: lightblue;
}
.theme-dark {
  background: black;
  color: white;
}

/* file: script.js */
const themes = [{name: "theme-light", message: "Light like my bank account"}, {name: "theme-dark", message: "Not as dark as my future, but close enough"}];
const switchButton = document.getElementById("theme-switcher-button");
const menuList = document.getElementById("theme-dropdown");
const lightThemeButton = document.getElementById("theme-light");
const darkThemeButton = document.getElementById("theme-dark");
const body = document.getElementById("body");
const statusMsg = document.getElementById("status");

switchButton.addEventListener("click", () => {
  menuList.hidden = !menuList.hidden;
  switchButton.setAttribute("aria-expanded", menuList.hidden ? "false" : "true")
});

lightThemeButton.addEventListener("click", () => {
body.setAttribute("class", themes[0].name);
statusMsg.textContent = themes[0].message;
});

darkThemeButton.addEventListener("click", () => {
  body.setAttribute("class", themes[1].name);
  statusMsg.textContent = themes[1].message;
})

Your browser information:

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

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

2

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.

You’re not quite following this correctly. Try copying the example exactly.

If the text is Light then the id is theme-light

If the text is theme-light then the id would be theme-theme-light

3

Thank you very much, this solved the issue. Although it caused other tests to not pass, I was able to solve them. Have a good day!

1 Like