gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: tests for calorie counter

Browse Source 
split up calorie counter lesson
This commit is contained in:
lmilliken
2019-12-07 17:11:14 -07:00
committed by Mrugesh Mohapatra
parent b99d78858b
commit 9ba1f1f6d0
60 changed files with 1027 additions and 690 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json
View File

@ -89,220 +89,228 @@
"Part 20" "Part 20"
], ],
[ [
"5ddb965c65d27e1512d44dae", "5e302e80e003129199103c78",
"Part 21" "Part 21"
], ],
[ [
"5ddb965c65d27e1512d44daf", "5e302e8ce003129199103c79",
"Part 22" "Part 22"
], ],
[ [
"5ddb965c65d27e1512d44db0", "5ddb965c65d27e1512d44dae",
"Part 23" "Part 23"
], ],
[ [
"5ddb965c65d27e1512d44db1", "5ddb965c65d27e1512d44daf",
"Part 24" "Part 24"
], ],
[ [
"5ddb965c65d27e1512d44db2", "5ddb965c65d27e1512d44db0",
"Part 25" "Part 25"
], ],
[ [
"5ddb965c65d27e1512d44db3", "5ddb965c65d27e1512d44db1",
"Part 26" "Part 26"
], ],
[ [
"5ddb965c65d27e1512d44db4", "5ddb965c65d27e1512d44db2",
"Part 27" "Part 27"
], ],
[ [
"5ddb965c65d27e1512d44db5", "5ddb965c65d27e1512d44db3",
"Part 28" "Part 28"
], ],
[ [
"5ddb965c65d27e1512d44db6", "5ddb965c65d27e1512d44db4",
"Part 29" "Part 29"
], ],
[ [
"5ddb965c65d27e1512d44db7", "5ddb965c65d27e1512d44db5",
"Part 30" "Part 30"
], ],
[ [
"5ddb965c65d27e1512d44db8", "5ddb965c65d27e1512d44db6",
"Part 31" "Part 31"
], ],
[ [
"5ddb965c65d27e1512d44db9", "5ddb965c65d27e1512d44db7",
"Part 32" "Part 32"
], ],
[ [
"5ddb965c65d27e1512d44dba", "5ddb965c65d27e1512d44db8",
"Part 33" "Part 33"
], ],
[ [
"5ddb965c65d27e1512d44dbb", "5ddb965c65d27e1512d44db9",
"Part 34" "Part 34"
], ],
[ [
"5ddb965c65d27e1512d44dbc", "5ddb965c65d27e1512d44dba",
"Part 35" "Part 35"
], ],
[ [
"5ddb965c65d27e1512d44dbd", "5ddb965c65d27e1512d44dbb",
"Part 36" "Part 36"
], ],
[ [
"5ddb965c65d27e1512d44dbe", "5ddb965c65d27e1512d44dbc",
"Part 37" "Part 37"
], ],
[ [
"5ddb965c65d27e1512d44dbf", "5ddb965c65d27e1512d44dbd",
"Part 38" "Part 38"
], ],
[ [
"5ddb965c65d27e1512d44dc0", "5ddb965c65d27e1512d44dbe",
"Part 39" "Part 39"
], ],
[ [
"5ddb965c65d27e1512d44dc1", "5ddb965c65d27e1512d44dbf",
"Part 40" "Part 40"
], ],
[ [
"5ddb965c65d27e1512d44dc2", "5ddb965c65d27e1512d44dc0",
"Part 41" "Part 41"
], ],
[ [
"5ddb965c65d27e1512d44dc3", "5ddb965c65d27e1512d44dc1",
"Part 42" "Part 42"
], ],
[ [
"5ddb965c65d27e1512d44dc4", "5ddb965c65d27e1512d44dc2",
"Part 43" "Part 43"
], ],
[ [
"5ddb965c65d27e1512d44dc5", "5ddb965c65d27e1512d44dc3",
"Part 44" "Part 44"
], ],
[ [
"5ddb965c65d27e1512d44dc6", "5ddb965c65d27e1512d44dc4",
"Part 45" "Part 45"
], ],
[ [
"5ddb965c65d27e1512d44dc7", "5ddb965c65d27e1512d44dc5",
"Part 46" "Part 46"
], ],
[ [
"5ddb965c65d27e1512d44dc8", "5ddb965c65d27e1512d44dc6",
"Part 47" "Part 47"
], ],
[ [
"5ddb965c65d27e1512d44dc9", "5ddb965c65d27e1512d44dc7",
"Part 48" "Part 48"
], ],
[ [
"5ddb965c65d27e1512d44dca", "5ddb965c65d27e1512d44dc8",
"Part 49" "Part 49"
], ],
[ [
"5ddb965c65d27e1512d44dcb", "5ddb965c65d27e1512d44dc9",
"Part 50" "Part 50"
], ],
[ [
"5ddb965c65d27e1512d44dcc", "5ddb965c65d27e1512d44dca",
"Part 51" "Part 51"
], ],
[ [
"5ddb965c65d27e1512d44dcd", "5ddb965c65d27e1512d44dcb",
"Part 52" "Part 52"
], ],
[ [
"5ddb965c65d27e1512d44dce", "5ddb965c65d27e1512d44dcc",
"Part 53" "Part 53"
], ],
[ [
"5ddb965c65d27e1512d44dcf", "5ddb965c65d27e1512d44dcd",
"Part 54" "Part 54"
], ],
[ [
"5ddb965c65d27e1512d44dd0", "5ddb965c65d27e1512d44dce",
"Part 55" "Part 55"
], ],
[ [
"5ddb965c65d27e1512d44dd1", "5ddb965c65d27e1512d44dcf",
"Part 56" "Part 56"
], ],
[ [
"5ddb965c65d27e1512d44dd2", "5ddb965c65d27e1512d44dd0",
"Part 57" "Part 57"
], ],
[ [
"5ddb965c65d27e1512d44dd3", "5ddb965c65d27e1512d44dd1",
"Part 58" "Part 58"
], ],
[ [
"5ddb965c65d27e1512d44dd4", "5ddb965c65d27e1512d44dd2",
"Part 59" "Part 59"
], ],
[ [
"5ddb965c65d27e1512d44dd5", "5ddb965c65d27e1512d44dd3",
"Part 60" "Part 60"
], ],
[ [
"5ddb965c65d27e1512d44dd6", "5ddb965c65d27e1512d44dd4",
"Part 61" "Part 61"
], ],
[ [
"5ddb965c65d27e1512d44dd7", "5ddb965c65d27e1512d44dd5",
"Part 62" "Part 62"
], ],
[ [
"5ddb965c65d27e1512d44dd8", "5ddb965c65d27e1512d44dd6",
"Part 63" "Part 63"
], ],
[ [
"5ddb965c65d27e1512d44dd9", "5ddb965c65d27e1512d44dd7",
"Part 64" "Part 64"
], ],
[ [
"5ddb965c65d27e1512d44dda", "5ddb965c65d27e1512d44dd8",
"Part 65" "Part 65"
], ],
[ [
"5ddb965c65d27e1512d44ddb", "5ddb965c65d27e1512d44dd9",
"Part 66" "Part 66"
], ],
[ [
"5ddb965c65d27e1512d44ddc", "5ddb965c65d27e1512d44dda",
"Part 67" "Part 67"
], ],
[ [
"5ddb965c65d27e1512d44ddd", "5ddb965c65d27e1512d44ddb",
"Part 68" "Part 68"
], ],
[ [
"5ddb965c65d27e1512d44dde", "5ddb965c65d27e1512d44ddc",
"Part 69" "Part 69"
], ],
[ [
"5ddb965c65d27e1512d44ddf", "5ddb965c65d27e1512d44ddd",
"Part 70" "Part 70"
], ],
[ [
"5ddb965c65d27e1512d44de0", "5ddb965c65d27e1512d44dde",
"Part 71" "Part 71"
], ],
[ [
"5ddb965c65d27e1512d44de1", "5ddb965c65d27e1512d44ddf",
"Part 72" "Part 72"
], ],
[ [
"5ddb965c65d27e1512d44de2", "5ddb965c65d27e1512d44de0",
"Part 73" "Part 73"
], ],
[ [
"5ddb965c65d27e1512d44de3", "5ddb965c65d27e1512d44de1",
"Part 74" "Part 74"
],
[
"5ddb965c65d27e1512d44de2",
"Part 75"
],
[
"5ddb965c65d27e1512d44de3",
"Part 76"
] ]
], ],
"helpRoom": "Help", "helpRoom": "Help",

