fix(curriculum): adding missing explanations for new concepts in calorie counter project (#52312)

Co-authored-by: Bruce Blaser <bbsmooth@gmail.com>

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md

@@ -7,7 +7,19 @@ dashedName: step-14
 
 # --description--
 
-It is time to start writing the script that makes your form work. Begin by getting the `form` element (using the `id`) and storing it in a variable called `calorieCounter`.
+It is time to start writing the script that makes your form work.
+
+To access an HTML element with a given `id` name, you can use the <dfn>getElementById()</dfn> method. Here's an example of how to use this method:
+
+```html
+<h1 id="title">Main title</h1>
+```
+
+```js
+const mainTitleElement = document.getElementById('title');
+```
+
+Begin by getting the `form` element (using the `id`) and storing it in a variable called `calorieCounter`.
 
 # --hints--
 

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md

@@ -7,9 +7,19 @@ dashedName: step-19
 
 # --description--
 
-You need to split your `str` into individual characters. Remember that strings have a `.split()` method, and if you pass an empty string it will split on every character.
+You need to split your `str` into individual characters. You can use the <dfn>split()</dfn> method to do this.
 
-Declare a `strArray` variable and assign it that split value.
+The `split()` method splits a string into an array of substrings, and returns the new array. You can pass in an optional separator which tells the method where each split should happen.
+
+For example, passing an empty string into the `split` method will split the string into an array of individual characters.
+
+```js
+const str = 'Hello World';
+const strArray = str.split('');
+// ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]
+```
+
+Split the string passed into the `cleanInputString` function into an array of individual characters and assign it to a variable named `strArray`.
 
 # --hints--
 

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md

@@ -7,9 +7,23 @@ dashedName: step-22
 
 # --description--
 
-Within your loop, you need to check if the character in `strArray` at index `i` is not `+`, `-`, or a space. If it is not, `push` it to the `cleanStrArray`.
+Within your loop, you need to check if the character in `strArray` at index `i` is not a `+`, `-`, or a space. If it is not, `push` it to the `cleanStrArray`.
 
-To check your character, see if the array `["+", "-", " "]` includes the character – you can use the `.includes()` method on the array to do this.
+You will need to check if the array `["+", "-", " "]` does not include the current character. You can use a combination of the <dfn>includes()</dfn> method and the <dfn>!</dfn> operator to do this.
+
+The `.includes()` method returns `true` if the array contains the character, and `false` if not. The logical NOT operator (`!`) will return the opposite of the value of the `.includes()` method.
+
+Here is an example:
+
+```js
+const numbersArray = [1, 2, 3, 4, 5]
+const number = 6
+
+if (!numbersArray.includes(number)) {
+  console.log("The number is not in the array.")
+}
+
+```
 
 # --hints--
 

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md

@@ -107,7 +107,7 @@ body {
   font-family: "Lato", Helvetica, Arial, sans-serif;
   font-size: 18px;
   background-color: var(--fcc-blue);
-  color: var(--light-text);
+  color: var(--light-grey);
 }
 
 h1 {

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md

@@ -9,7 +9,10 @@ dashedName: step-37
 
 You'll need to know which category the entry goes in. Thankfully, you added a dropdown for the user to select a category.
 
-Remember that you queried that dropdown earlier in your JavaScript and assigned it to the `entryDropdown` button. Use concatenation to add `#` to the beginning of the `value` property of `entryDropdown`, and assign that result to a `targetId` variable.
+Remember that you queried that dropdown earlier in your JavaScript and assigned it to the `entryDropdown` button. You can use the <dfn>value</dfn> property to get the value of the selected option.
+
+Use concatenation to add a `#` to the beginning of the `value` property of `entryDropdown`, and assign that result to a `targetId` variable.
+
 
 # --hints--
 

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md

@@ -7,7 +7,11 @@ dashedName: step-41
 
 # --description--
 
-You will want to number the entries a user adds. Declare an `entryNumber` variable and give it the value of `targetInputContainer.querySelectorAll()`. You do not need to pass an argument to the query selector yet.
+You will want to number the entries a user adds. To get all of the number inputs, you can use the <dfn>querySelectorAll()</dfn> method.
+
+The `querySelectorAll()` method returns a `NodeList` of all the elements that match the selector. A `NodeList` is an array-like object, so you can access the elements using bracket notation.
+
+Declare an `entryNumber` variable and give it the value of `targetInputContainer.querySelectorAll()`. You do not need to pass an argument to the query selector yet.
 
 # --hints--
 

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md

@@ -7,7 +7,24 @@ dashedName: step-49
 
 # --description--
 
-Finally, add your new `HTMLString` to the `targetInputContainer` by using the `innerHTML` property. Remember to use the `+=` operator to add to the existing HTML instead of replacing it.
+To see your new HTML content for the `targetInputContainer`, you will need to use the <dfn>innerHTML</dfn> property.
+
+The `innerHTML` property sets or returns the HTML content inside an element. Here is an example of how to use it:
+
+```html
+<div id="container">
+  <p>Example paragraph</p>
+</div>
+```
+
+```js
+const container = document.getElementById("container");
+container.innerHTML += `
+  <p>adding new content</p>
+`;
+```
+
+Add your new `HTMLString` to the `targetInputContainer` by using the `innerHTML` property. Remember to use the `+=` operator to add to the existing HTML instead of replacing it.
 
 # --hints--
 

curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9bce376ca4f09c15a3768.md

@@ -11,6 +11,14 @@ Remember that `return` ends the execution of a function. After your `if` block,
 
 Use the addition assignment operator to add `currVal` to your `calories` total. You'll need to use the `Number` constructor to convert `currVal` to a number.
 
+The `Number` constructor is a function that converts a value to a number. If the value cannot be converted, it returns `NaN` which stands for "Not a Number". 
+
+Here is an example:
+
+```js
+Number('10'); // returns the number 10
+```
+
 # --hints--
 
 You should not add an `else` statement.