Tell us what’s happening:
hi guys, item 27 is not passing, I am missing something for sure, but I’m not able to find it out, I checked the DevTools and the message is showing in the div element when choosing a theme, I would appreciate some advice, thank you
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-blue">Blue</li>
<li role="menuitem" id="theme-red">Red</li>
</ul>
<div id="container" 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;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
li:hover {
background-color: #f0f0f0;
cursor: pointer;
}
#status {
text-align: center;
min-height: 20px;
}
#container {
max-width: 400px;
text-align: center;
margin: 50px auto;
padding: 20px;
border-radius: 8px;
}
/* file: script.js */
const themes = [
{ name: "blue", message: "Blue Morning"},
{name: "red", message: "Red Sleep"}
];
const switcherButton = document.getElementById("theme-switcher-button");
const dropdown = document.getElementById("theme-dropdown");
const container = document.getElementById("container");
const themeMessage = document.getElementById("theme-message");
switcherButton.addEventListener("click", () => {
const isExpanded = switcherButton.getAttribute("aria-expanded") === "true";
switcherButton.setAttribute("aria-expanded", String(!isExpanded));
dropdown.hidden = isExpanded;
});
dropdown.querySelectorAll("li").forEach((item, index) => {
item.addEventListener("click", () => {
document.body.classList.add(`theme-${themes[index].name}`);
container.textContent = `Theme switched to: ${themes[index].message}`;
switcherButton.setAttribute("aria-expanded", "false");
dropdown.hidden = true;
})});
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