31
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-20.md
View File

@ -9,25 +9,24 @@ isBeta: true
<section id='description'> <section id='description'>
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 ```js
`arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);` arr.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
```
At `arr[0]`, the function is `(0, 1) => 0 + 1`, At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`,
since `arr[0] = 1 = currentValue` 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`. In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`.
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!
</section> </section>
@ -43,7 +42,7 @@ If you desire, you can now check your progress by adding `console.log(total)`, e
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\)/) );
``` ```
</section> </section>
@ -162,7 +161,9 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control')) const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value)) .map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0); .reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
} }
</script> </script>
``` ```

27
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-21.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dae id: 5e302e80e003129199103c78
title: Part 21 title: Part 21
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,13 +9,11 @@ isBeta: true
<section id='description'> <section id='description'>
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: `<input type="radio" name="sex" id="female" value="F" checked="">` 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.
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.
</section> </section>
@ -31,7 +29,7 @@ Create a variable named `maxCalories` and set it equal to the document element w
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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}\)/) );
``` ```
</section> </section>
@ -51,7 +49,12 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control')) const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value)) .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
} }
</script> </script>
``` ```
@ -148,9 +151,13 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control')) const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value)) .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 });
} }
</script> </script>
``` ```

22
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-22.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44daf id: 5e302e8ce003129199103c79
title: Part 22 title: Part 22
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,13 @@ isBeta: true
<section id='description'> <section id='description'>
Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `<input type="radio" name="sex" id="female" value="F" 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.
</section> </section>
@ -27,7 +31,7 @@ Check to see if the Female radio button is checked or not by chaining on the `.c
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\)/) );
``` ```
</section> </section>
@ -47,9 +51,13 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control')) const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value)) .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 });
} }
</script> </script>
``` ```
@ -147,8 +155,6 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control')) const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value)) .map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0); .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked;
} }
</script> </script>
``` ```

23
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-23.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44db0 id: 5ddb965c65d27e1512d44dae
title: Part 23 title: Part 23
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,19 +9,13 @@ isBeta: true
<section id='description'> <section id='description'>
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 you inspect the Female radio button you will notice its id: `<input type="radio" name="sex" id="female" value="F" checked="">`
if (5 - 3 === 4) {
return 'Yes';
} else {
return 'No';
}
```
`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`.
</section> </section>
@ -37,7 +31,8 @@ if (5 - 3 === 4) {
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -58,8 +53,6 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control')) const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value)) .map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0); .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked;
} }
</script> </script>
``` ```
@ -158,7 +151,7 @@ tests:
.map(meal => Number(meal.value)) .map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0); .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked ? 2000 : 2500; const maxCalories = document.getElementById('female');
} }
</script> </script>
``` ```

14
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-24.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44db1 id: 5ddb965c65d27e1512d44daf
title: Part 24 title: Part 24
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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: `<input type="radio" name="sex" id="female" value="F" 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')`.
</section> </section>
@ -27,7 +27,7 @@ Create a variable named `difference` and set it equal to `total - maxCalories`
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -49,7 +49,7 @@ tests:
.map(meal => Number(meal.value)) .map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0); .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked ? 2000 : 2500; const maxCalories = document.getElementById('female');
} }
</script> </script>
``` ```
@ -148,9 +148,7 @@ tests:
.map(meal => Number(meal.value)) .map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0); .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked ? 2000 : 2500; const maxCalories = document.getElementById('female').checked;
const difference = total - maxCalories;
} }
</script> </script>
``` ```

26
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-25.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44db2 id: 5ddb965c65d27e1512d44db0
title: Part 25 title: Part 25
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,13 +9,19 @@ isBeta: true
<section id='description'> <section id='description'>
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.
</section> </section>
@ -31,7 +37,7 @@ Use the same ternary syntax that you used to determine `maxCalories`.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -53,9 +59,7 @@ tests:
.map(meal => Number(meal.value)) .map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0); .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked ? 2000 : 2500; const maxCalories = document.getElementById('female').checked;
const difference = total - maxCalories;
} }
</script> </script>
``` ```
@ -155,10 +159,6 @@ tests:
.reduce((accumulator, currentValue) => accumulator + currentValue, 0); .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked ? 2000 : 2500; const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
} }
</script> </script>
``` ```

18
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-26.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44db3 id: 5ddb965c65d27e1512d44db1
title: Part 26 title: Part 26
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,11 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `<div id="output"></div>`. 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 `difference` and set it equal to `total - maxCalories`
Create a variable named `output` and set it equal to this division element with the `id` of `output`.
</section> </section>
@ -29,7 +27,7 @@ Create a variable named `output` and set it equal to this division element with
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -52,10 +50,6 @@ tests:
.reduce((accumulator, currentValue) => accumulator + currentValue, 0); .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked ? 2000 : 2500; const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
} }
</script> </script>
``` ```
@ -157,10 +151,6 @@ tests:
const maxCalories = document.getElementById('female').checked ? 2000 : 2500; const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
const difference = total - maxCalories; const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
} }
</script> </script>
``` ```

22
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-27.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44db4 id: 5ddb965c65d27e1512d44db2
title: Part 27 title: Part 27
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,15 +9,13 @@ isBeta: true
<section id='description'> <section id='description'>
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 If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative.
const myHeading1 = document.createElement('h1')
```
Create an `h3` element and assign it to a variable named `result`. Use the same ternary syntax that you used to determine `maxCalories`.
</section> </section>
@ -33,7 +31,7 @@ Create an `h3` element and assign it to a variable named `result`.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -58,10 +56,6 @@ tests:
const maxCalories = document.getElementById('female').checked ? 2000 : 2500; const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
const difference = total - maxCalories; const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
} }
</script> </script>
``` ```
@ -165,10 +159,6 @@ tests:
const difference = total - maxCalories; const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit'; const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
const result = document.createElement('h3');
} }
</script> </script>
``` ```

21
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-28.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44db5 id: 5ddb965c65d27e1512d44db3
title: Part 28 title: Part 28
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,15 +9,11 @@ isBeta: true
<section id='description'> <section id='description'>
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: `<div id="output"></div>`.
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 Create a variable named `output` and set it equal to this division element with the `id` of `output`.
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.
</section> </section>
@ -33,7 +29,7 @@ Create a variable named `resultText` and set it equal to a text node. Leave the
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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))
``` ```
</section> </section>
@ -60,10 +56,6 @@ tests:
const difference = total - maxCalories; const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit'; const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
const result = document.createElement('h3');
} }
</script> </script>
``` ```
@ -169,9 +161,6 @@ tests:
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit'; const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3');
const resultText = document.createTextNode();
} }
</script> </script>
``` ```

18
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-29.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44db6 id: 5ddb965c65d27e1512d44db4
title: Part 29 title: Part 29
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,11 +9,15 @@ isBeta: true
<section id='description'> <section id='description'>
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`.
</section> </section>
@ -29,7 +33,7 @@ If you want to see what the text currently looks like, try `console.log(resultTe
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -58,9 +62,6 @@ tests:
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit'; const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3');
const resultText = document.createTextNode();
} }
</script> </script>
``` ```
@ -168,7 +169,6 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
const resultText = document.createTextNode(difference);
} }
</script> </script>
``` ```

17
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-30.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44db7 id: 5ddb965c65d27e1512d44db5
title: Part 30 title: Part 30
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,11 +9,15 @@ isBeta: true
<section id='description'> <section id='description'>
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.
</section> </section>
@ -29,7 +33,7 @@ Wrap the `difference` in a `Math.abs()` function.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -60,7 +64,6 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
const resultText = document.createTextNode(difference);
} }
</script> </script>
``` ```
@ -168,7 +171,7 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
const resultText = document.createTextNode(Math.abs(difference)); const resultText = document.createTextNode();
} }
</script> </script>
``` ```

16
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-31.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44db8 id: 5ddb965c65d27e1512d44db6
title: Part 31 title: Part 31
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,7 +9,11 @@ isBeta: true
<section id='description'> <section id='description'>
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)`.
</section> </section>
@ -25,7 +29,7 @@ Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.a
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -56,7 +60,7 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
const resultText = document.createTextNode(Math.abs(difference)); const resultText = document.createTextNode();
} }
</script> </script>
``` ```
@ -164,9 +168,7 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
const resultText = document.createTextNode( const resultText = document.createTextNode(difference);
Math.abs(difference) + ' Calorie '
);
} }
</script> </script>
``` ```

