Tell us what’s happening:
failled the test 23, but i believe the logic correct
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>
<section>
<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-summer" role="menuitem">Summer</li>
<li id="theme-winter" role="menuitem">Winter</li>
<li id="theme-rainy" role="menuitem">Rainy</li>
</ul>
</section>
<div id="status" aria-live="polite"></div>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
body {
margin: 0;
font-family: sans-serif;
transition: background 0.3s, color 0.3s;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button,
#theme-switcher-button {
width: 10em;
height: 3em;
background-color: salmon;
border: none;
border-radius: 2px;
cursor: pointer;
}
ul {
margin: 0;
padding: 0;
margin-left: 12ch;
width: 15em;
border-radius: 2px 5px 14px;
box-shadow: 0px 1px 1px black;
background-color: white;
}
li {
padding: 1em;
cursor: pointer;
list-style: none;
}
#status {
text-align: center;
min-height: 20px;
padding-top: 100px
}
/* file: script.js */
const themes = [
{
name: "summer",
message: "Hello - sunshine its good time to fight",
color: "#eff045"
},
{
name: "winter",
message: "Winter is coming - hodor its on the way",
color: "#0B2D72"
},
{
name: "rainy",
message: "Who cares if we don't see the sunshine again? I want you more than any blue sky. The weather can go crazy!",
color: "#6d6d6d"
},
];
const btnTheme = document.querySelector("#theme-switcher-button");
const dropdownLi = document.querySelector("#theme-dropdown");
const menuItems = document.querySelectorAll("li[role='menuitem']");
const statusMsg = document.getElementById("status");
let isDropdownClick = true;
btnTheme.addEventListener("click", (event) => {
isDropdownClick = !isDropdownClick;
dropdownLi.hidden = isDropdownClick;
btnTheme.setAttribute("aria-expanded", !isDropdownClick);
event.stopPropagation()
})
document.addEventListener("click", () => {
isDropdownClick = !isDropdownClick;
dropdownLi.hidden = isDropdownClick;
btnTheme.setAttribute("aria-expanded", !isDropdownClick);
})
menuItems.forEach(item => {
item.addEventListener("mouseover", () => {
item.style.backgroundColor = "yellow"
})
item.addEventListener("mouseout", () => {
item.style.backgroundColor = ""
})
item.addEventListener("click", (event) => {
const getELContent = item.textContent.trim().toLocaleLowerCase();
const theme= themes.find((element) => element.name === getELContent)
document.body.style.backgroundColor = theme.color;
document.body.className = item.id;
statusMsg.textContent = theme.message;
statusMsg.style.color = theme.color === "#eff045" ? "black" : "white"
event.stopPropagation()
})
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36
Challenge Information:
Build a Theme Switcher - Build a Theme Switcher