DEV Community

TechElevate Office – A Modern Intranet Dashboard- Holistic Webdev Challenge

Aishika3 on July 20, 2025

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space. 📚 Table of Contents ...

Read full post

Bridget Amana • Jul 27

This is amazing!!!
Well done 👏

Aishika3 • Jul 27

Thank you

Curious_Cat • Jul 20

Great work!! 💻

Aishika3 • Jul 23

Thanks

Comment deleted

Anirban • Jul 22

hi sir

Thabasvini • Jul 25

that's awesome!

Aishika3 • Jul 26

Thank you

paulrubin1203 • Jul 25

well designed!

Aishika3 • Jul 25

Thank you

The Emily • Jul 21

Hey go girl!

Aishika3 • Jul 23

Thanks

Anirban Das • Jul 21

🤟

Aishika3 • Jul 23

Thanks

Anirban sen • Jul 20

design layout is good and transition is also beautifully engaged 👏

Aishika3 • Jul 23

Thanks

Anisha Sen • Jul 20

Great!Well done!!👍

Aishika3 • Jul 23

Thanks

The Sinha • Jul 27

Great!!

Aishika3 • Jul 28

Thank you

ATOSI • Jul 25

nice try , see you forward 🤘

Aishika3 • Jul 25

Thank you

John Smith • Jul 20

👍👍

Aishika3 • Jul 23

Thanks

Anindi • Jul 20

🔥🔥

Aishika3 • Jul 23

Thanks

Tina • Jul 21

💻🔥🔥

Aishika3 • Jul 23

Thanks

Hippo • Jul 21

Great responsiveness!!

Aishika3 • Jul 23

Thanks

Usha • Jul 21

Awesome 👌

Aishika3 • Jul 23

Thanks

Erik • Jul 21 • Edited

Wow!

Aishika3 • Jul 23

Thanks

The Shy Girl • Jul 21

Effective office website

Aishika3 • Jul 23

Thanks

Anirban • Jul 22 • Edited

so elegant

Aishika3 • Jul 23

Thanks

Rinku rima • Jul 21

👌

Aishika3 • Jul 23

Thanks

Olayinka • Jul 25

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.querySelector(".select-container");
const productsContainer = document.querySelector(".products-container");

function instrumentCards(instrumentCategory) {
const filtered =
instrumentCategory === "all"
? instrumentsArr
: instrumentsArr.filter(instrument => instrument.category === instrumentCategory);

let html = "";

for (let i = 0; i < filtered.length; i++) {
html += <div class="card"> <h2>${filtered[i].instrument}</h2> <p>$${filtered[i].price}</p> </div>;
}

return html;
}

selectContainer.addEventListener("change", function () {
const selectedValue = this.value;
productsContainer.innerHTML = instrumentCards(selectedValue);
});

productsContainer.innerHTML = instrumentCards("all"); When the dropdown menu option is changed you should set the inner HTML of productsContainer to the result of the instrumentCards function called with the selected option as argument. code won't pass. this code won't pass, please i do need solution to this