18
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-32.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44db9 id: 5ddb965c65d27e1512d44db7
title: Part 32 title: Part 32
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,11 @@ isBeta: true
<section id='description'> <section id='description'>
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.
</section> </section>
@ -27,7 +29,7 @@ Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Ma
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -58,9 +60,7 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
const resultText = document.createTextNode( const resultText = document.createTextNode(difference);
Math.abs(difference) + ' Calorie '
);
} }
</script> </script>
``` ```
@ -168,9 +168,7 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
const resultText = document.createTextNode( const resultText = document.createTextNode(Math.abs(difference));
Math.abs(difference) + ' Calorie ' + surplusOrDeficit
);
} }
</script> </script>
``` ```

20
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-33.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dba id: 5ddb965c65d27e1512d44db8
title: Part 33 title: Part 33
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,15 +9,7 @@ isBeta: true
<section id='description'> <section id='description'>
The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`. Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`.
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.
</section> </section>
@ -33,7 +25,7 @@ Convert the data inside of `createTextNode()` to be a template literal.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -64,9 +56,7 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
const resultText = document.createTextNode( const resultText = document.createTextNode(Math.abs(difference));
Math.abs(difference) + ' Calorie ' + surplusOrDeficit
);
} }
</script> </script>
``` ```
@ -175,7 +165,7 @@ tests:
const result = document.createElement('h3'); const result = document.createElement('h3');
const resultText = document.createTextNode( const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}` Math.abs(difference) + ' Calorie '
); );
} }
</script> </script>

16
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-34.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dbb id: 5ddb965c65d27e1512d44db9
title: Part 34 title: Part 34
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,11 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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 Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`.
result.appendChild(resultText);
```
</section> </section>
@ -29,7 +27,7 @@ result.appendChild(resultText);
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -61,7 +59,7 @@ tests:
const result = document.createElement('h3'); const result = document.createElement('h3');
const resultText = document.createTextNode( const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}` Math.abs(difference) + ' Calorie '
); );
} }
</script> </script>
@ -171,10 +169,8 @@ tests:
const result = document.createElement('h3'); const result = document.createElement('h3');
const resultText = document.createTextNode( const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}` Math.abs(difference) + ' Calorie ' + surplusOrDeficit
); );
result.appendChild(resultText);
} }
</script> </script>
``` ```

21
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-35.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dbc id: 5ddb965c65d27e1512d44dba
title: Part 35 title: Part 35
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,15 @@ isBeta: true
<section id='description'> <section id='description'>
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.
</section> </section>
@ -27,7 +33,7 @@ Now if you enter in data and push the Calculate button, you will see the text ad
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\}\`/) );
``` ```
</section> </section>
@ -59,10 +65,8 @@ tests:
const result = document.createElement('h3'); const result = document.createElement('h3');
const resultText = document.createTextNode( const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}` Math.abs(difference) + ' Calorie ' + surplusOrDeficit
); );
result.appendChild(resultText);
} }
</script> </script>
``` ```
@ -173,9 +177,6 @@ tests:
const resultText = document.createTextNode( const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}` `${Math.abs(difference)} Calorie ${surplusOrDeficit}`
); );
result.appendChild(resultText);
output.appendChild(result);
} }
</script> </script>
``` ```

16
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-36.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dbd id: 5ddb965c65d27e1512d44dbb
title: Part 36 title: Part 36
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,11 @@ isBeta: true
<section id='description'> <section id='description'>
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);
```
</section> </section>
@ -27,7 +29,7 @@ Create an `hr` element and assign it to a variable named `line`.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\)/) );
``` ```
</section> </section>
@ -61,9 +63,6 @@ tests:
const resultText = document.createTextNode( const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}` `${Math.abs(difference)} Calorie ${surplusOrDeficit}`
); );
result.appendChild(resultText);
output.appendChild(result);
} }
</script> </script>
``` ```
@ -176,9 +175,6 @@ tests:
); );
result.appendChild(resultText); result.appendChild(resultText);
output.appendChild(result);
const line = document.createElement('hr');
} }
</script> </script>
``` ```

14
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-37.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dbe id: 5ddb965c65d27e1512d44dbc
title: Part 37 title: Part 37
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,7 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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!
</section> </section>
@ -25,7 +27,7 @@ Add the `line` to the `output` element using the `appendChild()` method.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\)/) );
``` ```
</section> </section>
@ -61,9 +63,6 @@ tests:
); );
result.appendChild(resultText); result.appendChild(resultText);
output.appendChild(result);
const line = document.createElement('hr');
} }
</script> </script>
``` ```
@ -177,9 +176,6 @@ tests:
result.appendChild(resultText); result.appendChild(resultText);
output.appendChild(result); output.appendChild(result);
const line = document.createElement('hr');
output.appendChild(line);
} }
</script> </script>
``` ```

14
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-38.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dbf id: 5ddb965c65d27e1512d44dbd
title: Part 38 title: Part 38
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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`.
</section> </section>
@ -27,7 +27,7 @@ Create an `h4` element and assign it to a variable named `recommended`.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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))
``` ```
</section> </section>
@ -64,9 +64,6 @@ tests:
result.appendChild(resultText); result.appendChild(resultText);
output.appendChild(result); output.appendChild(result);
const line = document.createElement('hr');
output.appendChild(line);
} }
</script> </script>
``` ```
@ -182,9 +179,6 @@ tests:
output.appendChild(result); output.appendChild(result);
const line = document.createElement('hr'); const line = document.createElement('hr');
output.appendChild(line);
const recommended = document.createElement('h4');
} }
</script> </script>
``` ```

14
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-39.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dc0 id: 5ddb965c65d27e1512d44dbe
title: Part 39 title: Part 39
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,7 @@ isBeta: true
<section id='description'> <section id='description'>
Create a text node and assign it to a variable named `recommendedText`. Add the `line` to the `output` element using the `appendChild()` method.
This is similar to how your created the `resultText` element previously.
</section> </section>
@ -27,7 +25,7 @@ This is similar to how your created the `resultText` element previously.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\)/) );
``` ```
</section> </section>
@ -66,9 +64,6 @@ tests:
output.appendChild(result); output.appendChild(result);
const line = document.createElement('hr'); const line = document.createElement('hr');
output.appendChild(line);
const recommended = document.createElement('h4');
} }
</script> </script>
``` ```
@ -185,9 +180,6 @@ tests:
const line = document.createElement('hr'); const line = document.createElement('hr');
output.appendChild(line); output.appendChild(line);
const recommended = document.createElement('h4');
const recommendedText = document.createTextNode();
} }
</script> </script>
``` ```

