Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

Hello, the test number 21 is that themes array property name should match exactly with li element values and I am really confused why that test doesn’t pass. My whole code works as it is supposed to do, however it also doesn’t recognize test 27, which is to have the messages 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 value="theme-light "id="theme-light"  role="menu-item">Light</li>
<li id="theme-dark" value="theme-dark" role="menu-item">Dark</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;
  cursor: pointer;
  margin: 5px 0;
}
li:hover {
  color: gray;
}
#status {
  text-align: center;
  min-height: 20px;
}

.theme-light {
  color: white;
  background-color: yellow;
}

.theme-dark {
  color: lightgreen;
  background-color: darkblue;
}

/* file: script.js */
const switcherBtn = document.getElementById("theme-switcher-button");
const themeDrop = document.getElementById("theme-dropdown");
const p = document.querySelector("[aria-live='polite']")

const themes = [
  { name: "theme-light", message: "The brightness is on!" },
  { name: "theme-dark",  message: "The darkness is on!" }
];

switcherBtn.addEventListener("click", () => {
  themeDrop.hidden = !themeDrop.hidden;
  switcherBtn.setAttribute("aria-expanded", themeDrop.hidden ? "false" : "true");
  p.innerText = '';
  document.body.className = '';
});

themeDrop.querySelectorAll("li").forEach(item => {
  item.addEventListener("click", () => {
    const id = item.id;
    document.body.className = id;

    const themeObj = themes.find(t => t.name === id);
    p.innerText = themeObj.message;

    themeDrop.hidden = true;
    switcherBtn.setAttribute("aria-expanded", "false");
  });
});

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

Welcome to the forum :wave:

Be careful of implementation details and make sure to review the user stories. Those are the instructions.

  1. Your ul element should have at least two li elements with a role attribute set to "menu-item" and text of your choice representing a different theme.
  1. Each of your li elements should have an id attribute that starts with theme- and ends with the theme you set for the li element text. For example, if one of your themes is Light then your id should be theme-light.

Don’t use a value attribute for the li, this isn’t what it’s for. The value will be the word you put between the tags. The instructions also don’t mention a value attribute so you shouldn’t add it.

The value attribute specifies a number for a list item. The value attribute is used only with the <ol> element.
https://www.w3docs.com/learn-html/html-li-tag.html

3

Thank you so much! I got both tests right now :slight_smile:

1 Like
4

how did you fixed the prloblem?

5

hi @raimis15lvus , please create your own topic to ask for help

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.