Tell us what’s happening:
It looks like the code is working fine but I can’t pass 26 and 28.
thanks for helping
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-black">black</li>
<li role="menuitem" id="theme-green">green</li>
</ul>
<div 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;
}
#status {
text-align: center;
min-height: 20px;
}
.green { background-color: lightgreen;}
.black {background-color: gray;}
/* file: script.js */
const themes = [{name: "black",
message: `theme is now chaged to black`},
{name: "green", message: `theme is now chaged to green`}];
const menu = document.getElementById("theme-switcher-button");
const list = document.getElementById("theme-dropdown");
const div = document.querySelector("[aria-live = 'polite']");
menu.addEventListener("click", () => {
if(list.hidden) {
list.hidden = false;
menu.setAttribute("aria-expanded", "true")
} else {
list.hidden = true;
menu.setAttribute("aria-expanded", "false")
}
});
const body = document.querySelector("body")
const liEl = document.querySelectorAll("li");
liEl.forEach(li => {
li.addEventListener("click", () => {
themes.forEach(color => {
if(color.name === li.id.slice(6)) {
div.innerText = color.message;
body.setAttribute("class", color.name)
}
})
})
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
Challenge Information:
Build a Theme Switcher - Build a Theme Switcher