mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-19 21:09:51 +08:00
refactor(curriculum): remove after user code music instrument filter (#60411)
This commit is contained in:
Anna
GitHub
parent
3b86efc8cf
commit
0ee5011428
@ -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 `<div class="card"><h2>[instrument]</h2><p>$[price]</p></div>`
|
||||
|
||||
# --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 `<div class="card"><h2>[instrument]</h2><p>$[price]</p></div>`.
|
||||
@ -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
|
||||
|
||||
@ -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 `
|
||||
<div class="card">
|
||||
<h2>${instrument}</h2>
|
||||
<p>$${price}</p>
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
# --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 `
|
||||
<div class="card">
|
||||
<h2>${instrument}</h2>
|
||||
<p>$${price}</p>
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user