16
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-40.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dc1 id: 5ddb965c65d27e1512d44dbf
title: Part 40 title: Part 40
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,11 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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". Create an `h4` element and assign it to a variable named `recommended`.
This is similar to template literal syntax previously used to create `resultText`.
</section> </section>
@ -29,7 +27,7 @@ This is similar to template literal syntax previously used to create `resultText
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -69,9 +67,6 @@ tests:
const line = document.createElement('hr'); const line = document.createElement('hr');
output.appendChild(line); output.appendChild(line);
const recommended = document.createElement('h4');
const recommendedText = document.createTextNode();
} }
</script> </script>
``` ```
@ -190,9 +185,6 @@ tests:
output.appendChild(line); output.appendChild(line);
const recommended = document.createElement('h4'); const recommended = document.createElement('h4');
const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories`
);
} }
</script> </script>
``` ```

17
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-41.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dc2 id: 5ddb965c65d27e1512d44dc0
title: Part 41 title: Part 41
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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.
</section> </section>
@ -27,7 +27,7 @@ This is similar to how the `resultText` is appended to `result` previously.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -69,9 +69,6 @@ tests:
output.appendChild(line); output.appendChild(line);
const recommended = document.createElement('h4'); const recommended = document.createElement('h4');
const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories`
);
} }
</script> </script>
``` ```
@ -190,11 +187,7 @@ tests:
output.appendChild(line); output.appendChild(line);
const recommended = document.createElement('h4'); const recommended = document.createElement('h4');
const recommendedText = document.createTextNode( const recommendedText = document.createTextNode();
`${maxCalories} Recommended Calories`
);
recommended.appendChild(recommendedText);
} }
</script> </script>
``` ```

19
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-42.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dc3 id: 5ddb965c65d27e1512d44dc1
title: Part 42 title: Part 42
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,7 +9,11 @@ isBeta: true
<section id='description'> <section id='description'>
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`.
</section> </section>
@ -25,7 +29,7 @@ Append the `recommended` element to `output`.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\`/) );
``` ```
</section> </section>
@ -67,11 +71,7 @@ tests:
output.appendChild(line); output.appendChild(line);
const recommended = document.createElement('h4'); const recommended = document.createElement('h4');
const recommendedText = document.createTextNode( const recommendedText = document.createTextNode();
`${maxCalories} Recommended Calories`
);
recommended.appendChild(recommendedText);
} }
</script> </script>
``` ```
@ -193,9 +193,6 @@ tests:
const recommendedText = document.createTextNode( const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories` `${maxCalories} Recommended Calories`
); );
recommended.appendChild(recommendedText);
output.appendChild(recommended);
} }
</script> </script>
``` ```

14
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-43.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dc4 id: 5ddb965c65d27e1512d44dc2
title: Part 43 title: Part 43
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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.
</section> </section>
@ -27,7 +27,7 @@ Create an `h4` element and assign it to a variable named `consumed`.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\)/) );
``` ```
</section> </section>
@ -72,9 +72,6 @@ tests:
const recommendedText = document.createTextNode( const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories` `${maxCalories} Recommended Calories`
); );
recommended.appendChild(recommendedText);
output.appendChild(recommended);
} }
</script> </script>
``` ```
@ -198,9 +195,6 @@ tests:
); );
recommended.appendChild(recommendedText); recommended.appendChild(recommendedText);
output.appendChild(recommended);
const consumed = document.createElement('h4');
} }
</script> </script>
``` ```

20
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-44.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dc5 id: 5ddb965c65d27e1512d44dc3
title: Part 44 title: Part 44
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,15 +9,7 @@ isBeta: true
<section id='description'> <section id='description'>
Another way that we can set the text of the `consumed` element is to set the `innerHTML` property. Append the `recommended` element to `output`.
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.
</section> </section>
@ -33,7 +25,7 @@ Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `t
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\)/) );
``` ```
</section> </section>
@ -80,9 +72,6 @@ tests:
); );
recommended.appendChild(recommendedText); recommended.appendChild(recommendedText);
output.appendChild(recommended);
const consumed = document.createElement('h4');
} }
</script> </script>
``` ```
@ -207,9 +196,6 @@ tests:
recommended.appendChild(recommendedText); recommended.appendChild(recommendedText);
output.appendChild(recommended); output.appendChild(recommended);
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
} }
</script> </script>
``` ```

13
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-45.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dc6 id: 5ddb965c65d27e1512d44dc4
title: Part 45 title: Part 45
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,7 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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`.
</section> </section>
@ -25,7 +27,7 @@ Append the `consumed` element to `output`.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -73,9 +75,6 @@ tests:
recommended.appendChild(recommendedText); recommended.appendChild(recommendedText);
output.appendChild(recommended); output.appendChild(recommended);
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
} }
</script> </script>
``` ```
@ -202,8 +201,6 @@ tests:
output.appendChild(recommended); output.appendChild(recommended);
const consumed = document.createElement('h4'); const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
} }
</script> </script>
``` ```

19
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-46.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dc7 id: 5ddb965c65d27e1512d44dc5
title: Part 46 title: Part 46
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,13 +9,15 @@ isBeta: true
<section id='description'> <section id='description'>
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 `<h3 class="green-text">` 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.
</section> </section>
@ -31,7 +33,7 @@ Now if you submit the form again and inspect the `result` element, you will see
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\`/) );
``` ```
</section> </section>
@ -62,7 +64,6 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
//put your code here
const resultText = document.createTextNode( const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}` `${Math.abs(difference)} Calorie ${surplusOrDeficit}`
); );
@ -82,8 +83,6 @@ tests:
output.appendChild(recommended); output.appendChild(recommended);
const consumed = document.createElement('h4'); const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
} }
</script> </script>
``` ```
@ -191,7 +190,6 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
result.className = 'green-text';
const resultText = document.createTextNode( const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}` `${Math.abs(difference)} Calorie ${surplusOrDeficit}`
); );
@ -212,7 +210,6 @@ tests:
const consumed = document.createElement('h4'); const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`; consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
} }
</script> </script>
``` ```

17
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-47.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dc8 id: 5ddb965c65d27e1512d44dc6
title: Part 47 title: Part 47
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,11 +9,7 @@ isBeta: true
<section id='description'> <section id='description'>
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. Append the `consumed` element to `output`.
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`.
</section> </section>
@ -29,7 +25,7 @@ Set the `class` attribute of the `output` element equal to a class named `border
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\)/) );
``` ```
</section> </section>
@ -60,7 +56,6 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
result.className = 'green-text';
const resultText = document.createTextNode( const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}` `${Math.abs(difference)} Calorie ${surplusOrDeficit}`
); );
@ -81,9 +76,6 @@ tests:
const consumed = document.createElement('h4'); const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`; consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
//put your code here
} }
</script> </script>
``` ```
@ -191,7 +183,6 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
result.className = 'green-text';
const resultText = document.createTextNode( const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}` `${Math.abs(difference)} Calorie ${surplusOrDeficit}`
); );
@ -213,8 +204,6 @@ tests:
const consumed = document.createElement('h4'); const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`; consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed); output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
} }
</script> </script>
``` ```

