diff --git a/curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json b/curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json index aad403e0de..7f6287f5a4 100644 --- a/curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json +++ b/curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json @@ -89,220 +89,228 @@ "Part 20" ], [ - "5ddb965c65d27e1512d44dae", + "5e302e80e003129199103c78", "Part 21" ], [ - "5ddb965c65d27e1512d44daf", + "5e302e8ce003129199103c79", "Part 22" ], [ - "5ddb965c65d27e1512d44db0", + "5ddb965c65d27e1512d44dae", "Part 23" ], [ - "5ddb965c65d27e1512d44db1", + "5ddb965c65d27e1512d44daf", "Part 24" ], [ - "5ddb965c65d27e1512d44db2", + "5ddb965c65d27e1512d44db0", "Part 25" ], [ - "5ddb965c65d27e1512d44db3", + "5ddb965c65d27e1512d44db1", "Part 26" ], [ - "5ddb965c65d27e1512d44db4", + "5ddb965c65d27e1512d44db2", "Part 27" ], [ - "5ddb965c65d27e1512d44db5", + "5ddb965c65d27e1512d44db3", "Part 28" ], [ - "5ddb965c65d27e1512d44db6", + "5ddb965c65d27e1512d44db4", "Part 29" ], [ - "5ddb965c65d27e1512d44db7", + "5ddb965c65d27e1512d44db5", "Part 30" ], [ - "5ddb965c65d27e1512d44db8", + "5ddb965c65d27e1512d44db6", "Part 31" ], [ - "5ddb965c65d27e1512d44db9", + "5ddb965c65d27e1512d44db7", "Part 32" ], [ - "5ddb965c65d27e1512d44dba", + "5ddb965c65d27e1512d44db8", "Part 33" ], [ - "5ddb965c65d27e1512d44dbb", + "5ddb965c65d27e1512d44db9", "Part 34" ], [ - "5ddb965c65d27e1512d44dbc", + "5ddb965c65d27e1512d44dba", "Part 35" ], [ - "5ddb965c65d27e1512d44dbd", + "5ddb965c65d27e1512d44dbb", "Part 36" ], [ - "5ddb965c65d27e1512d44dbe", + "5ddb965c65d27e1512d44dbc", "Part 37" ], [ - "5ddb965c65d27e1512d44dbf", + "5ddb965c65d27e1512d44dbd", "Part 38" ], [ - "5ddb965c65d27e1512d44dc0", + "5ddb965c65d27e1512d44dbe", "Part 39" ], [ - "5ddb965c65d27e1512d44dc1", + "5ddb965c65d27e1512d44dbf", "Part 40" ], [ - "5ddb965c65d27e1512d44dc2", + "5ddb965c65d27e1512d44dc0", "Part 41" ], [ - "5ddb965c65d27e1512d44dc3", + "5ddb965c65d27e1512d44dc1", "Part 42" ], [ - "5ddb965c65d27e1512d44dc4", + "5ddb965c65d27e1512d44dc2", "Part 43" ], [ - "5ddb965c65d27e1512d44dc5", + "5ddb965c65d27e1512d44dc3", "Part 44" ], [ - "5ddb965c65d27e1512d44dc6", + "5ddb965c65d27e1512d44dc4", "Part 45" ], [ - "5ddb965c65d27e1512d44dc7", + "5ddb965c65d27e1512d44dc5", "Part 46" ], [ - "5ddb965c65d27e1512d44dc8", + "5ddb965c65d27e1512d44dc6", "Part 47" ], [ - "5ddb965c65d27e1512d44dc9", + "5ddb965c65d27e1512d44dc7", "Part 48" ], [ - "5ddb965c65d27e1512d44dca", + "5ddb965c65d27e1512d44dc8", "Part 49" ], [ - "5ddb965c65d27e1512d44dcb", + "5ddb965c65d27e1512d44dc9", "Part 50" ], [ - "5ddb965c65d27e1512d44dcc", + "5ddb965c65d27e1512d44dca", "Part 51" ], [ - "5ddb965c65d27e1512d44dcd", + "5ddb965c65d27e1512d44dcb", "Part 52" ], [ - "5ddb965c65d27e1512d44dce", + "5ddb965c65d27e1512d44dcc", "Part 53" ], [ - "5ddb965c65d27e1512d44dcf", + "5ddb965c65d27e1512d44dcd", "Part 54" ], [ - "5ddb965c65d27e1512d44dd0", + "5ddb965c65d27e1512d44dce", "Part 55" ], [ - "5ddb965c65d27e1512d44dd1", + "5ddb965c65d27e1512d44dcf", "Part 56" ], [ - "5ddb965c65d27e1512d44dd2", + "5ddb965c65d27e1512d44dd0", "Part 57" ], [ - "5ddb965c65d27e1512d44dd3", + "5ddb965c65d27e1512d44dd1", "Part 58" ], [ - "5ddb965c65d27e1512d44dd4", + "5ddb965c65d27e1512d44dd2", "Part 59" ], [ - "5ddb965c65d27e1512d44dd5", + "5ddb965c65d27e1512d44dd3", "Part 60" ], [ - "5ddb965c65d27e1512d44dd6", + "5ddb965c65d27e1512d44dd4", "Part 61" ], [ - "5ddb965c65d27e1512d44dd7", + "5ddb965c65d27e1512d44dd5", "Part 62" ], [ - "5ddb965c65d27e1512d44dd8", + "5ddb965c65d27e1512d44dd6", "Part 63" ], [ - "5ddb965c65d27e1512d44dd9", + "5ddb965c65d27e1512d44dd7", "Part 64" ], [ - "5ddb965c65d27e1512d44dda", + "5ddb965c65d27e1512d44dd8", "Part 65" ], [ - "5ddb965c65d27e1512d44ddb", + "5ddb965c65d27e1512d44dd9", "Part 66" ], [ - "5ddb965c65d27e1512d44ddc", + "5ddb965c65d27e1512d44dda", "Part 67" ], [ - "5ddb965c65d27e1512d44ddd", + "5ddb965c65d27e1512d44ddb", "Part 68" ], [ - "5ddb965c65d27e1512d44dde", + "5ddb965c65d27e1512d44ddc", "Part 69" ], [ - "5ddb965c65d27e1512d44ddf", + "5ddb965c65d27e1512d44ddd", "Part 70" ], [ - "5ddb965c65d27e1512d44de0", + "5ddb965c65d27e1512d44dde", "Part 71" ], [ - "5ddb965c65d27e1512d44de1", + "5ddb965c65d27e1512d44ddf", "Part 72" ], [ - "5ddb965c65d27e1512d44de2", + "5ddb965c65d27e1512d44de0", "Part 73" ], [ - "5ddb965c65d27e1512d44de3", + "5ddb965c65d27e1512d44de1", "Part 74" + ], + [ + "5ddb965c65d27e1512d44de2", + "Part 75" + ], + [ + "5ddb965c65d27e1512d44de3", + "Part 76" ] ], "helpRoom": "Help", diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-18.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-18.md index 5ab5bdf04f..ad985b3f82 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-18.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-18.md @@ -15,7 +15,7 @@ The `reduce()` method takes a callback function with at least two arguments, an or using arrow functions: -`(accumulator, currentValue) => { /*code to run*/ }` +`(accumulator, currentValue) => { /* code to run */ }` Insert the above callback function as an argument in the `.reduce()` method. diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-19.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-19.md index 7ad41b315a..684268d6e7 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-19.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-19.md @@ -15,7 +15,7 @@ Here is an example of a `reduce()` method with an empty object as its initial va ```js arr.reduce((accumulator, currentValue) => { - /*code to run*/ + /* code to run */ }, {}); ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-20.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-20.md index 9ff37321e7..34f45bccf4 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-20.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-20.md @@ -9,25 +9,24 @@ isBeta: true
-We want to sum up all of the numbers in the `total` array. +Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers. -As an example, let's says we have an array `[1,3,5]` named `arr` and we want to sum up all the numbers. +We can use the reduce function as follows: -We can use the reduce function as follows -`arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);` +```js +arr.reduce((accumulator, currentValue) => { + return accumulator + currentValue; +}, 0); +``` -At `arr[0]`, the function is `(0, 1) => 0 + 1`, -since `arr[0] = 1 = currentValue` +At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`, +since `arr[0] = 1 = currentValue`. -Note that the `accumulator` starts at `0` because that is what we provide as the initial value argument. After running `0 + 1`, the accumulator is now `1`, which is passed to next invocation of the callback function at +At `arr[1]`, the function is `(1, 3) => 1 + 3`, -arr[1], the function is `(1, 3) => 1 + 3`, +Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`. -arr[2], the function is `(4, 5) => 4 + 5`, now the accumulator is `9` and we have gone through all of the items in `arr`, the reduce function will return `9`. - -Replace the whole body of the callback function (`{/*code to run*\/}`) with `accumulator + currentValue`. - -If you desire, you can now check your progress by adding `console.log(total)`, entering in values in the form, and then push the Calculate button. You will see that the console will log the sum of the inputs that you entered, this is awesome! +In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`.
@@ -43,7 +42,7 @@ If you desire, you can now check your progress by adding `console.log(total)`, e ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/) ); + testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/) ); ``` @@ -64,7 +63,7 @@ tests: const total = Array.from(document.getElementsByClassName('cal-control')) .map(meal => Number(meal.value)) .reduce((accumulator, currentValue) => { - /*code to run*/ + /* code to run */ }, 0); } @@ -162,7 +161,9 @@ tests: const total = Array.from(document.getElementsByClassName('cal-control')) .map(meal => Number(meal.value)) - .reduce((accumulator, currentValue) => accumulator + currentValue, 0); + .reduce((accumulator, currentValue) => { + return accumulator + currentValue; + }, 0); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-21.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-21.md index d5fbcd837e..ed18dfb4e6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-21.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-21.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dae +id: 5e302e80e003129199103c78 title: Part 21 challengeType: 0 isBeta: true @@ -9,13 +9,11 @@ isBeta: true
-Now that we have the `total` number of calories that the user entered. We need to determine the maximum calories they should consume. +To track how the `reduce()` function works, log the values of the `accumulator` and `currentValue` in the callback function before the `return` statement like this: `console.log({ accumulator })` -Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories a normal Female should consume is 2000. If Male is selected, the maximum is 2500. +You can also check your progress by adding `console.log({ total })` at the end of the `calculate()` function. -If you inspect the Female radio button you will notice its `id` attribute: `` - -Create a variable named `maxCalories` and set it equal to the document element with the `id` of `female`. This is similar to how you reference the element with the `id` of `calorie-form` at the beginning of this file. +When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function.
@@ -31,7 +29,7 @@ Create a variable named `maxCalories` and set it equal to the document element w ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test(code)); + testString: assert( code.replace(/\s/g, '').match(/console.log\({accumulator}\)/) ); ``` @@ -51,7 +49,12 @@ tests: const total = Array.from(document.getElementsByClassName('cal-control')) .map(meal => Number(meal.value)) - .reduce((accumulator, currentValue) => accumulator + currentValue, 0); + .reduce((accumulator, currentValue) => { + // log the values of the `accumulator` and `currentValue` here + return accumulator + currentValue; + }, 0); + + // log the value of `total` here } ``` @@ -148,9 +151,13 @@ tests: const total = Array.from(document.getElementsByClassName('cal-control')) .map(meal => Number(meal.value)) - .reduce((accumulator, currentValue) => accumulator + currentValue, 0); + .reduce((accumulator, currentValue) => { + console.log({ accumulator }); + console.log({ currentValue }); + return accumulator + currentValue; + }, 0); - const maxCalories = document.getElementById('female'); + console.log({ total }); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-22.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-22.md index 0e9b968d3d..6a0f18906d 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-22.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-22.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44daf +id: 5e302e8ce003129199103c79 title: Part 22 challengeType: 0 isBeta: true @@ -9,9 +9,13 @@ isBeta: true
-Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` +Now let's simplify the `reduce()` callback function by refactoring it. -Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. +Essentially, the current callback function is `(accumulator, currentValue) => { return accumulator + currentValue }`. Since there's only one expression in the function body, we can omit the `{}`. Additionally, we can omit the `return` keyword since that is implicit when using arrow function syntax. + +So the function can be simplified to just `(accumulator, currentValue) => accumulator + currentValue`. + +Replace the current callback function argument in the `reduce()` function with the simplified callback function from above.
@@ -27,7 +31,7 @@ Check to see if the Female radio button is checked or not by chaining on the `.c ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test(code)); + testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/) ); ``` @@ -47,9 +51,13 @@ tests: const total = Array.from(document.getElementsByClassName('cal-control')) .map(meal => Number(meal.value)) - .reduce((accumulator, currentValue) => accumulator + currentValue, 0); + .reduce((accumulator, currentValue) => { + //console.log({ accumulator }); + //console.log({ currentValue }); + return accumulator + currentValue; + }, 0); - const maxCalories = document.getElementById('female'); + //console.log({ total }); } ``` @@ -147,8 +155,6 @@ tests: const total = Array.from(document.getElementsByClassName('cal-control')) .map(meal => Number(meal.value)) .reduce((accumulator, currentValue) => accumulator + currentValue, 0); - - const maxCalories = document.getElementById('female').checked; } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-23.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-23.md index b7e1b62f41..ce6f0dfe7e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-23.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-23.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44db0 +id: 5ddb965c65d27e1512d44dae title: Part 23 challengeType: 0 isBeta: true @@ -9,19 +9,13 @@ isBeta: true
-Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. +Now that we have the `total` number of calories that the user entered, we need to determine the maximum calories they should consume. -For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: +Look at the form and notice that there are radio buttons for Female and Male. If Female is selected, the maximum calories consumed should be 2000, and if Male is selected, the maximum should be 2500. -```javascript -if (5 - 3 === 4) { - return 'Yes'; -} else { - return 'No'; -} -``` +If you inspect the Female radio button you will notice its id: `` -`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. +Create a variable named `maxCalories` and set it equal to the document element with the id of `female`.
@@ -37,7 +31,8 @@ if (5 - 3 === 4) { ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test(code)); + # testString: assert(code.match()); + testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test(code)); ``` @@ -58,8 +53,6 @@ tests: const total = Array.from(document.getElementsByClassName('cal-control')) .map(meal => Number(meal.value)) .reduce((accumulator, currentValue) => accumulator + currentValue, 0); - - const maxCalories = document.getElementById('female').checked; } ``` @@ -158,7 +151,7 @@ tests: .map(meal => Number(meal.value)) .reduce((accumulator, currentValue) => accumulator + currentValue, 0); - const maxCalories = document.getElementById('female').checked ? 2000 : 2500; + const maxCalories = document.getElementById('female'); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-24.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-24.md index 128400f889..ddb82dde52 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-24.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-24.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44db1 +id: 5ddb965c65d27e1512d44daf title: Part 24 challengeType: 0 isBeta: true @@ -9,9 +9,9 @@ isBeta: true
-Now that we have `total` and `maxCalories`, we need to find out the difference between them. +Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` -Create a variable named `difference` and set it equal to `total - maxCalories` +Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`.
@@ -27,7 +27,7 @@ Create a variable named `difference` and set it equal to `total - maxCalories` ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); + testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test(code)); ``` @@ -49,7 +49,7 @@ tests: .map(meal => Number(meal.value)) .reduce((accumulator, currentValue) => accumulator + currentValue, 0); - const maxCalories = document.getElementById('female').checked ? 2000 : 2500; + const maxCalories = document.getElementById('female'); } ``` @@ -148,9 +148,7 @@ tests: .map(meal => Number(meal.value)) .reduce((accumulator, currentValue) => accumulator + currentValue, 0); - const maxCalories = document.getElementById('female').checked ? 2000 : 2500; - - const difference = total - maxCalories; + const maxCalories = document.getElementById('female').checked; } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-25.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-25.md index 8981e9d641..8fbae306e9 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-25.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-25.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44db2 +id: 5ddb965c65d27e1512d44db0 title: Part 25 challengeType: 0 isBeta: true @@ -9,13 +9,19 @@ isBeta: true
-If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. +Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. -To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). +For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: -If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. +```js +if (5 - 3 === 4) { + return 'Yes'; +} else { + return 'No'; +} +``` -Use the same ternary syntax that you used to determine `maxCalories`. +`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not.
@@ -31,7 +37,7 @@ Use the same ternary syntax that you used to determine `maxCalories`. ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test(code)); + testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test(code)); ``` @@ -53,9 +59,7 @@ tests: .map(meal => Number(meal.value)) .reduce((accumulator, currentValue) => accumulator + currentValue, 0); - const maxCalories = document.getElementById('female').checked ? 2000 : 2500; - - const difference = total - maxCalories; + const maxCalories = document.getElementById('female').checked; } ``` @@ -155,10 +159,6 @@ tests: .reduce((accumulator, currentValue) => accumulator + currentValue, 0); const maxCalories = document.getElementById('female').checked ? 2000 : 2500; - - const difference = total - maxCalories; - - const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit'; } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-26.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-26.md index 5cc5497050..7c351bc593 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-26.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-26.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44db3 +id: 5ddb965c65d27e1512d44db1 title: Part 26 challengeType: 0 isBeta: true @@ -9,11 +9,9 @@ isBeta: true
-If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
`. +Now that we have `total` and `maxCalories`, we need to find out the difference between them. -We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. - -Create a variable named `output` and set it equal to this division element with the `id` of `output`. +Create a variable named `difference` and set it equal to `total - maxCalories`
@@ -29,7 +27,7 @@ Create a variable named `output` and set it equal to this division element with ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test(code)) + testString: assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); ``` @@ -52,10 +50,6 @@ tests: .reduce((accumulator, currentValue) => accumulator + currentValue, 0); const maxCalories = document.getElementById('female').checked ? 2000 : 2500; - - const difference = total - maxCalories; - - const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit'; } ``` @@ -157,10 +151,6 @@ tests: const maxCalories = document.getElementById('female').checked ? 2000 : 2500; const difference = total - maxCalories; - - const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit'; - - const output = document.getElementById('output'); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-27.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-27.md index acef424d94..18fd36cd5b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-27.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-27.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44db4 +id: 5ddb965c65d27e1512d44db2 title: Part 27 challengeType: 0 isBeta: true @@ -9,15 +9,13 @@ isBeta: true
-Now it's time to create the HTML elements that we will add inside of `output`. +If `difference` is positive, the total calories the user ate is more than the `maxCalories` recommended, or a calories surplus -- otherwise, if `difference` is negative, the user has a calorie deficit. -To create an element, use `createElement()`. For example: +To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). -```js -const myHeading1 = document.createElement('h1') -``` +If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. -Create an `h3` element and assign it to a variable named `result`. +Use the same ternary syntax that you used to determine `maxCalories`.
@@ -33,7 +31,7 @@ Create an `h3` element and assign it to a variable named `result`. ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test(code)); + testString: assert(/const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test(code)); ``` @@ -58,10 +56,6 @@ tests: const maxCalories = document.getElementById('female').checked ? 2000 : 2500; const difference = total - maxCalories; - - const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit'; - - const output = document.getElementById('output'); } ``` @@ -165,10 +159,6 @@ tests: const difference = total - maxCalories; const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit'; - - const output = document.getElementById('output'); - - const result = document.createElement('h3'); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-28.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-28.md index 97ef7f8538..675f7f8e75 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-28.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-28.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44db5 +id: 5ddb965c65d27e1512d44db3 title: Part 28 challengeType: 0 isBeta: true @@ -9,15 +9,11 @@ isBeta: true
-Next, we will create a text node that we will later append to the `result` element. +If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
`. -JavaScript has a function called `createTextNode()` to accomplish this. For example: +We will be inserting output inside this `div`, telling the user if they are in a calorie surplus or deficit. -```js -const myText = document.createTextNode("Hello world!") -``` - -Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now. +Create a variable named `output` and set it equal to this division element with the `id` of `output`.
@@ -33,7 +29,7 @@ Create a variable named `resultText` and set it equal to a text node. Leave the ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code)); + testString: assert(/const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test(code)) ``` @@ -60,10 +56,6 @@ tests: const difference = total - maxCalories; const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit'; - - const output = document.getElementById('output'); - - const result = document.createElement('h3'); } ``` @@ -169,9 +161,6 @@ tests: const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit'; const output = document.getElementById('output'); - - const result = document.createElement('h3'); - const resultText = document.createTextNode(); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-29.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-29.md index 3594d81a7e..839e15698b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-29.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-29.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44db6 +id: 5ddb965c65d27e1512d44db4 title: Part 29 challengeType: 0 isBeta: true @@ -9,11 +9,15 @@ isBeta: true
-We can now use the `difference` variable that we created above. +Now it's time to create the HTML elements that we will add inside of `output`. -Insert the `difference` variable inside the parentheses of `.createTextNode()` +To create an element, use `createElement()`. For example: -If you want to see what the text currently looks like, try `console.log(resultText)`. +```js +const myHeading1 = document.createElement('h1') +``` + +Create an `h3` element and assign it to a variable named `result`.
@@ -29,7 +33,7 @@ If you want to see what the text currently looks like, try `console.log(resultTe ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test(code)); + testString: assert(/const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test(code)); ``` @@ -58,9 +62,6 @@ tests: const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit'; const output = document.getElementById('output'); - - const result = document.createElement('h3'); - const resultText = document.createTextNode(); } ``` @@ -168,7 +169,6 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - const resultText = document.createTextNode(difference); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-30.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-30.md index 6ef83899e8..6b798e4525 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-30.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-30.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44db7 +id: 5ddb965c65d27e1512d44db5 title: Part 30 challengeType: 0 isBeta: true @@ -9,11 +9,15 @@ isBeta: true
-Notice how if `total` is less than `maxCalories`, `difference` is a negative number. +Next, we will create a text node that we will later append to the `result` element. -We want to show the absolute value of the difference so it displays "300" rather than "-300". +JavaScript has a function called `createTextNode()` to accomplish this. For example: -Wrap the `difference` in a `Math.abs()` function. +```js +const myText = document.createTextNode("Hello world!") +``` + +Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now.
@@ -29,7 +33,7 @@ Wrap the `difference` in a `Math.abs()` function. ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test(code)); + testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code)); ``` @@ -60,7 +64,6 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - const resultText = document.createTextNode(difference); } ``` @@ -168,7 +171,7 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - const resultText = document.createTextNode(Math.abs(difference)); + const resultText = document.createTextNode(); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-31.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-31.md index 37d377b14b..bc35d4053e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-31.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-31.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44db8 +id: 5ddb965c65d27e1512d44db6 title: Part 31 challengeType: 0 isBeta: true @@ -9,7 +9,11 @@ isBeta: true
-Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. +We can now use the `difference` variable that we created above. + +Insert the `difference` variable inside the parentheses of `.createTextNode()` + +If you want to see what the text currently looks like, try `console.log(resultText)`.
@@ -25,7 +29,7 @@ Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.a ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test(code)); + testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test(code)); ``` @@ -56,7 +60,7 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - const resultText = document.createTextNode(Math.abs(difference)); + const resultText = document.createTextNode(); } ``` @@ -164,9 +168,7 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - const resultText = document.createTextNode( - Math.abs(difference) + ' Calorie ' - ); + const resultText = document.createTextNode(difference); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-32.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-32.md index 0631f4d649..7a2c2ecd39 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-32.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-32.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44db9 +id: 5ddb965c65d27e1512d44db7 title: Part 32 challengeType: 0 isBeta: true @@ -9,9 +9,11 @@ isBeta: true
-Next we want to add the text from the `surplusOrDeficit` variable that we previously created. +Notice how if `total` is less than `maxCalories`, `difference` is a negative number. -Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. +We want to show the absolute value of the difference so it displays "300" rather than "-300". + +Wrap the `difference` in a `Math.abs()` function.
@@ -27,7 +29,7 @@ Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Ma ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test(code)); + testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test(code)); ``` @@ -58,9 +60,7 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - const resultText = document.createTextNode( - Math.abs(difference) + ' Calorie ' - ); + const resultText = document.createTextNode(difference); } ``` @@ -168,9 +168,7 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - const resultText = document.createTextNode( - Math.abs(difference) + ' Calorie ' + surplusOrDeficit - ); + const resultText = document.createTextNode(Math.abs(difference)); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-33.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-33.md index ebef2abedf..5c60d7f654 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-33.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-33.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dba +id: 5ddb965c65d27e1512d44db8 title: Part 33 challengeType: 0 isBeta: true @@ -9,15 +9,7 @@ isBeta: true
-The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. - -Some people consider this a little cumbersome and prefer to use template literals instead. - -Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. - -For example, `` console.log(`Hello ${firstName}, today is ${Date.now()}`) ``is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. - -Convert the data inside of `createTextNode()` to be a template literal. +Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`.
@@ -33,7 +25,7 @@ Convert the data inside of `createTextNode()` to be a template literal. ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/) ); + testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test(code)); ``` @@ -64,9 +56,7 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - const resultText = document.createTextNode( - Math.abs(difference) + ' Calorie ' + surplusOrDeficit - ); + const resultText = document.createTextNode(Math.abs(difference)); } ``` @@ -175,7 +165,7 @@ tests: const result = document.createElement('h3'); const resultText = document.createTextNode( - `${Math.abs(difference)} Calorie ${surplusOrDeficit}` + Math.abs(difference) + ' Calorie ' ); } diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-34.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-34.md index c5efb59fc6..813e03824a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-34.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-34.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dbb +id: 5ddb965c65d27e1512d44db9 title: Part 34 challengeType: 0 isBeta: true @@ -9,11 +9,9 @@ isBeta: true
-Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: +Next we want to add the text from the `surplusOrDeficit` variable that we previously created. -```js -result.appendChild(resultText); -``` +Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`.
@@ -29,7 +27,7 @@ result.appendChild(resultText); ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/) ); + testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test(code)); ``` @@ -61,7 +59,7 @@ tests: const result = document.createElement('h3'); const resultText = document.createTextNode( - `${Math.abs(difference)} Calorie ${surplusOrDeficit}` + Math.abs(difference) + ' Calorie ' ); } @@ -171,10 +169,8 @@ tests: const result = document.createElement('h3'); const resultText = document.createTextNode( - `${Math.abs(difference)} Calorie ${surplusOrDeficit}` + Math.abs(difference) + ' Calorie ' + surplusOrDeficit ); - - result.appendChild(resultText); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-35.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-35.md index 60a86bed78..0b4ac3ea83 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-35.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-35.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dbc +id: 5ddb965c65d27e1512d44dba title: Part 35 challengeType: 0 isBeta: true @@ -9,9 +9,15 @@ isBeta: true
-Similarly, append the `result` to the `output` element with the `appendChild()` method. +The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. -Now if you enter in data and push the Calculate button, you will see the text added to the HTML document! +Some people consider this a little cumbersome and prefer to use template literals instead. + +Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`. + +For example, ``console.log(`Hello ${firstName}, today is ${Date.now()}`)`` is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`. + +Convert the data inside of `createTextNode()` to be a template literal.
@@ -27,7 +33,7 @@ Now if you enter in data and push the Calculate button, you will see the text ad ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(result\)/) ); + testString: assert( code.replace(/\s/g, '').match(/document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/) ); ``` @@ -59,10 +65,8 @@ tests: const result = document.createElement('h3'); const resultText = document.createTextNode( - `${Math.abs(difference)} Calorie ${surplusOrDeficit}` + Math.abs(difference) + ' Calorie ' + surplusOrDeficit ); - - result.appendChild(resultText); } ``` @@ -173,9 +177,6 @@ tests: const resultText = document.createTextNode( `${Math.abs(difference)} Calorie ${surplusOrDeficit}` ); - - result.appendChild(resultText); - output.appendChild(result); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-36.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-36.md index a2fa9e23f1..735c990377 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-36.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-36.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dbd +id: 5ddb965c65d27e1512d44dbb title: Part 36 challengeType: 0 isBeta: true @@ -9,9 +9,11 @@ isBeta: true
-Next, let's create and add a horizontal rule (`hr`) element to the output. +Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: -Create an `hr` element and assign it to a variable named `line`. +```js +result.appendChild(resultText); +```
@@ -27,7 +29,7 @@ Create an `hr` element and assign it to a variable named `line`. ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code)) + testString: assert( code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/) ); ``` @@ -61,9 +63,6 @@ tests: const resultText = document.createTextNode( `${Math.abs(difference)} Calorie ${surplusOrDeficit}` ); - - result.appendChild(resultText); - output.appendChild(result); } ``` @@ -176,9 +175,6 @@ tests: ); result.appendChild(resultText); - output.appendChild(result); - - const line = document.createElement('hr'); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-37.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-37.md index 97a9bf0830..3ef018228b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-37.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-37.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dbe +id: 5ddb965c65d27e1512d44dbc title: Part 37 challengeType: 0 isBeta: true @@ -9,7 +9,9 @@ isBeta: true
-Add the `line` to the `output` element using the `appendChild()` method. +Similarly, append the `result` to the `output` element with the `appendChild()` method. + +Now if you enter in data and push the Calculate button, you will see the text added to the HTML document!
@@ -25,7 +27,7 @@ Add the `line` to the `output` element using the `appendChild()` method. ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(line\)/) ); + testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(result\)/) ); ``` @@ -61,9 +63,6 @@ tests: ); result.appendChild(resultText); - output.appendChild(result); - - const line = document.createElement('hr'); } ``` @@ -177,9 +176,6 @@ tests: result.appendChild(resultText); output.appendChild(result); - - const line = document.createElement('hr'); - output.appendChild(line); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-38.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-38.md index 90acfed2f6..6132f3a4b6 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-38.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-38.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dbf +id: 5ddb965c65d27e1512d44dbd title: Part 38 challengeType: 0 isBeta: true @@ -9,9 +9,9 @@ isBeta: true
-Let's create a few more HTML elements to add to the `output`. +Next, let's create and add a horizontal rule (`hr`) element to the output. -Create an `h4` element and assign it to a variable named `recommended`. +Create an `hr` element and assign it to a variable named `line`.
@@ -27,7 +27,7 @@ Create an `h4` element and assign it to a variable named `recommended`. ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code)); + testString: assert(/const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code)) ``` @@ -64,9 +64,6 @@ tests: result.appendChild(resultText); output.appendChild(result); - - const line = document.createElement('hr'); - output.appendChild(line); } ``` @@ -182,9 +179,6 @@ tests: output.appendChild(result); const line = document.createElement('hr'); - output.appendChild(line); - - const recommended = document.createElement('h4'); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-39.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-39.md index c04cce3024..95e00ffba9 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-39.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-39.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dc0 +id: 5ddb965c65d27e1512d44dbe title: Part 39 challengeType: 0 isBeta: true @@ -9,9 +9,7 @@ isBeta: true
-Create a text node and assign it to a variable named `recommendedText`. - -This is similar to how your created the `resultText` element previously. +Add the `line` to the `output` element using the `appendChild()` method.
@@ -27,7 +25,7 @@ This is similar to how your created the `resultText` element previously. ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code)); + testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(line\)/) ); ``` @@ -64,11 +62,8 @@ tests: result.appendChild(resultText); output.appendChild(result); - + const line = document.createElement('hr'); - output.appendChild(line); - - const recommended = document.createElement('h4'); } ``` @@ -185,9 +180,6 @@ tests: const line = document.createElement('hr'); output.appendChild(line); - - const recommended = document.createElement('h4'); - const recommendedText = document.createTextNode(); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-40.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-40.md index 4372b3fdb0..18192937d3 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-40.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-40.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dc1 +id: 5ddb965c65d27e1512d44dbf title: Part 40 challengeType: 0 isBeta: true @@ -9,11 +9,9 @@ isBeta: true
-We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. +Let's create a few more HTML elements to add to the `output`. -Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". - -This is similar to template literal syntax previously used to create `resultText`. +Create an `h4` element and assign it to a variable named `recommended`.
@@ -29,7 +27,7 @@ This is similar to template literal syntax previously used to create `resultText ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) ); + testString: assert(/const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code)); ``` @@ -69,9 +67,6 @@ tests: const line = document.createElement('hr'); output.appendChild(line); - - const recommended = document.createElement('h4'); - const recommendedText = document.createTextNode(); } ``` @@ -190,9 +185,6 @@ tests: output.appendChild(line); const recommended = document.createElement('h4'); - const recommendedText = document.createTextNode( - `${maxCalories} Recommended Calories` - ); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-41.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-41.md index e6ea6356a1..f76efe7917 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-41.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-41.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dc2 +id: 5ddb965c65d27e1512d44dc0 title: Part 41 challengeType: 0 isBeta: true @@ -9,9 +9,9 @@ isBeta: true
-Append the `recommendedText` node to the `recommended` element. +Create a text node and assign it to a variable named `recommendedText`. -This is similar to how the `resultText` is appended to `result` previously. +This is similar to how your created the `resultText` element previously.
@@ -27,7 +27,7 @@ This is similar to how the `resultText` is appended to `result` previously. ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) ); + testString: assert(/const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code)); ``` @@ -69,9 +69,6 @@ tests: output.appendChild(line); const recommended = document.createElement('h4'); - const recommendedText = document.createTextNode( - `${maxCalories} Recommended Calories` - ); } ``` @@ -190,11 +187,7 @@ tests: output.appendChild(line); const recommended = document.createElement('h4'); - const recommendedText = document.createTextNode( - `${maxCalories} Recommended Calories` - ); - - recommended.appendChild(recommendedText); + const recommendedText = document.createTextNode(); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-42.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-42.md index 0de916aa75..1c4d250819 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-42.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-42.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dc3 +id: 5ddb965c65d27e1512d44dc1 title: Part 42 challengeType: 0 isBeta: true @@ -9,7 +9,11 @@ isBeta: true
-Append the `recommended` element to `output`. +We want the `recommendedText` to say "XX Calories Recommended" where "XX" is the `maxCalories` variable that was previously created. + +Update text of `recommendedText` to use the `maxCalories` variable in a template literal along with the text "Calories Recommended". + +This is similar to template literal syntax previously used to create `resultText`.
@@ -25,7 +29,7 @@ Append the `recommended` element to `output`. ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/) ); + testString: assert( code.replace(/\s/g, '').match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) ); ``` @@ -67,11 +71,7 @@ tests: output.appendChild(line); const recommended = document.createElement('h4'); - const recommendedText = document.createTextNode( - `${maxCalories} Recommended Calories` - ); - - recommended.appendChild(recommendedText); + const recommendedText = document.createTextNode(); } ``` @@ -193,9 +193,6 @@ tests: const recommendedText = document.createTextNode( `${maxCalories} Recommended Calories` ); - - recommended.appendChild(recommendedText); - output.appendChild(recommended); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-43.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-43.md index 1227061734..ea397a58ba 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-43.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-43.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dc4 +id: 5ddb965c65d27e1512d44dc2 title: Part 43 challengeType: 0 isBeta: true @@ -9,9 +9,9 @@ isBeta: true
-Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. +Append the `recommendedText` node to the `recommended` element. -Create an `h4` element and assign it to a variable named `consumed`. +This is similar to how the `resultText` is appended to `result` previously.
@@ -27,7 +27,7 @@ Create an `h4` element and assign it to a variable named `consumed`. ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code)); + testString: assert( code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) ); ``` @@ -72,9 +72,6 @@ tests: const recommendedText = document.createTextNode( `${maxCalories} Recommended Calories` ); - - recommended.appendChild(recommendedText); - output.appendChild(recommended); } ``` @@ -198,9 +195,6 @@ tests: ); recommended.appendChild(recommendedText); - output.appendChild(recommended); - - const consumed = document.createElement('h4'); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-44.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-44.md index a7d381cd04..4f6537e6f0 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-44.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-44.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dc5 +id: 5ddb965c65d27e1512d44dc3 title: Part 44 challengeType: 0 isBeta: true @@ -9,15 +9,7 @@ isBeta: true
-Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. - -For example: - -```js -consumed.innerHTML = `Hello world`; -``` - -Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals. +Append the `recommended` element to `output`.
@@ -33,7 +25,7 @@ Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `t ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) ); + testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/) ); ``` @@ -80,9 +72,6 @@ tests: ); recommended.appendChild(recommendedText); - output.appendChild(recommended); - - const consumed = document.createElement('h4'); } ``` @@ -207,9 +196,6 @@ tests: recommended.appendChild(recommendedText); output.appendChild(recommended); - - const consumed = document.createElement('h4'); - consumed.innerHTML = `${total} Consumed Calories`; } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-45.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-45.md index 21735605e6..a727fd2467 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-45.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-45.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dc6 +id: 5ddb965c65d27e1512d44dc4 title: Part 45 challengeType: 0 isBeta: true @@ -9,7 +9,9 @@ isBeta: true
-Append the `consumed` element to `output`. +Similar to the `recommended` element, we are going to create a `consumed` element that will display the amount of calories consumed. + +Create an `h4` element and assign it to a variable named `consumed`.
@@ -25,7 +27,7 @@ Append the `consumed` element to `output`. ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/) ); + testString: assert(/const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code)); ``` @@ -73,9 +75,6 @@ tests: recommended.appendChild(recommendedText); output.appendChild(recommended); - - const consumed = document.createElement('h4'); - consumed.innerHTML = `${total} Consumed Calories`; } ``` @@ -202,8 +201,6 @@ tests: output.appendChild(recommended); const consumed = document.createElement('h4'); - consumed.innerHTML = `${total} Consumed Calories`; - output.appendChild(consumed); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-46.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-46.md index 277e430602..3cdb431504 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-46.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-46.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dc7 +id: 5ddb965c65d27e1512d44dc5 title: Part 46 challengeType: 0 isBeta: true @@ -9,13 +9,15 @@ isBeta: true
-Now it's time to add some styling which can be added directly as attributes or classes. +Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. -In our CSS file, we have a styling rule for any elements with the class name `green-text`. +For example: -On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. +```js +consumed.innerHTML = `Hello world`; +``` -Now if you submit the form again and inspect the `result` element, you will see it as `

