Tell us what’s happening:
Failing Test 21 & 27 and i cant figure out why . please can you help
21. 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.
27. 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" aria-labelledby="theme-switcher-button" hidden role="menu">
<li id="theme-red" role="menuitem">red</li>
<li id="theme-blue" role="menuitem">blue</li>
</ul>
<div id="status-update" aria-live="polite" role="status"></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;
}
#status {
text-align: center;
min-height: 20px;
}
.theme-red{
background-color: red;
}
.theme-blue{
background-color: blue
}
/* file: script.js */
const themes = [
{ name: "theme-red", message: "a fiery red theme" },
{ name: "theme-blue", message: "a calming blue theme" }
];
const themeBtn = document.getElementById("theme-switcher-button")
const themeDropDown = document.getElementById("theme-dropdown")
const themeDivs = document.querySelectorAll('[role="menuitem"]')
const statusBox = document.getElementById("status-update")
const bodyElement = document.body
console.log(themeDivs)
themeDivs.forEach( (theme) => {
theme.addEventListener("click" , t =>
{
let newArr = themes.find((element) => element.name == t.target.id)
statusBox.textContent = newArr.message
bodyElement.removeAttribute('class')
bodyElement.classList.add(newArr.name)
console.log(statusBox.textContent)
modifyDropdown()
}
)
} )
themeBtn.addEventListener("click",
event => {
event.target.setAttribute("aria-expanded", event.target.getAttribute("aria-expanded") !== "true");
themeDropDown.hidden = !themeDropDown.hidden
//console.log(themeDropDown.hidden)
console.log("aria Expanded Status " + event.target.getAttribute("aria-expanded"))
}
);
function modifyDropdown() {
themeDropDown.setAttribute("aria-expanded", themeDropDown.getAttribute("aria-expanded") !== "true");
themeDropDown.hidden = !themeDropDown.hidden
//console.log(themeDropDown.hidden)
console.log("aria Expanded Status " + themeDropDown.getAttribute("aria-expanded"))
}
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
Challenge Information:
Build a Theme Switcher - Build a Theme Switcher