19
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-48.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dc9 id: 5ddb965c65d27e1512d44dc7
title: Part 48 title: Part 48
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,11 +9,13 @@ isBeta: true
<section id='description'> <section id='description'>
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 `<h3 class="green-text">` and notice that the text is now green.
</section> </section>
@ -29,7 +31,7 @@ The `calculate()` function is now finished!
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]/) );
``` ```
</section> </section>
@ -60,7 +62,7 @@ tests:
const output = document.getElementById('output'); const output = document.getElementById('output');
const result = document.createElement('h3'); const result = document.createElement('h3');
result.className = 'green-text'; //put your code here
const resultText = document.createTextNode( const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}` `${Math.abs(difference)} Calorie ${surplusOrDeficit}`
); );
@ -82,8 +84,6 @@ tests:
const consumed = document.createElement('h4'); const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`; consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed); output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
} }
</script> </script>
``` ```
@ -213,9 +213,6 @@ tests:
const consumed = document.createElement('h4'); const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`; consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed); output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
} }
</script> </script>
``` ```

20
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-49.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dca id: 5ddb965c65d27e1512d44dc8
title: Part 49 title: Part 49
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,15 +9,11 @@ isBeta: true
<section id='description'> <section id='description'>
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 Set the `class` attribute of the `output` element equal to a class named `bordered-class`.
<button type="button" class="btn-add" id="add">
```
Get a reference to the `document` element with the `id` attribute `add`. This is similar to the reference to the `calorie-form` element that you wrote near the top of this document.
</section> </section>
@ -33,7 +29,7 @@ Get a reference to the `document` element with the `id` attribute `add`. This is
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]\)/) );
``` ```
</section> </section>
@ -87,8 +83,7 @@ tests:
consumed.innerHTML = `${total} Consumed Calories`; consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed); output.appendChild(consumed);
output.setAttribute('class', 'bordered-class'); //put your code here
output.style.backgroundColor = '#FFF9C4';
} }
</script> </script>
``` ```
@ -220,10 +215,7 @@ tests:
output.appendChild(consumed); output.appendChild(consumed);
output.setAttribute('class', 'bordered-class'); output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
} }
document.getElementById('add');
</script> </script>
``` ```

17
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-50.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dcb id: 5ddb965c65d27e1512d44dc9
title: Part 50 title: Part 50
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,13 +9,11 @@ isBeta: true
<section id='description'> <section id='description'>
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 The `calculate()` function is now finished!
function() {}
```
</section> </section>
@ -31,7 +29,7 @@ function() {}
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]/) );
``` ```
</section> </section>
@ -86,10 +84,7 @@ tests:
output.appendChild(consumed); output.appendChild(consumed);
output.setAttribute('class', 'bordered-class'); output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
} }
document.getElementById('add');
</script> </script>
``` ```
@ -222,8 +217,6 @@ tests:
output.setAttribute('class', 'bordered-class'); output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4'; output.style.backgroundColor = '#FFF9C4';
} }
document.getElementById('add').onclick = function() {};
</script> </script>
``` ```

20
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-51.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dcc id: 5ddb965c65d27e1512d44dca
title: Part 51 title: Part 51
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,15 @@ isBeta: true
<section id='description'> <section id='description'>
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
<button type="button" class="btn-add" id="add">
```
Get a reference to the `document` element with the `id` attribute `add`. This is similar to the reference to the `calorie-form` element that you wrote near the top of this document.
</section> </section>
@ -27,7 +33,7 @@ This is similar to how you created the `result` element previously.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]\)/) );
``` ```
</section> </section>
@ -84,8 +90,6 @@ tests:
output.setAttribute('class', 'bordered-class'); output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4'; output.style.backgroundColor = '#FFF9C4';
} }
document.getElementById('add').onclick = function() {};
</script> </script>
``` ```
@ -219,9 +223,7 @@ tests:
output.style.backgroundColor = '#FFF9C4'; output.style.backgroundColor = '#FFF9C4';
} }
document.getElementById('add').onclick = function() { document.getElementById('add');
const foodInput = document.createElement('input');
};
</script> </script>
``` ```

21
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-52.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dcd id: 5ddb965c65d27e1512d44dcb
title: Part 52 title: Part 52
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,7 +9,13 @@ isBeta: true
<section id='description'> <section id='description'>
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() {}
```
</section> </section>
@ -25,7 +31,7 @@ Set the `placeholder` property of the `foodInput` equal to `'food name'`.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\(\)\{\}/) );
``` ```
</section> </section>
@ -83,9 +89,7 @@ tests:
output.style.backgroundColor = '#FFF9C4'; output.style.backgroundColor = '#FFF9C4';
} }
document.getElementById('add').onclick = function() { document.getElementById('add');
const foodInput = document.createElement('input');
};
</script> </script>
``` ```
@ -219,10 +223,7 @@ tests:
output.style.backgroundColor = '#FFF9C4'; output.style.backgroundColor = '#FFF9C4';
} }
document.getElementById('add').onclick = function() { document.getElementById('add').onclick = function() {};
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
};
</script> </script>
``` ```

17
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-53.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dce id: 5ddb965c65d27e1512d44dcc
title: Part 53 title: Part 53
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,11 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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)`. This is similar to how you created the `result` element previously.
Add the class name `food-control` to the `foodInput` element.
</section> </section>
@ -29,7 +27,7 @@ Add the class name `food-control` to the `foodInput` element.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -87,10 +85,7 @@ tests:
output.style.backgroundColor = '#FFF9C4'; output.style.backgroundColor = '#FFF9C4';
} }
document.getElementById('add').onclick = function() { document.getElementById('add').onclick = function() {};
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
};
</script> </script>
``` ```
@ -226,8 +221,6 @@ tests:
document.getElementById('add').onclick = function() { document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input'); const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
}; };
</script> </script>
``` ```

14
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-54.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dcf id: 5ddb965c65d27e1512d44dcd
title: Part 54 title: Part 54
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,11 +9,7 @@ isBeta: true
<section id='description'> <section id='description'>
Notice that parent container of all of the inputs has an `id` of `entries`: `<div class="grid" id="entries">`. Set the `placeholder` property of the `foodInput` equal to `'food name'`.
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.
</section> </section>
@ -29,7 +25,7 @@ This is similar to the other `appendChild()` methods that you have used previous
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]/) );
``` ```
</section> </section>
@ -89,8 +85,6 @@ tests:
document.getElementById('add').onclick = function() { document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input'); const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
}; };
</script> </script>
``` ```
@ -228,8 +222,6 @@ tests:
document.getElementById('add').onclick = function() { document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input'); const foodInput = document.createElement('input');
foodInput.placeholder = 'food name'; foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
}; };
</script> </script>
``` ```

15
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-55.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dd0 id: 5ddb965c65d27e1512d44dce
title: Part 55 title: Part 55
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,7 +9,11 @@ isBeta: true
<section id='description'> <section id='description'>
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.
</section> </section>
@ -25,7 +29,7 @@ Create a variable named `calorieInput` and set it equal to another `input` docum
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]\)/) );
``` ```
</section> </section>
@ -86,8 +90,6 @@ tests:
document.getElementById('add').onclick = function() { document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input'); const foodInput = document.createElement('input');
foodInput.placeholder = 'food name'; foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
}; };
</script> </script>
``` ```
@ -226,9 +228,6 @@ tests:
const foodInput = document.createElement('input'); const foodInput = document.createElement('input');
foodInput.placeholder = 'food name'; foodInput.placeholder = 'food name';
foodInput.classList.add('food-control'); foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
}; };
</script> </script>
``` ```

16
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-56.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dd1 id: 5ddb965c65d27e1512d44dcf
title: Part 56 title: Part 56
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,11 @@ isBeta: true
<section id='description'> <section id='description'>
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`: `<div class="grid" id="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.
</section> </section>
@ -27,7 +29,7 @@ This is similar to how to set the class of the `output` element previously.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\)/) );
``` ```
</section> </section>
@ -89,9 +91,6 @@ tests:
const foodInput = document.createElement('input'); const foodInput = document.createElement('input');
foodInput.placeholder = 'food name'; foodInput.placeholder = 'food name';
foodInput.classList.add('food-control'); foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
}; };
</script> </script>
``` ```
@ -231,9 +230,6 @@ tests:
foodInput.placeholder = 'food name'; foodInput.placeholder = 'food name';
foodInput.classList.add('food-control'); foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput); document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
}; };
</script> </script>
``` ```

