diff --git 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
index e0db1f93579..cdb43201c14 100644
--- 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';
diff --git 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
index e0db1f93579..c1abf02e73b 100644
--- 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';