` and notice that the text is now green. +Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals.

@@ -31,7 +33,7 @@ Now if you submit the form again and inspect the `result` element, you will see ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) ); + testString: assert( code.replace(/\s/g, '').match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) ); ``` @@ -62,7 +64,6 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - //put your code here const resultText = document.createTextNode( `${Math.abs(difference)} Calorie ${surplusOrDeficit}` ); @@ -82,8 +83,6 @@ tests: output.appendChild(recommended); const consumed = document.createElement('h4'); - consumed.innerHTML = `${total} Consumed Calories`; - output.appendChild(consumed); } ``` @@ -191,7 +190,6 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - result.className = 'green-text'; const resultText = document.createTextNode( `${Math.abs(difference)} Calorie ${surplusOrDeficit}` ); @@ -212,7 +210,6 @@ tests: const consumed = document.createElement('h4'); consumed.innerHTML = `${total} Consumed Calories`; - output.appendChild(consumed); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-47.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-47.md index 2b4cd92100..6f9ed29506 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-47.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-47.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dc8 +id: 5ddb965c65d27e1512d44dc6 title: Part 47 challengeType: 0 isBeta: true @@ -9,11 +9,7 @@ isBeta: true
-You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. - -For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. - -Set the `class` attribute of the `output` element equal to a class named `bordered-class`. +Append the `consumed` element to `output`.
@@ -29,7 +25,7 @@ Set the `class` attribute of the `output` element equal to a class named `border ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/) ); + testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/) ); ``` @@ -60,7 +56,6 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - result.className = 'green-text'; const resultText = document.createTextNode( `${Math.abs(difference)} Calorie ${surplusOrDeficit}` ); @@ -81,9 +76,6 @@ tests: const consumed = document.createElement('h4'); consumed.innerHTML = `${total} Consumed Calories`; - output.appendChild(consumed); - - //put your code here } ``` @@ -191,7 +183,6 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - result.className = 'green-text'; const resultText = document.createTextNode( `${Math.abs(difference)} Calorie ${surplusOrDeficit}` ); @@ -213,8 +204,6 @@ tests: const consumed = document.createElement('h4'); consumed.innerHTML = `${total} Consumed Calories`; output.appendChild(consumed); - - output.setAttribute('class', 'bordered-class'); } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-48.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-48.md index 3bf2fbb92a..7f442e7232 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-48.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-48.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dc9 +id: 5ddb965c65d27e1512d44dc7 title: Part 48 challengeType: 0 isBeta: true @@ -9,11 +9,13 @@ isBeta: true
-Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. +Now it's time to add some styling which can be added directly as attributes or classes. -Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. +In our CSS file, we have a styling rule for any elements with the class name `green-text`. -The `calculate()` function is now finished! +On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. + +Now if you submit the form again and inspect the `result` element, you will see it as `