13
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-57.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dd2 id: 5ddb965c65d27e1512d44dd0
title: Part 57 title: Part 57
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,7 @@ isBeta: true
<section id='description'> <section id='description'>
The `calorieInput` element should only accept numbers that are 0 or above. Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`.
Set the `min` attribute of `calorieInput` to `0`.
</section> </section>
@ -27,7 +25,7 @@ Set the `min` attribute of `calorieInput` to `0`.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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));
``` ```
</section> </section>
@ -90,9 +88,6 @@ tests:
foodInput.placeholder = 'food name'; foodInput.placeholder = 'food name';
foodInput.classList.add('food-control'); foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput); document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
}; };
</script> </script>
``` ```
@ -234,8 +229,6 @@ tests:
document.getElementById('entries').appendChild(foodInput); document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input'); const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0');
}; };
</script> </script>
``` ```

12
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-58.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dd3 id: 5ddb965c65d27e1512d44dd1
title: Part 58 title: Part 58
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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.
</section> </section>
@ -27,7 +27,7 @@ We are adding this class name because in the `calculate()` function you created
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]\)/) );
``` ```
</section> </section>
@ -92,8 +92,6 @@ tests:
document.getElementById('entries').appendChild(foodInput); document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input'); const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0');
}; };
</script> </script>
``` ```
@ -236,8 +234,6 @@ tests:
const calorieInput = document.createElement('input'); const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number'); calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control');
}; };
</script> </script>
``` ```

12
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-59.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dd4 id: 5ddb965c65d27e1512d44dd2
title: Part 59 title: Part 59
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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`.
</section> </section>
@ -27,7 +27,7 @@ To keep track of them, add the class name `extra-cal-control` to the `calorieInp
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]\)/) );
``` ```
</section> </section>
@ -93,8 +93,6 @@ tests:
const calorieInput = document.createElement('input'); const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number'); calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control');
}; };
</script> </script>
``` ```
@ -238,8 +236,6 @@ tests:
const calorieInput = document.createElement('input'); const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number'); calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0'); calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control');
calorieInput.classList.add('extra-cal-control');
}; };
</script> </script>
``` ```

12
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-60.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dd5 id: 5ddb965c65d27e1512d44dd3
title: Part 60 title: Part 60
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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`.
</section> </section>
@ -27,7 +27,7 @@ The Add Entry functionality is now finished. You can test it by clicking the "Ad
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]\)/) );
``` ```
</section> </section>
@ -94,8 +94,6 @@ tests:
const calorieInput = document.createElement('input'); const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number'); calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0'); calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control');
calorieInput.classList.add('extra-cal-control');
}; };
</script> </script>
``` ```
@ -240,8 +238,6 @@ tests:
calorieInput.setAttribute('type', 'number'); calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0'); calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control'); calorieInput.classList.add('cal-control');
calorieInput.classList.add('extra-cal-control');
document.getElementById('entries').appendChild(calorieInput);
}; };
</script> </script>
``` ```

13
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-61.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dd6 id: 5ddb965c65d27e1512d44dd4
title: Part 61 title: Part 61
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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.
</section> </section>
@ -27,7 +27,7 @@ Get a reference to the `document` element with the `id` of `clear` and set its `
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]\)/) );
``` ```
</section> </section>
@ -95,8 +95,6 @@ tests:
calorieInput.setAttribute('type', 'number'); calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0'); calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control'); calorieInput.classList.add('cal-control');
calorieInput.classList.add('extra-cal-control');
document.getElementById('entries').appendChild(calorieInput);
}; };
</script> </script>
``` ```
@ -242,10 +240,7 @@ tests:
calorieInput.setAttribute('min', '0'); calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control'); calorieInput.classList.add('cal-control');
calorieInput.classList.add('extra-cal-control'); calorieInput.classList.add('extra-cal-control');
document.getElementById('entries').appendChild(calorieInput);
}; };
document.getElementById('clear').onclick = function() {};
</script> </script>
``` ```

16
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-62.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dd7 id: 5ddb965c65d27e1512d44dd5
title: Part 62 title: Part 62
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,7 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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.
</section> </section>
@ -25,7 +27,7 @@ Inside the `function` body, instruct your code to call two other functions, `cle
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\)/) );
``` ```
</section> </section>
@ -94,10 +96,7 @@ tests:
calorieInput.setAttribute('min', '0'); calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control'); calorieInput.classList.add('cal-control');
calorieInput.classList.add('extra-cal-control'); calorieInput.classList.add('extra-cal-control');
document.getElementById('entries').appendChild(calorieInput);
}; };
document.getElementById('clear').onclick = function() {};
</script> </script>
``` ```
@ -244,11 +243,6 @@ tests:
calorieInput.classList.add('extra-cal-control'); calorieInput.classList.add('extra-cal-control');
document.getElementById('entries').appendChild(calorieInput); document.getElementById('entries').appendChild(calorieInput);
}; };
document.getElementById('clear').onclick = function() {
clearOutput();
clearForm();
};
</script> </script>
``` ```

24
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-63.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dd8 id: 5ddb965c65d27e1512d44dd6
title: Part 63 title: Part 63
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,13 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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 Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`.
const clearOutput = () => {}
```
This is similar to `function clearOutput () {}`.
</section> </section>
@ -31,7 +27,7 @@ This is similar to `function clearOutput () {}`.
```yml ```yml
tests: tests:
- text: See description above for instructions. - text: See description above for instructions.
testString: assert( typeof clearOutput === "function" ); testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/) );
``` ```
</section> </section>
@ -102,11 +98,6 @@ tests:
calorieInput.classList.add('extra-cal-control'); calorieInput.classList.add('extra-cal-control');
document.getElementById('entries').appendChild(calorieInput); document.getElementById('entries').appendChild(calorieInput);
}; };
document.getElementById('clear').onclick = function() {
clearOutput();
clearForm();
};
</script> </script>
``` ```
@ -254,12 +245,7 @@ tests:
document.getElementById('entries').appendChild(calorieInput); document.getElementById('entries').appendChild(calorieInput);
}; };
document.getElementById('clear').onclick = function() { document.getElementById('clear').onclick = function() {};
clearOutput();
clearForm();
};
const clearOutput = () => {};
</script> </script>
``` ```

