fix(curriculum): less strict calorie count step 87 (#57173)

Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
2026-06-19 21:09:51 +08:00 · 2024-12-12 14:59:07 -05:00 · 2024-12-12 14:59:07 -05:00 · b7169549bb
commit b7169549bb
parent 70f20b98c2
2 changed files with 303 additions and 65 deletions
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e8fe3a6f022a05a04675.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e8fe3a6f022a05a04675.md
@ -14,65 +14,162 @@ Using the same interpolation syntax, add a second `p` element with the text `con
 You should add a second `p` element to your template literal.

 ```js
-assert.isAtLeast(getTemplateContents(code)?.match(/<p>[^<]*<\/p>/g)?.length, 2);
-```

-Your second `p` element should be on a new line.
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 

-```js
-assert.match(getTemplateContents(code), /<hr>\s*<p>[^<]*<\/p>\n\s*<p>[^<]*<\/p>/);
-```
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 

-Your second `p` element should come after your existing `p` element.
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 

-```js
-assert.match(getTemplateContents(code), /<p>\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\s*<p>/);
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+
+const output = document.getElementById('output');
+assert.isAtLeast(output.children.length, 4);
 ```

 Your second `p` element should have the text `${consumedCalories} Calories Consumed`.

 ```js
-const secondP = getTemplateContents(code)?.split(/<p>/)?.[2];
-assert.match(secondP, /\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/);
+
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
+
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+ 
+assert.strictEqual(output.children[3].innerText,"1800 Calories Consumed"); 
+
+dinnerValueElement.value = 300;
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[3].innerText,"1400 Calories Consumed"); 
+
 ```

 You should add a third `p` element to your template literal.

 ```js
-assert.lengthOf(getTemplateContents(code)?.match(/<p>[^<]*<\/p>/g), 3);
-```

-Your third `p` element should be on a new line.
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 

-```js
-assert.match(getTemplateContents(code), /<hr>\s*<p>[^<]*<\/p>\s*<p>[^<]*<\/p>\n\s*<p>[^<]*<\/p>/);
-```
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 

-Your third `p` element should come after your second existing `p` element.
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 

-```js
-assert.match(getTemplateContents(code), /<p>\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>\s*<p>/);
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+ 
+assert.lengthOf(output.children,5);
 ```

 Your third `p` element should have the text `${exerciseCalories} Calories Burned`.

 ```js
