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

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

@ -15,7 +15,7 @@ The `reduce()` method takes a callback function with at least two arguments, an
or using arrow functions:
`(accumulator, currentValue) => { /*code to run*/ }`
`(accumulator, currentValue) => { /* code to run */ }`
Insert the above callback function as an argument in the `.reduce()` method.

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

@ -15,7 +15,7 @@ Here is an example of a `reduce()` method with an empty object as its initial va
```js
arr.reduce((accumulator, currentValue) => {
/*code to run*/
/* code to run */
}, {});
```

33
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'>
We want to sum up all of the numbers in the `total` array.
Let's says we have an array `[1, 3, 5]` named `arr` and we want to sum up all the numbers.
As an example, let's says we have an array `[1,3,5]` named `arr` and we want to sum up all the numbers.
We can use the reduce function as follows:
We can use the reduce function as follows
`arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);`
```js
arr.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
```
At `arr[0]`, the function is `(0, 1) => 0 + 1`,
since `arr[0] = 1 = currentValue`
At `arr[0]`, the function is `(0, 1) => { return 0 + 1 }`,
since `arr[0] = 1 = currentValue`.
Note that the `accumulator` starts at `0` because that is what we provide as the initial value argument. After running `0 + 1`, the accumulator is now `1`, which is passed to next invocation of the callback function at
At `arr[1]`, the function is `(1, 3) => 1 + 3`,
arr[1], the function is `(1, 3) => 1 + 3`,
Finally at `arr[2]`, the function is `(4, 5) => 4 + 5`. Now the accumulator is `9` and since we have gone through all of the items in `arr`, the `reduce()` method will return `9`.
arr[2], the function is `(4, 5) => 4 + 5`, now the accumulator is `9` and we have gone through all of the items in `arr`, the reduce function will return `9`.
Replace the whole body of the callback function (`{/*code to run*\/}`) with `accumulator + currentValue`.
If you desire, you can now check your progress by adding `console.log(total)`, entering in values in the form, and then push the Calculate button. You will see that the console will log the sum of the inputs that you entered, this is awesome!
In the body of the callback function, replace `/* code to run */` with `return accumulator + currentValue`.
</section>
@ -43,7 +42,7 @@ If you desire, you can now check your progress by adding `console.log(total)`, e
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/) );
testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>{returnaccumulator\+currentValue\;?},0\)/) );
```
</section>
@ -64,7 +63,7 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => {
/*code to run*/
/* code to run */
}, 0);
}
</script>
@ -162,7 +161,9 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
}
</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
challengeType: 0
isBeta: true
@ -9,13 +9,11 @@ isBeta: true
<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="">`
Create a variable named `maxCalories` and set it equal to the document element with the `id` of `female`. This is similar to how you reference the element with the `id` of `calorie-form` at the beginning of this file.
When you enter calorie values in the form and push the Calculate button, you will see the values of `accumulator` and `currentValue` in each iteration of the `reduce()` callback function.
</section>
@ -31,7 +29,7 @@ Create a variable named `maxCalories` and set it equal to the document element w
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test(code));
testString: assert( code.replace(/\s/g, '').match(/console.log\({accumulator}\)/) );
```
</section>
@ -51,7 +49,12 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
.reduce((accumulator, currentValue) => {
// log the values of the `accumulator` and `currentValue` here
return accumulator + currentValue;
}, 0);
// log the value of `total` here
}
</script>
```
@ -148,9 +151,13 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
.reduce((accumulator, currentValue) => {
console.log({ accumulator });
console.log({ currentValue });
return accumulator + currentValue;
}, 0);
const maxCalories = document.getElementById('female');
console.log({ total });
}
</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
challengeType: 0
isBeta: true
@ -9,9 +9,13 @@ isBeta: true
<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>
@ -27,7 +31,7 @@ Check to see if the Female radio button is checked or not by chaining on the `.c
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test(code));
testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/) );
```
</section>
@ -47,9 +51,13 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
.reduce((accumulator, currentValue) => {
//console.log({ accumulator });
//console.log({ currentValue });
return accumulator + currentValue;
}, 0);
const maxCalories = document.getElementById('female');
//console.log({ total });
}
</script>
```
@ -147,8 +155,6 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked;
}
</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
challengeType: 0
isBeta: true
@ -9,19 +9,13 @@ isBeta: true
<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 (5 - 3 === 4) {
return 'Yes';
} else {
return 'No';
}
```
If you inspect the Female radio button you will notice its id: `<input type="radio" name="sex" id="female" value="F" checked="">`
`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>
@ -37,7 +31,8 @@ if (5 - 3 === 4) {
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test(code));
# testString: assert(code.match());
testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test(code));
```
</section>
@ -58,8 +53,6 @@ tests:
const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked;
}
</script>
```
@ -158,7 +151,7 @@ tests:
.map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
const maxCalories = document.getElementById('female');
}
</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
challengeType: 0
isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<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>
@ -27,7 +27,7 @@ Create a variable named `difference` and set it equal to `total - maxCalories`
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code));
testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test(code));
```
</section>
@ -49,7 +49,7 @@ tests:
.map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
const maxCalories = document.getElementById('female');
}
</script>
```
@ -148,9 +148,7 @@ tests:
.map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
const difference = total - maxCalories;
const maxCalories = document.getElementById('female').checked;
}
</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
challengeType: 0
isBeta: true
@ -9,13 +9,19 @@ isBeta: true
<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>
@ -31,7 +37,7 @@ Use the same ternary syntax that you used to determine `maxCalories`.
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test(code));
testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked\s*\?\s*2000\s*\:\s*2500/.test(code));
```
</section>
@ -53,9 +59,7 @@ tests:
.map(meal => Number(meal.value))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
const difference = total - maxCalories;
const maxCalories = document.getElementById('female').checked;
}
</script>
```
@ -155,10 +159,6 @@ tests:
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
}
</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
challengeType: 0
isBeta: true
@ -9,11 +9,9 @@ isBeta: true
<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 `output` and set it equal to this division element with the `id` of `output`.
Create a variable named `difference` and set it equal to `total - maxCalories`
</section>
@ -29,7 +27,7 @@ Create a variable named `output` and set it equal to this division element with
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test(code))
testString: assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code));
```
</section>
@ -52,10 +50,6 @@ tests:
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
}
</script>
```
@ -157,10 +151,6 @@ tests:
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
}
</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
challengeType: 0
isBeta: true
@ -9,15 +9,13 @@ isBeta: true
<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
const myHeading1 = document.createElement('h1')
```
If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative.
Create an `h3` element and assign it to a variable named `result`.
Use the same ternary syntax that you used to determine `maxCalories`.
</section>
@ -33,7 +31,7 @@ Create an `h3` element and assign it to a variable named `result`.
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test(code));
testString: assert(/const\s*surplusOrDeficit\s*\=\s*difference\s*\>\s*0\s*\?\s*[\'\"\`]Surplus[\'\"\`]\s*\:\s*[\'\"\`]Deficit[\'\"\`]/.test(code));
```
</section>
@ -58,10 +56,6 @@ tests:
const maxCalories = document.getElementById('female').checked ? 2000 : 2500;
const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
}
</script>
```
@ -165,10 +159,6 @@ tests:
const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
const result = document.createElement('h3');
}
</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
challengeType: 0
isBeta: true
@ -9,15 +9,11 @@ isBeta: true
<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
const myText = document.createTextNode("Hello world!")
```
Create a variable named `resultText` and set it equal to a text node. Leave the string empty for now.
Create a variable named `output` and set it equal to this division element with the `id` of `output`.
</section>
@ -33,7 +29,7 @@ Create a variable named `resultText` and set it equal to a text node. Leave the
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code));
testString: assert(/const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test(code))
```
</section>
@ -60,10 +56,6 @@ tests:
const difference = total - maxCalories;
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
const result = document.createElement('h3');
}
</script>
```
@ -169,9 +161,6 @@ tests:
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
const result = document.createElement('h3');
const resultText = document.createTextNode();
}
</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
challengeType: 0
isBeta: true
@ -9,11 +9,15 @@ isBeta: true
<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>
@ -29,7 +33,7 @@ If you want to see what the text currently looks like, try `console.log(resultTe
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test(code));
testString: assert(/const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test(code));
```
</section>
@ -58,9 +62,6 @@ tests:
const surplusOrDeficit = difference > 0 ? 'Surplus' : 'Deficit';
const output = document.getElementById('output');
const result = document.createElement('h3');
const resultText = document.createTextNode();
}
</script>
```
@ -168,7 +169,6 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
const resultText = document.createTextNode(difference);
}
</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
challengeType: 0
isBeta: true
@ -9,11 +9,15 @@ isBeta: true
<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>
@ -29,7 +33,7 @@ Wrap the `difference` in a `Math.abs()` function.
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test(code));
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code));
```
</section>
@ -60,7 +64,6 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
const resultText = document.createTextNode(difference);
}
</script>
```
@ -168,7 +171,7 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
const resultText = document.createTextNode(Math.abs(difference));
const resultText = document.createTextNode();
}
</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
challengeType: 0
isBeta: true
@ -9,7 +9,11 @@ isBeta: true
<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>
@ -25,7 +29,7 @@ Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.a
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test(code));
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test(code));
```
</section>
@ -56,7 +60,7 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
const resultText = document.createTextNode(Math.abs(difference));
const resultText = document.createTextNode();
}
</script>
```
@ -164,9 +168,7 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
const resultText = document.createTextNode(
Math.abs(difference) + ' Calorie '
);
const resultText = document.createTextNode(difference);
}
</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
challengeType: 0
isBeta: true
@ -9,9 +9,11 @@ isBeta: true
<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>
@ -27,7 +29,7 @@ Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Ma
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test(code));
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\)/.test(code));
```
</section>
@ -58,9 +60,7 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
const resultText = document.createTextNode(
Math.abs(difference) + ' Calorie '
);
const resultText = document.createTextNode(difference);
}
</script>
```
@ -168,9 +168,7 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
const resultText = document.createTextNode(
Math.abs(difference) + ' Calorie ' + surplusOrDeficit
);
const resultText = document.createTextNode(Math.abs(difference));
}
</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
challengeType: 0
isBeta: true
@ -9,15 +9,7 @@ isBeta: true
<section id='description'>
The data that we currently pass to `createTextNode()` is `Math.abs(difference) + ' Calorie ' + surplusOrDeficit`.
Some people consider this a little cumbersome and prefer to use template literals instead.
Template literals are enclosed in backticks (\`\`), and JavaScript expressions and variables can be embedded by enclosing them in `${}`.
For example, `` console.log(`Hello ${firstName}, today is ${Date.now()}`) ``is the same as writing `console.log('Hello ' + firstName + ', today is ' + Date.now())`.
Convert the data inside of `createTextNode()` to be a template literal.
Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`.
</section>
@ -33,7 +25,7 @@ Convert the data inside of `createTextNode()` to be a template literal.
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/) );
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\)/.test(code));
```
</section>
@ -64,9 +56,7 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
const resultText = document.createTextNode(
Math.abs(difference) + ' Calorie ' + surplusOrDeficit
);
const resultText = document.createTextNode(Math.abs(difference));
}
</script>
```
@ -175,7 +165,7 @@ tests:
const result = document.createElement('h3');
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
Math.abs(difference) + ' Calorie '
);
}
</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
challengeType: 0
isBeta: true
@ -9,11 +9,9 @@ isBeta: true
<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
result.appendChild(resultText);
```
Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`.
</section>
@ -29,7 +27,7 @@ result.appendChild(resultText);
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/) );
testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*Math\.abs\(\s*difference\s*\)\s*\+\s*[\'\"\`]\s*Calorie\s*[\'\"\`]\s*\+\s*surplusOrDeficit\s*\)/.test(code));
```
</section>
@ -61,7 +59,7 @@ tests:
const result = document.createElement('h3');
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
Math.abs(difference) + ' Calorie '
);
}
</script>
@ -171,10 +169,8 @@ tests:
const result = document.createElement('h3');
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
Math.abs(difference) + ' Calorie ' + surplusOrDeficit
);
result.appendChild(resultText);
}
</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
challengeType: 0
isBeta: true
@ -9,9 +9,15 @@ isBeta: true
<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>
@ -27,7 +33,7 @@ Now if you enter in data and push the Calculate button, you will see the text ad
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(result\)/) );
testString: assert( code.replace(/\s/g, '').match(/document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/) );
```
</section>
@ -59,10 +65,8 @@ tests:
const result = document.createElement('h3');
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
Math.abs(difference) + ' Calorie ' + surplusOrDeficit
);
result.appendChild(resultText);
}
</script>
```
@ -173,9 +177,6 @@ tests:
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
);
result.appendChild(resultText);
output.appendChild(result);
}
</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
challengeType: 0
isBeta: true
@ -9,9 +9,11 @@ isBeta: true
<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>
@ -27,7 +29,7 @@ Create an `hr` element and assign it to a variable named `line`.
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code))
testString: assert( code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/) );
```
</section>
@ -61,9 +63,6 @@ tests:
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
);
result.appendChild(resultText);
output.appendChild(result);
}
</script>
```
@ -176,9 +175,6 @@ tests:
);
result.appendChild(resultText);
output.appendChild(result);
const line = document.createElement('hr');
}
</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
challengeType: 0
isBeta: true
@ -9,7 +9,9 @@ isBeta: true
<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>
@ -25,7 +27,7 @@ Add the `line` to the `output` element using the `appendChild()` method.
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(line\)/) );
testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(result\)/) );
```
</section>
@ -61,9 +63,6 @@ tests:
);
result.appendChild(resultText);
output.appendChild(result);
const line = document.createElement('hr');
}
</script>
```
@ -177,9 +176,6 @@ tests:
result.appendChild(resultText);
output.appendChild(result);
const line = document.createElement('hr');
output.appendChild(line);
}
</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
challengeType: 0
isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<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>
@ -27,7 +27,7 @@ Create an `h4` element and assign it to a variable named `recommended`.
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code));
testString: assert(/const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code))
```
</section>
@ -64,9 +64,6 @@ tests:
result.appendChild(resultText);
output.appendChild(result);
const line = document.createElement('hr');
output.appendChild(line);
}
</script>
```
@ -182,9 +179,6 @@ tests:
output.appendChild(result);
const line = document.createElement('hr');
output.appendChild(line);
const recommended = document.createElement('h4');
}
</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
challengeType: 0
isBeta: true
@ -9,9 +9,7 @@ isBeta: true
<section id='description'>
Create a text node and assign it to a variable named `recommendedText`.
This is similar to how your created the `resultText` element previously.
Add the `line` to the `output` element using the `appendChild()` method.
</section>
@ -27,7 +25,7 @@ This is similar to how your created the `resultText` element previously.
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code));
testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(line\)/) );
```
</section>
@ -66,9 +64,6 @@ tests:
output.appendChild(result);
const line = document.createElement('hr');
output.appendChild(line);
const recommended = document.createElement('h4');
}
</script>
```
@ -185,9 +180,6 @@ tests:
const line = document.createElement('hr');
output.appendChild(line);
const recommended = document.createElement('h4');
const recommendedText = document.createTextNode();
}
</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
challengeType: 0
isBeta: true
@ -9,11 +9,9 @@ isBeta: true
<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".
This is similar to template literal syntax previously used to create `resultText`.
Create an `h4` element and assign it to a variable named `recommended`.
</section>
@ -29,7 +27,7 @@ This is similar to template literal syntax previously used to create `resultText
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) );
testString: assert(/const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code));
```
</section>
@ -69,9 +67,6 @@ tests:
const line = document.createElement('hr');
output.appendChild(line);
const recommended = document.createElement('h4');
const recommendedText = document.createTextNode();
}
</script>
```
@ -190,9 +185,6 @@ tests:
output.appendChild(line);
const recommended = document.createElement('h4');
const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories`
);
}
</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
challengeType: 0
isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<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>
@ -27,7 +27,7 @@ This is similar to how the `resultText` is appended to `result` previously.
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) );
testString: assert(/const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code));
```
</section>
@ -69,9 +69,6 @@ tests:
output.appendChild(line);
const recommended = document.createElement('h4');
const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories`
);
}
</script>
```
@ -190,11 +187,7 @@ tests:
output.appendChild(line);
const recommended = document.createElement('h4');
const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories`
);
recommended.appendChild(recommendedText);
const recommendedText = document.createTextNode();
}
</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
challengeType: 0
isBeta: true
@ -9,7 +9,11 @@ isBeta: true
<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>
@ -25,7 +29,7 @@ Append the `recommended` element to `output`.
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/) );
testString: assert( code.replace(/\s/g, '').match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) );
```
</section>
@ -67,11 +71,7 @@ tests:
output.appendChild(line);
const recommended = document.createElement('h4');
const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories`
);
recommended.appendChild(recommendedText);
const recommendedText = document.createTextNode();
}
</script>
```
@ -193,9 +193,6 @@ tests:
const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories`
);
recommended.appendChild(recommendedText);
output.appendChild(recommended);
}
</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
challengeType: 0
isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<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>
@ -27,7 +27,7 @@ Create an `h4` element and assign it to a variable named `consumed`.
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code));
testString: assert( code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) );
```
</section>
@ -72,9 +72,6 @@ tests:
const recommendedText = document.createTextNode(
`${maxCalories} Recommended Calories`
);
recommended.appendChild(recommendedText);
output.appendChild(recommended);
}
</script>
```
@ -198,9 +195,6 @@ tests:
);
recommended.appendChild(recommendedText);
output.appendChild(recommended);
const consumed = document.createElement('h4');
}
</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
challengeType: 0
isBeta: true
@ -9,15 +9,7 @@ isBeta: true
<section id='description'>
Another way that we can set the text of the `consumed` element is to set the `innerHTML` property.
For example:
```js
consumed.innerHTML = `Hello world`;
```
Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `total` variable that was previously created. Use template literals.
Append the `recommended` element to `output`.
</section>
@ -33,7 +25,7 @@ Set the inner HTML of `consumed` to "XX Consumed Calories", where "XX" is the `t
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) );
testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/) );
```
</section>
@ -80,9 +72,6 @@ tests:
);
recommended.appendChild(recommendedText);
output.appendChild(recommended);
const consumed = document.createElement('h4');
}
</script>
```
@ -207,9 +196,6 @@ tests:
recommended.appendChild(recommendedText);
output.appendChild(recommended);
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
}
</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
challengeType: 0
isBeta: true
@ -9,7 +9,9 @@ isBeta: true
<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>
@ -25,7 +27,7 @@ Append the `consumed` element to `output`.
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/) );
testString: assert(/const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code));
```
</section>
@ -73,9 +75,6 @@ tests:
recommended.appendChild(recommendedText);
output.appendChild(recommended);
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
}
</script>
```
@ -202,8 +201,6 @@ tests:
output.appendChild(recommended);
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
}
</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
challengeType: 0
isBeta: true
@ -9,13 +9,15 @@ isBeta: true
<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>
@ -31,7 +33,7 @@ Now if you submit the form again and inspect the `result` element, you will see
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) );
testString: assert( code.replace(/\s/g, '').match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) );
```
</section>
@ -62,7 +64,6 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
//put your code here
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
);
@ -82,8 +83,6 @@ tests:
output.appendChild(recommended);
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
}
</script>
```
@ -191,7 +190,6 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
result.className = 'green-text';
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
);
@ -212,7 +210,6 @@ tests:
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
}
</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
challengeType: 0
isBeta: true
@ -9,11 +9,7 @@ isBeta: true
<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.
For example, if you want to set the `width` of an `input` element to 100px, you would write `input.setAttribute('width', '100px')`.
Set the `class` attribute of the `output` element equal to a class named `bordered-class`.
Append the `consumed` element to `output`.
</section>
@ -29,7 +25,7 @@ Set the `class` attribute of the `output` element equal to a class named `border
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/) );
testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/) );
```
</section>
@ -60,7 +56,6 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
result.className = 'green-text';
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
);
@ -81,9 +76,6 @@ tests:
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
//put your code here
}
</script>
```
@ -191,7 +183,6 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
result.className = 'green-text';
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
);
@ -213,8 +204,6 @@ tests:
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
}
</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
challengeType: 0
isBeta: true
@ -9,11 +9,13 @@ isBeta: true
<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>
@ -29,7 +31,7 @@ The `calculate()` function is now finished!
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) );
testString: assert( code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) );
```
</section>
@ -60,7 +62,7 @@ tests:
const output = document.getElementById('output');
const result = document.createElement('h3');
result.className = 'green-text';
//put your code here
const resultText = document.createTextNode(
`${Math.abs(difference)} Calorie ${surplusOrDeficit}`
);
@ -82,8 +84,6 @@ tests:
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
}
</script>
```
@ -213,9 +213,6 @@ tests:
const consumed = document.createElement('h4');
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
}
</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
challengeType: 0
isBeta: true
@ -9,15 +9,11 @@ isBeta: true
<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
<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.
Set the `class` attribute of the `output` element equal to a class named `bordered-class`.
</section>
@ -33,7 +29,7 @@ Get a reference to the `document` element with the `id` attribute `add`. This is
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)/) );
testString: assert( code.replace(/\s/g, '').match(/output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/) );
```
</section>
@ -87,8 +83,7 @@ tests:
consumed.innerHTML = `${total} Consumed Calories`;
output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
//put your code here
}
</script>
```
@ -220,10 +215,7 @@ tests:
output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
}
document.getElementById('add');
</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
challengeType: 0
isBeta: true
@ -9,13 +9,11 @@ isBeta: true
<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
function() {}
```
The `calculate()` function is now finished!
</section>
@ -31,7 +29,7 @@ function() {}
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/) );
testString: assert( code.replace(/\s/g, '').match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) );
```
</section>
@ -86,10 +84,7 @@ tests:
output.appendChild(consumed);
output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
}
document.getElementById('add');
</script>
```
@ -222,8 +217,6 @@ tests:
output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
}
document.getElementById('add').onclick = function() {};
</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
challengeType: 0
isBeta: true
@ -9,9 +9,15 @@ isBeta: true
<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>
@ -27,7 +33,7 @@ This is similar to how you created the `result` element previously.
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code));
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)/) );
```
</section>
@ -84,8 +90,6 @@ tests:
output.setAttribute('class', 'bordered-class');
output.style.backgroundColor = '#FFF9C4';
}
document.getElementById('add').onclick = function() {};
</script>
```
@ -219,9 +223,7 @@ tests:
output.style.backgroundColor = '#FFF9C4';
}
document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input');
};
document.getElementById('add');
</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
challengeType: 0
isBeta: true
@ -9,7 +9,13 @@ isBeta: true
<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>
@ -25,7 +31,7 @@ Set the `placeholder` property of the `foodInput` equal to `'food name'`.
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) );
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/) );
```
</section>
@ -83,9 +89,7 @@ tests:
output.style.backgroundColor = '#FFF9C4';
}
document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input');
};
document.getElementById('add');
</script>
```
@ -219,10 +223,7 @@ tests:
output.style.backgroundColor = '#FFF9C4';
}
document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
};
document.getElementById('add').onclick = function() {};
</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
challengeType: 0
isBeta: true
@ -9,11 +9,9 @@ isBeta: true
<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)`.
Add the class name `food-control` to the `foodInput` element.
This is similar to how you created the `result` element previously.
</section>
@ -29,7 +27,7 @@ Add the class name `food-control` to the `foodInput` element.
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) );
testString: assert(/const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code));
```
</section>
@ -87,10 +85,7 @@ tests:
output.style.backgroundColor = '#FFF9C4';
}
document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
};
document.getElementById('add').onclick = function() {};
</script>
```
@ -226,8 +221,6 @@ tests:
document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
};
</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
challengeType: 0
isBeta: true
@ -9,11 +9,7 @@ isBeta: true
<section id='description'>
Notice that parent container of all of the inputs has an `id` of `entries`: `<div class="grid" id="entries">`.
Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function.
This is similar to the other `appendChild()` methods that you have used previously.
Set the `placeholder` property of the `foodInput` equal to `'food name'`.
</section>
@ -29,7 +25,7 @@ This is similar to the other `appendChild()` methods that you have used previous
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/) );
testString: assert( code.replace(/\s/g, '').match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) );
```
</section>
@ -89,8 +85,6 @@ tests:
document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
};
</script>
```
@ -228,8 +222,6 @@ tests:
document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
};
</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
challengeType: 0
isBeta: true
@ -9,7 +9,11 @@ isBeta: true
<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>
@ -25,7 +29,7 @@ Create a variable named `calorieInput` and set it equal to another `input` docum
```yml
tests:
- text: See description above for instructions.
testString: assert(/const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code));
testString: assert( code.replace(/\s/g, '').match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) );
```
</section>
@ -86,8 +90,6 @@ tests:
document.getElementById('add').onclick = function() {
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
};
</script>
```
@ -226,9 +228,6 @@ tests:
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
};
</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
challengeType: 0
isBeta: true
@ -9,9 +9,11 @@ isBeta: true
<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>
@ -27,7 +29,7 @@ This is similar to how to set the class of the `output` element previously.
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/) );
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/) );
```
</section>
@ -89,9 +91,6 @@ tests:
const foodInput = document.createElement('input');
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
};
</script>
```
@ -231,9 +230,6 @@ tests:
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
};
</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
challengeType: 0
isBeta: true
@ -9,9 +9,7 @@ isBeta: true
<section id='description'>
The `calorieInput` element should only accept numbers that are 0 or above.
Set the `min` attribute of `calorieInput` to `0`.
Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`.
</section>
@ -27,7 +25,7 @@ Set the `min` attribute of `calorieInput` to `0`.
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/) );
testString: assert(/const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code));
```
</section>
@ -90,9 +88,6 @@ tests:
foodInput.placeholder = 'food name';
foodInput.classList.add('food-control');
document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
};
</script>
```
@ -234,8 +229,6 @@ tests:
document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0');
};
</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
challengeType: 0
isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<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>
@ -27,7 +27,7 @@ We are adding this class name because in the `calculate()` function you created
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) );
testString: assert( code.replace(/\s/g, '').match(/calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/) );
```
</section>
@ -92,8 +92,6 @@ tests:
document.getElementById('entries').appendChild(foodInput);
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0');
};
</script>
```
@ -236,8 +234,6 @@ tests:
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control');
};
</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
challengeType: 0
isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<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>
@ -27,7 +27,7 @@ To keep track of them, add the class name `extra-cal-control` to the `calorieInp
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) );
testString: assert( code.replace(/\s/g, '').match(/calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/) );
```
</section>
@ -93,8 +93,6 @@ tests:
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control');
};
</script>
```
@ -238,8 +236,6 @@ tests:
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control');
calorieInput.classList.add('extra-cal-control');
};
</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
challengeType: 0
isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<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>
@ -27,7 +27,7 @@ The Add Entry functionality is now finished. You can test it by clicking the "Ad
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/) );
testString: assert( code.replace(/\s/g, '').match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) );
```
</section>
@ -94,8 +94,6 @@ tests:
const calorieInput = document.createElement('input');
calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control');
calorieInput.classList.add('extra-cal-control');
};
</script>
```
@ -240,8 +238,6 @@ tests:
calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control');
calorieInput.classList.add('extra-cal-control');
document.getElementById('entries').appendChild(calorieInput);
};
</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
challengeType: 0
isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<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>
@ -27,7 +27,7 @@ Get a reference to the `document` element with the `id` of `clear` and set its `
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/) );
testString: assert( code.replace(/\s/g, '').match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) );
```
</section>
@ -95,8 +95,6 @@ tests:
calorieInput.setAttribute('type', 'number');
calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control');
calorieInput.classList.add('extra-cal-control');
document.getElementById('entries').appendChild(calorieInput);
};
</script>
```
@ -242,10 +240,7 @@ tests:
calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control');
calorieInput.classList.add('extra-cal-control');
document.getElementById('entries').appendChild(calorieInput);
};
document.getElementById('clear').onclick = function() {};
</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
challengeType: 0
isBeta: true
@ -9,7 +9,9 @@ isBeta: true
<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>
@ -25,7 +27,7 @@ Inside the `function` body, instruct your code to call two other functions, `cle
```yml
tests:
- text: See description above for instructions.
testString: assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code) )
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/) );
```
</section>
@ -94,10 +96,7 @@ tests:
calorieInput.setAttribute('min', '0');
calorieInput.classList.add('cal-control');
calorieInput.classList.add('extra-cal-control');
document.getElementById('entries').appendChild(calorieInput);
};
document.getElementById('clear').onclick = function() {};
</script>
```
@ -244,11 +243,6 @@ tests:
calorieInput.classList.add('extra-cal-control');
document.getElementById('entries').appendChild(calorieInput);
};
document.getElementById('clear').onclick = function() {
clearOutput();
clearForm();
};
</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
challengeType: 0
isBeta: true
@ -9,13 +9,9 @@ isBeta: true
<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
const clearOutput = () => {}
```
This is similar to `function clearOutput () {}`.
Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`.
</section>
@ -31,7 +27,7 @@ This is similar to `function clearOutput () {}`.
```yml
tests:
- text: See description above for instructions.
testString: assert( typeof clearOutput === "function" );
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/) );
```
</section>
@ -102,11 +98,6 @@ tests:
calorieInput.classList.add('extra-cal-control');
document.getElementById('entries').appendChild(calorieInput);
};
document.getElementById('clear').onclick = function() {
clearOutput();
clearForm();
};
</script>
```
@ -254,12 +245,7 @@ tests:
document.getElementById('entries').appendChild(calorieInput);
};
document.getElementById('clear').onclick = function() {
clearOutput();
clearForm();
};
const clearOutput = () => {};
document.getElementById('clear').onclick = function() {};
</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
challengeType: 0
isBeta: true
@ -9,9 +9,7 @@ isBeta: true
<section id='description'>
We need to remove the contents inside of element with the `id` of `output`.
In the body of the `clearOutput()` function, set the `innerHTML` property of that element equal to an empty string, `''`.
Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly.
</section>
@ -27,7 +25,7 @@ In the body of the `clearOutput()` function, set the `innerHTML` property of tha
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/) );
testString: assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code) )
```
</section>
@ -99,12 +97,7 @@ tests:
document.getElementById('entries').appendChild(calorieInput);
};
document.getElementById('clear').onclick = function() {
clearOutput();
clearForm();
};
const clearOutput = () => {};
document.getElementById('clear').onclick = function() {};
</script>
```
@ -256,10 +249,6 @@ tests:
clearOutput();
clearForm();
};
const clearOutput = () => {
document.getElementById('output').innerHTML = '';
};
</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
challengeType: 0
isBeta: true
@ -9,14 +9,14 @@ isBeta: true
<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.
Remove the `bordered-class` class. For example:
Create a variable named `clearOutput` and set it equal to a blank arrow function:
```js
document.getElementById('my-div').classList.remove('my-class')
const clearOutput = () => {}
```
This is similar to `function clearOutput () {}`.
</section>
## Instructions
@ -31,7 +31,7 @@ document.getElementById('my-div').classList.remove('my-class')
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/) );
testString: assert( typeof clearOutput === "function" );
```
</section>
@ -107,10 +107,6 @@ tests:
clearOutput();
clearForm();
};
const clearOutput = () => {
document.getElementById('output').innerHTML = '';
};
</script>
```
@ -263,10 +259,7 @@ tests:
clearForm();
};
const clearOutput = () => {
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
const clearOutput = () => {};
</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
challengeType: 0
isBeta: true
@ -9,9 +9,9 @@ isBeta: true
<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>
@ -27,7 +27,7 @@ In the `calculate()` function, right after `event.preventDefault()`, call the `c
```yml
tests:
- text: See description above for instructions.
testString: assert( calculate.toString().match(/clearOutput\(\)/) );
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/) );
```
</section>
@ -44,7 +44,6 @@ tests:
function calculate(e) {
e.preventDefault();
//put your code here
const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value))
@ -105,10 +104,7 @@ tests:
clearForm();
};
const clearOutput = () => {
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
const clearOutput = () => {};
</script>
```
@ -201,7 +197,6 @@ tests:
function calculate(e) {
e.preventDefault();
clearOutput();
const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value))
@ -264,7 +259,6 @@ tests:
const clearOutput = () => {
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
</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
challengeType: 0
isBeta: true
@ -9,7 +9,13 @@ isBeta: true
<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>
@ -25,7 +31,7 @@ Create a variable named `clearForm` and set it equal to a blank arrow function l
```yml
tests:
- text: See description above for instructions.
testString: assert( typeof clearForm === "function")
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/) );
```
</section>
@ -42,7 +48,6 @@ tests:
function calculate(e) {
e.preventDefault();
clearOutput();
const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value))
@ -105,7 +110,6 @@ tests:
const clearOutput = () => {
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
</script>
```
@ -199,7 +203,6 @@ tests:
function calculate(e) {
e.preventDefault();
clearOutput();
const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value))
@ -264,8 +267,6 @@ tests:
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
const clearForm = () => {};
</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
challengeType: 0
isBeta: true
@ -9,11 +9,9 @@ isBeta: true
<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`.
This is similar to how you declared the `total` variable previously in the `calculate` method.
In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function.
</section>
@ -29,7 +27,7 @@ This is similar to how you declared the `total` variable previously in the `calc
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/) );
testString: assert( calculate.toString().match(/clearOutput\(\)/) );
```
</section>
@ -46,7 +44,7 @@ tests:
function calculate(e) {
e.preventDefault();
clearOutput();
//put your code here
const total = Array.from(document.getElementsByClassName('cal-control'))
.map(meal => Number(meal.value))
@ -111,8 +109,6 @@ tests:
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
const clearForm = () => {};
</script>
```
@ -270,12 +266,6 @@ tests:
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
const clearForm = () => {
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
};
</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
challengeType: 0
isBeta: true
@ -9,9 +9,7 @@ isBeta: true
<section id='description'>
To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function.
Add `foodInputs.forEach()`.
Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`.
</section>
@ -27,7 +25,7 @@ Add `foodInputs.forEach()`.
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/) )
testString: assert( typeof clearForm === "function")
```
</section>
@ -109,12 +107,6 @@ tests:
document.getElementById('output').innerHTML = '';
document.getElementById('output').classList.remove('bordered-class');
};
const clearForm = () => {
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
};
</script>
```
@ -273,13 +265,7 @@ tests:
document.getElementById('output').classList.remove('bordered-class');
};
const clearForm = () => {
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
foodInputs.forEach();
};
const clearForm = () => {};
</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
challengeType: 0
isBeta: true
@ -9,11 +9,11 @@ isBeta: true
<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>
@ -29,7 +29,7 @@ In between the parentheses of the `.forEach()` function, enter `input => input.r
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) )
testString: assert( code.replace(/\s/g, '').match(/const\s*foodInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]food\-control[\'\"\`]\)\)/) );
```
</section>
@ -112,13 +112,7 @@ tests:
document.getElementById('output').classList.remove('bordered-class');
};
const clearForm = () => {
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
foodInputs.forEach();
};
const clearForm = () => {};
</script>
```
@ -281,8 +275,6 @@ tests:
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
foodInputs.forEach(input => input.remove());
};
</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
challengeType: 0
isBeta: true
@ -9,11 +9,9 @@ isBeta: true
<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`.
This is similar to how you declared the `foodInputs` variable previously.
Add `foodInputs.forEach()`.
</section>
@ -29,7 +27,7 @@ This is similar to how you declared the `foodInputs` variable previously.
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/) );
testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/) )
```
</section>
@ -116,8 +114,6 @@ tests:
const foodInputs = Array.from(
document.getElementsByClassName('food-control')
);
foodInputs.forEach(input => input.remove());
};
</script>
```
@ -282,11 +278,7 @@ tests:
document.getElementsByClassName('food-control')
);
foodInputs.forEach(input => input.remove());
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
foodInputs.forEach();
};
</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
challengeType: 0
isBeta: true
@ -9,7 +9,11 @@ isBeta: true
<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>
@ -25,7 +29,7 @@ Similar to how you removed each `foodInputs` elements, use the `forEach()` funct
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) )
testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) )
```
</section>
@ -113,11 +117,7 @@ tests:
document.getElementsByClassName('food-control')
);
foodInputs.forEach(input => input.remove());
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
foodInputs.forEach();
};
</script>
```
@ -283,12 +283,6 @@ tests:
);
foodInputs.forEach(input => input.remove());
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
calInputs.forEach(input => input.remove());
};
</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
challengeType: 0
isBeta: true
@ -9,9 +9,11 @@ isBeta: true
<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>
@ -27,7 +29,7 @@ Get a reference to the document element with the `id` of `calorie-form` and chai
```yml
tests:
- text: See description above for instructions.
testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) );
testString: assert( code.replace(/\s/g, '').match(/const\s*calInputs\s*=Array\.from\(document\.getElementsByClassName\([\'\"\`]extra-cal-control[\'\"\`]\)\)/) );
```
</section>
@ -116,12 +118,6 @@ tests:
);
foodInputs.forEach(input => input.remove());
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
calInputs.forEach(input => input.remove());
};
</script>
```
@ -291,10 +287,6 @@ tests:
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
calInputs.forEach(input => input.remove());
document.getElementById('calorie-form').reset();
};
</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
challengeType: 0
isBeta: true
@ -9,7 +9,7 @@ isBeta: true
<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>
@ -25,7 +25,7 @@ Congratulations! Have fun playing with your completed calorie counter.
```yml
tests:
- text: See description above for instructions.
testString: ''
testString: assert( code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) )
```
</section>
@ -118,10 +118,6 @@ tests:
const calInputs = Array.from(
document.getElementsByClassName('extra-cal-control')
);
calInputs.forEach(input => input.remove());
document.getElementById('calorie-form').reset();
};
</script>
```
@ -210,9 +206,91 @@ tests:
<section id='solution'>
```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>

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>