19
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-64.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dd9 id: 5ddb965c65d27e1512d44dd7
title: Part 64 title: Part 64
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,7 @@ isBeta: true
<section id='description'> <section id='description'>
We need to remove the contents inside of element with the `id` of `output`. Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly.
In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`.
</section> </section>
@ -27,7 +25,7 @@ In the body of the `clearOutput()` function, set the `innerHTML` property of tha
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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) )
``` ```
</section> </section>
@ -99,12 +97,7 @@ tests:
document.getElementById('entries').appendChild(calorieInput); document.getElementById('entries').appendChild(calorieInput);
}; };
document.getElementById('clear').onclick = function() { document.getElementById('clear').onclick = function() {};
clearOutput();
clearForm();
};
const clearOutput = () => {};
</script> </script>
``` ```
@ -256,10 +249,6 @@ tests:
clearOutput(); clearOutput();
clearForm(); clearForm();
}; };
const clearOutput = () => {
document.getElementById('output').innerHTML = '';
};
</script> </script>
``` ```

21
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-65.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dda id: 5ddb965c65d27e1512d44dd8
title: Part 65 title: Part 65
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,14 +9,14 @@ isBeta: true
<section id='description'> <section id='description'>
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. Create a variable named `clearOutput` and set it equal to a blank arrow function:
Remove the `bordered-class` class. For example:
```js ```js
document.getElementById('my-div').classList.remove('my-class') const clearOutput = () => {}
``` ```
This is similar to `function clearOutput () {}`.
</section> </section>
## Instructions ## Instructions
@ -31,7 +31,7 @@ document.getElementById('my-div').classList.remove('my-class')
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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" );
``` ```
</section> </section>
@ -107,10 +107,6 @@ tests:
clearOutput(); clearOutput();
clearForm(); clearForm();
}; };
const clearOutput = () => {
document.getElementById('output').innerHTML = '';
};
</script> </script>
``` ```
@ -263,10 +259,7 @@ tests:
clearForm(); clearForm();
}; };
const clearOutput = () => { const clearOutput = () => {};
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
</script> </script>
``` ```

16
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-66.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44ddb id: 5ddb965c65d27e1512d44dd9
title: Part 66 title: Part 66
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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, `''`.
</section> </section>
@ -27,7 +27,7 @@ In the `calculate()` function, right after `event.preventDefault()`, call the `c
```yml ```yml
tests: tests:
- text: See description above for instructions. - text: See description above for instructions.
testString: assert( calculate.toString().match(/clearOutput\(\)/) ); testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/) );
``` ```
</section> </section>
@ -44,7 +44,6 @@ tests:
function calculate(e) { function calculate(e) {
e.preventDefault(); e.preventDefault();
//put your code here
const total = Array.from(document.getElementsByClassName('cal-control')) const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value)) .map(meal => Number(meal.value))
@ -105,10 +104,7 @@ tests:
clearForm(); clearForm();
}; };
const clearOutput = () => { const clearOutput = () => {};
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
</script> </script>
``` ```
@ -201,7 +197,6 @@ tests:
function calculate(e) { function calculate(e) {
e.preventDefault(); e.preventDefault();
clearOutput();
const total = Array.from(document.getElementsByClassName('cal-control')) const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value)) .map(meal => Number(meal.value))
@ -264,7 +259,6 @@ tests:
const clearOutput = () => { const clearOutput = () => {
document.getElementById('output').innerHTML = ''; document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
}; };
</script> </script>
``` ```

17
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-67.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44ddc id: 5ddb965c65d27e1512d44dda
title: Part 67 title: Part 67
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,7 +9,13 @@ isBeta: true
<section id='description'> <section id='description'>
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')
```
</section> </section>
@ -25,7 +31,7 @@ Create a variable named `clearForm` and set it equal to a blank arrow function l
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]\)/) );
``` ```
</section> </section>
@ -42,7 +48,6 @@ tests:
function calculate(e) { function calculate(e) {
e.preventDefault(); e.preventDefault();
clearOutput();
const total = Array.from(document.getElementsByClassName('cal-control')) const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value)) .map(meal => Number(meal.value))
@ -105,7 +110,6 @@ tests:
const clearOutput = () => { const clearOutput = () => {
document.getElementById('output').innerHTML = ''; document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
}; };
</script> </script>
``` ```
@ -199,7 +203,6 @@ tests:
function calculate(e) { function calculate(e) {
e.preventDefault(); e.preventDefault();
clearOutput();
const total = Array.from(document.getElementsByClassName('cal-control')) const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value)) .map(meal => Number(meal.value))
@ -264,8 +267,6 @@ tests:
document.getElementById('output').innerHTML = ''; document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class'); document.getElementById('output').classList.remove('bordered-class');
}; };
const clearForm = () => {};
</script> </script>
``` ```

20
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-68.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44ddd id: 5ddb965c65d27e1512d44ddb
title: Part 68 title: Part 68
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,11 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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`. In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function.
This is similar to how you declared the `total` variable previously in the `calculate` method.
</section> </section>
@ -29,7 +27,7 @@ This is similar to how you declared the `total` variable previously in the `calc
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\(\)/) );
``` ```
</section> </section>
@ -46,7 +44,7 @@ tests:
function calculate(e) { function calculate(e) {
e.preventDefault(); e.preventDefault();
clearOutput(); //put your code here
const total = Array.from(document.getElementsByClassName('cal-control')) const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value)) .map(meal => Number(meal.value))
@ -111,8 +109,6 @@ tests:
document.getElementById('output').innerHTML = ''; document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class'); document.getElementById('output').classList.remove('bordered-class');
}; };
const clearForm = () => {};
</script> </script>
``` ```
@ -270,12 +266,6 @@ tests:
document.getElementById('output').innerHTML = ''; document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class'); document.getElementById('output').classList.remove('bordered-class');
}; };
const clearForm = () => {
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
};
</script> </script>
``` ```

22
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-69.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44dde id: 5ddb965c65d27e1512d44ddc
title: Part 69 title: Part 69
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,7 @@ isBeta: true
<section id='description'> <section id='description'>
To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`.
Add `foodInputs.forEach()`.
</section> </section>
@ -27,7 +25,7 @@ Add `foodInputs.forEach()`.
```yml ```yml
tests: tests:
- text: See description above for instructions. - text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/) ) testString: assert( typeof clearForm === "function")
``` ```
</section> </section>
@ -109,12 +107,6 @@ tests:
document.getElementById('output').innerHTML = ''; document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class'); document.getElementById('output').classList.remove('bordered-class');
}; };
const clearForm = () => {
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
};
</script> </script>
``` ```
@ -273,13 +265,7 @@ tests:
document.getElementById('output').classList.remove('bordered-class'); document.getElementById('output').classList.remove('bordered-class');
}; };
const clearForm = () => { const clearForm = () => {};
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
foodInputs.forEach();
};
</script> </script>
``` ```

20
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-70.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44ddf id: 5ddb965c65d27e1512d44ddd
title: Part 70 title: Part 70
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,11 +9,11 @@ isBeta: true
<section id='description'> <section id='description'>
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.
</section> </section>
@ -29,7 +29,7 @@ In between the parentheses of the `.forEach()` function, enter `input => input.r
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]\)\)/) );
``` ```
</section> </section>
@ -112,13 +112,7 @@ tests:
document.getElementById('output').classList.remove('bordered-class'); document.getElementById('output').classList.remove('bordered-class');
}; };
const clearForm = () => { const clearForm = () => {};
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
foodInputs.forEach();
};
</script> </script>
``` ```
@ -281,8 +275,6 @@ tests:
const foodInputs = Array.from( const foodInputs = Array.from(
document.getElementsByClassName('food-control') document.getElementsByClassName('food-control')
); );
foodInputs.forEach(input => input.remove());
}; };
</script> </script>
``` ```

18
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-71.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44de0 id: 5ddb965c65d27e1512d44dde
title: Part 71 title: Part 71
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,11 +9,9 @@ isBeta: true
<section id='description'> <section id='description'>
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`. Add `foodInputs.forEach()`.
This is similar to how you declared the `foodInputs` variable previously.
</section> </section>
@ -29,7 +27,7 @@ This is similar to how you declared the `foodInputs` variable previously.
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\(\)/) )
``` ```
</section> </section>
@ -116,8 +114,6 @@ tests:
const foodInputs = Array.from( const foodInputs = Array.from(
document.getElementsByClassName('food-control') document.getElementsByClassName('food-control')
); );
foodInputs.forEach(input => input.remove());
}; };
</script> </script>
``` ```
@ -282,11 +278,7 @@ tests:
document.getElementsByClassName('food-control') document.getElementsByClassName('food-control')
); );
foodInputs.forEach(input => input.remove()); foodInputs.forEach();
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
}; };
</script> </script>
``` ```

