From 0ee501142886a52874e851f663ab42958df1baf5 Mon Sep 17 00:00:00 2001 From: Anna Date: Wed, 21 May 2025 13:13:22 -0400 Subject: [PATCH] refactor(curriculum): remove after user code music instrument filter (#60411) --- .../672137c47fa88d6f753f6d0b.md | 58 +++++++-------- .../67213ce0a2ba1278a38df3a5.md | 70 +++++++++---------- .../672146dde7104896adb274ae.md | 70 +++++++++---------- 3 files changed, 99 insertions(+), 99 deletions(-) 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 index 7642bd30684..0613661ffbb 100644 --- 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 @@ -11,6 +11,35 @@ Currently, your `instrumentCards` function returns an array with instrument obje 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 `

[instrument]

$[price]

` +# --before-all-- + +```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*>/; +``` + # --hints-- `instrumentCards("all")` should return an array of strings representing instrument cards, each with the format `

[instrument]

$[price]

`. @@ -139,35 +168,6 @@ 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 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 index 6d671817950..3dd80651f60 100644 --- 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 @@ -11,6 +11,41 @@ Remove your `console.log` from the event listener and set the inner HTML of `pro Then, select different options from your dropdown and see the result in the preview window. +# --before-all-- + +```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}

+
+ `; + }) +} +``` + # --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. @@ -61,41 +96,6 @@ try { # --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}

-
- `; - }) -} -``` - ## --seed-contents-- ```html diff --git a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672146dde7104896adb274ae.md b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672146dde7104896adb274ae.md index 4dc0852395a..8646ac1b23c 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672146dde7104896adb274ae.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-music-instrument-filter/672146dde7104896adb274ae.md @@ -11,41 +11,7 @@ When you select a category from the dropdown menu, the instrument cards are corr Do it by joining the array returned by `instrumentCards`. With that, your music instrument filter is complete. -# --hints-- - -You should join the array returned by the `instrumentCards` function. Do not modify your event listener. - -```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.isTrue(productsContainer.isEqualNode(testDiv)); - -cardsArr = getCardsArr("woodwinds"); -testDiv.innerHTML = cardsArr; -selectContainer.value = "woodwinds"; -selectContainer.dispatchEvent(new Event("change")); -assert.isTrue(productsContainer.isEqualNode(testDiv)); - -cardsArr = getCardsArr("brass"); -testDiv.innerHTML = cardsArr; -selectContainer.value = "brass"; -selectContainer.dispatchEvent(new Event("change")); -assert.isTrue(productsContainer.isEqualNode(testDiv)); - -cardsArr = getCardsArr("percussion"); -testDiv.innerHTML = cardsArr; -selectContainer.value = "percussion"; -selectContainer.dispatchEvent(new Event("change")); -assert.isTrue(productsContainer.isEqualNode(testDiv)); -``` - -# --seed-- - -## --after-user-code-- +# --before-all-- ```js const allInstrmnts = [ @@ -81,6 +47,40 @@ function getCardsArr(family) { } ``` +# --hints-- + +You should join the array returned by the `instrumentCards` function. Do not modify your event listener. + +```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.isTrue(productsContainer.isEqualNode(testDiv)); + +cardsArr = getCardsArr("woodwinds"); +testDiv.innerHTML = cardsArr; +selectContainer.value = "woodwinds"; +selectContainer.dispatchEvent(new Event("change")); +assert.isTrue(productsContainer.isEqualNode(testDiv)); + +cardsArr = getCardsArr("brass"); +testDiv.innerHTML = cardsArr; +selectContainer.value = "brass"; +selectContainer.dispatchEvent(new Event("change")); +assert.isTrue(productsContainer.isEqualNode(testDiv)); + +cardsArr = getCardsArr("percussion"); +testDiv.innerHTML = cardsArr; +selectContainer.value = "percussion"; +selectContainer.dispatchEvent(new Event("change")); +assert.isTrue(productsContainer.isEqualNode(testDiv)); +``` + +# --seed-- + ## --seed-contents-- ```html