diff --git a/client/src/pages/learn/javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/index.md b/client/src/pages/learn/javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/index.md new file mode 100644 index 0000000000..a7652c5181 --- /dev/null +++ b/client/src/pages/learn/javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Intermediate JavaScript Calorie Counter +block: Intermediate JavaScript Calorie Counter +superBlock: JavaScript Algorithms and Data Structures +isBeta: true +--- +## Introduction to the Intermediate JavaScript Calorie Counter + +This is a stub for the new project-based curriculum. \ No newline at end of file diff --git a/client/utils/challengeTypes.js b/client/utils/challengeTypes.js index ec90df90e1..ad915c4069 100644 --- a/client/utils/challengeTypes.js +++ b/client/utils/challengeTypes.js @@ -134,5 +134,7 @@ exports.helpCategory = { 'python-for-penetration-testing': 'Python', 'css-variables-skyline': 'HTML-CSS', 'basic-javascript-rpg-game': 'JavaScript', - 'functional-programming-spreadsheet': 'JavaScript' + 'functional-programming-spreadsheet': 'JavaScript', + 'intermediate-javascript-calorie-counter': + 'Intermediate JavaScript Calorie Counter' }; diff --git a/curriculum/challenges/_meta/functional-programming-spreadsheet/meta.json b/curriculum/challenges/_meta/functional-programming-spreadsheet/meta.json index 23c482d338..64d24c2afb 100644 --- a/curriculum/challenges/_meta/functional-programming-spreadsheet/meta.json +++ b/curriculum/challenges/_meta/functional-programming-spreadsheet/meta.json @@ -1,7 +1,7 @@ { "name": "Functional Programming Spreadsheet", "dashedName": "functional-programming-spreadsheet", - "order": 12, + "order": 13, "time": "2 hours", "template": "", "required": [], diff --git a/curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json b/curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json new file mode 100644 index 0000000000..aad403e0de --- /dev/null +++ b/curriculum/challenges/_meta/intermediate-javascript-calorie-counter/meta.json @@ -0,0 +1,310 @@ +{ + "name": "Intermediate JavaScript Calorie Counter", + "dashedName": "intermediate-javascript-calorie-counter", + "order": 12, + "time": "2 hours", + "template": "", + "required": [], + "superBlock": "javascript-algorithms-and-data-structures", + "superOrder": 2, + "challengeOrder": [ + [ + "5ddb965c65d27e1512d44d9a", + "Part 01" + ], + [ + "5ddb965c65d27e1512d44d9b", + "Part 02" + ], + [ + "5ddb965c65d27e1512d44d9c", + "Part 03" + ], + [ + "5ddb965c65d27e1512d44d9d", + "Part 04" + ], + [ + "5ddb965c65d27e1512d44d9e", + "Part 05" + ], + [ + "5ddb965c65d27e1512d44d9f", + "Part 06" + ], + [ + "5ddb965c65d27e1512d44da0", + "Part 07" + ], + [ + "5ddb965c65d27e1512d44da1", + "Part 08" + ], + [ + "5ddb965c65d27e1512d44da2", + "Part 09" + ], + [ + "5ddb965c65d27e1512d44da3", + "Part 10" + ], + [ + "5ddb965c65d27e1512d44da4", + "Part 11" + ], + [ + "5ddb965c65d27e1512d44da5", + "Part 12" + ], + [ + "5ddb965c65d27e1512d44da6", + "Part 13" + ], + [ + "5ddb965c65d27e1512d44da7", + "Part 14" + ], + [ + "5ddb965c65d27e1512d44da8", + "Part 15" + ], + [ + "5ddb965c65d27e1512d44da9", + "Part 16" + ], + [ + "5ddb965c65d27e1512d44daa", + "Part 17" + ], + [ + "5ddb965c65d27e1512d44dab", + "Part 18" + ], + [ + "5ddb965c65d27e1512d44dac", + "Part 19" + ], + [ + "5ddb965c65d27e1512d44dad", + "Part 20" + ], + [ + "5ddb965c65d27e1512d44dae", + "Part 21" + ], + [ + "5ddb965c65d27e1512d44daf", + "Part 22" + ], + [ + "5ddb965c65d27e1512d44db0", + "Part 23" + ], + [ + "5ddb965c65d27e1512d44db1", + "Part 24" + ], + [ + "5ddb965c65d27e1512d44db2", + "Part 25" + ], + [ + "5ddb965c65d27e1512d44db3", + "Part 26" + ], + [ + "5ddb965c65d27e1512d44db4", + "Part 27" + ], + [ + "5ddb965c65d27e1512d44db5", + "Part 28" + ], + [ + "5ddb965c65d27e1512d44db6", + "Part 29" + ], + [ + "5ddb965c65d27e1512d44db7", + "Part 30" + ], + [ + "5ddb965c65d27e1512d44db8", + "Part 31" + ], + [ + "5ddb965c65d27e1512d44db9", + "Part 32" + ], + [ + "5ddb965c65d27e1512d44dba", + "Part 33" + ], + [ + "5ddb965c65d27e1512d44dbb", + "Part 34" + ], + [ + "5ddb965c65d27e1512d44dbc", + "Part 35" + ], + [ + "5ddb965c65d27e1512d44dbd", + "Part 36" + ], + [ + "5ddb965c65d27e1512d44dbe", + "Part 37" + ], + [ + "5ddb965c65d27e1512d44dbf", + "Part 38" + ], + [ + "5ddb965c65d27e1512d44dc0", + "Part 39" + ], + [ + "5ddb965c65d27e1512d44dc1", + "Part 40" + ], + [ + "5ddb965c65d27e1512d44dc2", + "Part 41" + ], + [ + "5ddb965c65d27e1512d44dc3", + "Part 42" + ], + [ + "5ddb965c65d27e1512d44dc4", + "Part 43" + ], + [ + "5ddb965c65d27e1512d44dc5", + "Part 44" + ], + [ + "5ddb965c65d27e1512d44dc6", + "Part 45" + ], + [ + "5ddb965c65d27e1512d44dc7", + "Part 46" + ], + [ + "5ddb965c65d27e1512d44dc8", + "Part 47" + ], + [ + "5ddb965c65d27e1512d44dc9", + "Part 48" + ], + [ + "5ddb965c65d27e1512d44dca", + "Part 49" + ], + [ + "5ddb965c65d27e1512d44dcb", + "Part 50" + ], + [ + "5ddb965c65d27e1512d44dcc", + "Part 51" + ], + [ + "5ddb965c65d27e1512d44dcd", + "Part 52" + ], + [ + "5ddb965c65d27e1512d44dce", + "Part 53" + ], + [ + "5ddb965c65d27e1512d44dcf", + "Part 54" + ], + [ + "5ddb965c65d27e1512d44dd0", + "Part 55" + ], + [ + "5ddb965c65d27e1512d44dd1", + "Part 56" + ], + [ + "5ddb965c65d27e1512d44dd2", + "Part 57" + ], + [ + "5ddb965c65d27e1512d44dd3", + "Part 58" + ], + [ + "5ddb965c65d27e1512d44dd4", + "Part 59" + ], + [ + "5ddb965c65d27e1512d44dd5", + "Part 60" + ], + [ + "5ddb965c65d27e1512d44dd6", + "Part 61" + ], + [ + "5ddb965c65d27e1512d44dd7", + "Part 62" + ], + [ + "5ddb965c65d27e1512d44dd8", + "Part 63" + ], + [ + "5ddb965c65d27e1512d44dd9", + "Part 64" + ], + [ + "5ddb965c65d27e1512d44dda", + "Part 65" + ], + [ + "5ddb965c65d27e1512d44ddb", + "Part 66" + ], + [ + "5ddb965c65d27e1512d44ddc", + "Part 67" + ], + [ + "5ddb965c65d27e1512d44ddd", + "Part 68" + ], + [ + "5ddb965c65d27e1512d44dde", + "Part 69" + ], + [ + "5ddb965c65d27e1512d44ddf", + "Part 70" + ], + [ + "5ddb965c65d27e1512d44de0", + "Part 71" + ], + [ + "5ddb965c65d27e1512d44de1", + "Part 72" + ], + [ + "5ddb965c65d27e1512d44de2", + "Part 73" + ], + [ + "5ddb965c65d27e1512d44de3", + "Part 74" + ] + ], + "helpRoom": "Help", + "fileName": "02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter.json" +} \ No newline at end of file diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-01.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-01.md new file mode 100644 index 0000000000..8fb9ceef38 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-01.md @@ -0,0 +1,131 @@ +--- +id: 5ddb965c65d27e1512d44d9a +title: Part 01 +challengeType: 0 +isBeta: true +--- + +## Description +
+ + +When a browser loads a page, it creates a Document Object Model (DOM) representation of the page which includes all of the HTML elements in a tree structure. + +In JavaScript, you can access the DOM by referencing the global `document` object. + +To view the DOM, log it to the console with `console.log(document)`. + + +
+ + +## Instructions +
+
+ + +## Tests +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(code.replace(/\s/g, '').match(/console\.log\(document\)/)); + +``` + +
+ + +## Challenge Seed +
+ +
+ +```html + +``` + +
+ + +### Before Test +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast
+ Lunch
+ Dinner +
+ + + +
+
+
+``` + +
+ + +### After Test +
+ +```html + + +``` + +
+ +
+ + +## Solution +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-02.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-02.md new file mode 100644 index 0000000000..884d355d81 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-02.md @@ -0,0 +1,139 @@ +--- +id: 5ddb965c65d27e1512d44d9b +title: Part 02 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +In our HTML document, we have a form element with an `id` attribute: `
` + +To reference and access this particular form in JavaScript, we can use the getElementById() method on the document and provide the ID. + +The code `document.getElementById('my-form')` gets a reference to an HTML element with an `id` of `my-form`. Get a reference to the HTML element with the `id` of `calorie-form`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+ +

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + + +
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-03.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-03.md new file mode 100644 index 0000000000..31dfb1efdf --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-03.md @@ -0,0 +1,142 @@ +--- +id: 5ddb965c65d27e1512d44d9c +title: Part 03 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Now we need to specify what should be done with the form when the user submits it by clicking the Calculate button. + +Forms have an `onsubmit` event that can execute a function when the form is submitted. + +For example, in `document.getElementById('my-form').onsubmit = processForm;`, the function `processForm` will run when the form is submitted. + +Assign a function named `calculate` to the `onsubmit` event of your form. + +You will create the `calculate` function later. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]calorie\-form[\'\"\`]\)\.onsubmit\=calculate/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-04.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-04.md new file mode 100644 index 0000000000..35d1cf6dee --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-04.md @@ -0,0 +1,141 @@ +--- +id: 5ddb965c65d27e1512d44d9d +title: Part 04 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Create the `calculate` function that will hold the code to sum up the user's calorie inputs. Leave the body blank for now. +Here is an example of an empty function called `square`: + +```js +function square() {} +``` + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( typeof calculate === "function" ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-05.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-05.md new file mode 100644 index 0000000000..ce80396b57 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-05.md @@ -0,0 +1,146 @@ +--- +id: 5ddb965c65d27e1512d44d9e +title: Part 05 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +By default, `onsubmit` will pass the event object as a parameter to the function it calls. +People usually call it `e`, short for event. +Update the `calculate()` function to accept `e` as parameter. + +Here is an example of an empty function called `square` that takes a `number` as a parameter: + +```js +function square(number) {} +``` + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(calculate.toString().match(/function calculate\(\s*e\)\s*\{\s*\}/)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-06.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-06.md new file mode 100644 index 0000000000..7836776b8a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-06.md @@ -0,0 +1,142 @@ +--- +id: 5ddb965c65d27e1512d44d9f +title: Part 06 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +When a form is submitted, the browser will try to submit it to a server and reload the page. We want to prevent this from happening and do our own processing on the client side. + +Prevent the default behavior of the form submit event by calling `e.preventDefault()` inside of the `calculate` function. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(calculate.toString().match(/e\.preventDefault\(\s*\)/)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-07.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-07.md new file mode 100644 index 0000000000..c8a0049266 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-07.md @@ -0,0 +1,147 @@ +--- +id: 5ddb965c65d27e1512d44da0 +title: Part 07 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +If you inspect the inputs in the form, you will notice that they have the class name `cal-control`. + +To access elements with a certain class name, we use the `getElementsByClassName()` method. + +Similar to how you referenced the calorie form above (`document.getElementById('calorie-form')`), create a reference to the elements with the class name `cal-control` below `e.preventDefault()`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-08.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-08.md new file mode 100644 index 0000000000..69b348437d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-08.md @@ -0,0 +1,144 @@ +--- +id: 5ddb965c65d27e1512d44da1 +title: Part 08 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Now assign the document object you just referenced to a variable named `total`. Since this variable will not change, use `const` to create it. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*total\s*=\s*document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-09.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-09.md new file mode 100644 index 0000000000..13cce1800d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-09.md @@ -0,0 +1,145 @@ +--- +id: 5ddb965c65d27e1512d44da2 +title: Part 09 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +To make the document objects easier to handle, let's turn them into an array. +Wrap the `document.getElementsByClassName('cal-control')` portion of your code in an `Array.from()` method. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-10.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-10.md new file mode 100644 index 0000000000..60a845575d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-10.md @@ -0,0 +1,145 @@ +--- +id: 5ddb965c65d27e1512d44da3 +title: Part 10 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Create a variable named `meal` and set it equal to the first index of `total` (`total[0]`). This would be the input for Breakfast on the form. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*meal\s*=\s*total\[0\]/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-11.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-11.md new file mode 100644 index 0000000000..0e2dd3057c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-11.md @@ -0,0 +1,146 @@ +--- +id: 5ddb965c65d27e1512d44da4 +title: Part 11 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Log `meal.value` to the console, enter a number in the Breakfast input and hit the Calculate button. You'll notice that it displays what you entered. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: '' +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-12.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-12.md new file mode 100644 index 0000000000..b81650d497 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-12.md @@ -0,0 +1,152 @@ +--- +id: 5ddb965c65d27e1512d44da5 +title: Part 12 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +We need a way to iterate through all the `meal` items in the `total` array and return the values that the user entered as an array. + +The `map()` method allows us to do exactly that. + +Delete `const meal = total[0];` and chain the `.map()` method to the end of your `Array.from()` method. +Here's an example of `.map()` chained to an array: `[3, 2, 1].map()` + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.toString().replace(/\s/g, '').match(/Array\.from\(document\.getElementsByClassName\([\'\"\`]cal\-control[\'\"\`]\)\)\.map\(\)\;?/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-13.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-13.md new file mode 100644 index 0000000000..4ebf91b8fb --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-13.md @@ -0,0 +1,156 @@ +--- +id: 5ddb965c65d27e1512d44da6 +title: Part 13 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Now we need to provide a function to `map()` that will be performed on each item of the array. + +This function will take the original item as an argument, in our case we'll call it `meal`. Inside the `.map()` parentheses, insert an empty function that takes `meal` as a parameter, like: + +```js +function(meal){} +``` + +Enter in the above function as an argument in between the parentheses of the `.map()` function. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/map\(function\(\s*meal\)\{\}\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-14.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-14.md new file mode 100644 index 0000000000..694d753ad9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-14.md @@ -0,0 +1,152 @@ +--- +id: 5ddb965c65d27e1512d44da7 +title: Part 14 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Inside the function body, insert `return meal.value`, since it is the value of the individual `cal-control` inputs that we want. + +If you want, console log `total` to see what results you are getting. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/\(function\(meal\)\{returnmeal\.value\;?\}\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-15.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-15.md new file mode 100644 index 0000000000..8fbc413405 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-15.md @@ -0,0 +1,152 @@ +--- +id: 5ddb965c65d27e1512d44da8 +title: Part 15 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Since eventually we'll be adding all of the meal calories in the `total` array, explicitly convert `meal.value` into a number by wrapping it in the `Number()` function. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/Number\(meal\.value\)\;?/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-16.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-16.md new file mode 100644 index 0000000000..a0fa7a360d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-16.md @@ -0,0 +1,151 @@ +--- +id: 5ddb965c65d27e1512d44da9 +title: Part 16 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Now let's simplify the function by refactoring it to use arrow functions. As an example, `function(x) {return x*x}` can be refactored as`x => x*x`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/meal\=\>Number\(meal\.value\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-17.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-17.md new file mode 100644 index 0000000000..34891209ba --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-17.md @@ -0,0 +1,152 @@ +--- +id: 5ddb965c65d27e1512d44daa +title: Part 17 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +While you can use a loop to add everything in the `total` array to a variable, JavaScript provides the useful `reduce()` method. + +Chain the `reduce()` method to the `Array.from()` expression. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/Number\(meal\.value\)\)\.reduce\(\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-18.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-18.md new file mode 100644 index 0000000000..5ab5bdf04f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-18.md @@ -0,0 +1,160 @@ +--- +id: 5ddb965c65d27e1512d44dab +title: Part 18 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +The `reduce()` method takes a callback function with at least two arguments, an accumulator and a current value: + +`function(accumulator, currentValue) { /* code to run */ }` + +or using arrow functions: + +`(accumulator, currentValue) => { /*code to run*/ }` + +Insert the above callback function as an argument in the `.reduce()` method. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-19.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-19.md new file mode 100644 index 0000000000..7ad41b315a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-19.md @@ -0,0 +1,162 @@ +--- +id: 5ddb965c65d27e1512d44dac +title: Part 19 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Provide the number zero as the initial value of the `reduce()` method by passing it as the second argument. + +Here is an example of a `reduce()` method with an empty object as its initial value: + +```js +arr.reduce((accumulator, currentValue) => { + /*code to run*/ +}, {}); +``` + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>\{\/\*codetorun\*\/\}\,0\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-20.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-20.md new file mode 100644 index 0000000000..9ff37321e7 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-20.md @@ -0,0 +1,170 @@ +--- +id: 5ddb965c65d27e1512d44dad +title: Part 20 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +We want to sum up all of the numbers in the `total` array. + +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 +`arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);` + +At `arr[0]`, the function is `(0, 1) => 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 + +arr[1], the function is `(1, 3) => 1 + 3`, + +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! + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/reduce\(\(accumulator\,currentValue\)\=\>accumulator\+currentValue\,0\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-21.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-21.md new file mode 100644 index 0000000000..d5fbcd837e --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-21.md @@ -0,0 +1,158 @@ +--- +id: 5ddb965c65d27e1512d44dae +title: Part 21 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Now that we have the `total` number of calories that the user entered. We need to determine the maximum calories they should consume. + +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. + +If you inspect the Female radio button you will notice its `id` attribute: `` + +Create a variable named `maxCalories` and set it equal to the document element with the `id` of `female`. This is similar to how you reference the element with the `id` of `calorie-form` at the beginning of this file. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-22.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-22.md new file mode 100644 index 0000000000..0e9b968d3d --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-22.md @@ -0,0 +1,156 @@ +--- +id: 5ddb965c65d27e1512d44daf +title: Part 22 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Inspect the Female radio button again and notice that it has a `checked` attribute if it's checked: `` + +Check to see if the Female radio button is checked or not by chaining on the `.checked` attribute to `document.getElementById('female')`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*maxCalories\s*=\s*document\.getElementById\([\'\"\`]female[\'\"\`]\)\.checked/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-23.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-23.md new file mode 100644 index 0000000000..b7e1b62f41 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-23.md @@ -0,0 +1,166 @@ +--- +id: 5ddb965c65d27e1512d44db0 +title: Part 23 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Use a ternary operator to assign the value of `maxCalories`. A ternary operator has the following syntax: `condition ? expressionTrue : expressionFalse`. + +For example, `(5 - 3 === 4) ? "Yes" : "No"` does the same thing as the following if else statement: + +```javascript +if (5 - 3 === 4) { + return 'Yes'; +} else { + return 'No'; +} +``` + +`document.getElementById('female').checked` will return either `true` if it is checked or `false` if it isn't. Use a ternary operator to return 2000 if it is is checked and 2500 if it is not. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```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)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-24.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-24.md new file mode 100644 index 0000000000..128400f889 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-24.md @@ -0,0 +1,158 @@ +--- +id: 5ddb965c65d27e1512d44db1 +title: Part 24 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Now that we have `total` and `maxCalories`, we need to find out the difference between them. + +Create a variable named `difference` and set it equal to `total - maxCalories` + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*difference\s*\=\s*total\s*\-\s*maxCalories?/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-25.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-25.md new file mode 100644 index 0000000000..8981e9d641 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-25.md @@ -0,0 +1,166 @@ +--- +id: 5ddb965c65d27e1512d44db2 +title: Part 25 +challengeType: 0 +isBeta: true +--- + +## 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. + +To determine if this is a calorie surplus or deficit, create a variable named `surplusOrDeficit` to determine if the difference is positive (`difference > 0`). + +If it is positive, `surplusOrDeficit` should be set equal to the string "Surplus", and "Deficit" if negative. + +Use the same ternary syntax that you used to determine `maxCalories`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```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)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-26.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-26.md new file mode 100644 index 0000000000..5cc5497050 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-26.md @@ -0,0 +1,168 @@ +--- +id: 5ddb965c65d27e1512d44db3 +title: Part 26 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +If you look near the bottom of the HTML page, notice that there is currently an empty `div` element: `
`. + +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`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*output\s*=\s*document\.getElementById\([\'\"\`]output[\'\"\`]\)/.test(code)) +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-27.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-27.md new file mode 100644 index 0000000000..acef424d94 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-27.md @@ -0,0 +1,176 @@ +--- +id: 5ddb965c65d27e1512d44db4 +title: Part 27 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Now it's time to create the HTML elements that we will add inside of `output`. + +To create an element, use `createElement()`. For example: + +```js +const myHeading1 = document.createElement('h1') +``` + +Create an `h3` element and assign it to a variable named `result`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*result\s*=\s*document\.createElement\([\'\"\`]h3[\'\"\`]\)/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-28.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-28.md new file mode 100644 index 0000000000..97ef7f8538 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-28.md @@ -0,0 +1,179 @@ +--- +id: 5ddb965c65d27e1512d44db5 +title: Part 28 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Next, we will create a text node that we will later append to the `result` element. + +JavaScript has a function called `createTextNode()` to accomplish this. For example: + +```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. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-29.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-29.md new file mode 100644 index 0000000000..3594d81a7e --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-29.md @@ -0,0 +1,176 @@ +--- +id: 5ddb965c65d27e1512d44db6 +title: Part 29 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +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)`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*resultText\s*=\s*document\.createTextNode\(\s*difference\s*?\)/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-30.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-30.md new file mode 100644 index 0000000000..6ef83899e8 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-30.md @@ -0,0 +1,176 @@ +--- +id: 5ddb965c65d27e1512d44db7 +title: Part 30 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Notice how if `total` is less than `maxCalories`, `difference` is a negative number. + +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. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```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)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-31.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-31.md new file mode 100644 index 0000000000..37d377b14b --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-31.md @@ -0,0 +1,174 @@ +--- +id: 5ddb965c65d27e1512d44db8 +title: Part 31 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Inside the parentheses of `.createTextNode()`, add `+ ' Calorie '` after `Math.abs(difference))`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```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)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-32.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-32.md new file mode 100644 index 0000000000..0631f4d649 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-32.md @@ -0,0 +1,178 @@ +--- +id: 5ddb965c65d27e1512d44db9 +title: Part 32 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Next we want to add the text from the `surplusOrDeficit` variable that we previously created. + +Inside the parentheses of `.createTextNode()` add `+ surplusOrDeficit` after `Math.abs(difference) + ' Calorie '`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```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)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-33.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-33.md new file mode 100644 index 0000000000..ebef2abedf --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-33.md @@ -0,0 +1,184 @@ +--- +id: 5ddb965c65d27e1512d44dba +title: Part 33 +challengeType: 0 +isBeta: true +--- + +## 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. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.createTextNode\(\`\$\{Math\.abs\(difference\)\}Calorie\$\{surplusOrDeficit\}\`/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-34.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-34.md new file mode 100644 index 0000000000..c5efb59fc6 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-34.md @@ -0,0 +1,182 @@ +--- +id: 5ddb965c65d27e1512d44dbb +title: Part 34 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Now you can append the `resultText` to the `result` with the `appendChild()` method, like this: + +```js +result.appendChild(resultText); +``` + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/result\.appendChild\(resultText\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-35.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-35.md new file mode 100644 index 0000000000..60a86bed78 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-35.md @@ -0,0 +1,183 @@ +--- +id: 5ddb965c65d27e1512d44dbc +title: Part 35 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +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! + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(result\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-36.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-36.md new file mode 100644 index 0000000000..a2fa9e23f1 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-36.md @@ -0,0 +1,186 @@ +--- +id: 5ddb965c65d27e1512d44dbd +title: Part 36 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Next, let's create and add a horizontal rule (`hr`) element to the output. + +Create an `hr` element and assign it to a variable named `line`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*line\s*=\s*document\.createElement\([\'\"\`]hr[\'\"\`]\)/.test(code)) +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-37.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-37.md new file mode 100644 index 0000000000..97a9bf0830 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-37.md @@ -0,0 +1,187 @@ +--- +id: 5ddb965c65d27e1512d44dbe +title: Part 37 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Add the `line` to the `output` element using the `appendChild()` method. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(line\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-38.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-38.md new file mode 100644 index 0000000000..90acfed2f6 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-38.md @@ -0,0 +1,192 @@ +--- +id: 5ddb965c65d27e1512d44dbf +title: Part 38 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Let's create a few more HTML elements to add to the `output`. + +Create an `h4` element and assign it to a variable named `recommended`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*recommended\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-39.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-39.md new file mode 100644 index 0000000000..c04cce3024 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-39.md @@ -0,0 +1,195 @@ +--- +id: 5ddb965c65d27e1512d44dc0 +title: Part 39 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Create a text node and assign it to a variable named `recommendedText`. + +This is similar to how your created the `resultText` element previously. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*recommendedText\s*=\s*document\.createTextNode\([\'\"\`]?\s*[\'\"\`]?\)/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-40.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-40.md new file mode 100644 index 0000000000..4372b3fdb0 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-40.md @@ -0,0 +1,200 @@ +--- +id: 5ddb965c65d27e1512d44dc1 +title: Part 40 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +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`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.createTextNode\(\`\$\{maxCalories\}RecommendedCalories\`/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-41.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-41.md new file mode 100644 index 0000000000..e6ea6356a1 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-41.md @@ -0,0 +1,202 @@ +--- +id: 5ddb965c65d27e1512d44dc2 +title: Part 41 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Append the `recommendedText` node to the `recommended` element. + +This is similar to how the `resultText` is appended to `result` previously. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/recommended\.appendChild\(recommendedText\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-42.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-42.md new file mode 100644 index 0000000000..0de916aa75 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-42.md @@ -0,0 +1,203 @@ +--- +id: 5ddb965c65d27e1512d44dc3 +title: Part 42 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Append the `recommended` element to `output`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(recommended\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-43.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-43.md new file mode 100644 index 0000000000..1227061734 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-43.md @@ -0,0 +1,208 @@ +--- +id: 5ddb965c65d27e1512d44dc4 +title: Part 43 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +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`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*consumed\s*=\s*document\.createElement\([\'\"\`]h4[\'\"\`]\)/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-44.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-44.md new file mode 100644 index 0000000000..a7d381cd04 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-44.md @@ -0,0 +1,217 @@ +--- +id: 5ddb965c65d27e1512d44dc5 +title: Part 44 +challengeType: 0 +isBeta: true +--- + +## 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. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/consumed\.innerHTML\=\`\$\{total\}ConsumedCalories\`/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-45.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-45.md new file mode 100644 index 0000000000..21735605e6 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-45.md @@ -0,0 +1,211 @@ +--- +id: 5ddb965c65d27e1512d44dc6 +title: Part 45 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Append the `consumed` element to `output`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/output\.appendChild\(consumed\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-46.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-46.md new file mode 100644 index 0000000000..277e430602 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-46.md @@ -0,0 +1,220 @@ +--- +id: 5ddb965c65d27e1512d44dc7 +title: Part 46 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Now it's time to add some styling which can be added directly as attributes or classes. + +In our CSS file, we have a styling rule for any elements with the class name `green-text`. + +On line **20**, right after creating the `result` element, set the `className` property of `result` to be equal to `'green-text'`. + +Now if you submit the form again and inspect the `result` element, you will see it as `

