+
+
+
+```
+
+```css
+body {
+ font-family: "Lato", Arial;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid black;
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: #006627;
+}
+
+.deficit {
+ color: #B30000;
+}
+```
+
+```js
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md
new file mode 100644
index 00000000000..5079bde79a8
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md
@@ -0,0 +1,168 @@
+---
+id: 63b607af6fcdb119aae9b16a
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Create a `fieldset` element with the `id` set to `breakfast`.
+
+Within that element, create a `legend` with the text `Breakfast`, and an empty `div` with the `class` set to `input-container`.
+
+# --hints--
+
+You should create a `fieldset` element in your `form`.
+
+```js
+assert.exists(document.querySelector('form fieldset'));
+```
+
+Your `fieldset` element should come after your `input` element.
+
+```js
+assert.equal(document.querySelector('form fieldset')?.previousElementSibling?.tagName, "INPUT");
+```
+
+Your `fieldset` element should have an `id` set to `breakfast`.
+
+```js
+assert.equal(document.querySelector('form fieldset')?.id, "breakfast");
+```
+
+You should create a `legend` element within your `fieldset`.
+
+```js
+assert.exists(document.querySelector('form fieldset legend'));
+```
+
+Your `legend` element should have the text `Breakfast`.
+
+```js
+assert.equal(document.querySelector('form fieldset legend')?.innerText, "Breakfast");
+```
+
+You should create a `div` element within your `fieldset`.
+
+```js
+assert.exists(document.querySelector('form fieldset div'));
+```
+
+Your `div` element should come after your `legend` element.
+
+```js
+assert.equal(document.querySelector('form fieldset div')?.previousElementSibling?.tagName, "LEGEND");
+```
+
+Your `div` element should have a `class` set to `input-container`.
+
+```js
+assert.equal(document.querySelector('form fieldset div')?.className, "input-container");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Calorie Counter
+
+
+
+
Calorie Counter
+
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: "Lato", Arial;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid black;
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: #006627;
+}
+
+.deficit {
+ color: #B30000;
+}
+```
+
+```js
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md
new file mode 100644
index 00000000000..7de68f5215c
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md
@@ -0,0 +1,164 @@
+---
+id: 63b60821c855d01b1eda3c0b
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Now create a `fieldset` with an `id` set to `lunch`, and a corresponding `legend` and `div` element.
+
+# --hints--
+
+You should create a second `fieldset` element in your `form`.
+
+```js
+assert.exists(document.querySelectorAll('form fieldset')[1]);
+```
+
+Your second `fieldset` element should come after your first `fieldset` element.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[1]?.previousElementSibling?.tagName, "FIELDSET");
+```
+
+Your second `fieldset` element should have an `id` set to `lunch`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[1]?.id, "lunch");
+```
+
+Your second `fieldset` element should contain a `legend` element.
+
+```js
+assert.exists(document.querySelectorAll('form fieldset')[1]?.querySelector('legend'));
+```
+
+Your new `legend` element should have the text `Lunch`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[1]?.querySelector('legend')?.innerText, "Lunch");
+```
+
+Your second `fieldset` element should contain a `div` element.
+
+```js
+assert.exists(document.querySelectorAll('form fieldset')[1]?.querySelector('div'));
+```
+
+Your new `div` element should have a `class` set to `input-container`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[1]?.querySelector('div')?.className, "input-container");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Calorie Counter
+
+
+
+
Calorie Counter
+
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: "Lato", Arial;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid black;
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: #006627;
+}
+
+.deficit {
+ color: #B30000;
+}
+```
+
+```js
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md
new file mode 100644
index 00000000000..f7c617f998e
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md
@@ -0,0 +1,168 @@
+---
+id: 63b6088bb56e2d1cac364043
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Continuing the pattern, create a `fieldset` for `dinner` with the same nested elements.
+
+# --hints--
+
+You should create a third `fieldset` element in your `form`.
+
+```js
+assert.exists(document.querySelectorAll('form fieldset')[2]);
+```
+
+Your third `fieldset` element should come after your second `fieldset` element.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[2]?.previousElementSibling?.tagName, "FIELDSET");
+```
+
+Your third `fieldset` element should have an `id` set to `dinner`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[2]?.id, "dinner");
+```
+
+Your third `fieldset` element should contain a `legend` element.
+
+```js
+assert.exists(document.querySelectorAll('form fieldset')[2]?.querySelector('legend'));
+```
+
+Your new `legend` element should have the text `Dinner`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[2]?.querySelector('legend')?.innerText, "Dinner");
+```
+
+Your third `fieldset` element should contain a `div` element.
+
+```js
+assert.exists(document.querySelectorAll('form fieldset')[2]?.querySelector('div'));
+```
+
+Your new `div` element should have a `class` set to `input-container`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[2]?.querySelector('div')?.className, "input-container");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Calorie Counter
+
+
+
+
Calorie Counter
+
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: "Lato", Arial;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid black;
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: #006627;
+}
+
+.deficit {
+ color: #B30000;
+}
+```
+
+```js
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md
new file mode 100644
index 00000000000..911126b33e4
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md
@@ -0,0 +1,214 @@
+---
+id: 63b608ebf40c871d960fc004
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+You need two more of these `fieldset` code blocks – one for `snacks` and one for `exercise`.
+
+# --hints--
+
+You should create a fourth `fieldset` element in your `form`.
+
+```js
+assert.exists(document.querySelectorAll('form fieldset')[3]);
+```
+
+Your fourth `fieldset` element should come after your third `fieldset` element.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[3]?.previousElementSibling?.tagName, "FIELDSET");
+```
+
+Your fourth `fieldset` element should have an `id` set to `snacks`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[3]?.id, "snacks");
+```
+
+Your fourth `fieldset` element should contain a `legend` element.
+
+```js
+assert.exists(document.querySelectorAll('form fieldset')[3]?.querySelector('legend'));
+```
+
+Your fourth `legend` element should have the text `Snacks`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[3]?.querySelector('legend')?.innerText, "Snacks");
+```
+
+Your fourth `fieldset` element should contain a `div` element.
+
+```js
+assert.exists(document.querySelectorAll('form fieldset')[3]?.querySelector('div'));
+```
+
+Your fifth `div` element should have a `class` set to `input-container`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[3]?.querySelector('div')?.className, "input-container");
+```
+
+You should create a fifth `fieldset` element in your `form`.
+
+```js
+assert.exists(document.querySelectorAll('form fieldset')[4]);
+```
+
+Your fifth `fieldset` element should come after your fourth `fieldset` element.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[4]?.previousElementSibling?.tagName, "FIELDSET");
+```
+
+Your fifth `fieldset` element should have an `id` set to `exercise`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[4]?.id, "exercise");
+```
+
+Your fifth `fieldset` element should contain a `legend` element.
+
+```js
+assert.exists(document.querySelectorAll('form fieldset')[4]?.querySelector('legend'));
+```
+
+Your fifth `legend` element should have the text `Exercise`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[4]?.querySelector('legend')?.innerText, "Exercise");
+```
+
+Your fifth `fieldset` element should contain a `div` element.
+
+```js
+assert.exists(document.querySelectorAll('form fieldset')[4]?.querySelector('div'));
+```
+
+Your fifth `div` element should have a `class` set to `input-container`.
+
+```js
+assert.equal(document.querySelectorAll('form fieldset')[4]?.querySelector('div')?.className, "input-container");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Calorie Counter
+
+
+
+
Calorie Counter
+
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: "Lato", Arial;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid black;
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: #006627;
+}
+
+.deficit {
+ color: #B30000;
+}
+```
+
+```js
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md
new file mode 100644
index 00000000000..068bea72dfc
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md
@@ -0,0 +1,163 @@
+---
+id: 63b60a140bf5a321d50a7315
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Create a `div` and give it a `class` set to `controls`. Nest a `span` element within that `div`.
+
+# --hints--
+
+You should create a new `div` element in your `form`.
+
+```js
+assert.exists(document.querySelector('form > div'));
+```
+
+Your `div` element should come after your `fieldset` elements.
+
+```js
+assert.equal(document.querySelector('form > div')?.previousElementSibling?.tagName, "FIELDSET");
+assert.notExists(document.querySelector('form > div')?.nextElementSibling);
+```
+
+Your `div` element should have a `class` attribute set to `controls`.
+
+```js
+assert.equal(document.querySelector('form > div')?.className, "controls");
+```
+
+You should nest a `span` element within your `div`.
+
+```js
+assert.exists(document.querySelector('form > div > span'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Calorie Counter
+
+
+
+
Calorie Counter
+
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: "Lato", Arial;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid black;
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: #006627;
+}
+
+.deficit {
+ color: #B30000;
+}
+```
+
+```js
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md
new file mode 100644
index 00000000000..c9723d26fcb
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md
@@ -0,0 +1,210 @@
+---
+id: 63b60aaaa65f8922bfce6b7e
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+In your `span` element, create a `label` element for an `entry-dropdown` and give it the text `Add food or exercise:`. Then create a `select` element with the `id` set to `entry-dropdown` and a `name` set to `options`. Below that, add a `button` element with the `id` set to `add-entry` and the text `Add Entry`.
+
+Give your `button` element a `type` attribute set to `button` to prevent automatic form submission.
+
+# --hints--
+
+You should add a `label` element to your `span` element.
+
+```js
+assert.exists(document.querySelector('.controls > span > label'));
+```
+
+Your new `label` element should have a `for` attribute set to `entry-dropdown`.
+
+```js
+assert.equal(document.querySelector('.controls > span > label')?.getAttribute('for'), 'entry-dropdown');
+```
+
+Your new `label` element should have the text `Add food or exercise:`.
+
+```js
+assert.equal(document.querySelector('.controls > span > label')?.innerText, 'Add food or exercise:');
+```
+
+You should add a `select` element to your `span` element.
+
+```js
+assert.exists(document.querySelector('.controls > span > select'));
+```
+
+Your `select` element should come after your `label` element.
+
+```js
+assert(document.querySelector('.controls > span > select')?.previousElementSibling?.tagName === 'LABEL');
+```
+
+Your new `select` element should have an `id` attribute set to `entry-dropdown`.
+
+```js
+assert.equal(document.querySelector('.controls > span > select')?.getAttribute('id'), 'entry-dropdown');
+```
+
+Your new `select` element should have a `name` attribute set to `options`.
+
+```js
+assert.equal(document.querySelector('.controls > span > select')?.getAttribute('name'), 'options');
+```
+
+You should add a `button` element to your `span` element.
+
+```js
+assert.exists(document.querySelector('.controls > span > button'));
+```
+
+Your `button` element should come after your `select` element.
+
+```js
+assert(document.querySelector('.controls > span > button')?.previousElementSibling?.tagName === 'SELECT');
+```
+
+Your new `button` element should have an `id` attribute set to `add-entry`.
+
+```js
+assert.equal(document.querySelector('.controls > span > button')?.getAttribute('id'), 'add-entry');
+```
+
+Your new `button` element should have the text `Add Entry`.
+
+```js
+assert.equal(document.querySelector('.controls > span > button')?.innerText, 'Add Entry');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Calorie Counter
+
+
+
+
Calorie Counter
+
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: "Lato", Arial;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid black;
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: #006627;
+}
+
+.deficit {
+ color: #B30000;
+}
+```
+
+```js
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md
new file mode 100644
index 00000000000..27f69a473d9
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md
@@ -0,0 +1,220 @@
+---
+id: 63b60af1a0b9f7238a9dd294
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Your select menu needs options for each of the food and exercise `fieldset` elements you created in the previous steps. Use the `option` element to create a new option for each `fieldset`. The `value` attribute of each option should be the `id` of the `fieldset`, and the text of each option should be the text of the `legend`.
+
+Set the `Breakfast` option as the `selected` option.
+
+# --hints--
+
+You should create five `option` elements within your `select` element.
+
+```js
+assert.equal(document.querySelectorAll('.controls select option')?.length, 5);
+```
+
+Your first `option` should have the text `Breakfast`.
+
+```js
+assert.equal(document.querySelectorAll('.controls select option')?.[0]?.textContent, 'Breakfast');
+```
+
+Your first `option` should have the `value` attribute set to `breakfast`.
+
+```js
+assert.equal(document.querySelectorAll('.controls select option')?.[0]?.value, 'breakfast');
+```
+
+Your second `option` should have the text `Lunch`.
+
+```js
+assert.equal(document.querySelectorAll('.controls select option')?.[1]?.textContent, 'Lunch');
+```
+
+Your second `option` should have the `value` attribute set to `lunch`.
+
+```js
+assert.equal(document.querySelectorAll('.controls select option')?.[1]?.value, 'lunch');
+```
+
+Your third `option` should have the text `Dinner`.
+
+```js
+assert.equal(document.querySelectorAll('.controls select option')?.[2]?.textContent, 'Dinner');
+```
+
+Your third `option` should have the `value` attribute set to `dinner`.
+
+```js
+assert.equal(document.querySelectorAll('.controls select option')?.[2]?.value, 'dinner');
+```
+
+Your fourth `option` should have the text `Snacks`.
+
+```js
+assert.equal(document.querySelectorAll('.controls select option')?.[3]?.textContent, 'Snacks');
+```
+
+Your fourth `option` should have the `value` attribute set to `snacks`.
+
+```js
+assert.equal(document.querySelectorAll('.controls select option')?.[3]?.value, 'snacks');
+```
+
+Your fifth `option` should have the text `Exercise`.
+
+```js
+assert.equal(document.querySelectorAll('.controls select option')?.[4]?.textContent, 'Exercise');
+```
+
+Your fifth `option` should have the `value` attribute set to `exercise`.
+
+```js
+assert.equal(document.querySelectorAll('.controls select option')?.[4]?.value, 'exercise');
+```
+
+Your first `option` should be selected by default.
+
+```js
+assert.isTrue(document.querySelectorAll('.controls select option')?.[0]?.getAttributeNames()?.includes('selected'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Calorie Counter
+
+
+
+
Calorie Counter
+
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: "Lato", Arial;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid black;
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: #006627;
+}
+
+.deficit {
+ color: #B30000;
+}
+```
+
+```js
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md
new file mode 100644
index 00000000000..4e28d650816
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md
@@ -0,0 +1,207 @@
+---
+id: 63b60c09c5039f25a3b2dda9
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Create another `div` element. Within it, nest a `button` to `submit` the form, with an `id` set to `calculate-calories`. This button should have the text `Calculate Remaining Calories`.
+
+Then add a `button` with the `id` set to `clear` to clear the form (don't forget to give it a `type` attribute that prevents it from submitting the form). This button needs the text `Clear`.
+
+# --hints--
+
+You should create a second `div` element.
+
+```js
+assert.equal(document.querySelectorAll('form > div')?.length, 2);
+```
+
+Your new `div` element should have a `button` element.
+
+```js
+assert.exists(document.querySelectorAll('form > div')?.[1]?.querySelector('button'));
+```
+
+Your `button` element should have a `type` attribute set to `submit`.
+
+```js
+assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelector('button')?.getAttribute('type'), 'submit');
+```
+
+Your `button` element should have an `id` attribute set to `calculate-calories`.
+
+```js
+assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelector('button')?.getAttribute('id'), 'calculate-calories');
+```
+
+Your `button` element should have the text `Calculate Remaining Calories`.
+
+```js
+assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelector('button')?.innerText, 'Calculate Remaining Calories');
+```
+
+Your `div` element should have a second `button` element.
+
+```js
+assert.exists(document.querySelectorAll('form > div')?.[1]?.querySelectorAll('button')?.[1]);
+```
+
+Your second `button` element should have a `type` attribute set to `button`.
+
+```js
+assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelectorAll('button')?.[1]?.getAttribute('type'), 'button');
+```
+
+Your second `button` element should have an `id` attribute set to `clear`.
+
+```js
+assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelectorAll('button')?.[1]?.getAttribute('id'), 'clear');
+```
+
+Your second `button` element should have the text `Clear`.
+
+```js
+assert.equal(document.querySelectorAll('form > div')?.[1]?.querySelectorAll('button')?.[1]?.innerText, 'Clear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Calorie Counter
+
+
+
+
Calorie Counter
+
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: "Lato", Arial;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid black;
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: #006627;
+}
+
+.deficit {
+ color: #B30000;
+}
+```
+
+```js
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md
new file mode 100644
index 00000000000..aaf24c8d8cb
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md
@@ -0,0 +1,182 @@
+---
+id: 63b60ca38c897f2721b27959
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Your form needs somewhere to display the results. Add an empty `div` element and give it an `id` of `output` and the `class` values of `output` and `hide`.
+
+# --hints--
+
+You should add a `div` element after your `form`.
+
+```js
+assert.exists(document.querySelector('.container > div'));
+```
+
+Your new `div` element should have an `id` set to `output`.
+
+```js
+assert.equal(document.querySelector('.container > div')?.id, 'output');
+```
+
+Your new `div` element should have the `class` values of `output` and `hide`.
+
+```js
+assert.include(document.querySelector('.container > div')?.className.split(/\s+/), 'output');
+assert.include(document.querySelector('.container > div')?.className.split(/\s+/), 'hide');
+```
+
+Your new `div` should be empty.
+
+```js
+assert.equal(document.querySelector('.container > div')?.innerHTML, '');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Calorie Counter
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: "Lato", Arial;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid black;
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: #006627;
+}
+
+.deficit {
+ color: #B30000;
+}
+```
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+--fcc-editable-region--
+function addEntry() {
+ const targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(`${targetId} .input-container`);
+}
+--fcc-editable-region--
+```
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
new file mode 100644
index 00000000000..b658496aeee
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md
@@ -0,0 +1,197 @@
+---
+id: 63c1e704ee12703347625900
+title: Step 41
+challengeType: 0
+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.
+
+# --hints--
+
+You should have an `entryNumber` variable.
+
+```js
+assert.match(addEntry.toString(), /entryNumber\s*=/);
+```
+
+Your `entryNumber` variable should have the value of `targetInputContainer.querySelectorAll()`.
+
+```js
+assert.match(addEntry.toString(), /entryNumber\s*=\s*targetInputContainer\.querySelectorAll\(/);
+```
+
+You should not pass an argument to `querySelectorAll()`.
+
+```js
+assert.match(addEntry.toString(), /entryNumber\s*=\s*targetInputContainer\.querySelectorAll\(\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Calorie Counter
+
+
+
+
Calorie Counter
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: "Lato", Arial;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid black;
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: #006627;
+}
+
+.deficit {
+ color: #B30000;
+}
+```
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+--fcc-editable-region--
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md
new file mode 100644
index 00000000000..15622f17e14
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md
@@ -0,0 +1,201 @@
+---
+id: 63c2164c0df38a382062c4af
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+Each entry will have a text input for the entry's name, and a number input for the calories. To get a count of the number of entries, you can query by text inputs. Note that you cannot query by number inputs, as you have an extra number input for the user's calorie budget.
+
+Pass the string `input[type="text"]` to the `querySelectorAll()` method. Remember that you will need to use single quotes for your string, so that you can use double quotes within.
+
+This will return a `NodeList` of all the text inputs in the form. You can then access the `length` property of the `NodeList` to get the number of entries. Do this on the same line.
+
+# --hints--
+
+You should pass the string `input[type="text"]` to the `querySelectorAll()` method.
+
+```js
+assert.match(addEntry.toString(), /entryNumber\s*=\s*targetInputContainer\.querySelectorAll\(\s*'input\[type="text"]'\)/)
+```
+
+You should access the `length` property of your `querySelectorAll()`.
+
+```js
+assert.match(addEntry.toString(), /\.querySelectorAll\(\s*'input\[type="text"]'\)\.length/)
+```
+
+Your `entryNumber` variable should be the `length` of the `querySelectorAll`.
+
+```js
+assert.match(addEntry.toString(), /entryNumber\s*=\s*targetInputContainer\.querySelectorAll\(\s*'input\[type="text"]'\)\.length/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Calorie Counter
+
+
+
+