Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

Automated testing says I’m failing Tests 26 & 27: BUT MY CODE IS WORKING: I click menu item and body.className = theme-name & aria-live p element gets the correct message value from themes array.

  1. When user clicks the #theme-switcher-button and selects a theme, corresponding theme- class is added to the body element.
    Failed:27. When user clicks #theme-switcher-button, selects theme, message of the selected theme from the themes array is 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="menuitem" id="theme-halloween">Halloween</li>
    <li role="menuitem" id="theme-christmas">Christmas</li>
  </ul>
  <p aria-live="polite"></p>
  <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;
}

/* file: script.js */
const themes = [
  { name: "halloween", message: "I love pumpkins and candy!" },
  { name: "christmas", message: "Merry Christmas!" }
]

const documentBody = document.body;
const themeSwitcher = document.getElementById("theme-switcher-button");
const themeMenu = document.getElementById("theme-dropdown");
const menuItem = document.querySelectorAll('[role="menuitem"]');
const ariaLiveItem = document.querySelector('p[aria-live="polite"]');

themeSwitcher.addEventListener("click", () => {
  if (themeMenu.hidden) {
    themeMenu.hidden = false;
    themeSwitcher.setAttribute("aria-expanded", "true");
  } else {
    themeMenu.hidden = true;
    themeSwitcher.setAttribute("aria-expanded", "false");
  }
});

themeMenu.addEventListener('click', function(event) {

  const clickedMenuItem = event.target.closest('[role="menuitem"]');

  if (clickedMenuItem) {
    // sets <body> class attribute to clicked menu item's ID
    document.body.className = clickedMenuItem.id;
    // document.body.classList.add(clickedMenuItem.id);

    // Get object from themes array matching 
    // lowercase text content of clicked menu item
    const themeByName = themes.find(theme => theme.name === clickedMenuItem.textContent.toLowerCase());
    // Set the text content of the aria-live p element
    // It's failing test #27 though.
    ariaLiveItem.textContent = themeByName.message;
    console.log(ariaLiveItem.textContent);
  }
});

console.log(ariaLiveItem.textContent)

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.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

When you switch to a different theme, the background color will change and a different message will display.

I’m not seeing a change to the background color when I click on a theme.

3

if the tests are checking for the background color changing this could also make it not detectable

4

That’s actually a default body style on this challenge. And it didn’t prevent my code from displaying the background color changes or passing the tests.

5

that’s good, maybe then the background color change is not actually checked, let me see…
Yeah, it is only checking that the class is applied correctly, you are right

still the tests are not detecting a change

{
    "name": "AssertionError",
    "message": "expected '' to equal 'theme-christmas'",
    "showDiff": true,
    "actual": "",
    "expected": "theme-christmas",
    "operator": "strictEqual",
   }

try having the menu close after the button is clicked maybe? otherwise it’s closed at the next click, and that may have the tests not work