` and notice that the text is now green. + +

+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/result\.className\=[\'\"\`]green-text[\'\"\`]/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-47.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-47.md new file mode 100644 index 0000000000..2b4cd92100 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-47.md @@ -0,0 +1,222 @@ +--- +id: 5ddb965c65d27e1512d44dc8 +title: Part 47 +challengeType: 0 +isBeta: true +--- + +## 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`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/output\.setAttribute\([\'\"\`]class[\'\"\`]\,[\'\"\`]bordered-class[\'\"\`]\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-48.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-48.md new file mode 100644 index 0000000000..3bf2fbb92a --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-48.md @@ -0,0 +1,223 @@ +--- +id: 5ddb965c65d27e1512d44dc9 +title: Part 48 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Another way to add styling is to use the `style` property directly, like `output.style.width = '300px'`. + +Add a `backgroundColor` style to `output` and set it equal to `'#FFF9C4'`. + +The `calculate()` function is now finished! + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/output\.style\.backgroundColor\=[\'\"\`]\#FFF9C4[\'\"\`]/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-49.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-49.md new file mode 100644 index 0000000000..ce7f15b55c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-49.md @@ -0,0 +1,230 @@ +--- +id: 5ddb965c65d27e1512d44dca +title: Part 49 +challengeType: 0 +isBeta: true +--- + +## 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. + +In the HTML document, notice that the "Add Entry" button has the `id` attribute `add`: + +```html +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-50.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-50.md new file mode 100644 index 0000000000..3ff6046b45 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-50.md @@ -0,0 +1,230 @@ +--- +id: 5ddb965c65d27e1512d44dcb +title: Part 50 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +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() {} +``` + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]add[\'\"\`]\)\.onclick\=function\(\)\{\}/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-51.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-51.md new file mode 100644 index 0000000000..5dd11cd7e2 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-51.md @@ -0,0 +1,228 @@ +--- +id: 5ddb965c65d27e1512d44dcc +title: Part 51 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Inside the function, create an `input` document element and assign it to a variable named `foodInput`. + +This is similar to how you created the `result` element previously. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*foodInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-52.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-52.md new file mode 100644 index 0000000000..0b0e75cb9b --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-52.md @@ -0,0 +1,229 @@ +--- +id: 5ddb965c65d27e1512d44dcd +title: Part 52 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Set the `placeholder` property of the `foodInput` equal to `'food name'`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/foodInput\.placeholder\=[\'\"\`]foodname[\'\"\`]/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-53.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-53.md new file mode 100644 index 0000000000..80d23098e1 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-53.md @@ -0,0 +1,235 @@ +--- +id: 5ddb965c65d27e1512d44dce +title: Part 53 +challengeType: 0 +isBeta: true +--- + +## 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. + +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. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/foodInput\.classList\.add\([\'\"\`]food\-control[\'\"\`]\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-54.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-54.md new file mode 100644 index 0000000000..9ff6ea964c --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-54.md @@ -0,0 +1,237 @@ +--- +id: 5ddb965c65d27e1512d44dcf +title: Part 54 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Notice that parent container of all of the inputs has an `id` of `entries`: `
`. + +Get a reference to the document element with the `id` attribute `entries` and append the `foodInput` element to it by chaining on the `.appendChild()` function. + +This is similar to the other `appendChild()` methods that you have used previously. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(foodInput\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-55.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-55.md new file mode 100644 index 0000000000..a4742f34f1 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-55.md @@ -0,0 +1,236 @@ +--- +id: 5ddb965c65d27e1512d44dd0 +title: Part 55 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Create a variable named `calorieInput` and set it equal to another `input` document element. This is similar to how you created the `foodInput`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/const\s*calorieInput\s*=\s*document\.createElement\([\'\"\`]input[\'\"\`]\)/.test(code)); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-56.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-56.md new file mode 100644 index 0000000000..ca2923fea2 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-56.md @@ -0,0 +1,241 @@ +--- +id: 5ddb965c65d27e1512d44dd1 +title: Part 56 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Use the `setAttribute()` method of `calorieInput` to set the `type` of this input to `number`. + +This is similar to how to set the class of the `output` element previously. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/calorieInput\.setAttribute\([\'\"\`]type[\'\"\`]\,[\'\"\`]number[\'\"\`]\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-57.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-57.md new file mode 100644 index 0000000000..0aaabb2f3e --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-57.md @@ -0,0 +1,243 @@ +--- +id: 5ddb965c65d27e1512d44dd2 +title: Part 57 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +The `calorieInput` element should only accept numbers that are 0 or above. + +Set the `min` attribute of `calorieInput` to `0`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/calorieInput\.setAttribute\([\'\"\`]min[\'\"\`]\,[\'\"\`]0[\'\"\`]\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-58.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-58.md new file mode 100644 index 0000000000..0cb1f9d336 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-58.md @@ -0,0 +1,245 @@ +--- +id: 5ddb965c65d27e1512d44dd3 +title: Part 58 +challengeType: 0 +isBeta: true +--- + +## 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. + +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`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/calorieInput\.classList\.add\([\'\"\`]cal\-control[\'\"\`]\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-59.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-59.md new file mode 100644 index 0000000000..d359335bf9 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-59.md @@ -0,0 +1,247 @@ +--- +id: 5ddb965c65d27e1512d44dd4 +title: Part 59 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Later we will want to remove these extra `calorieInput` elements that we added. This will happen when the user pushes the "Clear" button. + +To keep track of them, add the class name `extra-cal-control` to the `calorieInput` element. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/calorieInput\.classList\.add\([\'\"\`]extra-cal\-control[\'\"\`]\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-60.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-60.md new file mode 100644 index 0000000000..26b5a9e4e5 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-60.md @@ -0,0 +1,249 @@ +--- +id: 5ddb965c65d27e1512d44dd5 +title: Part 60 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +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. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]entries[\'\"\`]\)\.appendChild\(calorieInput\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-61.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-61.md new file mode 100644 index 0000000000..7a78b6f3d6 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-61.md @@ -0,0 +1,252 @@ +--- +id: 5ddb965c65d27e1512d44dd6 +title: Part 61 +challengeType: 0 +isBeta: true +--- + +## 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. + +Get a reference to the `document` element with the `id` of `clear` and set its `onclick` property to equal to an empty function, `function(){}`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]clear[\'\"\`]\)\.onclick\=function\(\)\{\}/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-62.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-62.md new file mode 100644 index 0000000000..edbbdea855 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-62.md @@ -0,0 +1,255 @@ +--- +id: 5ddb965c65d27e1512d44dd7 +title: Part 62 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Inside the `function` body, instruct your code to call two other functions, `clearOutput()` and `clearForm()`. We will create these functions shortly. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert(/clearOutput\(\)/.test(code) && /clearForm\(\)/.test(code) ) +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-63.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-63.md new file mode 100644 index 0000000000..20abdffb19 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-63.md @@ -0,0 +1,266 @@ +--- +id: 5ddb965c65d27e1512d44dd8 +title: Part 63 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Create a variable named `clearOutput` and set it equal to a blank arrow function: + +```js +const clearOutput = () => {} +``` + +This is similar to `function clearOutput () {}`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( typeof clearOutput === "function" ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-64.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-64.md new file mode 100644 index 0000000000..b9801fea4f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-64.md @@ -0,0 +1,266 @@ +--- +id: 5ddb965c65d27e1512d44dd9 +title: Part 64 +challengeType: 0 +isBeta: true +--- + +## 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, `''`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.innerHTML\=[\'\"\`][\'\"\`]/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-65.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-65.md new file mode 100644 index 0000000000..28b5a40101 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-65.md @@ -0,0 +1,273 @@ +--- +id: 5ddb965c65d27e1512d44dda +title: Part 65 +challengeType: 0 +isBeta: true +--- + +## 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: + +```js +document.getElementById('my-div').classList.remove('my-class') +``` + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]output[\'\"\`]\)\.classList\.remove\([\'\"\`]bordered-class[\'\"\`]\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-66.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-66.md new file mode 100644 index 0000000000..a6db74b088 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-66.md @@ -0,0 +1,272 @@ +--- +id: 5ddb965c65d27e1512d44ddb +title: Part 66 +challengeType: 0 +isBeta: true +--- + +## 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. + +In the `calculate()` function, right after `event.preventDefault()`, call the `clearOutput` function. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( calculate.toString().match(/clearOutput\(\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-67.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-67.md new file mode 100644 index 0000000000..64cbe753af --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-67.md @@ -0,0 +1,272 @@ +--- +id: 5ddb965c65d27e1512d44ddc +title: Part 67 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Create a variable named `clearForm` and set it equal to a blank arrow function like you did with `clearOutput`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( typeof clearForm === "function") +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-68.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-68.md new file mode 100644 index 0000000000..c42a91265f --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-68.md @@ -0,0 +1,282 @@ +--- +id: 5ddb965c65d27e1512d44ddd +title: Part 68 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +We need to remove all elements with the class name `food-control` that are added when the user clicks the "Add" 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. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```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[\'\"\`]\)\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-69.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-69.md new file mode 100644 index 0000000000..fbdd85a2db --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-69.md @@ -0,0 +1,286 @@ +--- +id: 5ddb965c65d27e1512d44dde +title: Part 69 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +To remove the items `foodInputs` array, we will iterate through them by using the `forEach()` function. + +Add `foodInputs.forEach()`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(\)/) ) +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-70.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-70.md new file mode 100644 index 0000000000..3c5dd7c560 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-70.md @@ -0,0 +1,290 @@ +--- +id: 5ddb965c65d27e1512d44ddf +title: Part 70 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +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()`. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/foodInputs.forEach\(input=>input.remove\(\)\)/) ) +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-71.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-71.md new file mode 100644 index 0000000000..b442303aba --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-71.md @@ -0,0 +1,294 @@ +--- +id: 5ddb965c65d27e1512d44de0 +title: Part 71 +challengeType: 0 +isBeta: true +--- + +## 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. + +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. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```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[\'\"\`]\)\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-72.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-72.md new file mode 100644 index 0000000000..ea1022be33 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-72.md @@ -0,0 +1,296 @@ +--- +id: 5ddb965c65d27e1512d44de1 +title: Part 72 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Similar to how you removed each `foodInputs` elements, use the `forEach()` function to remove each `calInputs` element. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/calInputs.forEach\(input=>input.remove\(\)\)/) ) +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + +``` + +
diff --git a/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-73.md b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-73.md new file mode 100644 index 0000000000..1e74d9a426 --- /dev/null +++ b/curriculum/challenges/english/02-javascript-algorithms-and-data-structures/intermediate-javascript-calorie-counter/part-73.md @@ -0,0 +1,302 @@ +--- +id: 5ddb965c65d27e1512d44de2 +title: Part 73 +challengeType: 0 +isBeta: true +--- + +## Description + +
+ +Finally, it's time to clear the other calories that may have been entered for Breakfast, Lunch, and Dinner. This can be achieved by calling the `reset()` method on the form. + +Get a reference to the document element with the `id` of `calorie-form` and chain the `reset()` method to it. + +
+ +## Instructions + +
+
+ +## Tests + +
+ +```yml +tests: + - text: See description above for instructions. + testString: assert( code.replace(/\s/g, '').match(/document\.getElementById\([\'\"\`]calorie-form[\'\"\`]\).reset\(\)/) ); +``` + +
+ +## Challenge Seed + +
+ +
+ +```html + +``` + +
+ +### Before Test + +
+ +```html + + + + + + + + + + +
+
+

Calorie Counter

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

Calorie Counter

+
+ Sex +
+ + + +
+ + +
+
+
+
+ Breakfast +
+ Lunch +
+ Dinner +
+ + + +
+
+
+ + +``` + +
+ +### After Test + +
+ +```html + + +``` + +
+ +
+ +## Solution + +
+ +```html + + + +``` + +
diff --git a/utils/block-nameify.js b/utils/block-nameify.js index 66f2369457..e72d4a6060 100644 --- a/utils/block-nameify.js +++ b/utils/block-nameify.js @@ -19,7 +19,9 @@ const preFormattedBlockNames = { tensorflow: 'TensorFlow', 'basic-javascript-rpg-game': 'Basic JavaScript RPG Game', 'css-variables-skyline': 'CSS Variables Skyline', - 'javascript-spreadsheet': 'JavaScript Spreadsheet' + 'javascript-spreadsheet': 'JavaScript Spreadsheet', + 'intermediate-javascript-calorie-counter': + 'Intermediate JavaScript Calorie Counter' }; const noFormatting = ['and', 'for', 'of', 'the', 'up', 'with'];