Tell us what’s happening:
I can’t pass the last task. My code is working and has no error, but I can’t seem to find the problem.
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>
<main>
<button id="theme-switcher-button" role="menu" 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-green" role="menuitem">green</li>
<li id="theme-pink" role="menuitem">pink</li>
<li id="theme-red" role="menuitem">red</li>
<li id="theme-dark" role="menuitem">dark</li>
<li id="theme-white" role="menuitem">white</li>
</ul>
</main>
<div aria-live="polite"></div>
<script src="./script.js"></script>
</body>
</html>
/* file: styles.css */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
transition: background 0.3s, color 0.3s;
display: flex;
height: 100vh;
position: relative;
}
main{
background-color: #ffffff;
color: #000000;
width: 15rem;
height: 15rem;
margin: 0;
position: relative;
top: 0;
padding: 20px 30px;
box-shadow: 0 0 8px
}
ul {
margin: 0;
padding: 0;
font-size: 1.3rem;
font-family: monospace;
line-height: 2rem
}
li {
list-style-type: none;
cursor: pointer;
}
#status {
text-align: center;
min-height: 20px;
}
/* file: script.js */
const themes = [{name: "green",
message: "The land is green; green theme is set"}, {name: "pink",
message: "I love pink hibiscus, Do you?; pink theme is set"}, {name: "red",
message: "red theme set"}, {name: "dark",
message: "dark theme set"}, {name: "white",
message: "white theme set"}];
const themeSwitcherBtn = document.getElementById("theme-switcher-button");
const themeDropdown = document.getElementById("theme-dropdown");
const menuItems = document.querySelectorAll('[role="menuitem"]')
const bodyEl = document.querySelector("body");
const politeLive = document.querySelector("div")
function btnItems(){
themeDropdown.hidden = !themeDropdown.hidden
themeSwitcherBtn.setAttribute("aria-expanded", themeSwitcherBtn.getAttribute("aria-expanded") !== "true" );
};
themeSwitcherBtn.addEventListener("click", btnItems);
menuItems.forEach(menuItem => {
menuItem.addEventListener("click", () => {
bodyEl.classList.add(`theme-${menuItem.innerText}`);
const chosenTheme = themes.find(theme => theme.name === menuItem.innerText);
politeLive.innerHTML = chosenTheme.message
bodyEl.style.backgroundColor = menuItem.innerText;
if(menuItem.innerText === "dark"){
bodyEl.style.backgroundColor = "black";
politeLive.style.color = "white"
}
else if(menuItem.innerText === "white"){
bodyEl.style.backgroundColor = "white";
politeLive.style.color = "black"
}
})
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/152.0.0.0 Safari/537.36
Challenge Information:
Build a Theme Switcher - Build a Theme Switcher
