diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 38dbf1e2438..aed83b7e0fe 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -2838,7 +2838,12 @@
"In these lecture videos, you will learn about the event object and event delegation."
]
},
- "lbyi": { "title": "193", "intro": [] },
+ "workshop-music-instrument-filter": {
+ "title": "Build a Music Instrument Filter",
+ "intro": [
+ "In this workshop, you will build a music instrument filter with JavaScript."
+ ]
+ },
"lab-real-time-counter": {
"title": "Build a Real Time Counter",
"intro": ["In this lab, you will build a real-time character counter"]
diff --git a/client/src/pages/learn/full-stack-developer/workshop-music-instrument-filter/index.md b/client/src/pages/learn/full-stack-developer/workshop-music-instrument-filter/index.md
new file mode 100644
index 00000000000..ad66ea5ddd2
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/workshop-music-instrument-filter/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build a Music Instrument Filter
+block: workshop-music-instrument-filter
+superBlock: full-stack-developer
+---
+
+## Introduction to the Build a Music Instrument Filter
+
+In this workshop, you will build a music instrument filter with JavaScript.
diff --git a/curriculum/challenges/_meta/workshop-music-instrument-filter/meta.json b/curriculum/challenges/_meta/workshop-music-instrument-filter/meta.json
new file mode 100644
index 00000000000..ed02c0a1bc4
--- /dev/null
+++ b/curriculum/challenges/_meta/workshop-music-instrument-filter/meta.json
@@ -0,0 +1,69 @@
+{
+ "name": "Build a Music Instrument Filter",
+ "blockType": "workshop",
+ "blockLayout": "challenge-grid",
+ "isUpcomingChange": true,
+ "usesMultifileEditor": true,
+ "hasEditableBoundaries": true,
+ "dashedName": "workshop-music-instrument-filter",
+ "superBlock": "full-stack-developer",
+ "challengeOrder": [
+ {
+ "id": "6720fc487ab844522b5aa036",
+ "title": "Step 1"
+ },
+ {
+ "id": "6721089b71655f803ce3bef2",
+ "title": "Step 2"
+ },
+ {
+ "id": "67210c430ddf4889785aca66",
+ "title": "Step 3"
+ },
+ {
+ "id": "67210ef0bbb7c895a7351b0d",
+ "title": "Step 4"
+ },
+ {
+ "id": "672110bda073669bcc2302e6",
+ "title": "Step 5"
+ },
+ {
+ "id": "6721128fdf008f9fd484486a",
+ "title": "Step 6"
+ },
+ {
+ "id": "6721134b2844faa0be27c791",
+ "title": "Step 7"
+ },
+ {
+ "id": "6721145f25a6b9a1a5d19461",
+ "title": "Step 8"
+ },
+ {
+ "id": "67211aa4a8959cc122dfa0bb",
+ "title": "Step 9"
+ },
+ {
+ "id": "672134eef863b05aaee80c75",
+ "title": "Step 10"
+ },
+ {
+ "id": "67213641373a23696b74424b",
+ "title": "Step 11"
+ },
+ {
+ "id": "672137c47fa88d6f753f6d0b",
+ "title": "Step 12"
+ },
+ {
+ "id": "67213ce0a2ba1278a38df3a5",
+ "title": "Step 13"
+ },
+ {
+ "id": "672146dde7104896adb274ae",
+ "title": "Step 14"
+ }
+ ],
+ "helpCategory": "JavaScript"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6720fc487ab844522b5aa036.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6720fc487ab844522b5aa036.md
new file mode 100644
index 00000000000..6b550b4ccce
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6720fc487ab844522b5aa036.md
@@ -0,0 +1,155 @@
+---
+id: 6720fc487ab844522b5aa036
+title: Step 1
+challengeType: 0
+dashedName: step-1
+demoType: onLoad
+---
+
+# --description--
+
+You have been provided with a page containing several instrument cards. You are going to add functionality to this static page so you'll be able to filter the instruments depending on their family.
+
+Start by creating a dropdown menu with the class of `select-container`.
+
+# --hints--
+
+You should have a `select` element.
+
+```js
+assert.exists(document.querySelector("select"));
+```
+
+Your `select` element should have the class `select-container`.
+
+```js
+assert.equal(document.querySelector("select").getAttribute("class"), "select-container");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Music Instruments product page
+ Student Instruments
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6721089b71655f803ce3bef2.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6721089b71655f803ce3bef2.md
new file mode 100644
index 00000000000..09dcfb7e516
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6721089b71655f803ce3bef2.md
@@ -0,0 +1,200 @@
+---
+id: 6721089b71655f803ce3bef2
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Now add four options to your dropdown, `All`, `Woodwinds`, `Brass`, and `Percussion`, in this order. For each option, use the lowercase option to specify the `id` attribute and the `value` attribute.
+
+# --hints--
+
+You should have four `option` elements in your `select` element.
+
+```js
+assert.lengthOf(document.querySelectorAll("select>option"), 4);
+```
+
+Your first `option` element should have the text `All`.
+
+```js
+assert.equal(document.querySelectorAll("select>option")[0].innerText,"All");
+```
+
+Your `All` option should have an `id` attribute and a `value` attribute with the value `all`.
+
+```js
+assert.equal(document.querySelectorAll("select>option")[0].getAttribute("id"),"all");
+assert.equal(document.querySelectorAll("select>option")[0].getAttribute("value"),"all");
+```
+
+Your second `option` element should have the text `Woodwinds`.
+
+```js
+assert.equal(document.querySelectorAll("select>option")[1].innerText,"Woodwinds");
+```
+
+Your `Woodwinds` option should have an `id` attribute and a `value` attribute with the value `woodwinds`.
+
+```js
+assert.equal(document.querySelectorAll("select>option")[1].getAttribute("id"),"woodwinds");
+assert.equal(document.querySelectorAll("select>option")[1].getAttribute("value"),"woodwinds");
+```
+
+Your third `option` element should have the text `Brass`.
+
+```js
+assert.equal(document.querySelectorAll("select>option")[2].innerText,"Brass");
+```
+
+Your `Brass` option should have an `id` attribute and a `value` attribute with the value `brass`.
+
+```js
+assert.equal(document.querySelectorAll("select>option")[2].getAttribute("id"),"brass");
+assert.equal(document.querySelectorAll("select>option")[2].getAttribute("value"),"brass");
+```
+
+Your fourth `option` element should have the text `Percussion`.
+
+```js
+assert.equal(document.querySelectorAll("select>option")[3].innerText,"Percussion");
+```
+
+Your `Percussion` option should have an `id` attribute and a `value` attribute with the value `percussion`.
+
+```js
+assert.equal(document.querySelectorAll("select>option")[3].getAttribute("id"),"percussion");
+assert.equal(document.querySelectorAll("select>option")[3].getAttribute("value"),"percussion");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Music Instruments product page
+ Student Instruments
+
+
+--fcc-editable-region--
+
+
+
+--fcc-editable-region--
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67210c430ddf4889785aca66.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67210c430ddf4889785aca66.md
new file mode 100644
index 00000000000..6d763c6806d
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67210c430ddf4889785aca66.md
@@ -0,0 +1,154 @@
+---
+id: 67210c430ddf4889785aca66
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Before starting to add the filter functionality to your page, link your `script.js` file to the HTML.
+
+# --hints--
+
+You should have a `script` element with the `src` attribute set to `script.js`.
+
+```js
+const script = document.querySelector("body>script");
+assert.match(script?.getAttribute("data-src"), /(?:\.\/)?script\.js/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67210ef0bbb7c895a7351b0d.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67210ef0bbb7c895a7351b0d.md
new file mode 100644
index 00000000000..41f47b1ae53
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67210ef0bbb7c895a7351b0d.md
@@ -0,0 +1,158 @@
+---
+id: 67210ef0bbb7c895a7351b0d
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Declare an empty array named `instrumentsArr`.
+
+# --hints--
+
+You should have an empty array named `instrumentsArr`.
+
+```js
+assert.isArray(instrumentsArr);
+assert.isEmpty(instrumentsArr);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672110bda073669bcc2302e6.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672110bda073669bcc2302e6.md
new file mode 100644
index 00000000000..e5f4f9fa438
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672110bda073669bcc2302e6.md
@@ -0,0 +1,185 @@
+---
+id: 672110bda073669bcc2302e6
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+`instrumentsArr` is going to hold an objects for each of your instrument cards. Each object will have the keys `category`, `instrument`, and `price`.
+
+Add a first object representing the flute to your array. For the values use `woodwinds`, `Flute`, and `500`, respectively.
+
+# --hints--
+
+Your `instrumentsArr` array should have one element.
+
+```js
+assert.lengthOf(instrumentsArr, 1);
+```
+
+You should have one object inside `instrumentsArr`.
+
+```js
+assert.isObject(instrumentsArr[0]);
+```
+
+The object inside `instrumentsArr` should have a `category` key with the value `woodwinds`.
+
+```js
+assert.equal(instrumentsArr[0].category, "woodwinds");
+```
+
+The object inside `instrumentsArr` should have an `instrument` key with the value `Flute`.
+
+```js
+assert.equal(instrumentsArr[0].instrument, "Flute");
+```
+
+The object inside `instrumentsArr` should have a `price` key with the value `500`.
+
+```js
+assert.strictEqual(instrumentsArr[0].price, 500);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
+
+```js
+--fcc-editable-region--
+const instrumentsArr = [
+
+]
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6721128fdf008f9fd484486a.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6721128fdf008f9fd484486a.md
new file mode 100644
index 00000000000..991ffd0ab99
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6721128fdf008f9fd484486a.md
@@ -0,0 +1,171 @@
+---
+id: 6721128fdf008f9fd484486a
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Add another two objects to your `instrumentsArr` to represent the remaining woodwinds instruments, clarinet and oboe.
+
+# --hints--
+
+You should have `{ category: "woodwinds", instrument: "Clarinet", price: 200 }` inside your `instrumentsArr`.
+
+```js
+assert.deepInclude(instrumentsArr, { category: "woodwinds", instrument: "Clarinet", price: 200 });
+```
+
+You should have `{ category: "woodwinds", instrument: "Oboe", price: 4000 }` inside your `instrumentsArr`.
+
+```js
+assert.deepInclude(instrumentsArr, { category: "woodwinds", instrument: "Oboe", price: 4000 });
+```
+
+You should still have `{ category: "woodwinds", instrument: "Flute", price: 500 }` inside your `instrumentsArr`.
+
+```js
+assert.deepInclude(instrumentsArr, { category: "woodwinds", instrument: "Flute", price: 500 });
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
+
+```js
+--fcc-editable-region--
+const instrumentsArr = [
+ { category: "woodwinds", instrument: "Flute", price: 500 }
+]
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6721134b2844faa0be27c791.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6721134b2844faa0be27c791.md
new file mode 100644
index 00000000000..48dc6edcdbf
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6721134b2844faa0be27c791.md
@@ -0,0 +1,189 @@
+---
+id: 6721134b2844faa0be27c791
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The remaining instruments have been added for you to the `instrumentsArr` array.
+
+Now, declare two variables `selectContainer` and `productsContainer` and assign them your HTML dropdown and the element with the class `products-container`, respectively.
+
+# --hints--
+
+You should have a `selectContainer` variable.
+
+```js
+assert.exists(selectContainer);
+```
+
+Your `selectContainer` variable should have the value of your `select` element.
+
+```js
+assert.strictEqual(selectContainer, document.querySelector("select"));
+```
+
+You should have a `productsContainer` variable.
+
+```js
+assert.exists(productsContainer);
+```
+
+Your `productsContainer` variable should have the value of your `.products-container` element.
+
+```js
+assert.strictEqual(productsContainer, document.querySelector(".products-container"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
+
+```js
+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 }
+]
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6721145f25a6b9a1a5d19461.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6721145f25a6b9a1a5d19461.md
new file mode 100644
index 00000000000..4c86bd0c540
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/6721145f25a6b9a1a5d19461.md
@@ -0,0 +1,184 @@
+---
+id: 6721145f25a6b9a1a5d19461
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+As you learned in the previous lesson videos, the `change` event is triggered when the user modifies the value of certain input elements. You want to be able to update your page any time that a new value is picked from the dropdown menu. For that, add an event listener for the `change` event to `selectContainer`.
+
+For now, inside the callback, log the string `this is a test` to the console. Then, select different options from your dropdown menu and check the console to test that the event listener works correctly.
+
+# --hints--
+
+You should add an event listener for the `change` event to `selectContainer` and log the string `this is a test` inside the callback passed to the method.
+
+```js
+let flag = false;
+const temp = console.log;
+console.log = (arg) => {
+ if (arg === "this is a test") flag = true;
+}
+try {
+ selectContainer.dispatchEvent(new Event("change"));
+ assert.isTrue(flag);
+} finally {
+ console.log = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
+
+```js
+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");
+const productsContainer = document.querySelector(".products-container");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67211aa4a8959cc122dfa0bb.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67211aa4a8959cc122dfa0bb.md
new file mode 100644
index 00000000000..de2345905ed
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67211aa4a8959cc122dfa0bb.md
@@ -0,0 +1,184 @@
+---
+id: 67211aa4a8959cc122dfa0bb
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Modify your `console.log` call to log the selected value from the dropdown.
+
+# --hints--
+
+You should log the selected value from the dropdown when a `change` event is triggered on `selectContainer`.
+
+```js
+let flag = false;
+const temp = console.log;
+console.log = (arg) => {
+ if (arg === selectContainer.value) flag = true;
+}
+try {
+ selectContainer.dispatchEvent(new Event("change"));
+ assert.isTrue(flag);
+} finally {
+ console.log = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
+
+```js
+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");
+const productsContainer = document.querySelector(".products-container");
+--fcc-editable-region--
+selectContainer.addEventListener("change", () => {
+ console.log("this is a test");
+});
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672134eef863b05aaee80c75.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672134eef863b05aaee80c75.md
new file mode 100644
index 00000000000..52c68ae6a79
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672134eef863b05aaee80c75.md
@@ -0,0 +1,181 @@
+---
+id: 672134eef863b05aaee80c75
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+To implement the filter functionality, you'll need a function. Declare an empty function named `instrumentCards` that takes a single parameter.
+
+# --hints--
+
+You should have a function named `instrumentCards`.
+
+```js
+assert.isFunction(instrumentCards);
+```
+
+Your `instrumentCards` function should take a single parameter.
+
+```js
+assert.lengthOf(instrumentCards, 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
+
+```js
+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");
+const productsContainer = document.querySelector(".products-container");
+--fcc-editable-region--
+
+--fcc-editable-region--
+selectContainer.addEventListener("change", () => {
+ console.log(selectContainer.value);
+});
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67213641373a23696b74424b.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67213641373a23696b74424b.md
new file mode 100644
index 00000000000..f6b2c759e96
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67213641373a23696b74424b.md
@@ -0,0 +1,216 @@
+---
+id: 67213641373a23696b74424b
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Within your new function, you need to filter the instruments depending on the selected category.
+
+Filter out items from `instrumentsArr` and make your function return an array containing the instrument objects with the the same category of `instrumentCategory`. If `instrumentCategory` is equal to `all`, return the whole `instrumentsArr` array.
+
+Then, remove the `console.log` from the callback of your event listener and log the result of calling `instrumentCards` with the selected option from the dropdown menu as argument so you can test your function selecting different category options.
+
+# --hints--
+
+`instrumentCards("all")` should return `instrumentsArr`.
+
+```js
+assert.sameDeepMembers(instrumentCards("all"), instrumentsArr);
+```
+
+`instrumentCards("woodwinds")` should return `[{ category: "woodwinds", instrument: "Flute", price: 500 }, { category: "woodwinds", instrument: "Clarinet", price: 200 }, { category: "woodwinds", instrument: "Oboe", price: 4000 }]`.
+
+```js
+assert.sameDeepMembers(instrumentCards("woodwinds"), [{ category: "woodwinds", instrument: "Flute", price: 500 }, { category: "woodwinds", instrument: "Clarinet", price: 200 }, { category: "woodwinds", instrument: "Oboe", price: 4000 }]);
+```
+
+`instrumentCards("brass")` should return `[{ category: "brass", instrument: "Trumpet", price: 200 }, { category: "brass", instrument: "Trombone", price: 300 }, { category: "brass", instrument: "French Horn", price: 4300 }]`.
+
+```js
+assert.sameDeepMembers(instrumentCards("brass"), [{ category: "brass", instrument: "Trumpet", price: 200 }, { category: "brass", instrument: "Trombone", price: 300 }, { category: "brass", instrument: "French Horn", price: 4300 }]);
+```
+
+`instrumentCards("percussion")` should return `[{ 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 }]`.
+
+```js
+assert.sameDeepMembers(instrumentCards("percussion"), [{ 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 }]);
+```
+
+When you change the selected category from the dropdown menu, you should log the result of `instrumentCards(selectContainer.value)` to the console.
+
+```js
+let flag = false;
+const temp = console.log;
+console.log = (arg) => {
+ if (arg === instrumentCards(selectContainer.value)) flag = true;
+}
+try {
+ selectContainer.dispatchEvent(new Event("change"));
+ assert.isTrue(flag);
+} finally {
+ console.log = temp;
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
+
+```js
+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");
+const productsContainer = document.querySelector(".products-container");
+--fcc-editable-region--
+function instrumentCards(instrumentCategory) {
+
+}
+
+selectContainer.addEventListener("change", () => {
+ console.log(selectContainer.value);
+});
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672137c47fa88d6f753f6d0b.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672137c47fa88d6f753f6d0b.md
new file mode 100644
index 00000000000..7642bd30684
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672137c47fa88d6f753f6d0b.md
@@ -0,0 +1,333 @@
+---
+id: 672137c47fa88d6f753f6d0b
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Currently, your `instrumentCards` function returns an array with instrument objects, so you'll need another couple of steps before you can display your instrument cards on the page.
+
+Modify your function so that it returns an array of strings containing the HTML code to display the instrument cards, each string corresponding to an object in the `instruments` array. The strings should have this format ``
+
+# --hints--
+
+`instrumentCards("all")` should return an array of strings representing instrument cards, each with the format ``.
+
+```js
+const all = instrumentCards("all");
+assert.isNotEmpty(all);
+all.forEach(i => {
+ assert.match(i, regex)
+})
+```
+
+`instrumentCards("woodwinds")` should return an array of strings representing instrument cards, each with the format ``.
+
+```js
+const woodwinds = instrumentCards("woodwinds");
+assert.isNotEmpty(woodwinds);
+woodwinds.forEach(i => {
+ assert.match(i, regex)
+})
+```
+
+`instrumentCards("brass")` should return an array of strings representing instrument cards, each with the format ``.
+
+```js
+const brass = instrumentCards("brass");
+assert.isNotEmpty(brass);
+brass.forEach(i => {
+ assert.match(i, regex)
+})
+```
+
+`instrumentCards("percussion")` should return an array of strings representing instrument cards, each with the format ``.
+
+```js
+const percussion = instrumentCards("percussion");
+assert.isNotEmpty(percussion);
+percussion.forEach(i => {
+ assert.match(i, regex)
+})
+```
+
+`instrumentCards("all")` should return an array with ten strings representing the instrument cards for all the instruments on your page.
+
+```js
+const instrArr = getInstrumentsArr("all");
+const testDiv = document.createElement("div");
+testDiv.innerHTML = instrumentCards("all").join("");
+const cards = testDiv.querySelectorAll('div[class="card"]');
+assert.lengthOf(cards, 10);
+Array.from(cards).forEach(card => {
+ const h2 = card.firstElementChild;
+ assert.equal(h2.tagName, "H2");
+ const instrObjIndex = instrArr.findIndex(el => el.instrument === h2.innerText);
+ const p = card.lastElementChild;
+ assert.equal(p.tagName, "P");
+ assert.equal(p.previousElementSibling, h2);
+ assert.equal(p.innerText, `$${instrArr[instrObjIndex].price}`);
+ instrArr.splice(instrObjIndex, 1);
+})
+assert.isEmpty(instrArr);
+```
+
+`instrumentCards("woodwinds")` should return an array with three strings representing the instrument cards for the woodwind instruments on your page.
+
+```js
+const instrArr = getInstrumentsArr("woodwinds");
+const testDiv = document.createElement("div");
+testDiv.innerHTML = instrumentCards("woodwinds").join("");
+const cards = testDiv.querySelectorAll('div[class="card"]');
+assert.lengthOf(cards, 3);
+Array.from(cards).forEach(card => {
+ const h2 = card.firstElementChild;
+ assert.equal(h2.tagName, "H2");
+ const instrObjIndex = instrArr.findIndex(el => el.instrument === h2.innerText);
+ const p = card.lastElementChild;
+ assert.equal(p.tagName, "P");
+ assert.equal(p.previousElementSibling, h2);
+ assert.equal(p.innerText, `$${instrArr[instrObjIndex].price}`);
+ instrArr.splice(instrObjIndex, 1);
+})
+assert.isEmpty(instrArr);
+```
+
+`instrumentCards("brass")` should return an array with three strings representing the instrument cards for the brass instruments on your page.
+
+```js
+const instrArr = getInstrumentsArr("brass");
+const testDiv = document.createElement("div");
+testDiv.innerHTML = instrumentCards("brass").join("");
+const cards = testDiv.querySelectorAll('div[class="card"]');
+assert.lengthOf(cards, 3);
+Array.from(cards).forEach(card => {
+ const h2 = card.firstElementChild;
+ assert.equal(h2.tagName, "H2");
+ const instrObjIndex = instrArr.findIndex(el => el.instrument === h2.innerText);
+ const p = card.lastElementChild;
+ assert.equal(p.tagName, "P");
+ assert.equal(p.previousElementSibling, h2);
+ assert.equal(p.innerText, `$${instrArr[instrObjIndex].price}`);
+ instrArr.splice(instrObjIndex, 1);
+})
+assert.isEmpty(instrArr);
+```
+
+`instrumentCards("percussion")` should return an array with four strings representing the instrument cards for the percussion instruments on your page.
+
+```js
+const instrArr = getInstrumentsArr("percussion");
+const testDiv = document.createElement("div");
+testDiv.innerHTML = instrumentCards("percussion").join("");
+const cards = testDiv.querySelectorAll('div[class="card"]');
+assert.lengthOf(cards, 4);
+Array.from(cards).forEach(card => {
+ const h2 = card.firstElementChild;
+ assert.equal(h2.tagName, "H2");
+ const instrObjIndex = instrArr.findIndex(el => el.instrument === h2.innerText);
+ const p = card.lastElementChild;
+ assert.equal(p.tagName, "P");
+ assert.equal(p.previousElementSibling, h2);
+ assert.equal(p.innerText, `$${instrArr[instrObjIndex].price}`);
+ instrArr.splice(instrObjIndex, 1);
+})
+assert.isEmpty(instrArr);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const allInstrmnts = [
+ { 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 }
+]
+function getInstrumentsArr(instrumentCategory) {
+ const instruments =
+ instrumentCategory === "all"
+ ? JSON.parse(JSON.stringify(allInstrmnts))
+ : allInstrmnts.filter(
+ ({ category }) => category === instrumentCategory
+ );
+
+ return instruments
+}
+
+const regex = /<\s*div\s+class=('|")card\1\s*>\s*<\s*h2\s*>[\s\w]+?<\/\s*h2\s*>\s*<\s*p\s*>\$\d+?<\/\s*p\s*>\s*<\/\s*div\s*>/;
+```
+
+## --seed-contents--
+
+```html
+
+
+
+ Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
+
+```js
+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");
+const productsContainer = document.querySelector(".products-container");
+--fcc-editable-region--
+function instrumentCards(instrumentCategory) {
+ const instruments =
+ instrumentCategory === "all"
+ ? instrumentsArr
+ : instrumentsArr.filter(
+ ({ category }) => category === instrumentCategory
+ );
+
+ return instruments
+}
+--fcc-editable-region--
+selectContainer.addEventListener("change", () => {
+ console.log(instrumentCards(selectContainer.value));
+});
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67213ce0a2ba1278a38df3a5.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67213ce0a2ba1278a38df3a5.md
new file mode 100644
index 00000000000..2c9ba5b28da
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/67213ce0a2ba1278a38df3a5.md
@@ -0,0 +1,270 @@
+---
+id: 67213ce0a2ba1278a38df3a5
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Remove your `console.log` from the event listener and set the inner HTML of `productsContainer` to the result of calling `instrumentCards` with the selected category option.
+
+Then, select different options from your dropdown and see the result in the preview window.
+
+# --hints--
+
+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.
+
+```js
+let cardsArr = getCardsArr("all");
+const testDiv = document.createElement("div");
+testDiv.classList.add("products-container");
+testDiv.innerHTML = cardsArr;
+selectContainer.value = "all";
+selectContainer.dispatchEvent(new Event("change"));
+assert(productsContainer.isEqualNode(testDiv))
+
+cardsArr = getCardsArr("woodwinds");
+testDiv.innerHTML = cardsArr;
+selectContainer.value = "woodwinds";
+selectContainer.dispatchEvent(new Event("change"));
+assert(productsContainer.isEqualNode(testDiv))
+
+cardsArr = getCardsArr("brass");
+testDiv.innerHTML = cardsArr;
+selectContainer.value = "brass";
+selectContainer.dispatchEvent(new Event("change"));
+assert(productsContainer.isEqualNode(testDiv))
+
+cardsArr = getCardsArr("percussion");
+testDiv.innerHTML = cardsArr;
+selectContainer.value = "percussion";
+selectContainer.dispatchEvent(new Event("change"));
+assert(productsContainer.isEqualNode(testDiv))
+```
+
+You should remove `console.log(instrumentCards(selectContainer.value))` from your event listener's callback.
+
+```js
+let flag = false;
+const temp = console.log;
+console.log = (arg) => {
+ if (arg === instrumentCards(selectContainer.value)) flag = true;
+}
+try {
+ selectContainer.dispatchEvent(new Event("change"));
+ assert.isFalse(flag);
+} finally {
+ console.log = temp;
+}
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const allInstrmnts = [
+ { 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 }
+]
+function getCardsArr(family) {
+ const instrmnts =
+ family === "all"
+ ? allInstrmnts
+ : allInstrmnts.filter(
+ ({ category }) => category === family
+ );
+
+ return instrmnts
+ .map(({ instrument, price }) => {
+ return `
+
+
${instrument}
+
$${price}
+
Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
+
+```js
+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");
+const productsContainer = document.querySelector(".products-container");
+
+function instrumentCards(instrumentCategory) {
+ const instruments =
+ instrumentCategory === "all"
+ ? instrumentsArr
+ : instrumentsArr.filter(
+ ({ category }) => category === instrumentCategory
+ );
+
+ return instruments
+ .map(({ instrument, price }) => {
+ return `
+
+
${instrument}
+
$${price}
+
+
${instrument}
+
$${price}
+
Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
+
+```js
+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");
+const productsContainer = document.querySelector(".products-container");
+--fcc-editable-region--
+function instrumentCards(instrumentCategory) {
+ const instruments =
+ instrumentCategory === "all"
+ ? instrumentsArr
+ : instrumentsArr.filter(
+ ({ category }) => category === instrumentCategory
+ );
+
+ return instruments
+ .map(({ instrument, price }) => {
+ return `
+
+
${instrument}
+
$${price}
+
Music Instruments product page
+ Student Instruments
+
+
+
+ All
+ Woodwinds
+ Brass
+ Percussion
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --white: #ffffff;
+ --yellow: #f1be32;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--white);
+}
+
+h1 {
+ text-align: center;
+ margin-top: 20px;
+}
+
+.select-container {
+ display: block;
+ margin: 25px auto;
+ padding: 8px;
+ border: 4px solid var(--white);
+ border-radius: 4px;
+ width: 200px;
+}
+
+.products-container {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 20px;
+}
+
+@media (min-width: 760px) {
+ .products-container {
+ flex-direction: row;
+ }
+}
+
+.card {
+ background-color: var(--white);
+ color: var(--dark-grey);
+ border: 4px solid var(--yellow);
+ border-radius: 5px;
+ padding: 10px;
+ width: 200px;
+}
+```
+
+```js
+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");
+const productsContainer = document.querySelector(".products-container");
+
+function instrumentCards(instrumentCategory) {
+ const instruments =
+ instrumentCategory === "all"
+ ? instrumentsArr
+ : instrumentsArr.filter(
+ ({ category }) => category === instrumentCategory
+ );
+
+ return instruments
+ .map(({ instrument, price }) => {
+ return `
+
+
${instrument}
+
$${price}
+