diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md index fe1ecb5a74d..b15b93dd2bf 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md +++ b/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 getElementById() method. Here's an example of how to use this method: + +```html +

Main title

+``` + +```js +const mainTitleElement = document.getElementById('title'); +``` + +Begin by getting the `form` element (using the `id`) and storing it in a variable called `calorieCounter`. # --hints-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md index e496917b26f..87bc64491b5 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md +++ b/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 split() 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-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md index 00700de2e33..a707780498f 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md +++ b/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 includes() method and the ! 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-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md index 346dbd899ef..8507ce65707 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md +++ b/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 { diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md index be2dd0b6ec4..6cc11975740 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md +++ b/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 value 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-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md index ae943338245..a40034ef8e1 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md +++ b/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 querySelectorAll() 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-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md index 0f3080a2ea8..f285c5c69df 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md +++ b/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 innerHTML property. + +The `innerHTML` property sets or returns the HTML content inside an element. Here is an example of how to use it: + +```html +
+

Example paragraph

+
+``` + +```js +const container = document.getElementById("container"); +container.innerHTML += ` +

adding new content

+`; +``` + +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-- diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9bce376ca4f09c15a3768.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9bce376ca4f09c15a3768.md index b11ebeee6a9..9ecf8ee90f6 100644 --- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9bce376ca4f09c15a3768.md +++ b/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.