Hi, doing the build a music instrument project. Now up to step 13. I have tried for the past 4 or almost 4 days to get step 13 passing. My java script editor is blank. Have tried to then copy and paste the code. I then selected the drop down menu in the browser preview area. And changed it to either woodwinds, brass or percussion. But the test is not passing, says the drop down add event listener function is not being triggered. Using jaws 2025, tried nvda, but it struggled and got stuck in the editor and would only move hwen I then went to the bottom of the window. To hear the other controls. Similar experience with windows narrator. Got stuck in the js editor, and only moved to the bottom of the screen, then could hear the other controls like the preview window. Have tried multiple browsers, edge, firefox, chrome. But it will not pass. So pasting my html and javas script code below.
So, is it fcc having a bug, a problem or an issue? Old javascript code as trying to get this to pass, did save it in chrome. Then also did try deleting the local data cookies, and cache in free code camp on chrome, and it deleted it, then signed out and signed back into free code camp. No it is not passing and cannot move forward in the project. Can you help? Is this with me that I am the only one having this issue. Did ask on the forum, but no one else is having this issue. Did try googling for other code csamples. Did find some, but from what I heard with jaws, the code is almost the same or almost very similar. So just totally frustrated. And yes reset the lesson multiple times. So if you can take a look, if you need maybe to deleted the old javascript or left over code from the server at your end, it may pass. Unless I have something wrong with my code, take a look and let me know. Trying my best. Have been methodical, trying to research and trying different approaches. But it will not pass. So this is just driving me insane. It should not, but maybe it will never pass. So cannot complete the project. Only one step left. Also will also paste my stylesheet as well. Thanks for your help. Only blind student doing the full stack developer. Unless there are other totally blind or low vision users on the course. Only blind person on the forum.
Thanks for my rant. And frustration.
Marvin hunkin from Seaford Rise, South Australia, Australia.
Ps: pasting my html, javascript and style sheet code below.
Music Instruments Store
Music Instruments
<label for="category-select">Category:</label>
<select id="category-select">
<option value="all">All</option>
<option value="woodwinds">Woodwinds</option>
<option value="brass">Brass</option>
<option value="percussion">Percussion</option>
</select>
const instrumentsArr = [
{ category: "woodwinds", instrument: "Flute", price: 500 },
{ category: "woodwinds", instrument: "Clarinet", price: 200 },
{ category: "woodwinds", instrument: "Oboe", price: 4000 },
{ category: "brass", instrument: "Trumpet", price: 200 },
{ category: "brass", instrument: "Trombone", price: 300 },
{ category: "brass", instrument: "French Horn", price: 4300 },
{ category: "percussion", instrument: "Drum Set", price: 500 },
{ category: "percussion", instrument: "Xylophone", price: 3000 },
{ category: "percussion", instrument: "Cymbals", price: 200 },
{ category: "percussion", instrument: "Marimba", price: 3000 }
];
const selectContainer = document.getElementById(“category-select”);
const productsContainer = document.querySelector(“.products-container”);
function instrumentCards(instrumentCategory) {
const instruments = instrumentCategory === "all" ? instrumentsArr : instrumentsArr.filter(function(item) {
return item.category === instrumentCategory;
});
return instruments
.map(function(item) {
return \` <div class="card"> <h2>${item.instrument}</h2> <p>$${item.price}</p> </div> \`;
}) .join("");
}
function updateProducts() {
productsContainer.innerHTML = instrumentCards(selectContainer.value);
}
selectContainer.addEventListener(“change”, updateProducts);
productsContainer.innerHTML = instrumentCards("all");
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
color: #333;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 25px 0;
}
header h1 {
margin: 0;
font-size: 2.2rem;
}
#filter {
display: block;
margin: 20px auto;
padding: 10px 15px;
font-size: 1rem;
border-radius: 5px;
border: 1px solid #ccc;
}
#productsContainer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-bottom: 15px;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.card img {
width: 100%;
height: 180px;
object-fit: cover;
border-bottom: 1px solid #eee;
}
.card h3 {
margin: 12px 0 8px;
font-size: 1.1rem;
color: #333;
}
.card p {
margin: 0 10px;
font-size: 0.9rem;
color: #666;
}
.card[data-type=“string”] {
border-top: 4px solid #FF6F61; /* reddish */
}
.card[data-type=“percussion”] {
border-top: 4px solid #6B5B95; /* purple */
}
.card[data-type=“wind”] {
border-top: 4px solid #88B04B; /* green */
}
@media (max-width: 600px) {
#productsContainer {
grid-template-columns: 1fr;
padding: 10px;
}
.card img {
height: 150px;
}
}
From: hunkinmarvin5@gmail.com hunkinmarvin5@gmail.com
Sent: Wednesday, 10 September 2025 11:33 AM
To: ‘Quincy Larson’ quincy@freecodecamp.org
Subject: RE: accessibility challenges free code camp
Hi, tried the script editor with nvda and widnwos narrator, jaws performs best with that, got stuck in the script editor, and had to jump to the bottom fo the window, to then hear the othercontrols.
Thanks..
From: Quincy Larson <quincy@freecodecamp.org>
Sent: Wednesday, 10 September 2025 9:16 AM
To: hunkinmarvin5@gmail.com
Cc: freeCodeCamp Support <support@freecodecamp.org>
Subject: Re: accessibility challenges free code camp
Hi Marvin,
First of all, thanks for your patience. Your feedback is extremely helpful, since we want freeCodeCamp to work great for people using screen readers. I’m CC’ing Kris, who can look into this and maybe figure out what’s going on.
On Sat, Sep 6, 2025 at 11:34 PM <hunkinmarvin5@gmail.com> wrote:
Hi Quincy. Hope you are well. Okay totally blind and using jaws 2025, windows 11 and chrome. Now up to the build a music filter. Now up to step 13, and now the step wont pass. Have tried rewriting the javascript code, have tried googling. Also asked on the forum. But got a bad experience. The people on the forum trying to help, were not very helpful. A bit harsh and not understanding I use a screen reader and blind. So, the page in the browser shows the correct category and also the function returns a list of string and the updated event listener shows the correct category. So it is not passing. Have tried 40 or more times. So just at my wits end. Is it a fcc bug or is the fcc editor just very picky! So can you help me out? Also another accessibility improvement and a regression, no verbal that where to put the new updated code or which spot to put in each step challenge, that would be helpful for other blind developers.also doing the full stack developer beta program. So will you be launching the accessibility module inside the javascript.
Thanks.
Marvin from seaford rise, south Australia, Australia..negative