-const thirdP = getTemplateContents(code)?.split(/<p>/)?.[3];
-assert.match(thirdP, /\$\{exerciseCalories\}\s*Calories\s*Burned<\/p>/);
+
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
+
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+ 
+assert.strictEqual(output.children[4].innerText,"300 Calories Burned"); 
+
+exerciseValueElement.value = Math.floor(Math.random() * 500);
+
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[4].innerText, exerciseValueElement.value.toString() + " Calories Burned");
+
 ```

 # --seed--

-## --after-user-code--
-
-```js
-function getTemplateContents(code) {
-  return code
-    .split(/output\s*\.\s*innerHTML\s*=\s*/)?.[1]
-    ?.split(/`/)?.[1];
-}
-```
-
 ## --seed-contents--

 ```html
@ -270,7 +367,7 @@ function addEntry() {
  targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
 }

--fcc-editable-region--
+
 function calculateCalories(e) {
  e.preventDefault();
  isError = false;
@ -292,6 +389,7 @@ function calculateCalories(e) {
    return;
  }

+--fcc-editable-region--
  const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories;
  const remainingCalories = budgetCalories - consumedCalories + exerciseCalories;
  const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit';
--- a/curriculum/challenges/english/25-front-end-development/workshop-calorie-counter/63c9e8fe3a6f022a05a04675.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-calorie-counter/63c9e8fe3a6f022a05a04675.md
@ -13,66 +13,205 @@ Using the same interpolation syntax, add a second `p` element with the text `con

 You should add a second `p` element to your template literal.

+
 ```js
-assert.isAtLeast(getTemplateContents(code)?.match(/<p>[^<]*<\/p>/g)?.length, 2);
+
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
+
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+
+
+const output = document.getElementById('output');
+assert.isAtLeast(output.children.length, 4);
 ```

 Your second `p` element should be on a new line.

-```js
-assert.match(getTemplateContents(code), /<hr>\s*<p>[^<]*<\/p>\n\s*<p>[^<]*<\/p>/);
-```
-
-Your second `p` element should come after your existing `p` element.

 ```js
-assert.match(getTemplateContents(code), /<p>\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\s*<p>/);
+
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
+
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+ 
+assert.strictEqual(output.children[3].innerText,"1800 Calories Consumed"); 
+
+dinnerValueElement.value = 300;
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[3].innerText,"1400 Calories Consumed"); 
 ```

 Your second `p` element should have the text `${consumedCalories} Calories Consumed`.

 ```js
-const secondP = getTemplateContents(code)?.split(/<p>/)?.[2];
-assert.match(secondP, /\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/);
+
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
+
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+ 
+assert.strictEqual(output.children[3].innerText,"1800 Calories Consumed"); 
+
+dinnerValueElement.value = 300;
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[3].innerText,"1400 Calories Consumed"); 
+
 ```

 You should add a third `p` element to your template literal.

 ```js
-assert.lengthOf(getTemplateContents(code)?.match(/<p>[^<]*<\/p>/g), 3);
-```

-Your third `p` element should be on a new line.
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 

-```js
-assert.match(getTemplateContents(code), /<hr>\s*<p>[^<]*<\/p>\s*<p>[^<]*<\/p>\n\s*<p>[^<]*<\/p>/);
-```
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 

-Your third `p` element should come after your second existing `p` element.
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 

-```js
-assert.match(getTemplateContents(code), /<p>\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>\s*<p>/);
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+ 
+assert.lengthOf(output.children,5);
 ```

 Your third `p` element should have the text `${exerciseCalories} Calories Burned`.

 ```js
-const thirdP = getTemplateContents(code)?.split(/<p>/)?.[3];
-assert.match(thirdP, /\$\{exerciseCalories\}\s*Calories\s*Burned<\/p>/);
+
+const entryDropdownElement = document.getElementById('entry-dropdown');
+budgetNumberInput.value = 2000; 
+addEntry(); 
+
+const breakfastValueElement = document.getElementById("breakfast-1-calories");
+breakfastValueElement.value = 300; 
+entryDropdownElement.value = "lunch";
+addEntry(); 
+
+const lunchValueElement = document.getElementById("lunch-1-calories");
+lunchValueElement.value = 600;
+entryDropdownElement.value = "dinner";
+addEntry(); 
+
+const dinnerValueElement = document.getElementById("dinner-1-calories");
+dinnerValueElement.value = 700;
+entryDropdownElement.value = "snacks";
+addEntry();
+
+const snacksValueElement = document.getElementById("snacks-1-calories");
+snacksValueElement.value = 200;
+entryDropdownElement.value = "exercise";
+addEntry(); 
+
+const exerciseValueElement = document.getElementById("exercise-1-calories");
+exerciseValueElement.value = 300;
+const fakeEvent = { preventDefault: () => {} };
+calculateCalories(fakeEvent); 
+ 
+assert.strictEqual(output.children[4].innerText,"300 Calories Burned"); 
+
+exerciseValueElement.value = Math.floor(Math.random() * 500);
+
+calculateCalories(fakeEvent); 
+assert.strictEqual(output.children[4].innerText, exerciseValueElement.value.toString() + " Calories Burned");
+
 ```

 # --seed--

-## --after-user-code--
-
-```js
-function getTemplateContents(code) {
-  return code
-    .split(/output\s*\.\s*innerHTML\s*=\s*/)?.[1]
-    ?.split(/`/)?.[1];
-}
-```
-
 ## --seed-contents--

 ```html
@ -270,7 +409,7 @@ function addEntry() {
  targetInputContainer.insertAdjacentHTML('beforeend', HTMLString);
 }

--fcc-editable-region--
+
 function calculateCalories(e) {
  e.preventDefault();
  isError = false;
@ -291,7 +430,8 @@ function calculateCalories(e) {
  if (isError) {
    return;
  }
-
+  
+--fcc-editable-region--
  const consumedCalories = breakfastCalories + lunchCalories + dinnerCalories + snacksCalories;
  const remainingCalories = budgetCalories - consumedCalories + exerciseCalories;
  const surplusOrDeficit = remainingCalories < 0 ? 'Surplus' : 'Deficit';