22
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-72.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44de1 id: 5ddb965c65d27e1512d44ddf
title: Part 72 title: Part 72
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,7 +9,11 @@ isBeta: true
<section id='description'> <section id='description'>
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()`.
</section> </section>
@ -25,7 +29,7 @@ Similar to how you removed each `foodInputs` elements, use the `forEach()` funct
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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\(\)\)/) )
``` ```
</section> </section>
@ -113,11 +117,7 @@ tests:
document.getElementsByClassName('food-control') document.getElementsByClassName('food-control')
); );
foodInputs.forEach(input => input.remove()); foodInputs.forEach();
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
}; };
</script> </script>
``` ```
@ -283,12 +283,6 @@ tests:
); );
foodInputs.forEach(input => input.remove()); foodInputs.forEach(input => input.remove());
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
calInputs.forEach(input => input.remove());
}; };
</script> </script>
``` ```

20
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-73.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44de2 id: 5ddb965c65d27e1512d44de0
title: Part 73 title: Part 73
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,9 +9,11 @@ isBeta: true
<section id='description'> <section id='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. 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.
</section> </section>
@ -27,7 +29,7 @@ Get a reference to the document element with the `id` of `calorie-form` and chai
```yml ```yml
tests: tests:
- text: See description above for instructions. - 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[\'\"\`]\)\)/) );
``` ```
</section> </section>
@ -116,12 +118,6 @@ tests:
); );
foodInputs.forEach(input => input.remove()); foodInputs.forEach(input => input.remove());
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
calInputs.forEach(input => input.remove());
}; };
</script> </script>
``` ```
@ -291,10 +287,6 @@ tests:
const calInputs = Array.from( const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control') document.getElementsByClassName('extra-cal-control')
); );
calInputs.forEach(input => input.remove());
document.getElementById('calorie-form').reset();
}; };
</script> </script>
``` ```

94
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-74.md
View File

@ -1,5 +1,5 @@
--- ---
id: 5ddb965c65d27e1512d44de3 id: 5ddb965c65d27e1512d44de1
title: Part 74 title: Part 74
challengeType: 0 challengeType: 0
isBeta: true isBeta: true
@ -9,7 +9,7 @@ isBeta: true
<section id='description'> <section id='description'>
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.
</section> </section>
@ -25,7 +25,7 @@ Congratulations! Have fun playing with your completed calorie counter.
```yml ```yml
tests: tests:
- text: See description above for instructions. - text: See description above for instructions.
testString: '' testString: assert( code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) )
``` ```
</section> </section>
@ -118,10 +118,6 @@ tests:
const calInputs = Array.from( const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control') document.getElementsByClassName('extra-cal-control')
); );
calInputs.forEach(input => input.remove());
document.getElementById('calorie-form').reset();
}; };
</script> </script>
``` ```
@ -210,9 +206,91 @@ tests:
<section id='solution'> <section id='solution'>
```html ```html
<script>
document.getElementById('calorie-form').onsubmit = calculate;
<!-- Solution not necessary for the last step --> function calculate(e) {
e.preventDefault();
clearOutput();
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 ? 2000 : 2500;
const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
const result = document.createElement('h3');
result.className = 'green-text';
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
);
result.appendChild(resultText);
output.appendChild(result);
const line = document.createElement('hr');
output.appendChild(line);
const recommended = document.createElement('h4');
const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories`
);
recommended.appendChild(recommendedText);
output.appendChild(recommended);
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
}
document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
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() {
clearOutput();
clearForm();
};
const clearOutput = () => {
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
const clearForm = () => {
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
foodInputs.forEach(input => input.remove());
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
calInputs.forEach(input => input.remove());
};
</script>
``` ```
</section> </section>

302
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-75.md Normal file
View File

@ -0,0 +1,302 @@
---
id: 5ddb965c65d27e1512d44de2
title: Part 75
challengeType: 0
isBeta: true
---
## Description
<section id='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.
</section>
## Instructions
<section id='instructions'>
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) );
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<script>
document.getElementById('calorie-form').onsubmit = calculate;
function calculate(e) {
e.preventDefault();
clearOutput();
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 ? 2000 : 2500;
const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
const result = document.createElement('h3');
result.className = 'green-text';
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
);
result.appendChild(resultText);
output.appendChild(result);
const line = document.createElement('hr');
output.appendChild(line);
const recommended = document.createElement('h4');
const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories`
);
recommended.appendChild(recommendedText);
output.appendChild(recommended);
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
}
document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
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() {
clearOutput();
clearForm();
};
const clearOutput = () => {
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
const clearForm = () => {
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
foodInputs.forEach(input => input.remove());
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
calInputs.forEach(input => input.remove());
};
</script>
```
</div>
### Before Test
<div id='html-setup'>
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<form id="calorie-form">
<h2 class="center">Calorie Counter</h2>
<div class="grid">
<legend>Sex</legend>
<div>
<input type="radio" name="sex" id="female" value="F" checked />
<label for="female">
Female (2,000 calories)
</label>
<div>
<input type="radio" name="sex" id="male" value="M" />
<label for="male">
Male (2,500 calories)
</label>
</div>
</div>
</div>
<div class="grid" id="entries">
Breakfast
<input
type="number"
min="0"
class="cal-control"
id="breakfast"
/><br />
Lunch
<input type="number" min="0" class="cal-control" id="lunch" /><br />
Dinner <input type="number" min="0" class="cal-control" id="dinner" />
</div>
<button type="button" class="btn-add" id="add">
Add Entry
</button>
<button type="submit" class="btn-solid" id="calculate">
Calculate
</button>
<button type="button" class="btn-outline" id="clear">
Clear
</button>
</form>
<div id="output"></div>
</div>
</body>
</html>
```
</div>
### After Test
<div id='html-teardown'>
```html
</body>
</html>
```
</div>
</section>
## Solution
<section id='solution'>
```html
<script>
document.getElementById('calorie-form').onsubmit = calculate;
function calculate(e) {
e.preventDefault();
clearOutput();
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 ? 2000 : 2500;
const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
const result = document.createElement('h3');
result.className = 'green-text';
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
);
result.appendChild(resultText);
output.appendChild(result);
const line = document.createElement('hr');
output.appendChild(line);
const recommended = document.createElement('h4');
const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories`
);
recommended.appendChild(recommendedText);
output.appendChild(recommended);
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
}
document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
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() {
clearOutput();
clearForm();
};
const clearOutput = () => {
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
const clearForm = () => {
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
foodInputs.forEach(input => input.remove());
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
calInputs.forEach(input => input.remove());
document.getElementById('calorie-form').reset();
};
</script>
```
</section>

218
curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-76.md Normal file
View File

@ -0,0 +1,218 @@
---
id: 5ddb965c65d27e1512d44de3
title: Part 76
challengeType: 0
isBeta: true
---
## Description
<section id='description'>
Congratulations! Have fun playing with your completed calorie counter.
</section>
## Instructions
<section id='instructions'>
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: See description above for instructions.
testString: ''
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<script>
document.getElementById('calorie-form').onsubmit = calculate;
function calculate(e) {
e.preventDefault();
clearOutput();
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 ? 2000 : 2500;
const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
const result = document.createElement('h3');
result.className = 'green-text';
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
);
result.appendChild(resultText);
output.appendChild(result);
const line = document.createElement('hr');
output.appendChild(line);
const recommended = document.createElement('h4');
const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories`
);
recommended.appendChild(recommendedText);
output.appendChild(recommended);
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
}
document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
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() {
clearOutput();
clearForm();
};
const clearOutput = () => {
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
const clearForm = () => {
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
foodInputs.forEach(input => input.remove());
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
calInputs.forEach(input => input.remove());
document.getElementById('calorie-form').reset();
};
</script>
```
</div>
### Before Test
<div id='html-setup'>
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<form id="calorie-form">
<h2 class="center">Calorie Counter</h2>
<div class="grid">
<legend>Sex</legend>
<div>
<input type="radio" name="sex" id="female" value="F" checked />
<label for="female">
Female (2,000 calories)
</label>
<div>
<input type="radio" name="sex" id="male" value="M" />
<label for="male">
Male (2,500 calories)
</label>
</div>
</div>
</div>
<div class="grid" id="entries">
Breakfast
<input
type="number"
min="0"
class="cal-control"
id="breakfast"
/><br />
Lunch
<input type="number" min="0" class="cal-control" id="lunch" /><br />
Dinner <input type="number" min="0" class="cal-control" id="dinner" />
</div>
<button type="button" class="btn-add" id="add">
Add Entry
</button>
<button type="submit" class="btn-solid" id="calculate">
Calculate
</button>
<button type="button" class="btn-outline" id="clear">
Clear
</button>
</form>
<div id="output"></div>
</div>
</body>
</html>
```
</div>
### After Test
<div id='html-teardown'>
```html
</body>
</html>
```
</div>
</section>
## Solution
<section id='solution'>
```html
<!-- Solution not necessary for the last step -->
```
</section>