Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

I’ve set up an element with aria-live="polite" to display a message.
The preview looks fine in the browser, but the code still isn’t passing test 27.
Could anyone help me figure out what I’m missing?

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

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-milkyway" role="menuitem">Milkyway</li>
    <li id="theme-blackknight" role="menuitem" aria-live="polite">Blackknight</li>
  </ul>

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

  <script src="./script.js"></script>
</body>
</html>

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

button {
  background-color: burlywood;
  margin: 1px;
  border: 5px;
  padding: 10px;

}

ul {
  margin: 0;
  padding: 0;
}

li {
  /* list-style-type: none; */
  background-color: cornsilk;
    margin: 1px;
  border: 5px solid;
  border-color: burlywood;  
  padding: 10px;
  width: 150px;
}

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

/* file: script.js */
let themes = [
  {
    name:"milkyway",
    message: "Galaxy"
  },
  {
    name: "blackknight",
    message: "Satellite"}  
]


const button = document.getElementById("theme-switcher-button");
const menu = document.getElementById("theme-dropdown")

button.addEventListener("click", ()=> {
  const expanded = button.getAttribute("aria-expanded") === "true";
  button.setAttribute("aria-expanded", String(!expanded));
  if (!expanded) {
    menu.removeAttribute("hidden");
  } else 
  menu.setAttribute("hidden", "true")   
});



const milkyway = document.getElementById("theme-milkyway");
const blackknight = document.getElementById("theme-blackknight");
const bodyEl = document.querySelector("body");
const statusEl = document.getElementById("status");
  
milkyway.addEventListener("click",()=>{
  bodyEl.classList.add(`theme-${themes[0].name}`);
  bodyEl.style.backgroundColor = "mintcream";
  statusEl.textContent = themes[0].message;
})


blackknight.addEventListener("click",()=>{
  bodyEl.classList.add(`theme-${themes[1].name}`);
  bodyEl.style.backgroundColor = "midnightblue";
  statusEl.textContent = themes[1].message;
})

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher
https://www.freecodecamp.org/learn/full-stack-developer/lab-theme-switcher/lab-theme-switcher

2

the milkyway theme doesn’t have the aria-live attribute, but I don’t know if that’s the problem.

3

The aria-live attribute is set on an empty element.

You reminded me of a mistake I’d made earlier but hadn’t fixed in one of the elements. I removed the aria-live="polite" from that element, and now it works.

1 Like
4

yeah this way it makes more sense :). I’m glad you fixed that

1 Like
5

I only just scraped through this lab, which I honestly didn’t expect. Still, I’m sure I’ll get better at it with more practice in the future.

1 Like
6

I’m sure you will. Happy coding :))

1 Like