Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

  1. 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" role="menu" aria-labelledby="theme-switcher-button" hidden>
      <li role="menu-item" class="light" id="theme-light">Light</li>
      <li role="menu-item" class="dark" id="theme-dark">Dark</li>
      <li role="menu-item" class="gray" id="theme-gray">Gray</li>
      <li role="menu-item" class="green" id="theme-green">Green</li>
  </ul>
  <div id="status" 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;
}

.theme-light {
  background-color: #F0FFFF;
  color: #333333;
}

.theme-dark {
  background-color: #000000;
  color: white;
}

.theme-gray {
  background-color: #A9A9A9;
  color: blue;
}

.theme-green {
  background-color: #008000;
  color: yellow;
}

/* file: script.js */
const themes = [
  {name: "light", message: "Sunshine"},
  {name: "dark", message: "Dark sky"},
  {name: "gray", message: "Morning is coming!"},
  {name: "green", message: "Look surroundings"}
];

const themeSwitcherBtn = document.getElementById("theme-switcher-button");
const themeDropdown = document.getElementById("theme-dropdown");
const menuItems = document.querySelectorAll('[role="menu-item"]');
const statusEl = document.getElementById("status");
const body = document.body;

function toggleTheme() {
  const isHidden = themeDropdown.hasAttribute('hidden');
  if (isHidden) {
    themeDropdown.removeAttribute('hidden');
    themeSwitcherBtn.setAttribute("aria-expanded", "true");
  } else {
    themeDropdown.setAttribute("hidden", "");
    themeSwitcherBtn.setAttribute("aria-expanded", "false");
  }

}

themeSwitcherBtn.addEventListener("click", () => {
  toggleTheme();

  menuItems.forEach(item => {
    item.addEventListener("click", () => {
      const id = item.id;
      body.className = id;

      const themeObject = themes.find(theme => theme.name === id);
      if (themeObject && statusEl) {
      statusEl.textContent = themeObject.message;
      } 

      themeSwitcherBtn.setAttribute("aria-expanded", "false");
      themeDropdown.hidden = true;
    
    })
  }) 
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher
https://www.freecodecamp.org/learn/full-stack-developer/lab-theme-switcher/lab-theme-switcher

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

i passed the test now, XD

the problem was i got confused with the find method there.:sweat_smile: