Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

HI everyone! Looks like I’m stuck on case 21 and 27 in the theme switcher lab problem. Help me find the solution.

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 role="menuitem" id="theme-dark">Dark</li>
    <li role="menuitem" id="theme-ocean">Ocean</li>
    <li role="menuitem" id="theme-light">Light</li>
    <li role="menuitem" id="theme-nord">Nord</li>
  </ul>

  <p id="theme-message" aria-live="polite"></p>
  
  <script src="./script.js"></script>
</body>
</html>

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

ul {
  margin: 0;
  padding: 0;
  background-color: white;
  width: 25%;
}

li {
  padding: 0.8rem;
  list-style-type: none;
  cursor: pointer;
  position: relative;
  color: black;
  background-color: white;
}

ul li:hover {
  background-color: #ddd;
}

button {
  padding: 0.8em;
  background-color: burlywood;
  color: black;
  border: none;
  cursor: pointer;
}

#theme-message {
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 auto;
  position: fixed;
}

.theme-dark {
  background-color:  rgba(0, 0, 0, 0.9);
  color: white;
}

.theme-light {
  background-color: whitesmoke;
}

.theme-ocean {
  background-color: #1da2d8;
  color: whitesmoke;
}

.theme-nord {
  background-color: #2e3440;
}

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

/* file: script.js */
let themes = [
  {
    name: "theme-dark",
    message: "The night is yours — Dark theme is on!",
  },
  {
    name: "theme-light",
    message: "Hello sunshine — Light theme is on!",
  },
  {
    name: "theme-ocean",
    message: "Blue skies and high tides — Ocean theme is on!",
  },
  {
    name: "theme-nord",
    message: "The frost has settled - Nord theme is on!",
  }
];

const switchBtn = document.getElementById("theme-switcher-button");
const dropdown = document.getElementById("theme-dropdown");
const themeNames = document.querySelectorAll("[role=menuitem]");
const themeMessage = document.getElementById("theme-message");

switchBtn.addEventListener("click", (event) => {
  event.stopPropagation();
  let isExpanded = switchBtn.getAttribute("aria-expanded") === "true";

  switchBtn.setAttribute("aria-expanded", String(!isExpanded));

  if (isExpanded) {
    dropdown.hidden = true;
  } else {
    dropdown.hidden = false;
  }
});

themeNames.forEach((t) => {
  t.addEventListener("click", (event) => {
    event.stopPropagation();

    const selectedTheme = themes.find((theme) => theme.name === t.id);
    if (!selectedTheme) return;

    document.body.classList.remove("theme-dark", "theme-light", "theme-ocean", "theme-nord");
    document.body.classList.add(selectedTheme.name);

    themeMessage.textContent = selectedTheme.message;

    dropdown.hidden = true;
    switchBtn.setAttribute("aria-expanded", "false");
  });
});

document.body.addEventListener("click", () => {
  dropdown.hidden = true;
  switchBtn.setAttribute("aria-expanded", "false");
});

Your browser information:

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

Challenge Information:

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

4

logging the variables to the console really helped a lot. Thank you so much!