` and notice that the text is now green.

@@ -29,7 +31,7 @@ The `calculate()` function is now finished! ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) ); + testString: assert( code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) ); ``` @@ -60,7 +62,7 @@ tests: const output = document.getElementById('output'); const result = document.createElement('h3'); - result.className = 'green-text'; + //put your code here const resultText = document.createTextNode( `${Math.abs(difference)} Calorie ${surplusOrDeficit}` ); @@ -82,8 +84,6 @@ tests: const consumed = document.createElement('h4'); consumed.innerHTML = `${total} Consumed Calories`; output.appendChild(consumed); - - output.setAttribute('class', 'bordered-class'); } ``` @@ -213,9 +213,6 @@ tests: const consumed = document.createElement('h4'); consumed.innerHTML = `${total} Consumed Calories`; output.appendChild(consumed); - - output.setAttribute('class', 'bordered-class'); - output.style.backgroundColor = '#FFF9C4'; } ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-49.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-49.md index ce7f15b55c..bb7a3e0d6e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-49.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-49.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dca +id: 5ddb965c65d27e1512d44dc8 title: Part 49 challengeType: 0 isBeta: true @@ -9,15 +9,11 @@ isBeta: true
-When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. +You can also add styling with the `setAttribute()` method. This method takes two arguments: the name of the attribute and the value that the attribute should be. -In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: +For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`. -```html -
@@ -33,7 +29,7 @@ Get a reference to the `document` element with the `id` attribute `add`. This is ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)/) ); + testString: assert( code.replace(/\s/g, '').match(/output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/) ); ``` @@ -87,8 +83,7 @@ tests: consumed.innerHTML = `${total} Consumed Calories`; output.appendChild(consumed); - output.setAttribute('class', 'bordered-class'); - output.style.backgroundColor = '#FFF9C4'; + //put your code here } ``` @@ -220,10 +215,7 @@ tests: output.appendChild(consumed); output.setAttribute('class', 'bordered-class'); - output.style.backgroundColor = '#FFF9C4'; } - - document.getElementById('add'); ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-50.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-50.md index 3ff6046b45..cb536f9d52 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-50.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-50.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dcb +id: 5ddb965c65d27e1512d44dc9 title: Part 50 challengeType: 0 isBeta: true @@ -9,13 +9,11 @@ isBeta: true
-We want a function to run every time the user clicks the "Add Entry" button. +Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. -Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: +Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. -```js -function() {} -``` +The `calculate()` function is now finished!
@@ -31,7 +29,7 @@ function() {} ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/) ); + testString: assert( code.replace(/\s/g, '').match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) ); ``` @@ -86,10 +84,7 @@ tests: output.appendChild(consumed); output.setAttribute('class', 'bordered-class'); - output.style.backgroundColor = '#FFF9C4'; } - - document.getElementById('add'); ``` @@ -222,8 +217,6 @@ tests: output.setAttribute('class', 'bordered-class'); output.style.backgroundColor = '#FFF9C4'; } - - document.getElementById('add').onclick = function() {}; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-51.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-51.md index 5dd11cd7e2..e59886a61a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-51.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-51.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dcc +id: 5ddb965c65d27e1512d44dca title: Part 51 challengeType: 0 isBeta: true @@ -9,9 +9,15 @@ isBeta: true
-Inside the function, create an `input` document element and assign it to a variable named `foodInput`. +When the user clicks the "Add Entry" button, they should be provided with additional text inputs to enter in a food name and calorie amount. These will be included in the `calculate()` function. -This is similar to how you created the `result` element previously. +In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: + +```html +
@@ -27,7 +33,7 @@ This is similar to how you created the `result` element previously. ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code)); + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)/) ); ``` @@ -84,8 +90,6 @@ tests: output.setAttribute('class', 'bordered-class'); output.style.backgroundColor = '#FFF9C4'; } - - document.getElementById('add').onclick = function() {}; ``` @@ -219,9 +223,7 @@ tests: output.style.backgroundColor = '#FFF9C4'; } - document.getElementById('add').onclick = function() { - const foodInput = document.createElement('input'); - }; + document.getElementById('add'); ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-52.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-52.md index 0b0e75cb9b..b10b0aae50 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-52.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-52.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dcd +id: 5ddb965c65d27e1512d44dcb title: Part 52 challengeType: 0 isBeta: true @@ -9,7 +9,13 @@ isBeta: true
-Set the `placeholder` property of the `foodInput` equal to `'food name'`. +We want a function to run every time the user clicks the "Add Entry" button. + +Chain the `onclick` property to the end of `document.getElementById('add')` and set it equal to an empty function: + +```js +function() {} +```
@@ -25,7 +31,7 @@ Set the `placeholder` property of the `foodInput` equal to `'food name'`. ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) ); + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/) ); ``` @@ -83,9 +89,7 @@ tests: output.style.backgroundColor = '#FFF9C4'; } - document.getElementById('add').onclick = function() { - const foodInput = document.createElement('input'); - }; + document.getElementById('add'); ``` @@ -219,10 +223,7 @@ tests: output.style.backgroundColor = '#FFF9C4'; } - document.getElementById('add').onclick = function() { - const foodInput = document.createElement('input'); - foodInput.placeholder = 'food name'; - }; + document.getElementById('add').onclick = function() {}; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-53.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-53.md index 80d23098e1..2edab47721 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-53.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-53.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dce +id: 5ddb965c65d27e1512d44dcc title: Part 53 challengeType: 0 isBeta: true @@ -9,11 +9,9 @@ isBeta: true
-We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. +Inside the function, create an `input` document element and assign it to a variable named `foodInput`. -In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. - -Add the class name `food-control` to the `foodInput` element. +This is similar to how you created the `result` element previously.
@@ -29,7 +27,7 @@ Add the class name `food-control` to the `foodInput` element. ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) ); + testString: assert(/const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code)); ``` @@ -87,10 +85,7 @@ tests: output.style.backgroundColor = '#FFF9C4'; } - document.getElementById('add').onclick = function() { - const foodInput = document.createElement('input'); - foodInput.placeholder = 'food name'; - }; + document.getElementById('add').onclick = function() {}; ``` @@ -226,8 +221,6 @@ tests: document.getElementById('add').onclick = function() { const foodInput = document.createElement('input'); - foodInput.placeholder = 'food name'; - foodInput.classList.add('food-control'); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-54.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-54.md index 9ff6ea964c..ef5f1602e1 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-54.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-54.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dcf +id: 5ddb965c65d27e1512d44dcd title: Part 54 challengeType: 0 isBeta: true @@ -9,11 +9,7 @@ isBeta: true
-Notice that parent container of all of the inputs has an `id` of `entries`: `
`. - -Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. - -This is similar to the other `appendChild()` methods that you have used previously. +Set the `placeholder` property of the `foodInput` equal to `'food name'`.
@@ -29,7 +25,7 @@ This is similar to the other `appendChild()` methods that you have used previous ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/) ); + testString: assert( code.replace(/\s/g, '').match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) ); ``` @@ -89,8 +85,6 @@ tests: document.getElementById('add').onclick = function() { const foodInput = document.createElement('input'); - foodInput.placeholder = 'food name'; - foodInput.classList.add('food-control'); }; ``` @@ -228,8 +222,6 @@ tests: document.getElementById('add').onclick = function() { const foodInput = document.createElement('input'); foodInput.placeholder = 'food name'; - foodInput.classList.add('food-control'); - document.getElementById('entries').appendChild(foodInput); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-55.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-55.md index a4742f34f1..bc0e65fe0f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-55.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-55.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dd0 +id: 5ddb965c65d27e1512d44dce title: Part 55 challengeType: 0 isBeta: true @@ -9,7 +9,11 @@ isBeta: true
-Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. +We want to add the class name `food-control` to the `foodInput` element. We will reference this class name when we remove these inputs later on. + +In addition to using the `setAttribute` method, we can also update the `classList` property to add a class name, like `myInput.classList.add('my-class)`. + +Add the class name `food-control` to the `foodInput` element.
@@ -25,7 +29,7 @@ Create a variable named `calorieInput` and set it equal to another `input` docum ```yml tests: - text: See description above for instructions. - testString: assert(/const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code)); + testString: assert( code.replace(/\s/g, '').match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) ); ``` @@ -86,8 +90,6 @@ tests: document.getElementById('add').onclick = function() { const foodInput = document.createElement('input'); foodInput.placeholder = 'food name'; - foodInput.classList.add('food-control'); - document.getElementById('entries').appendChild(foodInput); }; ``` @@ -226,9 +228,6 @@ tests: const foodInput = document.createElement('input'); foodInput.placeholder = 'food name'; foodInput.classList.add('food-control'); - document.getElementById('entries').appendChild(foodInput); - - const calorieInput = document.createElement('input'); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-56.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-56.md index ca2923fea2..e5afd8264a 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-56.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-56.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dd1 +id: 5ddb965c65d27e1512d44dcf title: Part 56 challengeType: 0 isBeta: true @@ -9,9 +9,11 @@ isBeta: true
-Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. +Notice that parent container of all of the inputs has an `id` of `entries`: `
`. -This is similar to how to set the class of the `output` element previously. +Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. + +This is similar to the other `appendChild()` methods that you have used previously.
@@ -27,7 +29,7 @@ This is similar to how to set the class of the `output` element previously. ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/) ); + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/) ); ``` @@ -89,9 +91,6 @@ tests: const foodInput = document.createElement('input'); foodInput.placeholder = 'food name'; foodInput.classList.add('food-control'); - document.getElementById('entries').appendChild(foodInput); - - const calorieInput = document.createElement('input'); }; ``` @@ -231,9 +230,6 @@ tests: foodInput.placeholder = 'food name'; foodInput.classList.add('food-control'); document.getElementById('entries').appendChild(foodInput); - - const calorieInput = document.createElement('input'); - calorieInput.setAttribute('type', 'number'); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-57.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-57.md index 0aaabb2f3e..5bf201eb4b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-57.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-57.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dd2 +id: 5ddb965c65d27e1512d44dd0 title: Part 57 challengeType: 0 isBeta: true @@ -9,9 +9,7 @@ isBeta: true
-The `calorieInput` element should only accept numbers that are 0 or above. - -Set the `min` attribute of `calorieInput` to `0`. +Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`.
@@ -27,7 +25,7 @@ Set the `min` attribute of `calorieInput` to `0`. ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/) ); + testString: assert(/const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code)); ``` @@ -90,9 +88,6 @@ tests: foodInput.placeholder = 'food name'; foodInput.classList.add('food-control'); document.getElementById('entries').appendChild(foodInput); - - const calorieInput = document.createElement('input'); - calorieInput.setAttribute('type', 'number'); }; ``` @@ -234,8 +229,6 @@ tests: document.getElementById('entries').appendChild(foodInput); const calorieInput = document.createElement('input'); - calorieInput.setAttribute('type', 'number'); - calorieInput.setAttribute('min', '0'); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-58.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-58.md index 0cb1f9d336..e326c81733 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-58.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-58.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dd3 +id: 5ddb965c65d27e1512d44dd1 title: Part 58 challengeType: 0 isBeta: true @@ -9,9 +9,9 @@ isBeta: true
-Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. +Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. -We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`. +This is similar to how to set the class of the `output` element previously.
@@ -27,7 +27,7 @@ We are adding this class name because in the `calculate()` function you created ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) ); + testString: assert( code.replace(/\s/g, '').match(/calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/) ); ``` @@ -92,8 +92,6 @@ tests: document.getElementById('entries').appendChild(foodInput); const calorieInput = document.createElement('input'); - calorieInput.setAttribute('type', 'number'); - calorieInput.setAttribute('min', '0'); }; ``` @@ -236,8 +234,6 @@ tests: const calorieInput = document.createElement('input'); calorieInput.setAttribute('type', 'number'); - calorieInput.setAttribute('min', '0'); - calorieInput.classList.add('cal-control'); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-59.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-59.md index d359335bf9..e6efa9799e 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-59.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-59.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dd4 +id: 5ddb965c65d27e1512d44dd2 title: Part 59 challengeType: 0 isBeta: true @@ -9,9 +9,9 @@ isBeta: true
-Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. +The `calorieInput` element should only accept numbers that are 0 or above. -To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. +Set the `min` attribute of `calorieInput` to `0`.
@@ -27,7 +27,7 @@ To keep track of them, add the class name `extra-cal-control` to the `calorieInp ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) ); + testString: assert( code.replace(/\s/g, '').match(/calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/) ); ``` @@ -93,8 +93,6 @@ tests: const calorieInput = document.createElement('input'); calorieInput.setAttribute('type', 'number'); - calorieInput.setAttribute('min', '0'); - calorieInput.classList.add('cal-control'); }; ``` @@ -238,8 +236,6 @@ tests: const calorieInput = document.createElement('input'); calorieInput.setAttribute('type', 'number'); calorieInput.setAttribute('min', '0'); - calorieInput.classList.add('cal-control'); - calorieInput.classList.add('extra-cal-control'); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-60.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-60.md index 26b5a9e4e5..64d8e2d0b2 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-60.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-60.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dd5 +id: 5ddb965c65d27e1512d44dd3 title: Part 60 challengeType: 0 isBeta: true @@ -9,9 +9,9 @@ isBeta: true
-Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. +Add a class named `cal-control` to the `calorieInput` element. This is similar to how you added a class name to the `foodInput` element previously. -The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button. +We are adding this class name because in the `calculate()` function you created previously, the `total` is calculated from the elements with the class name `cal-control`.
@@ -27,7 +27,7 @@ The Add Entry functionality is now finished. You can test it by clicking the "Ad ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/) ); + testString: assert( code.replace(/\s/g, '').match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) ); ``` @@ -94,8 +94,6 @@ tests: const calorieInput = document.createElement('input'); calorieInput.setAttribute('type', 'number'); calorieInput.setAttribute('min', '0'); - calorieInput.classList.add('cal-control'); - calorieInput.classList.add('extra-cal-control'); }; ``` @@ -240,8 +238,6 @@ tests: calorieInput.setAttribute('type', 'number'); calorieInput.setAttribute('min', '0'); calorieInput.classList.add('cal-control'); - calorieInput.classList.add('extra-cal-control'); - document.getElementById('entries').appendChild(calorieInput); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-61.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-61.md index 7a78b6f3d6..d924121a5b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-61.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-61.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dd6 +id: 5ddb965c65d27e1512d44dd4 title: Part 61 challengeType: 0 isBeta: true @@ -9,9 +9,9 @@ isBeta: true
-Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. +Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. -Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. +To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element.
@@ -27,7 +27,7 @@ Get a reference to the `document` element with the `id` of `clear` and set its ` ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/) ); + testString: assert( code.replace(/\s/g, '').match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) ); ``` @@ -95,8 +95,6 @@ tests: calorieInput.setAttribute('type', 'number'); calorieInput.setAttribute('min', '0'); calorieInput.classList.add('cal-control'); - calorieInput.classList.add('extra-cal-control'); - document.getElementById('entries').appendChild(calorieInput); }; ``` @@ -242,10 +240,7 @@ tests: calorieInput.setAttribute('min', '0'); calorieInput.classList.add('cal-control'); calorieInput.classList.add('extra-cal-control'); - document.getElementById('entries').appendChild(calorieInput); }; - - document.getElementById('clear').onclick = function() {}; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-62.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-62.md index edbbdea855..e0ef531d23 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-62.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-62.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dd7 +id: 5ddb965c65d27e1512d44dd5 title: Part 62 challengeType: 0 isBeta: true @@ -9,7 +9,9 @@ isBeta: true
-Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. +Add the `calorieInput` element to the element with the `id` of `entries` by using the `appendChild()` method. + +The Add Entry functionality is now finished. You can test it by clicking the "Add Entry" button, entering in food names and their calories, and then clicking the "Calculate" button.
@@ -25,7 +27,7 @@ Inside the `function` body, instruct your code to call two other functions, `cle ```yml tests: - text: See description above for instructions. - testString: assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code) ) + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/) ); ``` @@ -94,10 +96,7 @@ tests: calorieInput.setAttribute('min', '0'); calorieInput.classList.add('cal-control'); calorieInput.classList.add('extra-cal-control'); - document.getElementById('entries').appendChild(calorieInput); }; - - document.getElementById('clear').onclick = function() {}; ``` @@ -244,11 +243,6 @@ tests: calorieInput.classList.add('extra-cal-control'); document.getElementById('entries').appendChild(calorieInput); }; - - document.getElementById('clear').onclick = function() { - clearOutput(); - clearForm(); - }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-63.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-63.md index 20abdffb19..d3a12a696c 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-63.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-63.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dd8 +id: 5ddb965c65d27e1512d44dd6 title: Part 63 challengeType: 0 isBeta: true @@ -9,13 +9,9 @@ isBeta: true
-Create a variable named `clearOutput` and set it equal to a blank arrow function: +Next we need a way to reset the form back to its original state. To do this, we specify what to do when the user clicks the "Clear" button. -```js -const clearOutput = () => {} -``` - -This is similar to `function clearOutput () {}`. +Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`.
@@ -31,7 +27,7 @@ This is similar to `function clearOutput () {}`. ```yml tests: - text: See description above for instructions. - testString: assert( typeof clearOutput === "function" ); + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/) ); ``` @@ -102,11 +98,6 @@ tests: calorieInput.classList.add('extra-cal-control'); document.getElementById('entries').appendChild(calorieInput); }; - - document.getElementById('clear').onclick = function() { - clearOutput(); - clearForm(); - }; ``` @@ -254,12 +245,7 @@ tests: document.getElementById('entries').appendChild(calorieInput); }; - document.getElementById('clear').onclick = function() { - clearOutput(); - clearForm(); - }; - - const clearOutput = () => {}; + document.getElementById('clear').onclick = function() {}; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-64.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-64.md index b9801fea4f..d2641caa86 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-64.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-64.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dd9 +id: 5ddb965c65d27e1512d44dd7 title: Part 64 challengeType: 0 isBeta: true @@ -9,9 +9,7 @@ isBeta: true
-We need to remove the contents inside of element with the `id` of `output`. - -In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`. +Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly.
@@ -27,7 +25,7 @@ In the body of the `clearOutput()` function, set the `innerHTML` property of tha ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/) ); + testString: assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code) ) ``` @@ -99,12 +97,7 @@ tests: document.getElementById('entries').appendChild(calorieInput); }; - document.getElementById('clear').onclick = function() { - clearOutput(); - clearForm(); - }; - - const clearOutput = () => {}; + document.getElementById('clear').onclick = function() {}; ``` @@ -256,10 +249,6 @@ tests: clearOutput(); clearForm(); }; - - const clearOutput = () => { - document.getElementById('output').innerHTML = ''; - }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-65.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-65.md index 28b5a40101..0945cb9c45 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-65.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-65.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dda +id: 5ddb965c65d27e1512d44dd8 title: Part 65 challengeType: 0 isBeta: true @@ -9,14 +9,14 @@ isBeta: true
-Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. - -Remove the `bordered-class` class. For example: +Create a variable named `clearOutput` and set it equal to a blank arrow function: ```js -document.getElementById('my-div').classList.remove('my-class') +const clearOutput = () => {} ``` +This is similar to `function clearOutput () {}`. +
## Instructions @@ -31,7 +31,7 @@ document.getElementById('my-div').classList.remove('my-class') ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/) ); + testString: assert( typeof clearOutput === "function" ); ``` @@ -107,10 +107,6 @@ tests: clearOutput(); clearForm(); }; - - const clearOutput = () => { - document.getElementById('output').innerHTML = ''; - }; ``` @@ -263,10 +259,7 @@ tests: clearForm(); }; - const clearOutput = () => { - document.getElementById('output').innerHTML = ''; - document.getElementById('output').classList.remove('bordered-class'); - }; + const clearOutput = () => {}; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-66.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-66.md index a6db74b088..ee57b66300 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-66.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-66.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44ddb +id: 5ddb965c65d27e1512d44dd9 title: Part 66 challengeType: 0 isBeta: true @@ -9,9 +9,9 @@ isBeta: true
-The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. +We need to remove the contents inside of element with the `id` of `output`. -In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. +In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`.
@@ -27,7 +27,7 @@ In the `calculate()` function, right after `event.preventDefault()`, call the `c ```yml tests: - text: See description above for instructions. - testString: assert( calculate.toString().match(/clearOutput\(\)/) ); + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/) ); ``` @@ -44,7 +44,6 @@ tests: function calculate(e) { e.preventDefault(); - //put your code here const total = Array.from(document.getElementsByClassName('cal-control')) .map(meal => Number(meal.value)) @@ -105,10 +104,7 @@ tests: clearForm(); }; - const clearOutput = () => { - document.getElementById('output').innerHTML = ''; - document.getElementById('output').classList.remove('bordered-class'); - }; + const clearOutput = () => {}; ``` @@ -201,7 +197,6 @@ tests: function calculate(e) { e.preventDefault(); - clearOutput(); const total = Array.from(document.getElementsByClassName('cal-control')) .map(meal => Number(meal.value)) @@ -264,7 +259,6 @@ tests: const clearOutput = () => { document.getElementById('output').innerHTML = ''; - document.getElementById('output').classList.remove('bordered-class'); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-67.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-67.md index 64cbe753af..ed02bbb36f 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-67.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-67.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44ddc +id: 5ddb965c65d27e1512d44dda title: Part 67 challengeType: 0 isBeta: true @@ -9,7 +9,13 @@ isBeta: true
-Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. +Now notice that if you click the "Clear" button, the `output` element is empty, but it still has a border around it. This is because we previously added the `bordered-class` class to this element. + +Remove the `bordered-class` class. For example: + +```js +document.getElementById('my-div').classList.remove('my-class') +```
@@ -25,7 +31,7 @@ Create a variable named `clearForm` and set it equal to a blank arrow function l ```yml tests: - text: See description above for instructions. - testString: assert( typeof clearForm === "function") + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/) ); ``` @@ -42,7 +48,6 @@ tests: function calculate(e) { e.preventDefault(); - clearOutput(); const total = Array.from(document.getElementsByClassName('cal-control')) .map(meal => Number(meal.value)) @@ -105,7 +110,6 @@ tests: const clearOutput = () => { document.getElementById('output').innerHTML = ''; - document.getElementById('output').classList.remove('bordered-class'); }; ``` @@ -199,7 +203,6 @@ tests: function calculate(e) { e.preventDefault(); - clearOutput(); const total = Array.from(document.getElementsByClassName('cal-control')) .map(meal => Number(meal.value)) @@ -264,8 +267,6 @@ tests: document.getElementById('output').innerHTML = ''; document.getElementById('output').classList.remove('bordered-class'); }; - - const clearForm = () => {}; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-68.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-68.md index c42a91265f..1434d0f626 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-68.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-68.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44ddd +id: 5ddb965c65d27e1512d44ddb title: Part 68 challengeType: 0 isBeta: true @@ -9,11 +9,9 @@ isBeta: true
-We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. +The `clearOutput` function is called when the user clicks the "Clear" button. But it also needs to be run when the user clicks the "Calculate" button. -Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. - -This is similar to how you declared the `total` variable previously in the `calculate` method. +In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function.
@@ -29,7 +27,7 @@ This is similar to how you declared the `total` variable previously in the `calc ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/) ); + testString: assert( calculate.toString().match(/clearOutput\(\)/) ); ``` @@ -46,7 +44,7 @@ tests: function calculate(e) { e.preventDefault(); - clearOutput(); + //put your code here const total = Array.from(document.getElementsByClassName('cal-control')) .map(meal => Number(meal.value)) @@ -111,8 +109,6 @@ tests: document.getElementById('output').innerHTML = ''; document.getElementById('output').classList.remove('bordered-class'); }; - - const clearForm = () => {}; ``` @@ -270,12 +266,6 @@ tests: document.getElementById('output').innerHTML = ''; document.getElementById('output').classList.remove('bordered-class'); }; - - const clearForm = () => { - const foodInputs = Array.from( - document.getElementsByClassName('food-control') - ); - }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-69.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-69.md index fbdd85a2db..040c01ed6b 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-69.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-69.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44dde +id: 5ddb965c65d27e1512d44ddc title: Part 69 challengeType: 0 isBeta: true @@ -9,9 +9,7 @@ isBeta: true
-To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. - -Add `foodInputs.forEach()`. +Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`.
@@ -27,7 +25,7 @@ Add `foodInputs.forEach()`. ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/) ) + testString: assert( typeof clearForm === "function") ``` @@ -109,12 +107,6 @@ tests: document.getElementById('output').innerHTML = ''; document.getElementById('output').classList.remove('bordered-class'); }; - - const clearForm = () => { - const foodInputs = Array.from( - document.getElementsByClassName('food-control') - ); - }; ``` @@ -273,13 +265,7 @@ tests: document.getElementById('output').classList.remove('bordered-class'); }; - const clearForm = () => { - const foodInputs = Array.from( - document.getElementsByClassName('food-control') - ); - - foodInputs.forEach(); - }; + const clearForm = () => {}; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-70.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-70.md index 3c5dd7c560..20f586fe03 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-70.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-70.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44ddf +id: 5ddb965c65d27e1512d44ddd title: Part 70 challengeType: 0 isBeta: true @@ -9,11 +9,11 @@ isBeta: true
-We need to provide a callback function in the parentheses of `forEach()`. +We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" button. -This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. +Inside the function body of `clearForm`, create a variable named `foodInputs` and set it equal to an array of elements with the class name `food-control`. -In between the parentheses of the `.forEach()` function, enter `input => input.remove()`. +This is similar to how you declared the `total` variable previously in the `calculate` method.
@@ -29,7 +29,7 @@ In between the parentheses of the `.forEach()` function, enter `input => input.r ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) ) + testString: assert( code.replace(/\s/g, '').match(/const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/) ); ``` @@ -112,13 +112,7 @@ tests: document.getElementById('output').classList.remove('bordered-class'); }; - const clearForm = () => { - const foodInputs = Array.from( - document.getElementsByClassName('food-control') - ); - - foodInputs.forEach(); - }; + const clearForm = () => {}; ``` @@ -281,8 +275,6 @@ tests: const foodInputs = Array.from( document.getElementsByClassName('food-control') ); - - foodInputs.forEach(input => input.remove()); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-71.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-71.md index b442303aba..c49ee4d215 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-71.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-71.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44de0 +id: 5ddb965c65d27e1512d44dde title: Part 71 challengeType: 0 isBeta: true @@ -9,11 +9,9 @@ isBeta: true
-We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. +To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. -Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. - -This is similar to how you declared the `foodInputs` variable previously. +Add `foodInputs.forEach()`.
@@ -29,7 +27,7 @@ This is similar to how you declared the `foodInputs` variable previously. ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/) ); + testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/) ) ``` @@ -116,8 +114,6 @@ tests: const foodInputs = Array.from( document.getElementsByClassName('food-control') ); - - foodInputs.forEach(input => input.remove()); }; ``` @@ -282,11 +278,7 @@ tests: document.getElementsByClassName('food-control') ); - foodInputs.forEach(input => input.remove()); - - const calInputs = Array.from( - document.getElementsByClassName('extra-cal-control') - ); + foodInputs.forEach(); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-72.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-72.md index ea1022be33..e33ed8f685 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-72.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-72.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44de1 +id: 5ddb965c65d27e1512d44ddf title: Part 72 challengeType: 0 isBeta: true @@ -9,7 +9,11 @@ isBeta: true
-Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. +We need to provide a callback function in the parentheses of `forEach()`. + +This function will take each input item, in our case we'll call it `input`, as an argument. Then inside the function body, we need to call the `remove()` method. + +In between the parentheses of the `.forEach()` function, enter `input => input.remove()`.
@@ -25,7 +29,7 @@ Similar to how you removed each `foodInputs` elements, use the `forEach()` funct ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) ) + testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) ) ``` @@ -113,11 +117,7 @@ tests: document.getElementsByClassName('food-control') ); - foodInputs.forEach(input => input.remove()); - - const calInputs = Array.from( - document.getElementsByClassName('extra-cal-control') - ); + foodInputs.forEach(); }; ``` @@ -283,12 +283,6 @@ tests: ); foodInputs.forEach(input => input.remove()); - - const calInputs = Array.from( - document.getElementsByClassName('extra-cal-control') - ); - - calInputs.forEach(input => input.remove()); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-73.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-73.md index 1e74d9a426..d841c35493 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-73.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-73.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44de2 +id: 5ddb965c65d27e1512d44de0 title: Part 73 challengeType: 0 isBeta: true @@ -9,9 +9,11 @@ isBeta: true
-Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. +We also need to remove all elements with the class name `extra-cal-control` that are added when the user clicks the "Add" button. -Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. +Create a variable named `calInputs` and set it equal to an array of elements with the class name `extra-cal-control`. + +This is similar to how you declared the `foodInputs` variable previously.
@@ -27,7 +29,7 @@ Get a reference to the document element with the `id` of `calorie-form` and chai ```yml tests: - text: See description above for instructions. - testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) ); + testString: assert( code.replace(/\s/g, '').match(/const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/) ); ``` @@ -116,12 +118,6 @@ tests: ); foodInputs.forEach(input => input.remove()); - - const calInputs = Array.from( - document.getElementsByClassName('extra-cal-control') - ); - - calInputs.forEach(input => input.remove()); }; ``` @@ -291,10 +287,6 @@ tests: const calInputs = Array.from( document.getElementsByClassName('extra-cal-control') ); - - calInputs.forEach(input => input.remove()); - - document.getElementById('calorie-form').reset(); }; ``` diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-74.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-74.md index 784b5e8929..a35ee9e133 100644 --- a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-74.md +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-74.md @@ -1,5 +1,5 @@ --- -id: 5ddb965c65d27e1512d44de3 +id: 5ddb965c65d27e1512d44de1 title: Part 74 challengeType: 0 isBeta: true @@ -9,7 +9,7 @@ isBeta: true
-Congratulations! Have fun playing with your completed calorie counter. +Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element.
@@ -25,7 +25,7 @@ Congratulations! Have fun playing with your completed calorie counter. ```yml tests: - text: See description above for instructions. - testString: '' + testString: assert( code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) ) ``` @@ -118,10 +118,6 @@ tests: const calInputs = Array.from( document.getElementsByClassName('extra-cal-control') ); - - calInputs.forEach(input => input.remove()); - - document.getElementById('calorie-form').reset(); }; ``` @@ -210,9 +206,91 @@ tests:
```html + ```
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-75.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-75.md new file mode 100644 index 0000000000..d146b01634 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-75.md @@ -0,0 +1,302 @@ +--- +id: 5ddb965c65d27e1512d44de2 +title: Part 75 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. + +Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-76.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-76.md new file mode 100644 index 0000000000..626fce5487 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-76.md @@ -0,0 +1,218 @@ +--- +id: 5ddb965c65d27e1512d44de3 +title: Part 76 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Congratulations! Have fun playing with your completed calorie counter. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: '' +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + + + +``` + +