/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
new file mode 100644
index 00000000000..ba1da012290
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
@@ -0,0 +1,270 @@
+---
+id: 63c9e84c9fe8ca28c4101189
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Now create a `p` element with the text `budgetCalories Calories Budgeted`, using interpolation to replace `budgetCalories` with the appropriate variable.
+
+This should come after your `hr` element.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `p` element should come after your `hr` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ /g).length, 2);
+```
+
+Your second `p` element should be on a new line.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /\n\s*
\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\n\s*
\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
new file mode 100644
index 00000000000..f57827b6348
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
@@ -0,0 +1,264 @@
+---
+id: 63c9e94e9df7d72aed1c24bd
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Finally, you need to make the `#output` element visible so the user can see your text. Your `output` variable is an Element, which has a `classList` property. This property has a `.remove()` method, which accepts a string representing the class to remove from the element.
+
+Use the `.remove()` method of the `output` variable's `classList` property to remove the `hide` class. Don't forget to place the word `hide` inside quotes.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList/);
+```
+
+You should call the `.remove()` method of the `classList` property.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(/);
+```
+
+You should pass `hide` as the argument to the `.remove()` method.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
new file mode 100644
index 00000000000..18e5f04d27a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea23dbadbf2c2764e3f5
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+If you click on your `Calculate Remaining Calories` button, you'll see that nothing happens. You still need to mount the event listener.
+
+Add an event listener to your `calorieCounter` element. The event type should be `submit`, and the callback function should be `calculateCalories`.
+
+# --hints--
+
+You should use the `.addEventListener()` method of your `calorieCounter` element.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(/);
+```
+
+You should pass `submit` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*/);
+```
+
+You should pass `calculateCalories` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*,\s*calculateCalories\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
new file mode 100644
index 00000000000..6c09fd6f149
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea9b16430f2d54522464
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Your final feature to add is the ability for a user to clear the form. Start by declaring an empty function called `clearForm` – it should not take any arguments.
+
+# --hints--
+
+You should declare a `clearForm` variable.
+
+```js
+assert.isDefined(clearForm);
+```
+
+Your `clearForm` variable should be a function.
+
+```js
+assert.isFunction(clearForm);
+```
+
+Your `clearForm` function should not take any arguments.
+
+```js
+assert.match(clearForm?.toString(), /\(\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
new file mode 100644
index 00000000000..7810095dcce
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
@@ -0,0 +1,267 @@
+---
+id: 63c9eb09bcfaa72e3da820a1
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+You need to get all of the input containers. Declare an `inputContainers` variable, and assign it to the value of querying the document for all elements with the class `input-container`.
+
+# --hints--
+
+You should declare an `inputContainers` variable in your `clearForm` function.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=/);
+```
+
+You should use the `querySelectorAll` method to get all of the elements with the class `input-container`.
+
+```js
+assert.match(clearForm.toString(), /document\.querySelectorAll\(\s*('|")\.input-container\1\s*\)/);
+```
+
+You should assign the value of the `querySelectorAll` method to the `inputContainers` variable.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=\s*document\.querySelectorAll\(\s*('|")\.input-container\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
new file mode 100644
index 00000000000..73d20bba696
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
@@ -0,0 +1,263 @@
+---
+id: 63c9eb4a5d68f12f32d9b440
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Remember that `document.querySelectorAll` returns a `NodeList`, which is array-like but is not an array. However, the `Array` object has a `.from()` method that accepts an array-like and returns an array. This is helpful when you want access to more robust array methods, which you will learn about in a future project.
+
+Wrap your `inputContainers` query selector in `Array.from()`. Do this on the same line as your declaration.
+
+# --hints--
+
+You should wrap your `querySelectorAll` in `Array.from()`.
+
+```js
+assert.match(clearForm, /Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\s*\)/);
+```
+
+You should assign the result of `Array.from()` to your `inputContainers` variable.
+
+```js
+assert.match(clearForm, /inputContainers\s*=\s*Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = document.querySelectorAll('.input-container');
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
new file mode 100644
index 00000000000..f6655dc9175
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
@@ -0,0 +1,276 @@
+---
+id: 63c9ebb7b12bca3025b0a935
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+It is time for another loop. Use a `for` loop to iterate through the `inputContainers` array.
+
+Inside the loop, set the `innerHTML` property of the element at the current index to an empty string. This will clear all of the contents of that input container.
+
+# --hints--
+
+Your `clearForm` function should have a `for` loop.
+
+```js
+// loop protect injects stuff, so let's look at the raw code again
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(/);
+```
+
+Your `for` loop should iterate through the `inputContainers` array. Remember to use `i` as your iterator.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*inputContainers\.length\s*;\s*i\s*\+\+\s*\)/);
+```
+
+Your `for` loop should set the `innerHTML` property of `inputContainers[i]` to an empty string.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const forLoop = clearForm.split("for")[1];
+assert.match(forLoop, /inputContainers\[\s*i\s*\]\s*\.innerHTML\s*=\s*(`|'|")\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
new file mode 100644
index 00000000000..5ef4abce954
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
@@ -0,0 +1,275 @@
+---
+id: 63c9ec044acedf312c4974ff
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+After your loop completes, you need to clear the `budgetNumberInput`. Set the `value` property of `budgetNumberInput` to an empty string.
+
+# --hints--
+
+Your `clearForm` function should access the `value` property of the `budgetNumberInput` element.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value/);
+```
+
+Your `clearForm` function should set the `value` property of the `budgetNumberInput` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value\s*=\s*('|"|`)\1/);
+```
+
+You should modify the `budgetNumberInput` after your `for` loop.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const afterLoop = clearForm.split("}")[1];
+assert.match(afterLoop, /budgetNumberInput\.value/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
new file mode 100644
index 00000000000..3dab9bed7e5
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
@@ -0,0 +1,276 @@
+---
+id: 63c9f24afbc9cf324dcaa9a4
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+You also need to clear the `output` element's text. You can do this by setting the `innerText` property to an empty string.
+
+The difference between `innerText` and `innerHTML` is that `innerText` will not render HTML elements, but will display the tags and content as raw text.
+
+# --hints--
+
+Your `clearForm` function should access the `innerText` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText/);
+```
+
+Your `clearForm` function should set the `innerText` property of the `output` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText\s*=\s*('|"|`)\1/);
+```
+
+You should modify `output` after modifying `budgetNumberInput`.
+
+```js
+assert.isAbove(clearForm.toString().indexOf('output'), clearForm.toString().indexOf('budgetNumberInput'));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
new file mode 100644
index 00000000000..b2e9d536a15
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
@@ -0,0 +1,277 @@
+---
+id: 63c9f28bda3e3f336e21b6b4
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+To finish off this function, you need to restore the `hide` class to the `output` element. The `classList` property has an `.add()` method which is the opposite of the `.remove()` method. It accepts a string representing the class to add to the element.
+
+Add the `hide` class to your `output`.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList/);
+```
+
+You should call the `.add()` method on the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add/);
+```
+
+You should pass `hide` as the argument to the `.add()` method.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
new file mode 100644
index 00000000000..d29b3f2ac72
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
@@ -0,0 +1,520 @@
+---
+id: 63c9f2bff625af342023512c
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+To complete this project, add an event listener to the `clearButton` button. When the button is clicked, it should call the `clearForm` function.
+
+Congratulations! Your project is complete.
+
+# --hints--
+
+You should add an event listener to the `clearButton` button.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(/);
+```
+
+You should pass `click` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*/);
+```
+
+You should pass `clearForm` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*,\s*clearForm\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener('click', addEntry);
+calorieCounter.addEventListener('submit', calculateCalories);
+clearButton.addEventListener('click', clearForm);
+```
diff --git a/curriculum/challenges/arabic/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/arabic/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/arabic/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md b/curriculum/challenges/arabic/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/arabic/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md b/curriculum/challenges/arabic/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/arabic/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md b/curriculum/challenges/arabic/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/arabic/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/arabic/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/chinese-traditional/00-certifications/college-algebra-with-python-certification/college-algebra-with-python-certification.yml b/curriculum/challenges/chinese-traditional/00-certifications/college-algebra-with-python-certification/college-algebra-with-python-certification.yml
index 739acc511b4..8d08c54ba6f 100644
--- a/curriculum/challenges/chinese-traditional/00-certifications/college-algebra-with-python-certification/college-algebra-with-python-certification.yml
+++ b/curriculum/challenges/chinese-traditional/00-certifications/college-algebra-with-python-certification/college-algebra-with-python-certification.yml
@@ -1,21 +1,22 @@
---
id: 61531b20cc9dfa2741a5b800
title: Python 與大學代數認證
+certification: college-algebra-with-python
challengeType: 7
isPrivate: true
tests:
-
id: 63d83ff239c73468b059cd3f
- title: 多功能計算器
+ title: Build a Multi-Function Calculator
-
id: 63d83ffd39c73468b059cd40
- title: 圖形計算器
+ title: Build a Graphing Calculator
-
id: 63d8401039c73468b059cd41
- title: 三個數學遊戲
+ title: Build Three Math Games
-
id: 63d8401e39c73468b059cd42
- title: 財務計算器
+ title: Build a Financial Calculator
-
id: 63d8402e39c73468b059cd43
- title: 數據圖表瀏覽器
+ title: Build a Data Graph Explorer
diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
index 81b1216dc37..0e2cab49446 100644
--- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
+++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
@@ -8,21 +8,28 @@ dashedName: record-collection
# --description--
-給定一個對象，用來表示部分音樂專輯收藏。 每張專輯都有幾個屬性和一個唯一的 id 號作爲鍵值。 並非所有專輯都有完整的信息。
+You are creating a function that aids in the maintenance of a musical album collection. The collection is organized as an object that contains multiple albums which are also objects. Each album is represented in the collection with a unique `id` as the property name. Within each album object, there are various properties describing information about the album. Not all albums have complete information.
-以 `updateRecords` 函數開始，這個函數需要一個對象 `records`，包含一個音樂專輯集合，一個 `id`，一個 `prop`（如 `artist` 或 `tracks`），和一個 `value`。 使用下面的規則完成函數來修改傳遞給函數的對象。
+The `updateRecords` function takes 4 arguments represented by the following function parameters:
-- 函數必須始終返回整個音樂專輯集合對象。
-- 如果 `prop` 不是 `tracks` 並且 `value` 不是一個空字符串， 將專輯的 `prop` 更新或設置爲 `value`。
-- 如果 `prop` 是 `tracks` 但專輯沒有 `tracks` 屬性，則應創建空數組併爲其添加 `value`。
-- 如果 `prop` 是 `tracks` 並且 `value` 不是一個空字符串，將 `value` 添加到專輯現有 `tracks` 數組的末尾。
-- 如果 `value` 是空字符串，從專輯裏刪除指定的 `prop`。
+- `records` - an object containing several individual albums
+- `id` - a number representing a specific album in the `records` object
+- `prop` - a string representing the name of the album’s property to update
+- `value` - a string containing the information used to update the album’s property
-**注意：** 用 `recordCollection` 對象做爲測試參數對象。
+Complete the function using the rules below to modify the object passed to the function.
+
+- Your function must always return the entire `records` object.
+- If `value` is an empty string, delete the given `prop` property from the album.
+- If `prop` isn’t `"tracks"` and `value` isn't an empty string, assign the `value` to that album’s `prop`.
+- If `prop` is `"tracks"` and `value` isn’t an empty string, add the `value` to the end of the album’s existing `"tracks"` array.
+- If the album doesn’t have a `"tracks"` property, create a new array for the album's `"tracks"` property before adding the `value` to it.
+
+**Note:** A copy of the `recordCollection` object is used for the tests. You should not directly modify the `recordCollection` object.
# --hints--
-執行 `updateRecords(recordCollection, 5439, "artist", "ABBA")` 後，`artist` 的值應該是字符串 `ABBA`。
+After `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` should be the string `ABBA`
```js
assert(
@@ -31,7 +38,7 @@ assert(
);
```
-在 `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")` 之後，`tracks` 應該有字符串 `Take a Chance on Me` 作爲最後一個也是唯一的元素。
+After `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` should have the string `Take a Chance on Me` as the last and only element.
```js
assert(
@@ -41,14 +48,14 @@ assert(
);
```
-執行 `updateRecords(recordCollection, 2548, "artist", "")` 後， `artist` 不應被設置爲任何值。
+After `updateRecords(recordCollection, 2548, "artist", "")`, `artist` should not be set
```js
updateRecords(_recordCollection, 2548, 'artist', '');
assert(!_recordCollection[2548].hasOwnProperty('artist'));
```
-執行 `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")` 後，`tracks` 的最後一個元素應該爲字符串 `Addicted to Love`。
+After `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` should have the string `Addicted to Love` as the last element.
```js
assert(
@@ -58,7 +65,7 @@ assert(
);
```
-執行 `updateRecords(recordCollection, 2468, "tracks", "Free")` 後，`tracks` 的第一個元素應該爲字符串 `1999`。
+After `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` should have the string `1999` as the first element.
```js
assert(
@@ -68,14 +75,14 @@ assert(
);
```
-執行 `updateRecords(recordCollection, 2548, "tracks", "")` 後， `tracks` 不應被設置爲任何值。
+After `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` should not be set
```js
updateRecords(_recordCollection, 2548, 'tracks', '');
assert(!_recordCollection[2548].hasOwnProperty('tracks'));
```
-執行 `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")` 後，`albumTitle` 的值應該是字符串 `Riptide`。
+After `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` should be the string `Riptide`
```js
assert(
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index 161ec73b9d0..90e9b23da46 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,25 +26,29 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
應該將第一個 `input` 添加在 `label` 文字 `Enter Your First Name:` 後面，並在冒號後面加一個空格。
```js
-assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML.trim(), 'Enter Your First Name: Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
new file mode 100644
index 00000000000..e938bc8c2e3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
@@ -0,0 +1,146 @@
+---
+id: 63b606f09a14cc1781aea1fb
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Create a `label` element, give it a `for` attribute set to `budget` and the text `Budget`, then create an `input` element with the `id` set to `budget`.
+
+# --hints--
+
+You should create a `label` element in your `form`.
+
+```js
+assert.exists(document.querySelector('form label'));
+```
+
+Your `label` element should have a `for` attribute set to `budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.getAttribute('for'), 'budget');
+```
+
+Your `label` element should have the text `Budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.innerText, 'Budget');
+```
+
+You should create an `input` element within your `form`.
+
+```js
+assert.exists(document.querySelector('form input'));
+```
+
+Your `input` element should come after your `label` element.
+
+```js
+assert.equal(document.querySelector('form input')?.previousElementSibling?.tagName, "LABEL");
+```
+
+Your `input` element should have an `id` set to `budget`.
+
+```js
+assert.equal(document.querySelector('form input')?.id, "budget");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
new file mode 100644
index 00000000000..fcabad47a30
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
@@ -0,0 +1,131 @@
+---
+id: 63b6075a62883218d282504c
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Your `input` element needs some additional attributes. Give it a `type` set to `number` to only allow numeric inputs, a `min` attribute set to `0` to only allow positive numbers, and a `placeholder` set to `Daily calorie budget`.
+
+Finally, mark the `input` element as `required`.
+
+# --hints--
+
+Your `input` element should have a `type` attribute set to `number`.
+
+```js
+assert.equal(document.querySelector('form input').type, 'number');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+assert.equal(document.querySelector('form input').min, '0');
+```
+
+Your `input` element should have a `placeholder` attribute set to `Daily calorie budget`.
+
+```js
+assert.equal(document.querySelector('form input').placeholder, 'Daily calorie budget');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
new file mode 100644
index 00000000000..17934b0039d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
@@ -0,0 +1,170 @@
+---
+id: 63b60cfaca25bb27edd40f62
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Finally, you need to link your JavaScript file to your HTML. Create a `script` element to do so.
+
+# --hints--
+
+You should have a `script` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('script')?.length, 1);
+```
+
+Your `script` element should have the `src` set to `./script.js`.
+
+```js
+assert.match(code, /script\s*?src\s*?=\s*?('|")(\.\/)?script\.js\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
new file mode 100644
index 00000000000..de3870b44ad
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
@@ -0,0 +1,176 @@
+---
+id: 63b60d3c5048302906962231
+title: Step 14
+challengeType: 0
+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`.
+
+# --hints--
+
+You should create a variable called `calorieCounter`.
+
+```js
+assert.isDefined(calorieCounter);
+```
+
+You should use `document.getElementById()` to get the `#calorie-counter` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")calorie-counter\1\s*\)/g);
+```
+
+You should store the `#calorie-counter` element in a variable called `calorieCounter`.
+
+```js
+assert.equal(calorieCounter, document.getElementById('calorie-counter'));
+```
+
+# --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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
new file mode 100644
index 00000000000..44e1c274573
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
@@ -0,0 +1,195 @@
+---
+id: 63b613f367584d2a5d041b7d
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Get your `#budget` element and assign it to `budgetNumberInput`, and your `#entry-dropdown` element and assign it to `entryDropdown`.
+
+# --hints--
+
+You should declare a variable called `budgetNumberInput`.
+
+```js
+assert.isDefined(budgetNumberInput);
+```
+
+You should use `document.getElementById()` to get the `#budget` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")budget\1\s*\)/g);
+```
+
+You should store the `#budget` element in a variable called `budgetNumberInput`.
+
+```js
+assert.equal(budgetNumberInput, document.getElementById('budget'));
+```
+
+You should declare a variable called `entryDropdown`.
+
+```js
+assert.isDefined(entryDropdown);
+```
+
+You should use `document.getElementById()` to get the `#entry-dropdown` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")entry-dropdown\1\s*\)/g);
+```
+
+You should store the `#entry-dropdown` element in a variable called `entryDropdown`.
+
+```js
+assert.equal(entryDropdown, document.getElementById('entry-dropdown'));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
new file mode 100644
index 00000000000..6cbbeb5ab4a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
@@ -0,0 +1,215 @@
+---
+id: 63b61490e633a22b4593e62f
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Following the same pattern, assign your `#add-entry` element to `addEntryButton`, your `#clear` element to `clearButton`, and your `#output` element to `output`.
+
+# --hints--
+
+You should declare a variable called `addEntryButton`.
+
+```js
+assert.isDefined(addEntryButton);
+```
+
+You should use `document.getElementById()` to get the `#add-entry` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")add-entry\1\s*\)/g);
+```
+
+You should assign the `#add-entry` element to `addEntryButton`.
+
+```js
+assert.equal(addEntryButton, document.getElementById('add-entry'));
+```
+
+You should declare a variable called `clearButton`.
+
+```js
+assert.isDefined(clearButton);
+```
+
+You should use `document.getElementById()` to get the `#clear` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")clear\1\s*\)/g);
+```
+
+You should assign the `#clear` element to `clearButton`.
+
+```js
+assert.equal(clearButton, document.getElementById('clear'));
+```
+
+You should declare a variable called `output`.
+
+```js
+assert.isDefined(output);
+```
+
+You should use `document.getElementById()` to get the `#output` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")output\1\s*\)/g);
+```
+
+You should assign the `#output` element to `output`.
+
+```js
+assert.equal(output, document.getElementById("output"));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
new file mode 100644
index 00000000000..99c1985862c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
@@ -0,0 +1,182 @@
+---
+id: 63b614e6a1f7fe2cef6312dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Declare an `isError` variable and set it to `false`, but use `let` so you can reassign it later.
+
+# --hints--
+
+You should declare an `isError` variable.
+
+```js
+assert.isDefined(isError);
+```
+
+Your `isError` variable should be set to `false`.
+
+```js
+assert.isFalse(isError);
+```
+
+You should use `let` to declare your `isError` variable.
+
+```js
+assert.match(code, /let\s+isError\s*=\s*false/g);
+```
+
+# --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
+--fcc-editable-region--
+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');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
new file mode 100644
index 00000000000..436b65b80d6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
@@ -0,0 +1,192 @@
+---
+id: 63b6152e6aff882db819fc1e
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Even though you set an `input` element to be a number, JavaScript receives a string value. You need to write a function to clean the string value and ensure you have a number.
+
+Start by declaring a `cleanInputString` function that takes a `str` argument.
+
+# --hints--
+
+You should declare a `cleanInputString` variable.
+
+```js
+assert.isDefined(cleanInputString);
+```
+
+Your `cleanInputString` variable should be a function.
+
+```js
+assert.isFunction(cleanInputString);
+```
+
+Your `cleanInputString` function should take a `str` argument.
+
+```js
+assert.match(cleanInputString?.toString(), /\(str\)/);
+```
+
+`cleanInputString` should be an empty function.
+
+```js
+assert.match(cleanInputString?.toString(), /\{\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;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
new file mode 100644
index 00000000000..b7de4018e24
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
@@ -0,0 +1,182 @@
+---
+id: 63b61584def8fa2ebcc259e0
+title: Step 19
+challengeType: 0
+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.
+
+Declare a `strArray` variable and assign it that split value.
+
+# --hints--
+
+Your `cleanInputString` function should declare a `strArray` variable.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=/);
+```
+
+Your `strArray` variable should be assigned the value of `str.split('')`.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=\s*str\.split\(\s*('|")\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
new file mode 100644
index 00000000000..a0eaf81fd4e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
@@ -0,0 +1,181 @@
+---
+id: 63bf43be3f969d24d4ed233c
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Declare a `cleanStrArray` variable and assign it an empty array. You will use this to store your valid number characters.
+
+# --hints--
+
+Your `cleanInputString` should declare a variable called `cleanStrArray`.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*/g);
+```
+
+Your `cleanStrArray` variable should be assigned an empty array.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*=\s*\[\s*\]/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
new file mode 100644
index 00000000000..db275c224c1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
@@ -0,0 +1,195 @@
+---
+id: 63bf446945d34d25e6db6e4f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Use a `for` loop to iterate through each character in your `strArray` array.
+
+# --hints--
+
+Your `cleanInputString` function should have a `for` loop.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(/g);
+```
+
+Your `for` loop should initialize a variable called `i` to `0`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;/g);
+```
+
+Your `for` loop should have a condition that checks if `i` is less than the length of `strArray`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;/g);
+```
+
+Your `for` loop should increment `i` by `1` each time it runs. Use the increment operator for this.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
new file mode 100644
index 00000000000..a432c6687d5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
@@ -0,0 +1,200 @@
+---
+id: 63bf45ce0dc8d4270760c6d0
+title: Step 22
+challengeType: 0
+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`.
+
+To check your character, see if the array `["+", "-", " "]` includes the character – you can use the `.includes()` method on the array to do this.
+
+# --hints--
+
+Your `for` loop should have an `if` statement.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(/);
+```
+
+Your `for` loop should use `!["+", "-", " "].includes()`.
+
+```js
+// the loop protection injects code so we have to look at the raw code directly
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(/);
+```
+
+Your `for` loop should see if `strArray[i]` is found in `["+", "-", " "]`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{/);
+```
+
+Your `for` loop should `push` `strArray[i]` to `cleanStrArray`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{\s*cleanStrArray\.push\(\s*strArray\[i\]\s*\)\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
new file mode 100644
index 00000000000..f74ff636c5b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
@@ -0,0 +1,213 @@
+---
+id: 63bf461011fca327d3b60fa8
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+While looping through the string works, creating a new array is inefficient for memory and runtime performance. Instead, you can use Regular Expressions (referred to as "regex") to match specific characters.
+
+Regex in JavaScript is indicated by a pattern wrapped in forward slashes – for example:
+
+```js
+const regex = /hello/;
+```
+
+Remove your existing code within the `cleanInputString` function. Declare a `regex` variable and assign it the value from the example above.
+
+# --hints--
+
+You should remove the `cleanStrArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /cleanStrArray/);
+```
+
+You should remove the `strArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /strArray/);
+```
+
+You should not have a `for` loop.
+
+```js
+assert.notMatch(cleanInputString.toString(), /for/);
+```
+
+You should declare a `regex` variable.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to the regular expression `/hello/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/hello\//);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+ if (!["+", "-", " "].includes(strArray[i])) {
+ cleanStrArray.push(strArray[i])
+ }
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
new file mode 100644
index 00000000000..0f781eb61cf
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
@@ -0,0 +1,176 @@
+---
+id: 63bf47fd40599f29827f484d
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+The pattern you currently have will match the exact text `hello`, which is not what you want to match. You want to look for `+`, `-`, or spaces. Replace the pattern in your `regex` variable with `\+-` to look for plus and minus characters.
+
+Note that you need to use the `\` to escape the `+`, because a `+` has a special meaning in regular expressions.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /hello/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
new file mode 100644
index 00000000000..25d6d2447fb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
@@ -0,0 +1,174 @@
+---
+id: 63bf492b6dfb292a79f0e675
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+In regex, shorthand character classes allow you to match specific characters without having to write those characters in your pattern. Shorthand character classes are preceded with a backslash (`\`). The character class `\s` will match any whitespace character. Add this to your regex pattern.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-\s/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
new file mode 100644
index 00000000000..3b18f0aac60
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
@@ -0,0 +1,188 @@
+---
+id: 63bf4bfe9de3852be51c8f86
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Your current pattern won't work just yet. `/+-\s/` looks for `+`, `-`, and a space *in order*. This would match `+- hello` but would not match `+hello`.
+
+To tell the pattern to match each of these characters individually, you need to turn them into a character class. This is done by wrapping the characters you want to match in brackets. For example, this pattern will match the characters `h`, `e`, `l`, or `o`:
+
+```js
+const regex = /[helo]/;
+```
+
+Turn your `+-\s` pattern into a character class. Note that you no longer need to escape the `+` character, because you are using a character class.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `[+-\s]`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\\?\+-\\s\]\//)
+```
+
+You should not escape the `+` character in your regular expression.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-\s/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
new file mode 100644
index 00000000000..30baf30ed58
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
@@ -0,0 +1,180 @@
+---
+id: 63bf4d351e06432ce9bf3627
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Regex can also take specific flags to alter the pattern matching behavior. Flags are added after the closing `/`. The `g` flag, which stands for "global", will tell the pattern to continue looking after it has found a match. Here is an example:
+
+```js
+const helloRegex = /hello/g;
+```
+
+Add the `g` flag to your regex pattern.
+
+# --hints--
+
+You should add the `g` flag to your `regex` value.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\s\]\/g/);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
new file mode 100644
index 00000000000..4b35b49f7b9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
@@ -0,0 +1,199 @@
+---
+id: 63bf511b85b6082e54dc1573
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Strings have a `.replace()` method which allows you to replace characters in the string with another string. `.replace` takes two arguments. The first is the character sequence to replace – this can either be a string or a regex pattern. The second is the string to replace that sequence with. For example, this would replace all instances of `l` with `1`:
+
+```js
+"hello".replace(/l/g, "1");
+```
+
+Use your `regex` to replace all instances of `+`, `-`, and a space in `str` with an empty string. Return this value.
+
+# --hints--
+
+Your `cleanInputString` should call the `replace` method of `str`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(/);
+```
+
+You should pass `regex` as the first argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*/);
+```
+
+You should pass `""` as the second argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*,\s*("|')\1\s*\)/);
+```
+
+Your `cleanInputString` function should directly return the result of your `replace` method.
+
+```js
+assert.match(cleanInputString.toString(), /return\s*str\.replace\(\s*regex\s*,\s*("|')\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
new file mode 100644
index 00000000000..b6eef00a30b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
@@ -0,0 +1,191 @@
+---
+id: 63bf5230bccd1c2f5c13e1ce
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+In HTML, number inputs allow for exponential notation (such as `1e10`). You need to filter those out.
+
+Start by creating a function called `isInvalidInput` – it should take a single `str` parameter.
+
+# --hints--
+
+You should declare an `isInvalidInput` variable.
+
+```js
+assert.isDefined(isInvalidInput)
+```
+
+`isInvalidInput` should be a function.
+
+```js
+assert.isFunction(isInvalidInput)
+```
+
+`isInvalidInput` should take a single `str` parameter.
+
+```js
+assert.match(isInvalidInput?.toString(), /\(\s*str\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, '');
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
new file mode 100644
index 00000000000..778a809571e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
@@ -0,0 +1,185 @@
+---
+id: 63bf598a4c807930a13a1a27
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Declare a `regex` variable, and assign it a regex that matches the character `e`.
+
+# --hints--
+
+Your `isInvalidInput` function should have a `regex` variable.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to `/e/`.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
new file mode 100644
index 00000000000..2bf1aa0f9a3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
@@ -0,0 +1,179 @@
+---
+id: 63bf5a518d54f63181ab639a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `e` in a number input can also be an uppercase `E`. Regex has a flag for this, however – the `i` flag, which stands for "insensitive". This flag makes your pattern case-insensitive. Add the `i` flag to your regex pattern.
+
+# --hints--
+
+Your `regex` value should have the `i` flag.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\/i/);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
new file mode 100644
index 00000000000..19873a84492
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
@@ -0,0 +1,187 @@
+---
+id: 63bf5a92fd148d3264d5322b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Number inputs only allow the `e` to occur between two digits. To match any number, you can use the character class `[0-9]`. This will match any digit between `0` and `9`.
+
+Add this character class before and after `e` in your pattern.
+
+# --hints--
+
+You should add the `[0-9]` character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e/);
+```
+
+You should add the `[0-9]` character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e\[0-9\]\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
new file mode 100644
index 00000000000..75477ddd763
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5adfe2981b332eb007b6
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The `+` modifier in a regex allows you to match a pattern that occurs one or more times. To match your digit pattern one or more times, add a plus after each of the digit character classes. For example: `[0-9]+`.
+
+# --hints--
+
+You should add the `+` modifier to the character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e/);
+```
+
+You should add the `+` modifier to the character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e\[0-9\]\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]e[0-9]/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
new file mode 100644
index 00000000000..95686b3c3a0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5bcfebff0734593fad19
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+There is a shorthand character class to match any digit: `\d`. Replace your `[0-9]` character classes with this shorthand.
+
+# --hints--
+
+You should replace the `[0-9]` character class before `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e/);
+```
+
+You should replace the `[0-9]` character class after `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e\\d\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]+e[0-9]+/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
new file mode 100644
index 00000000000..f6f61282ce9
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5c438f523a359769106c
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Strings have a `.match()` method, which takes a regex argument. `.match()` will return an array of match results – containing either the first match, or all matches if the global flag is used.
+
+Return the result of calling the `.match()` method on `str` and passing your `regex` variable as the argument. You'll use this match result later on.
+
+# --hints--
+
+Your `isInvalidInput` function should call the `.match()` method on `str`.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(/);
+```
+
+You should pass `regex` as the argument to the `.match()` method.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(\s*regex\s*\)/);
+```
+
+Your `isInvalidInput` function should directly return the result of the `.match()` call.
+
+```js
+assert.match(isInvalidInput.toString(), /return\s+str\.match\(\s*regex\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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
new file mode 100644
index 00000000000..228f3503303
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5cf03b50bf36cfbe94ea
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Your next step is to allow users to add entries to the calorie counter. Declare an empty function `addEntry`. This function should not take any parameters.
+
+# --hints--
+
+You should declare an `addEntry` variable.
+
+```js
+assert.isDefined(addEntry);
+```
+
+Your `addEntry` variable should be a function.
+
+```js
+assert.isFunction(addEntry);
+```
+
+Your `addEntry` function should not take any parameters.
+
+```js
+assert.match(addEntry?.toString(), /\(\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--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
new file mode 100644
index 00000000000..1bc417c8bbb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
@@ -0,0 +1,198 @@
+---
+id: 63c1dfbd56c71e278800010c
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+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.
+
+# --hints--
+
+Your `addEntry` function should have a `targetId` variable.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=/);
+```
+
+Your `targetId` variable should start with the string `#`.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1/);
+```
+
+You should use concatenation to add `entryDropdown.value` after your `#` string.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1\s*\+\s*entryDropdown\.value/);
+```
+
+# --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() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
new file mode 100644
index 00000000000..413b5f76d84
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e0af28078f2dfad9eb3e
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Now you need to target the `.input-container` element within the element that has your `targetId`. Declare a new `targetInputContainer` variable, and assign it the value of `document.querySelector()`. Use concatenation to separate `targetId` and `'.input-container'` with a space, and pass that string to `querySelector()`.
+
+# --hints--
+
+Your `addEntry` function should have a `targetInputContainer` variable.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=/);
+```
+
+Your `targetInputContainer` variable should be set to `document.querySelector()`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(/);
+```
+
+You should pass `targetId` to your `querySelector()` method.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*/);
+```
+
+You should concatenate `' .input-container'` to `targetId`. Remember to include the space at the beginning of `.input-container`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*\s*\+\s*('|")\s\.input-container\1\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 targetId = '#' + entryDropdown.value;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
new file mode 100644
index 00000000000..06e5ac50cec
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e1965a898d302e0af4e3
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+JavaScript has a feature called template literals , which allow you to interpolate variables directly within a string. Template literals are denoted with backticks ` `` `, as opposed to single or double quotes. Variables can be passed in to a template literal by surrounding the variable with `${}` – the value of the variable will be inserted into the string.
+
+For example:
+
+```js
+const name = "Naomi";
+const templateLiteral = `Hello, my name is ${name}~!`;
+console.log(templateLiteral);
+```
+
+The console will show the string "Hello, my name is Naomi~!".
+
+Replace your concatenated string in the `querySelector` with a template literal – be sure to keep the space between your `targetId` variable and `.input-container`.
+
+# --hints--
+
+You should use a template literal in your `querySelector` method.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`.*`\)/);
+```
+
+Your template literal should have the value `{targetId} .input-container`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`\$\{targetId\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(targetId + ' .input-container');
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
new file mode 100644
index 00000000000..6aeab26c100
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
@@ -0,0 +1,197 @@
+---
+id: 63c1e5b4b3c8a031def3bd65
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Thanks to template literals, you actually don't need the `targetId` variable at all. Remove that variable, and update your template literal to replace `targetId` with `entryDropdown.value` – remember to add `#` before that, in the string.
+
+# --hints--
+
+You should remove the `targetId` variable.
+
+```js
+assert.notMatch(addEntry.toString(), /targetId\s*=/);
+```
+
+You should replace the `targetId` reference in your template literal with `entryDropdown.value`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#?\$\{entryDropdown\.value\}\s\.input-container`\s*\)/);
+```
+
+You should add `#` at the beginning of your template literal.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#\$\{entryDropdown\.value\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(`${targetId} .input-container`);
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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
+
+
+
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll();
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
new file mode 100644
index 00000000000..a7c1e1d3e7b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
@@ -0,0 +1,192 @@
+---
+id: 63c216da562fbb3957b9cb2c
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Now you need to build your dynamic HTML string to add to the webpage. Declare a new `HTMLString` variable, and assign it an empty template literal string.
+
+# --hints--
+
+Your `addEntry` function should have an `HTMLString` variable.
+
+```js
+assert.match(addEntry.toString(), /HTMLString\s*=/)
+```
+
+Your `HTMLString` should be an empty template literal.
+
+```js
+assert.match(code, /HTMLString\s*=\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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
new file mode 100644
index 00000000000..e8ced7f3436
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
@@ -0,0 +1,198 @@
+---
+id: 63c2171c1e5b6e3aa51768d0
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start your `HTMLString` with a new line, then create a `label` element. Give that element the text `Entry # Name`, using your template literal syntax to replace `#` with the value of `entryNumber`.
+
+# --hints--
+
+Your `HTMLString` variable should start with a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n/);
+```
+
+You should add a `label` element on the new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*.*<\/label>/);
+```
+
+Your `label` element should have the text `Entry ${entryNumber} Name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = ``;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
new file mode 100644
index 00000000000..f78a3d0252c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
@@ -0,0 +1,193 @@
+---
+id: 63c21774193de43bbc6a769f
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give your `label` element a `for` attribute with the value `X-#-name`, where `X` is the `value` of the `entryDropdown` element and `#` is the value of `entryNumber`. Remember that HTML attributes should be wrapped in double quotes.
+
+# --hints--
+
+Your `label` element should have a `for` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*/)
+```
+
+Your `label` element should have the same text as before.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
new file mode 100644
index 00000000000..42ee9b19109
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
@@ -0,0 +1,217 @@
+---
+id: 63c217ccd939053ce4fa16d6
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+After your `label` element, and on a new line in your template string, create an `input` element. Give it a `type` attribute set to `text`, a `placeholder` attribute set to `Name`, and an `id` attribute that matches the `for` attribute of your `label` element.
+
+# --hints--
+
+You should not modify your `label` element.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+You should add an `input` element on a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*/)[0];
+assert.include(inputAttributes, 'placeholder="Name"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(//)[0];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-name"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
new file mode 100644
index 00000000000..cfeec0927c4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
@@ -0,0 +1,228 @@
+---
+id: 63c21839f56eaf3ef4e027c4
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create another `label` element (on a new line) at the end of your `HTMLString`. This `label` should have the text `Entry # Calories`, using your template literal syntax to replace `#` with the value of `entryNumber`, and the `for` attribute set to `X-#-calories`, where `X` is the `value` of `entryDropdown` and `#` is the value of `entryNumber`.
+
+# --hints--
+
+You should have two `label` elements in your `HTMLString`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.equal(HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, //)
+```
+
+Your new `label` element should have the text `Entry ${entryNumber} Calories`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const label = HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, /Entry\s\$\{entryNumber\}\sCalories<\/label>/);
+```
+
+You should not modify your existing elements.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.match(HTMLstring, /`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*Entry\s\$\{entryNumber\}\sCalories<\/label>/)
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ ]*>/g)[1];
+assert.include(inputAttributes, 'placeholder="Calories"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-calories"');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'min="0"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
new file mode 100644
index 00000000000..36835a69413
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
@@ -0,0 +1,208 @@
+---
+id: 63c218c028c56a411b2a379a
+title: Step 49
+challengeType: 0
+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.
+
+# --hints--
+
+Your `addEntry` function should access the `innerHTML` property of `targetInputContainer`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML/);
+```
+
+You should use the `+=` operator on `targetInputContainer.innerHTML`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=/);
+```
+
+You should add your `HTMLString` to the `innerHTML` of the `targetInputContainer` element.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=\s*HTMLString/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ function reference ) directly.
+
+# --hints--
+
+You should call the `.addEventListener()` method of the `addEntryButton`.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(/);
+```
+
+You should pass `click` as the first argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*/);
+```
+
+You should pass `addEntry` as the second argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*,\s*addEntry\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ truthy or falsy . A value is truthy if it evaluates to `true` when converted to a Boolean. A value is falsy if it evaluates to `false` when converted to a Boolean. `null` is an example of a falsy value.
+
+You need to check if `invalidInputMatch` is truthy – you can do this by passing the variable directly to your `if` condition (without a comparison operator). Here's an example of checking the truthiness of `helloWorld`.
+
+```js
+if (helloWorld) {
+
+}
+```
+
+Add an `if` statement that checks if `invalidInputMatch` is truthy.
+
+# --hints--
+
+You should add an `if` statement to your `getCaloriesFromInputs` function.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(/);
+```
+
+You should check the truthiness of `invalidInputMatch` in your `if` condition.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(\s*invalidInputMatch\s*\)/);
+```
+
+Your `if` statement should be inside your `for` loop.
+
+```js
+assert.isBelow(getCaloriesFromInputs.toString().indexOf("for"), getCaloriesFromInputs.toString().indexOf("if"));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ /);
+```
+
+Your `span` should not have any text.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{remainingCalories\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{Math\.abs\(remainingCalories\)\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${remainingCalories} Calorie ${surplusOrDeficit}
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
new file mode 100644
index 00000000000..d341d5e62bf
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
@@ -0,0 +1,262 @@
+---
+id: 63c9e7d5b21eee2776ecc226
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+After your `span` element, add an `hr` element to create a horizontal line.
+
+To keep your code clean and readable, you should add this on a new line in the template literal.
+
+# --hints--
+
+You should add an `hr` element to your `output.innerHTML` string.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `hr` element should come after your `span` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
new file mode 100644
index 00000000000..ba1da012290
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
@@ -0,0 +1,270 @@
+---
+id: 63c9e84c9fe8ca28c4101189
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Now create a `p` element with the text `budgetCalories Calories Budgeted`, using interpolation to replace `budgetCalories` with the appropriate variable.
+
+This should come after your `hr` element.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `p` element should come after your `hr` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ /g).length, 2);
+```
+
+Your second `p` element should be on a new line.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /\n\s*
\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\n\s*
\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
new file mode 100644
index 00000000000..f57827b6348
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
@@ -0,0 +1,264 @@
+---
+id: 63c9e94e9df7d72aed1c24bd
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Finally, you need to make the `#output` element visible so the user can see your text. Your `output` variable is an Element, which has a `classList` property. This property has a `.remove()` method, which accepts a string representing the class to remove from the element.
+
+Use the `.remove()` method of the `output` variable's `classList` property to remove the `hide` class. Don't forget to place the word `hide` inside quotes.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList/);
+```
+
+You should call the `.remove()` method of the `classList` property.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(/);
+```
+
+You should pass `hide` as the argument to the `.remove()` method.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
new file mode 100644
index 00000000000..18e5f04d27a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea23dbadbf2c2764e3f5
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+If you click on your `Calculate Remaining Calories` button, you'll see that nothing happens. You still need to mount the event listener.
+
+Add an event listener to your `calorieCounter` element. The event type should be `submit`, and the callback function should be `calculateCalories`.
+
+# --hints--
+
+You should use the `.addEventListener()` method of your `calorieCounter` element.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(/);
+```
+
+You should pass `submit` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*/);
+```
+
+You should pass `calculateCalories` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*,\s*calculateCalories\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
new file mode 100644
index 00000000000..6c09fd6f149
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea9b16430f2d54522464
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Your final feature to add is the ability for a user to clear the form. Start by declaring an empty function called `clearForm` – it should not take any arguments.
+
+# --hints--
+
+You should declare a `clearForm` variable.
+
+```js
+assert.isDefined(clearForm);
+```
+
+Your `clearForm` variable should be a function.
+
+```js
+assert.isFunction(clearForm);
+```
+
+Your `clearForm` function should not take any arguments.
+
+```js
+assert.match(clearForm?.toString(), /\(\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
new file mode 100644
index 00000000000..7810095dcce
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
@@ -0,0 +1,267 @@
+---
+id: 63c9eb09bcfaa72e3da820a1
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+You need to get all of the input containers. Declare an `inputContainers` variable, and assign it to the value of querying the document for all elements with the class `input-container`.
+
+# --hints--
+
+You should declare an `inputContainers` variable in your `clearForm` function.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=/);
+```
+
+You should use the `querySelectorAll` method to get all of the elements with the class `input-container`.
+
+```js
+assert.match(clearForm.toString(), /document\.querySelectorAll\(\s*('|")\.input-container\1\s*\)/);
+```
+
+You should assign the value of the `querySelectorAll` method to the `inputContainers` variable.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=\s*document\.querySelectorAll\(\s*('|")\.input-container\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
new file mode 100644
index 00000000000..73d20bba696
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
@@ -0,0 +1,263 @@
+---
+id: 63c9eb4a5d68f12f32d9b440
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Remember that `document.querySelectorAll` returns a `NodeList`, which is array-like but is not an array. However, the `Array` object has a `.from()` method that accepts an array-like and returns an array. This is helpful when you want access to more robust array methods, which you will learn about in a future project.
+
+Wrap your `inputContainers` query selector in `Array.from()`. Do this on the same line as your declaration.
+
+# --hints--
+
+You should wrap your `querySelectorAll` in `Array.from()`.
+
+```js
+assert.match(clearForm, /Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\s*\)/);
+```
+
+You should assign the result of `Array.from()` to your `inputContainers` variable.
+
+```js
+assert.match(clearForm, /inputContainers\s*=\s*Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = document.querySelectorAll('.input-container');
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
new file mode 100644
index 00000000000..f6655dc9175
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
@@ -0,0 +1,276 @@
+---
+id: 63c9ebb7b12bca3025b0a935
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+It is time for another loop. Use a `for` loop to iterate through the `inputContainers` array.
+
+Inside the loop, set the `innerHTML` property of the element at the current index to an empty string. This will clear all of the contents of that input container.
+
+# --hints--
+
+Your `clearForm` function should have a `for` loop.
+
+```js
+// loop protect injects stuff, so let's look at the raw code again
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(/);
+```
+
+Your `for` loop should iterate through the `inputContainers` array. Remember to use `i` as your iterator.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*inputContainers\.length\s*;\s*i\s*\+\+\s*\)/);
+```
+
+Your `for` loop should set the `innerHTML` property of `inputContainers[i]` to an empty string.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const forLoop = clearForm.split("for")[1];
+assert.match(forLoop, /inputContainers\[\s*i\s*\]\s*\.innerHTML\s*=\s*(`|'|")\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
new file mode 100644
index 00000000000..5ef4abce954
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
@@ -0,0 +1,275 @@
+---
+id: 63c9ec044acedf312c4974ff
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+After your loop completes, you need to clear the `budgetNumberInput`. Set the `value` property of `budgetNumberInput` to an empty string.
+
+# --hints--
+
+Your `clearForm` function should access the `value` property of the `budgetNumberInput` element.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value/);
+```
+
+Your `clearForm` function should set the `value` property of the `budgetNumberInput` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value\s*=\s*('|"|`)\1/);
+```
+
+You should modify the `budgetNumberInput` after your `for` loop.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const afterLoop = clearForm.split("}")[1];
+assert.match(afterLoop, /budgetNumberInput\.value/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
new file mode 100644
index 00000000000..3dab9bed7e5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
@@ -0,0 +1,276 @@
+---
+id: 63c9f24afbc9cf324dcaa9a4
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+You also need to clear the `output` element's text. You can do this by setting the `innerText` property to an empty string.
+
+The difference between `innerText` and `innerHTML` is that `innerText` will not render HTML elements, but will display the tags and content as raw text.
+
+# --hints--
+
+Your `clearForm` function should access the `innerText` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText/);
+```
+
+Your `clearForm` function should set the `innerText` property of the `output` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText\s*=\s*('|"|`)\1/);
+```
+
+You should modify `output` after modifying `budgetNumberInput`.
+
+```js
+assert.isAbove(clearForm.toString().indexOf('output'), clearForm.toString().indexOf('budgetNumberInput'));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
new file mode 100644
index 00000000000..b2e9d536a15
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
@@ -0,0 +1,277 @@
+---
+id: 63c9f28bda3e3f336e21b6b4
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+To finish off this function, you need to restore the `hide` class to the `output` element. The `classList` property has an `.add()` method which is the opposite of the `.remove()` method. It accepts a string representing the class to add to the element.
+
+Add the `hide` class to your `output`.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList/);
+```
+
+You should call the `.add()` method on the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add/);
+```
+
+You should pass `hide` as the argument to the `.add()` method.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
new file mode 100644
index 00000000000..d29b3f2ac72
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
@@ -0,0 +1,520 @@
+---
+id: 63c9f2bff625af342023512c
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+To complete this project, add an event listener to the `clearButton` button. When the button is clicked, it should call the `clearForm` function.
+
+Congratulations! Your project is complete.
+
+# --hints--
+
+You should add an event listener to the `clearButton` button.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(/);
+```
+
+You should pass `click` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*/);
+```
+
+You should pass `clearForm` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*,\s*clearForm\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener('click', addEntry);
+calorieCounter.addEventListener('submit', calculateCalories);
+clearButton.addEventListener('click', clearForm);
+```
diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md
new file mode 100644
index 00000000000..5a53c50f3a3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md
@@ -0,0 +1,30 @@
+---
+id: 63d8402e39c73468b059cd43
+title: "Build a Data Graph Explorer"
+challengeType: 10
+dashedName: build-a-data-graph-explorer
+---
+
+# --description--
+
+You will be working on this project with Google Colaboratory .
+
+After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link."
+
+# --instructions--
+
+For this challenge, you need to create a multi-function calculator using Python that take input and do the following:
+
+- Get a .csv file in three ways
+ - uploading it from the local computer
+ - getting a url from user input
+ - putting the url in the code
+- Use the Pandas library to save the .csv as a dataframe
+- Print headings and the first two rows
+- Store the column names as a list
+- Choose one or two columns and convert the data to Numpy arrays
+- Display data as a scatter plot or a line graph
+- Be able to do this for different column combinations, and interpret the graphs
+
+Once you're done, submit the URL to the public Colab notebook on your Google drive.
+
diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md
new file mode 100644
index 00000000000..f0cad6cf15a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md
@@ -0,0 +1,28 @@
+---
+id: 63d8401e39c73468b059cd42
+title: "Build a Financial Calculator"
+challengeType: 10
+dashedName: build-a-financial-calculator
+---
+
+# --description--
+
+You will be working on this project with Google Colaboratory .
+
+After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link."
+
+# --instructions--
+
+For this challenge, you need to create a multi-function calculator using Python that take input and do the following:
+
+- Calculate annuity with monthly or continuous growth
+- Calculate monthly mortgage payment
+- Estimate retirement investment balance
+- Determine how long until an amount doubles, given the rate
+- Solve logarithmic equations
+- Convert to (and from) scientific notation
+
+If you are struggling, you can follow the video walkthrough for this project.
+
+Once you're done, submit the URL to the public Colab notebook on your Google drive.
+
diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
new file mode 100644
index 00000000000..fe640ea8266
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
@@ -0,0 +1,28 @@
+---
+id: 63d83ffd39c73468b059cd40
+title: "Build a Graphing Calculator"
+challengeType: 10
+dashedName: build-a-graphing-calculator
+---
+
+# --description--
+
+You will be working on this project with Google Colaboratory .
+
+After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link."
+
+# --instructions--
+
+For this challenge, you need to create a graphing calculator using Python that can take input and do the following:
+
+- Graph one or more functions
+- Create a table of (x,y) values
+- Shade above or below the line
+- Solve and graph a system of equations
+- Zoom in or out on a graph
+- Solve quadratic equations
+
+If you are struggling, you can follow the video walkthrough for this project.
+
+Once you're done, submit the URL to the public Colab notebook on your Google drive.
+
diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
new file mode 100644
index 00000000000..c5ef86d57bf
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
@@ -0,0 +1,28 @@
+---
+id: 63d83ff239c73468b059cd3f
+title: "Build a Multi-Function Calculator"
+challengeType: 10
+dashedName: build-a-multi-function-calculator
+---
+
+# --description--
+
+You will be working on this project with Google Colaboratory .
+
+After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link."
+
+# --instructions--
+
+For this challenge, you need to create a multi-function calculator using Python that take input and do the following:
+
+- solve proportions
+- solve for x in equations
+- factor square roots
+- convert decimals to fractions and percents
+- convert fractions to decimals and percents
+- convert percents to decimals and fractions
+
+If you are struggling, you can follow the video walkthrough for this project.
+
+Once you're done, submit the URL to the public Colab notebook on your Google drive.
+
diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md
new file mode 100644
index 00000000000..3018ad84048
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md
@@ -0,0 +1,29 @@
+---
+id: 63d8401039c73468b059cd41
+title: "Build Three Math Games"
+challengeType: 10
+dashedName: build-three-math-games
+---
+
+# --description--
+
+You will be working on this project with Google Colaboratory .
+
+After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link."
+
+# --instructions--
+
+For this challenge, you need to create three math games using Python that do the following:
+
+- Scatter plot game
+ - Randomly generate points on a graph and the player has to input the (x,y) coordinates
+ - For added difficulty, make the graph larger
+- Algebra practice game
+ - Generate one-step and two-step problems with random integer values and the player has to input the answer
+ - Use positive and negative values. For added difficulty, make the numbers larger
+- Projectile game
+ - Display a "wall" with random height and location. Player has to move sliders to adjust a parabolic path to clear the wall
+ - For added difficulty, make a second level where players enter a, b, and c without sliders
+
+Once you're done, submit the URL to the public Colab notebook on your Google drive.
+
diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/college-algebra-with-python-conclusion/more-resources-in-colab.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/college-algebra-with-python-conclusion/more-resources-in-colab.md
index 9d1534b6b6a..07eef98cd40 100644
--- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/college-algebra-with-python-conclusion/more-resources-in-colab.md
+++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/college-algebra-with-python-conclusion/more-resources-in-colab.md
@@ -2,7 +2,7 @@
id: 6363d2959078df117ce4c408
title: "More Resources in Colab"
challengeType: 15
-videoId: L5hh3Og9RCU
+videoId: HNFrRHqpck4
dashedName: more-resources-in-colab
---
diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/college-algebra-with-python-conclusion/spreadsheets-and-additional-resources.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/college-algebra-with-python-conclusion/spreadsheets-and-additional-resources.md
index 93f9283320d..ad5edecd835 100644
--- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/college-algebra-with-python-conclusion/spreadsheets-and-additional-resources.md
+++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/college-algebra-with-python-conclusion/spreadsheets-and-additional-resources.md
@@ -2,7 +2,7 @@
id: 6363d2899078df117ce4c407
title: "Spreadsheets and Additional Resources"
challengeType: 15
-videoId: HNFrRHqpck4
+videoId: JH9Uk2mi3Dc
dashedName: spreadsheets-and-additional-resources
---
diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-exponents-and-logarithms/exponents-and-logarithms.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-exponents-and-logarithms/exponents-and-logarithms.md
index c4e0821eac9..24a80693af2 100644
--- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-exponents-and-logarithms/exponents-and-logarithms.md
+++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-exponents-and-logarithms/exponents-and-logarithms.md
@@ -8,7 +8,7 @@ dashedName: exponents-and-logarithms
# --description--
-Here is the Colab notebook to go along with this video.
+Here is the Colab notebook to go along with this video.
# --question--
diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-fractions-and-decimals/fractions-and-decimals-extra.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-fractions-and-decimals/fractions-and-decimals-extra.md
index 3d446e36663..e1ac138f79e 100644
--- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-fractions-and-decimals/fractions-and-decimals-extra.md
+++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-fractions-and-decimals/fractions-and-decimals-extra.md
@@ -10,7 +10,7 @@ dashedName: fractions-and-decimals-extra
The following video will show you one way to set up your Google Colaboratory notebook, so that you can continue to build your personalized algebra calculator.
-Here is the Colab notebook used in this video so you can use it as a model.
+Here is the Colab notebook used in this video so you can use it as a model.
# --question--
diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-how-to-graph-systems-of-equations/graphing-systems.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-how-to-graph-systems-of-equations/graphing-systems.md
index b57b2bb3b00..ce4d9d07df6 100644
--- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-how-to-graph-systems-of-equations/graphing-systems.md
+++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-how-to-graph-systems-of-equations/graphing-systems.md
@@ -10,7 +10,7 @@ dashedName: graphing-systems
This first video will show you how to graph systems of equations with with written math, then code.
-Here is the Colab notebook used in this video.
+Here is the Colab notebook used in this video.
# --question--
diff --git a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-how-to-solve-for-x/how-to-solve-for-x-extra.md b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-how-to-solve-for-x/how-to-solve-for-x-extra.md
index 6cb62985260..5d9ca07f933 100644
--- a/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-how-to-solve-for-x/how-to-solve-for-x-extra.md
+++ b/curriculum/challenges/chinese-traditional/17-college-algebra-with-python/learn-how-to-solve-for-x/how-to-solve-for-x-extra.md
@@ -24,7 +24,7 @@ Open the following Colab notebook, run the cell, and 15 = 32768 and the sum of its digits is 3 + 2 + 7 + 6 + 8 = 26.
+
+What is the sum of the digits of the number 2exponent
+ 3 7 44 69 3
+
+
+That is, 3 + 7 + 4 + 9 = 23.
+
+Find the maximum total from top to bottom of the triangle below:
+
+75
+95 64
+17 47 82
+18 35 87 10
+20 04 82 47 65
+19 01 23 75 03 34
+88 02 77 73 07 63 67
+99 65 04 28 06 16 70 92
+41 41 26 56 83 40 80 70 33
+41 48 72 33 47 32 37 16 94 29
+53 71 44 65 25 43 91 52 97 51 14
+70 11 33 28 77 73 17 78 39 68 17 57
+91 71 52 38 17 14 91 43 58 50 27 29 48
+63 66 04 68 89 53 67 30 73 16 69 87 40 31
+04 62 98 27 23 09 70 98 73 93 38 53 60 04 23
+
+**NOTE:** As there are only 16384 routes, it is possible to solve this problem by trying every route. However, Problem 67, is the same challenge with a triangle containing one-hundred rows; it cannot be solved by brute force, and requires a clever method! ;o)
+
+# --hints--
+
+`maximumPathSumI(testTriangle)` should return a number.
+
+```js
+assert(typeof maximumPathSumI(testTriangle) === 'number');
+```
+
+`maximumPathSumI(testTriangle)` should return 23.
+
+```js
+assert.strictEqual(maximumPathSumI(testTriangle), 23);
+```
+
+`maximumPathSumI(numTriangle)` should return 1074.
+
+```js
+assert.strictEqual(maximumPathSumI(numTriangle), 1074);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+const numTriangle = [[75, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [95, 64, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [17, 47, 82, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [18, 35, 87, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [20, 4, 82, 47, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [19, 1, 23, 75, 3, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0], [88, 2, 77, 73, 7, 63, 67, 0, 0, 0, 0, 0, 0, 0, 0], [99, 65, 4, 28, 6, 16, 70, 92, 0, 0, 0, 0, 0, 0, 0], [41, 41, 26, 56, 83, 40, 80, 70, 33, 0, 0, 0, 0, 0, 0], [41, 48, 72, 33, 47, 32, 37, 16, 94, 29, 0, 0, 0, 0, 0], [53, 71, 44, 65, 25, 43, 91, 52, 97, 51, 14, 0, 0, 0, 0], [70, 11, 33, 28, 77, 73, 17, 78, 39, 68, 17, 57, 0, 0, 0], [91, 71, 52, 38, 17, 14, 91, 43, 58, 50, 27, 29, 48, 0, 0], [63, 66, 4, 68, 89, 53, 67, 30, 73, 16, 69, 87, 40, 31, 0], [4, 62, 98, 27, 23, 9, 70, 98, 73, 93, 38, 53, 60, 4, 23]];
+```
+
+## --seed-contents--
+
+```js
+function maximumPathSumI(triangle) {
+
+ return true;
+}
+
+const testTriangle = [[3, 0, 0, 0],
+ [7, 4, 0, 0],
+ [2, 4, 6, 0],
+ [8, 5, 9, 3]];
+
+maximumPathSumI(testTriangle);
+```
+
+# --solutions--
+
+```js
+const testTriangle = [[3, 0, 0, 0],
+ [7, 4, 0, 0],
+ [2, 4, 6, 0],
+ [8, 5, 9, 3]];
+
+function maximumPathSumI(triangle) {
+ let maxSum = triangle.slice();
+
+ for (let i = triangle.length - 1; i > 0; i--) {
+ let currentRow = maxSum[i];
+ let previousRow = maxSum[i - 1];
+ const temp = [];
+ for (let j = 0; j < i; j++) {
+ temp.push(Math.max((currentRow[j] + previousRow[j]), (currentRow[j + 1] + previousRow[j])));
+ }
+ maxSum[i - 1] = temp;
+ maxSum.pop();
+ }
+ return maxSum[0][0];
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-19-counting-sundays.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-19-counting-sundays.md
new file mode 100644
index 00000000000..5a3e24cc431
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-19-counting-sundays.md
@@ -0,0 +1,76 @@
+---
+id: 5900f37f1000cf542c50fe92
+title: 'Problem 19: Counting Sundays'
+challengeType: 1
+forumTopicId: 301827
+dashedName: problem-19-counting-sundays
+---
+
+# --description--
+
+You are given the following information, but you may prefer to do some research for yourself.
+
+
+ 1 Jan 1900 was a Monday.
+ Thirty days has September,
+ A leap year occurs on any year evenly divisible by 4, but not on a century unless it is divisible by 400.
+
+
+How many Sundays fell on the first of the month during the twentieth century (1 Jan 1901 to 31 Dec 2000)?
+
+# --hints--
+
+`countingSundays(1943, 1946)` should return a number.
+
+```js
+assert(typeof countingSundays(1943, 1946) === 'number');
+```
+
+`countingSundays(1943, 1946)` should return 6.
+
+```js
+assert.strictEqual(countingSundays(1943, 1946), 6);
+```
+
+`countingSundays(1995, 2000)` should return 10.
+
+```js
+assert.strictEqual(countingSundays(1995, 2000), 10);
+```
+
+`countingSundays(1901, 2000)` should return 171.
+
+```js
+assert.strictEqual(countingSundays(1901, 2000), 171);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countingSundays(firstYear, lastYear) {
+
+ return true;
+}
+
+countingSundays(1943, 1946);
+```
+
+# --solutions--
+
+```js
+function countingSundays(firstYear, lastYear) {
+ let sundays = 0;
+
+ for (let year = firstYear; year <= lastYear; year++) {
+ for (let month = 0; month <= 11; month++) {
+ const thisDate = new Date(year, month, 1);
+ if (thisDate.getDay() === 0) {
+ sundays++;
+ }
+ }
+ }
+ return sundays;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-2-even-fibonacci-numbers.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-2-even-fibonacci-numbers.md
new file mode 100644
index 00000000000..4376672786b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-2-even-fibonacci-numbers.md
@@ -0,0 +1,103 @@
+---
+id: 5900f36e1000cf542c50fe81
+title: 'Problem 2: Even Fibonacci Numbers'
+challengeType: 1
+forumTopicId: 301838
+dashedName: problem-2-even-fibonacci-numbers
+---
+
+# --description--
+
+Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:
+
+1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...
+
+By considering the terms in the Fibonacci sequence whose values do not exceed `n`, find the sum of the even-valued terms.
+
+# --hints--
+
+`fiboEvenSum(10)` should return a number.
+
+```js
+assert(typeof fiboEvenSum(10) === 'number');
+```
+
+Your function should return an even value.
+
+```js
+assert.equal(fiboEvenSum(10) % 2 === 0, true);
+```
+
+Your function should sum the even-valued Fibonacci numbers: `fiboEvenSum(8)` should return 10.
+
+```js
+assert.strictEqual(fiboEvenSum(8), 10);
+```
+
+`fiboEvenSum(10)` should return 10.
+
+```js
+assert.strictEqual(fiboEvenSum(10), 10);
+```
+
+`fiboEvenSum(34)` should return 44.
+
+```js
+assert.strictEqual(fiboEvenSum(34), 44);
+```
+
+`fiboEvenSum(60)` should return 44.
+
+```js
+assert.strictEqual(fiboEvenSum(60), 44);
+```
+
+`fiboEvenSum(1000)` should return 798.
+
+```js
+assert.strictEqual(fiboEvenSum(1000), 798);
+```
+
+`fiboEvenSum(100000)` should return 60696.
+
+```js
+assert.strictEqual(fiboEvenSum(100000), 60696);
+```
+
+`fiboEvenSum(4000000)` should return 4613732.
+
+```js
+assert.strictEqual(fiboEvenSum(4000000), 4613732);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function fiboEvenSum(n) {
+
+ return true;
+}
+```
+
+# --solutions--
+
+```js
+const fiboEvenSum = (number) => {
+ if (number <= 1) {
+ return 0;
+ } else {
+ let evenSum = 0,
+ prevFibNum = 1,
+ fibNum = 2; // According to problem description our Fibonacci series starts with 1, 2
+ for (let i = 2; fibNum <= number; i++) {
+ if (fibNum % 2 == 0) {
+ evenSum += fibNum;
+ }
+ [prevFibNum, fibNum] = [fibNum, prevFibNum + fibNum];
+ }
+ return evenSum;
+ }
+};
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-20-factorial-digit-sum.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-20-factorial-digit-sum.md
new file mode 100644
index 00000000000..a109ff5f9b2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-20-factorial-digit-sum.md
@@ -0,0 +1,79 @@
+---
+id: 5900f3801000cf542c50fe93
+title: 'Problem 20: Factorial digit sum'
+challengeType: 1
+forumTopicId: 301839
+dashedName: problem-20-factorial-digit-sum
+---
+
+# --description--
+
+`n`! means `n` × (`n` − 1) × ... × 3 × 2 × 1
+
+For example, 10! = 10 × 9 × ... × 3 × 2 × 1 = 3628800,
+and the sum of the digits in the number 10! is 3 + 6 + 2 + 8 + 8 + 0 + 0 = 27.
+
+Find the sum of the digits `n`!
+
+# --hints--
+
+`sumFactorialDigits(10)` should return a number.
+
+```js
+assert(typeof sumFactorialDigits(10) === 'number');
+```
+
+`sumFactorialDigits(10)` should return 27.
+
+```js
+assert.strictEqual(sumFactorialDigits(10), 27);
+```
+
+`sumFactorialDigits(25)` should return 72.
+
+```js
+assert.strictEqual(sumFactorialDigits(25), 72);
+```
+
+`sumFactorialDigits(50)` should return 216.
+
+```js
+assert.strictEqual(sumFactorialDigits(50), 216);
+```
+
+`sumFactorialDigits(75)` should return 432.
+
+```js
+assert.strictEqual(sumFactorialDigits(75), 432);
+```
+
+`sumFactorialDigits(100)` should return 648.
+
+```js
+assert.strictEqual(sumFactorialDigits(100), 648);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumFactorialDigits(n) {
+
+ return n;
+}
+
+sumFactorialDigits(100);
+```
+
+# --solutions--
+
+```js
+let factorial = (n) => n <= 1 ? BigInt(n) : BigInt(n) * BigInt(factorial(--n));
+
+let sumDigits = n => n.toString().split('').map(x => parseInt(x)).reduce((a,b) => a + b);
+
+function sumFactorialDigits(n) {
+ return sumDigits(factorial(n));
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-21-amicable-numbers.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-21-amicable-numbers.md
new file mode 100644
index 00000000000..df19c7d7c20
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-21-amicable-numbers.md
@@ -0,0 +1,84 @@
+---
+id: 5900f3811000cf542c50fe94
+title: 'Problem 21: Amicable numbers'
+challengeType: 1
+forumTopicId: 301851
+dashedName: problem-21-amicable-numbers
+---
+
+# --description--
+
+Let d(`n`) be defined as the sum of proper divisors of `n` (numbers less than `n` which divide evenly into `n`).
+
+If d(`a`) = `b` and d(`b`) = `a`, where `a` ≠ `b`, then `a` and `b` are an amicable pair and each of `a` and `b` are called amicable numbers.
+
+For example, the proper divisors of 220 are 1, 2, 4, 5, 10, 11, 20, 22, 44, 55 and 110; therefore d(220) = 284. The proper divisors of 284 are 1, 2, 4, 71 and 142; so d(284) = 220.
+
+Evaluate the sum of all the amicable numbers under `n`.
+
+# --hints--
+
+`sumAmicableNum(1000)` should return a number.
+
+```js
+assert(typeof sumAmicableNum(1000) === 'number');
+```
+
+`sumAmicableNum(1000)` should return 504.
+
+```js
+assert.strictEqual(sumAmicableNum(1000), 504);
+```
+
+`sumAmicableNum(2000)` should return 2898.
+
+```js
+assert.strictEqual(sumAmicableNum(2000), 2898);
+```
+
+`sumAmicableNum(5000)` should return 8442.
+
+```js
+assert.strictEqual(sumAmicableNum(5000), 8442);
+```
+
+`sumAmicableNum(10000)` should return 31626.
+
+```js
+assert.strictEqual(sumAmicableNum(10000), 31626);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumAmicableNum(n) {
+
+ return n;
+}
+
+sumAmicableNum(10000);
+```
+
+# --solutions--
+
+```js
+const sumAmicableNum = (n) => {
+ const fsum = (n) => {
+ let sum = 1;
+ for (let i = 2; i <= Math.floor(Math.sqrt(n)); i++)
+ if (Math.floor(n % i) === 0)
+ sum += i + Math.floor(n / i);
+ return sum;
+ };
+ let d = [];
+ let amicableSum = 0;
+ for (let i=2; i number;
+}
+
+function sumOfNonAbundantNumbers(n) {
+ let sum = 0;
+ const memo = {};
+ let abundantList = [];
+
+ // Function checkSum checks if num can be represented as a sum of numbers in the stack (array)
+ const checkSum = (num, stack, memo) => {
+ for (let i = 0; i < stack.length; i += 1) {
+ if ((num - stack[i]) in memo) return true;
+ }
+ return false;
+ };
+
+ for (let i = 1; i <= n; i += 1) {
+ if (abundantCheck(i)) {
+ abundantList.push(i);
+ memo[i] = 1;
+ }
+ if (checkSum(i, abundantList, memo)) continue;
+ sum += i;
+ }
+ return sum;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-24-lexicographic-permutations.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-24-lexicographic-permutations.md
new file mode 100644
index 00000000000..91572e2dd40
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-24-lexicographic-permutations.md
@@ -0,0 +1,66 @@
+---
+id: 5900f3841000cf542c50fe97
+title: 'Problem 24: Lexicographic permutations'
+challengeType: 1
+forumTopicId: 301885
+dashedName: problem-24-lexicographic-permutations
+---
+
+# --description--
+
+A permutation is an ordered arrangement of objects. For example, 3124 is one possible permutation of the digits 1, 2, 3 and 4. If all of the permutations are listed numerically or alphabetically, we call it lexicographic order. The lexicographic permutations of 0, 1 and 2 are:
+
+012 021 102 120 201 210
+
+What is the `n`th lexicographic permutation of the digits 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9?
+
+# --hints--
+
+`lexicographicPermutations(699999)` should return a number.
+
+```js
+assert(typeof lexicographicPermutations(699999) === 'number');
+```
+
+`lexicographicPermutations(699999)` should return 1938246570.
+
+```js
+assert(lexicographicPermutations(699999) == 1938246570);
+```
+
+`lexicographicPermutations(899999)` should return 2536987410.
+
+```js
+assert(lexicographicPermutations(899999) == 2536987410);
+```
+
+`lexicographicPermutations(900000)` should return 2537014689.
+
+```js
+assert(lexicographicPermutations(900000) == 2537014689);
+```
+
+`lexicographicPermutations(999999)` should return 2783915460.
+
+```js
+assert(lexicographicPermutations(999999) == 2783915460);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lexicographicPermutations(n) {
+
+ return n;
+}
+
+lexicographicPermutations(999999);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-25-1000-digit-fibonacci-number.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-25-1000-digit-fibonacci-number.md
new file mode 100644
index 00000000000..25d18d786ef
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-25-1000-digit-fibonacci-number.md
@@ -0,0 +1,85 @@
+---
+id: 5900f3851000cf542c50fe98
+title: 'Problem 25: 1000-digit Fibonacci number'
+challengeType: 1
+forumTopicId: 301897
+dashedName: problem-25-1000-digit-fibonacci-number
+---
+
+# --description--
+
+The Fibonacci sequence is defined by the recurrence relation:
+
+Fn = Fn−1 + Fn−2 , where F1 = 1 and F2 = 1.
+
+Hence the first 12 terms will be:
+
+F1 = 1
F2 = 1
F3 = 2
F4 = 3
F5 = 5
F6 = 8
F7 = 13
F8 = 21
F9 = 34
F10 = 55
F11 = 89
F12 = 144
12 , is the first term to contain three digits.
+
+What is the index of the first term in the Fibonacci sequence to contain `n` digits?
+
+# --hints--
+
+`digitFibonacci(5)` should return a number.
+
+```js
+assert(typeof digitFibonacci(5) === 'number');
+```
+
+`digitFibonacci(5)` should return 21.
+
+```js
+assert.strictEqual(digitFibonacci(5), 21);
+```
+
+`digitFibonacci(10)` should return 45.
+
+```js
+assert.strictEqual(digitFibonacci(10), 45);
+```
+
+`digitFibonacci(15)` should return 69.
+
+```js
+assert.strictEqual(digitFibonacci(15), 69);
+```
+
+`digitFibonacci(20)` should return 93.
+
+```js
+assert.strictEqual(digitFibonacci(20), 93);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitFibonacci(n) {
+
+ return n;
+}
+
+digitFibonacci(20);
+```
+
+# --solutions--
+
+```js
+const digitFibonacci = (n) => {
+ const digits = (num) => {
+ return num.toString().length;
+ };
+ let f1 = 1;
+ let f2 = 1;
+ let index = 3;
+ while (true) {
+ let fn = f1 + f2;
+ if (digits(fn) === n) return index;
+ [f1, f2] = [f2, fn];
+ index++;
+ }
+};
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-26-reciprocal-cycles.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-26-reciprocal-cycles.md
new file mode 100644
index 00000000000..580ba5807a3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-26-reciprocal-cycles.md
@@ -0,0 +1,68 @@
+---
+id: 5900f3861000cf542c50fe99
+title: 'Problem 26: Reciprocal cycles'
+challengeType: 1
+forumTopicId: 301908
+dashedName: problem-26-reciprocal-cycles
+---
+
+# --description--
+
+A unit fraction contains 1 in the numerator. The decimal representation of the unit fractions with denominators 2 to 10 are given:
+
+1 /2 = 0.5
1 /3 = 0.(3)
1 /4 = 0.25
1 /5 = 0.2
1 /6 = 0.1(6)
1 /7 = 0.(142857)
1 /8 = 0.125
1 /9 = 0.(1)
1 /10 = 0.1
1 /7 has a 6-digit recurring cycle.
+
+Find the value of `d` < `n` for which 1 /d contains the longest recurring cycle in its decimal fraction part.
+
+# --hints--
+
+`reciprocalCycles(700)` should return a number.
+
+```js
+assert(typeof reciprocalCycles(700) === 'number');
+```
+
+`reciprocalCycles(700)` should return 659.
+
+```js
+assert(reciprocalCycles(700) == 659);
+```
+
+`reciprocalCycles(800)` should return 743.
+
+```js
+assert(reciprocalCycles(800) == 743);
+```
+
+`reciprocalCycles(900)` should return 887.
+
+```js
+assert(reciprocalCycles(900) == 887);
+```
+
+`reciprocalCycles(1000)` should return 983.
+
+```js
+assert(reciprocalCycles(1000) == 983);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function reciprocalCycles(n) {
+
+ return n;
+}
+
+reciprocalCycles(1000);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-27-quadratic-primes.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-27-quadratic-primes.md
new file mode 100644
index 00000000000..e7c8ebe01eb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-27-quadratic-primes.md
@@ -0,0 +1,78 @@
+---
+id: 5900f3871000cf542c50fe9a
+title: 'Problem 27: Quadratic primes'
+challengeType: 1
+forumTopicId: 301919
+dashedName: problem-27-quadratic-primes
+---
+
+# --description--
+
+Euler discovered the remarkable quadratic formula:
+
+$n^2 + n + 41$
+
+It turns out that the formula will produce 40 primes for the consecutive integer values $0 \\le n \\le 39$. However, when $n = 40, 40^2 + 40 + 41 = 40(40 + 1) + 41$ is divisible by 41, and certainly when $n = 41, 41^2 + 41 + 41$ is clearly divisible by 41.
+
+The incredible formula $n^2 - 79n + 1601$ was discovered, which produces 80 primes for the consecutive values $0 \\le n \\le 79$. The product of the coefficients, −79 and 1601, is −126479.
+
+Considering quadratics of the form:
+
+
+ $n^2 + an + b$, where $|a| < range$ and $|b| \le range$
+
+Find the product of the coefficients, $a$ and $b$, for the quadratic expression that produces the maximum number of primes for consecutive values of $n$, starting with $n = 0$.
+
+# --hints--
+
+`quadraticPrimes(200)` should return a number.
+
+```js
+assert(typeof quadraticPrimes(200) === 'number');
+```
+
+`quadraticPrimes(200)` should return -4925.
+
+```js
+assert(quadraticPrimes(200) == -4925);
+```
+
+`quadraticPrimes(500)` should return -18901.
+
+```js
+assert(quadraticPrimes(500) == -18901);
+```
+
+`quadraticPrimes(800)` should return -43835.
+
+```js
+assert(quadraticPrimes(800) == -43835);
+```
+
+`quadraticPrimes(1000)` should return -59231.
+
+```js
+assert(quadraticPrimes(1000) == -59231);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function quadraticPrimes(range) {
+
+ return range;
+}
+
+quadraticPrimes(1000);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-28-number-spiral-diagonals.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-28-number-spiral-diagonals.md
new file mode 100644
index 00000000000..eee50073f68
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-28-number-spiral-diagonals.md
@@ -0,0 +1,83 @@
+---
+id: 5900f3881000cf542c50fe9b
+title: 'Problem 28: Number spiral diagonals'
+challengeType: 1
+forumTopicId: 301930
+dashedName: problem-28-number-spiral-diagonals
+---
+
+# --description--
+
+Starting with the number 1 and moving to the right in a clockwise direction a 5 by 5 spiral is formed as follows:
+
+
+
21
22 23 24
25
+ 20
7
8
9
10
+ 19 6
1
2 11
+ 18
5
4
3
12
+
17
16 15 14
13
+
+ 22 =4, 23 =8, 24 =16, 25 =32 2 =9, 33 =27, 34 =81, 35 =243 2 =16, 43 =64, 44 =256, 45 =1024 2 =25, 53 =125, 54 =625, 55 =3125
+
+If they are then placed in numerical order, with any repeats removed, we get the following sequence of 15 distinct terms:
+
+
+ 4, 8, 9, 16, 25, 27, 32, 64, 81, 125, 243, 256, 625, 1024, 3125
+
+
+How many distinct terms are in the sequence generated by $a^b$ for 2 ≤ `a` ≤ `n` and 2 ≤ `b` ≤ `n`?
+
+# --hints--
+
+`distinctPowers(15)` should return a number.
+
+```js
+assert(typeof distinctPowers(15) === 'number');
+```
+
+`distinctPowers(15)` should return 177.
+
+```js
+assert.strictEqual(distinctPowers(15), 177);
+```
+
+`distinctPowers(20)` should return 324.
+
+```js
+assert.strictEqual(distinctPowers(20), 324);
+```
+
+`distinctPowers(25)` should return 519.
+
+```js
+assert.strictEqual(distinctPowers(25), 519);
+```
+
+`distinctPowers(30)` should return 755.
+
+```js
+assert.strictEqual(distinctPowers(30), 755);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function distinctPowers(n) {
+
+ return n;
+}
+
+distinctPowers(30);
+```
+
+# --solutions--
+
+```js
+const distinctPowers = (n) => {
+ let list = [];
+ for (let a=2; a<=n; a++) {
+ for (let b=2; b<=n; b++) {
+ let term = Math.pow(a, b);
+ if (list.indexOf(term)===-1) list.push(term);
+ }
+ }
+ return list.length;
+};
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-3-largest-prime-factor.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-3-largest-prime-factor.md
new file mode 100644
index 00000000000..2961ac6b9c0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-3-largest-prime-factor.md
@@ -0,0 +1,95 @@
+---
+id: 5900f36f1000cf542c50fe82
+title: 'Problem 3: Largest prime factor'
+challengeType: 1
+forumTopicId: 301952
+dashedName: problem-3-largest-prime-factor
+---
+
+# --description--
+
+The prime factors of 13195 are 5, 7, 13 and 29.
+
+What is the largest prime factor of the given `number`?
+
+# --hints--
+
+`largestPrimeFactor(2)` should return a number.
+
+```js
+assert(typeof largestPrimeFactor(2) === 'number');
+```
+
+`largestPrimeFactor(2)` should return 2.
+
+```js
+assert.strictEqual(largestPrimeFactor(2), 2);
+```
+
+`largestPrimeFactor(3)` should return 3.
+
+```js
+assert.strictEqual(largestPrimeFactor(3), 3);
+```
+
+`largestPrimeFactor(5)` should return 5.
+
+```js
+assert.strictEqual(largestPrimeFactor(5), 5);
+```
+
+`largestPrimeFactor(7)` should return 7.
+
+```js
+assert.strictEqual(largestPrimeFactor(7), 7);
+```
+
+`largestPrimeFactor(8)` should return 2.
+
+```js
+assert.strictEqual(largestPrimeFactor(8), 2);
+```
+
+`largestPrimeFactor(13195)` should return 29.
+
+```js
+assert.strictEqual(largestPrimeFactor(13195), 29);
+```
+
+`largestPrimeFactor(600851475143)` should return 6857.
+
+```js
+assert.strictEqual(largestPrimeFactor(600851475143), 6857);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function largestPrimeFactor(number) {
+
+ return true;
+}
+
+largestPrimeFactor(13195);
+```
+
+# --solutions--
+
+```js
+const largestPrimeFactor = (number) => {
+ let largestFactor = number;
+
+ for (let i = 2; i <= Math.sqrt(largestFactor); i++) {
+ if (!(largestFactor % i)) {
+ let factor = largestFactor / i;
+ let candidate = largestPrimeFactor(factor);
+
+ return i > candidate ? i : candidate;
+ }
+ }
+
+ return largestFactor;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-30-digit-n-powers.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-30-digit-n-powers.md
new file mode 100644
index 00000000000..1e7472bce84
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-30-digit-n-powers.md
@@ -0,0 +1,74 @@
+---
+id: 5900f38a1000cf542c50fe9d
+title: 'Problem 30: Digit n powers'
+challengeType: 1
+forumTopicId: 301953
+dashedName: problem-30-digit-n-powers
+---
+
+# --description--
+
+Surprisingly there are only three numbers that can be written as the sum of fourth powers of their digits:
+
+
+ 1634 = 14 + 64 + 34 + 44 4 + 24 + 04 + 84 4 + 44 + 74 + 44
+
+As 1 = 14 is not a sum it is not included.
+
+The sum of these numbers is 1634 + 8208 + 9474 = 19316.
+
+Find the sum of all the numbers that can be written as the sum of `n` powers of their digits.
+
+# --hints--
+
+`digitnPowers(2)` should return a number.
+
+```js
+assert(typeof digitnPowers(2) === 'number');
+```
+
+`digitnPowers(2)` should return 0.
+
+```js
+assert(digitnPowers(2) == 0);
+```
+
+`digitnPowers(3)` should return 1301.
+
+```js
+assert(digitnPowers(3) == 1301);
+```
+
+`digitnPowers(4)` should return 19316.
+
+```js
+assert(digitnPowers(4) == 19316);
+```
+
+`digitnPowers(5)` should return 443839.
+
+```js
+assert(digitnPowers(5) == 443839);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitnPowers(n) {
+
+ return n;
+}
+
+digitnPowers(5);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-31-coin-sums.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-31-coin-sums.md
new file mode 100644
index 00000000000..ae4372cd69f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-31-coin-sums.md
@@ -0,0 +1,77 @@
+---
+id: 5900f38b1000cf542c50fe9e
+title: 'Problem 31: Coin sums'
+challengeType: 1
+forumTopicId: 301965
+dashedName: problem-31-coin-sums
+---
+
+# --description--
+
+In England the currency is made up of pound, £, and pence, p, and there are eight coins in general circulation:
+
+1p, 2p, 5p, 10p, 20p, 50p, £1 (100p) and £2 (200p).
+
+It is possible to make £2 in the following way:
+
+1×£1 + 1×50p + 2×20p + 1×5p + 1×2p + 3×1p
+
+How many different ways can `n` pence be made using any number of coins?
+
+# --hints--
+
+`coinSums(50)` should return a number.
+
+```js
+assert(typeof coinSums(50) === 'number');
+```
+
+`coinSums(50)` should return 451.
+
+```js
+assert(coinSums(50) == 451);
+```
+
+`coinSums(100)` should return 4563.
+
+```js
+assert(coinSums(100) == 4563);
+```
+
+`coinSums(150)` should return 21873.
+
+```js
+assert(coinSums(150) == 21873);
+```
+
+`coinSums(200)` should return 73682.
+
+```js
+assert(coinSums(200) == 73682);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function coinSums(n) {
+
+ return n;
+}
+
+coinSums(200);
+```
+
+# --solutions--
+
+```js
+const coinSums = (n) => {
+ const getWays = (n, m=8, c=[1, 2, 5, 10, 20, 50, 100, 200]) => {
+ if (n === 0) return 1;
+ if (m === 0 || n < 0) return 0;
+ return getWays(n - c[m - 1], m, c) + getWays(n, m - 1, c);
+ };
+ return getWays(n);
+};
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-32-pandigital-products.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-32-pandigital-products.md
new file mode 100644
index 00000000000..5fe7d0495c5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-32-pandigital-products.md
@@ -0,0 +1,118 @@
+---
+id: 5900f38c1000cf542c50fe9f
+title: 'Problem 32: Pandigital products'
+challengeType: 1
+forumTopicId: 301976
+dashedName: problem-32-pandigital-products
+---
+
+# --description--
+
+We shall say that an `n`-digit number is pandigital if it makes use of all the digits 1 to `n` exactly once; for example, the 5-digit number, 15234, is 1 through 5 pandigital.
+
+The product 7254 is unusual, as the identity, 39 × 186 = 7254, containing multiplicand, multiplier, and product is 1 through 9 pandigital.
+
+Find the sum of all products whose multiplicand/multiplier/product identity can be written as a 1 through `n` pandigital.
+
+**Hint:** Some products can be obtained in more than one way so be sure to only include it once in your sum.
+
+# --hints--
+
+`pandigitalProducts(4)` should return a number.
+
+```js
+assert(typeof pandigitalProducts(4) === 'number');
+```
+
+`pandigitalProducts(4)` should return `12`.
+
+```js
+assert.strictEqual(pandigitalProducts(4), 12);
+```
+
+`pandigitalProducts(6)` should return `162`.
+
+```js
+assert.strictEqual(pandigitalProducts(6), 162);
+```
+
+`pandigitalProducts(7)` should return `0`.
+
+```js
+assert.strictEqual(pandigitalProducts(7), 0);
+```
+
+`pandigitalProducts(8)` should return `13458`.
+
+```js
+assert.strictEqual(pandigitalProducts(8), 13458);
+```
+
+`pandigitalProducts(9)` should return `45228`.
+
+```js
+assert.strictEqual(pandigitalProducts(9), 45228);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pandigitalProducts(n) {
+
+ return true;
+}
+
+pandigitalProducts(4);
+```
+
+# --solutions--
+
+```js
+function pandigitalProducts(n) {
+ function is1toNPandigital(n, digitStr) {
+ // check if length is n
+ if (digitStr.length !== n) {
+ return false;
+ }
+ // check if pandigital
+ for (let i = digitStr.length; i > 0; i--) {
+ if (digitStr.indexOf(i.toString()) === -1) {
+ return false;
+ }
+ }
+ return true;
+ }
+ function concatenateNums(...numbers) {
+ let digitStr = '';
+ for (let i = 0; i < numbers.length; i++) {
+ digitStr += numbers[i].toString();
+ }
+ return digitStr;
+ }
+
+ const pandigitalNums = [];
+ const limit = 10 ** Math.floor(n / 2) - 1;
+ let sum = 0;
+ for (let mult1 = 2; mult1 < limit; mult1++) {
+ for (let mult2 = 2; mult2 < limit; mult2++) {
+ const product = mult1 * mult2;
+ const concatenated = concatenateNums(mult1, mult2, product);
+ if (concatenated.length > n) {
+ break;
+ } else if (concatenated.length < n) {
+ continue;
+ }
+ if (
+ is1toNPandigital(n, concatenated) &&
+ !pandigitalNums.includes(product)
+ ) {
+ pandigitalNums.push(product);
+ sum += product;
+ }
+ }
+ }
+ return sum;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-33-digit-cancelling-fractions.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-33-digit-cancelling-fractions.md
new file mode 100644
index 00000000000..5419f2f8270
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-33-digit-cancelling-fractions.md
@@ -0,0 +1,102 @@
+---
+id: 5900f38d1000cf542c50fea0
+title: 'Problem 33: Digit cancelling fractions'
+challengeType: 1
+forumTopicId: 301987
+dashedName: problem-33-digit-cancelling-fractions
+---
+
+# --description--
+
+The fraction 49 /98 is a curious fraction, as an inexperienced mathematician in attempting to simplify it may incorrectly believe that 49 /98 = 4 /8 , which is correct, is obtained by cancelling the 9s.
+
+We shall consider fractions like, 30 /50 = 3 /5 , to be trivial examples.
+
+There are exactly four non-trivial examples of this type of fraction, less than one in value, and containing two digits in the numerator and denominator.
+
+If the product of these four fractions is given in its lowest common terms, find the value of the denominator.
+
+# --hints--
+
+`digitCancellingFractions()` should return a number.
+
+```js
+assert(typeof digitCancellingFractions() === 'number');
+```
+
+`digitCancellingFractions()` should return 100.
+
+```js
+assert.strictEqual(digitCancellingFractions(), 100);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitCancellingFractions() {
+
+ return true;
+}
+
+digitCancellingFractions();
+```
+
+# --solutions--
+
+```js
+function digitCancellingFractions() {
+ function isCurious(numerator, denominator) {
+ const fraction = numerator / denominator;
+ const numString = numerator.toString();
+ const denString = denominator.toString();
+
+ if (numString[1] === '0' && denString[1] === '0') {
+ // trivial
+ return false;
+ }
+ for (let i = 0; i < 2; i++) {
+ for (let j = 0; j < 2; j++) {
+ if (numString[i] === denString[j]) {
+ const newNum = parseInt(numString[1 - i], 10);
+ const newDen = parseInt(denString[1 - j], 10);
+ if (newNum / newDen === fraction) {
+ return true;
+ }
+ }
+ }
+ }
+ return false;
+ }
+ function findLargestDivisor(a, b) {
+ let gcd = a > b ? b : a;
+ while (gcd > 1) {
+ if (a % gcd === 0 && b % gcd === 0) {
+ return gcd;
+ }
+ gcd--;
+ }
+ return gcd;
+ }
+
+ function simplifyFraction(numerator, denominator) {
+ const divisor = findLargestDivisor(numerator, denominator);
+ return [numerator / divisor, denominator / divisor];
+ }
+
+ let multipleNumerator = 1;
+ let multipleDenominator = 1;
+
+ for (let denominator = 11; denominator < 100; denominator++) {
+ for (let numerator = 10; numerator < denominator; numerator++) {
+ if (isCurious(numerator, denominator)) {
+ multipleNumerator *= numerator;
+ multipleDenominator *= denominator;
+ }
+ }
+ }
+
+ return simplifyFraction(multipleNumerator, multipleDenominator)[1];
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-34-digit-factorials.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-34-digit-factorials.md
new file mode 100644
index 00000000000..2eb87f93ba1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-34-digit-factorials.md
@@ -0,0 +1,50 @@
+---
+id: 5900f38e1000cf542c50fea1
+title: 'Problem 34: Digit factorials'
+challengeType: 1
+forumTopicId: 301998
+dashedName: problem-34-digit-factorials
+---
+
+# --description--
+
+145 is a curious number, as 1! + 4! + 5! = 1 + 24 + 120 = 145.
+
+Find the numbers and the sum of the numbers which are equal to the sum of the factorial of their digits.
+
+**Note:** as 1! = 1 and 2! = 2 are not sums they are not included.
+
+# --hints--
+
+`digitFactorial()` should return an object.
+
+```js
+assert.typeOf(digitFactorial(), 'object');
+```
+
+`digitFactorial()` should return { sum: 40730, numbers: [145, 40585] }.
+
+```js
+assert.deepEqual(digitFactorial(), { sum: 40730, numbers: [145, 40585] });
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitFactorial() {
+
+ var sum = 0;
+ var numbers = [];
+ return { sum, numbers };
+}
+
+digitFactorial();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-35-circular-primes.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-35-circular-primes.md
new file mode 100644
index 00000000000..aaae9562bb0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-35-circular-primes.md
@@ -0,0 +1,132 @@
+---
+id: 5900f38f1000cf542c50fea2
+title: 'Problem 35: Circular primes'
+challengeType: 1
+forumTopicId: 302009
+dashedName: problem-35-circular-primes
+---
+
+# --description--
+
+The number, 197, is called a circular prime because all rotations of the digits: 197, 971, and 719, are themselves prime.
+
+There are thirteen such primes below 100: 2, 3, 5, 7, 11, 13, 17, 31, 37, 71, 73, 79, and 97.
+
+How many circular primes are there below `n`, whereas 100 ≤ `n` ≤ 1000000?
+
+**Note:**
+
+Circular primes individual rotation can exceed `n`.
+
+# --hints--
+
+`circularPrimes(100)` should return a number.
+
+```js
+assert(typeof circularPrimes(100) === 'number');
+```
+
+`circularPrimes(100)` should return 13.
+
+```js
+assert(circularPrimes(100) == 13);
+```
+
+`circularPrimes(100000)` should return 43.
+
+```js
+assert(circularPrimes(100000) == 43);
+```
+
+`circularPrimes(250000)` should return 45.
+
+```js
+assert(circularPrimes(250000) == 45);
+```
+
+`circularPrimes(500000)` should return 49.
+
+```js
+assert(circularPrimes(500000) == 49);
+```
+
+`circularPrimes(750000)` should return 49.
+
+```js
+assert(circularPrimes(750000) == 49);
+```
+
+`circularPrimes(1000000)` should return 55.
+
+```js
+assert(circularPrimes(1000000) == 55);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function circularPrimes(n) {
+
+ return n;
+}
+
+circularPrimes(1000000);
+```
+
+# --solutions--
+
+```js
+function rotate(n) {
+ if (n.length == 1) return n;
+ return n.slice(1) + n[0];
+}
+
+function circularPrimes(n) {
+ // Nearest n < 10^k
+ const bound = 10 ** Math.ceil(Math.log10(n));
+ const primes = [0, 0, 2];
+ let count = 0;
+
+ // Making primes array
+ for (let i = 4; i <= bound; i += 2) {
+ primes.push(i - 1);
+ primes.push(0);
+ }
+
+ // Getting upperbound
+ const upperBound = Math.ceil(Math.sqrt(bound));
+
+ // Setting other non-prime numbers to 0
+ for (let i = 3; i < upperBound; i += 2) {
+ if (primes[i]) {
+ for (let j = i * i; j < bound; j += i) {
+ primes[j] = 0;
+ }
+ }
+ }
+
+ // Iterating through the array
+ for (let i = 2; i < n; i++) {
+ if (primes[i]) {
+ let curr = String(primes[i]);
+ let tmp = 1; // tmp variable to hold the no of rotations
+ for (let x = rotate(curr); x != curr; x = rotate(x)) {
+ if (x > n && primes[x]) {
+ continue;
+ }
+ else if (!primes[x]) {
+ // If the rotated value is 0 then it isn't a circular prime, break the loop
+ tmp = 0;
+ break;
+ }
+ tmp++;
+ primes[x] = 0;
+ }
+ count += tmp;
+ }
+ }
+ return count;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-36-double-base-palindromes.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-36-double-base-palindromes.md
new file mode 100644
index 00000000000..9793d760c20
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-36-double-base-palindromes.md
@@ -0,0 +1,66 @@
+---
+id: 5900f3901000cf542c50fea3
+title: 'Problem 36: Double-base palindromes'
+challengeType: 1
+forumTopicId: 302020
+dashedName: problem-36-double-base-palindromes
+---
+
+# --description--
+
+The decimal number, 585 = 10010010012 (binary), is palindromic in both bases.
+
+Find the sum of all numbers, less than `n`, whereas 1000 ≤ `n` ≤ 1000000, which are palindromic in base 10 and base 2.
+
+(Please note that the palindromic number, in either base, may not include leading zeros.)
+
+# --hints--
+
+`doubleBasePalindromes(1000)` should return a number.
+
+```js
+assert(typeof doubleBasePalindromes(1000) === 'number');
+```
+
+`doubleBasePalindromes(1000)` should return 1772.
+
+```js
+assert(doubleBasePalindromes(1000) == 1772);
+```
+
+`doubleBasePalindromes(50000)` should return 105795.
+
+```js
+assert(doubleBasePalindromes(50000) == 105795);
+```
+
+`doubleBasePalindromes(500000)` should return 286602.
+
+```js
+assert(doubleBasePalindromes(500000) == 286602);
+```
+
+`doubleBasePalindromes(1000000)` should return 872187.
+
+```js
+assert(doubleBasePalindromes(1000000) == 872187);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function doubleBasePalindromes(n) {
+
+ return n;
+}
+
+doubleBasePalindromes(1000000);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-37-truncatable-primes.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-37-truncatable-primes.md
new file mode 100644
index 00000000000..5d4c80d5252
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-37-truncatable-primes.md
@@ -0,0 +1,66 @@
+---
+id: 5900f3911000cf542c50fea4
+title: 'Problem 37: Truncatable primes'
+challengeType: 1
+forumTopicId: 302031
+dashedName: problem-37-truncatable-primes
+---
+
+# --description--
+
+The number 3797 has an interesting property. Being prime itself, it is possible to continuously remove digits from left to right, and remain prime at each stage: 3797, 797, 97, and 7. Similarly we can work from right to left: 3797, 379, 37, and 3.
+
+Find the sum of the only `n` (8 ≤ `n` ≤ 11) primes that are both truncatable from left to right and right to left.
+
+NOTE: 2, 3, 5, and 7 are not considered to be truncatable primes.
+
+# --hints--
+
+`truncatablePrimes(8)` should return a number.
+
+```js
+assert(typeof truncatablePrimes(8) === 'number');
+```
+
+`truncatablePrimes(8)` should return 1986.
+
+```js
+assert(truncatablePrimes(8) == 1986);
+```
+
+`truncatablePrimes(9)` should return 5123.
+
+```js
+assert(truncatablePrimes(9) == 5123);
+```
+
+`truncatablePrimes(10)` should return 8920.
+
+```js
+assert(truncatablePrimes(10) == 8920);
+```
+
+`truncatablePrimes(11)` should return 748317.
+
+```js
+assert(truncatablePrimes(11) == 748317);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function truncatablePrimes(n) {
+
+ return n;
+}
+
+truncatablePrimes(11);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-38-pandigital-multiples.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-38-pandigital-multiples.md
new file mode 100644
index 00000000000..a1190e84f39
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-38-pandigital-multiples.md
@@ -0,0 +1,98 @@
+---
+id: 5900f3931000cf542c50fea5
+title: 'Problem 38: Pandigital multiples'
+challengeType: 1
+forumTopicId: 302042
+dashedName: problem-38-pandigital-multiples
+---
+
+# --description--
+
+Take the number 192 and multiply it by each of 1, 2, and 3:
+
+$$\begin{align} 192 × 1 = 192\\\\
+ 192 × 2 = 384\\\\ 192 × 3 = 576\\\\
+\end{align}$$
+
+By concatenating each product we get the 1 to 9 pandigital, 192384576. We will call 192384576 the concatenated product of 192 and (1, 2, 3).
+
+The same can be achieved by starting with 9 and multiplying by 1, 2, 3, 4, and 5, giving the pandigital, 918273645, which is the concatenated product of 9 and (1, 2, 3, 4, 5).
+
+What is the largest 1 to `k` pandigital `k`-digit number that can be formed as the concatenated product of an integer with (1, 2, ..., `n`) where `n` > 1?
+
+# --hints--
+
+`pandigitalMultiples(8)` should return a number.
+
+```js
+assert(typeof pandigitalMultiples(8) === 'number');
+```
+
+`pandigitalMultiples(8)` should return `78156234`.
+
+```js
+assert.strictEqual(pandigitalMultiples(8), 78156234);
+```
+
+`pandigitalMultiples(9)` should return `932718654`.
+
+```js
+assert.strictEqual(pandigitalMultiples(9), 932718654);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pandigitalMultiples(k) {
+
+ return true;
+}
+
+pandigitalMultiples(8);
+```
+
+# --solutions--
+
+```js
+function pandigitalMultiples(k) {
+ function getKDigitConcatenatedProduct(num, k) {
+ // returns false if concatenated product is not k digits
+ let concatenatedProduct = num.toString();
+ for (let i = 2; concatenatedProduct.length < k; i++) {
+ concatenatedProduct += num * i;
+ }
+ return concatenatedProduct.length === k ? concatenatedProduct : false;
+ }
+
+ function is1toKPandigital(num, k) {
+ const numStr = num.toString();
+
+ // check if length is not k
+ if (numStr.length !== k) {
+ return false;
+ }
+
+ // check if pandigital
+ for (let i = k; i > 0; i--) {
+ if (numStr.indexOf(i.toString()) === -1) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ let largestNum = 0;
+ for (let i = 10 ** Math.floor(k / 2) + 1; i >= 1; i--) {
+ const concatenatedProduct = getKDigitConcatenatedProduct(i, k);
+ if (is1toKPandigital(concatenatedProduct, k)) {
+ const number = parseInt(concatenatedProduct, 10);
+ if (number > largestNum) {
+ largestNum = number;
+ }
+ }
+ }
+ return largestNum;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-39-integer-right-triangles.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-39-integer-right-triangles.md
new file mode 100644
index 00000000000..f1957262624
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-39-integer-right-triangles.md
@@ -0,0 +1,91 @@
+---
+id: 5900f3931000cf542c50fea6
+title: 'Problem 39: Integer right triangles'
+challengeType: 1
+forumTopicId: 302054
+dashedName: problem-39-integer-right-triangles
+---
+
+# --description--
+
+If `p` is the perimeter of a right angle triangle with integral length sides, {a,b,c}, there are exactly three solutions for p = 120.
+
+{20,48,52}, {24,45,51}, {30,40,50}
+
+For which value of `p` ≤ `n`, is the number of solutions maximized?
+
+# --hints--
+
+`intRightTriangles(500)` should return a number.
+
+```js
+assert(typeof intRightTriangles(500) === 'number');
+```
+
+`intRightTriangles(500)` should return 420.
+
+```js
+assert(intRightTriangles(500) == 420);
+```
+
+`intRightTriangles(800)` should return 720.
+
+```js
+assert(intRightTriangles(800) == 720);
+```
+
+`intRightTriangles(900)` should return 840.
+
+```js
+assert(intRightTriangles(900) == 840);
+```
+
+`intRightTriangles(1000)` should return 840.
+
+```js
+assert(intRightTriangles(1000) == 840);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function intRightTriangles(n) {
+
+ return n;
+}
+
+intRightTriangles(500);
+```
+
+# --solutions--
+
+```js
+// Original idea for this solution came from
+// https://www.xarg.org/puzzle/project-euler/problem-39/
+
+function intRightTriangles(n) {
+ // store the number of triangles with a given perimeter
+ let triangles = {};
+ // a is the shortest side
+ for (let a = 3; a < n / 3; a++)
+ // o is the opposite side and is at least as long as a
+ for (let o = a; o < n / 2; o++) {
+ let h = Math.sqrt(a * a + o * o); // hypotenuse
+ let p = a + o + h; // perimeter
+ if ((h % 1) === 0 && p <= n) {
+ triangles[p] = (triangles[p] || 0) + 1;
+ }
+ }
+
+ let max = 0, maxp = null;
+ for (let p in triangles) {
+ if (max < triangles[p]) {
+ max = triangles[p];
+ maxp = parseInt(p);
+ }
+ }
+ return maxp;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-4-largest-palindrome-product.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-4-largest-palindrome-product.md
new file mode 100644
index 00000000000..9e436255531
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-4-largest-palindrome-product.md
@@ -0,0 +1,64 @@
+---
+id: 5900f3701000cf542c50fe83
+title: 'Problem 4: Largest palindrome product'
+challengeType: 1
+forumTopicId: 302065
+dashedName: problem-4-largest-palindrome-product
+---
+
+# --description--
+
+A palindromic number reads the same both ways. The largest palindrome made from the product of two 2-digit numbers is 9009 = 91 × 99.
+
+Find the largest palindrome made from the product of two `n`-digit numbers.
+
+# --hints--
+
+`largestPalindromeProduct(2)` should return a number.
+
+```js
+assert(typeof largestPalindromeProduct(2) === 'number');
+```
+
+`largestPalindromeProduct(2)` should return 9009.
+
+```js
+assert.strictEqual(largestPalindromeProduct(2), 9009);
+```
+
+`largestPalindromeProduct(3)` should return 906609.
+
+```js
+assert.strictEqual(largestPalindromeProduct(3), 906609);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function largestPalindromeProduct(n) {
+
+ return true;
+}
+
+largestPalindromeProduct(3);
+```
+
+# --solutions--
+
+```js
+const largestPalindromeProduct = (digit)=>{
+ let start = 1;
+ let end = Number(`1e${digit}`) - 1;
+ let palindrome = [];
+ for(let i=start;i<=end;i++){
+ for(let j=start;j<=end;j++){
+ let product = i*j;
+ let palindromeRegex = /\b(\d)(\d?)(\d?).?\3\2\1\b/gi;
+ palindromeRegex.test(product) && palindrome.push(product);
+ }
+ }
+ return Math.max(...palindrome);
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-40-champernownes-constant.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-40-champernownes-constant.md
new file mode 100644
index 00000000000..c4386bd2d91
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-40-champernownes-constant.md
@@ -0,0 +1,77 @@
+---
+id: 5900f3941000cf542c50fea7
+title: 'Problem 40: Champernowne''s constant'
+challengeType: 1
+forumTopicId: 302066
+dashedName: problem-40-champernownes-constant
+---
+
+# --description--
+
+An irrational decimal fraction is created by concatenating the positive integers:
+
+0.12345678910**1**112131415161718192021...
+
+It can be seen that the 12th digit of the fractional part is 1.
+
+If *dn * represents the *n*th digit of the fractional part, find the value of the following expression.
+
+d1 × d10 × d100 × d1000 × d10000 × d100000 × d1000000
+
+# --hints--
+
+`champernownesConstant(100)` should return a number.
+
+```js
+assert(typeof champernownesConstant(100) === 'number');
+```
+
+`champernownesConstant(100)` should return 5.
+
+```js
+assert.strictEqual(champernownesConstant(100), 5);
+```
+
+`champernownesConstant(1000)` should return 15.
+
+```js
+assert.strictEqual(champernownesConstant(1000), 15);
+```
+
+`champernownesConstant(1000000)` should return 210.
+
+```js
+assert.strictEqual(champernownesConstant(1000000), 210);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function champernownesConstant(n) {
+
+ return true;
+}
+
+champernownesConstant(100);
+```
+
+# --solutions--
+
+```js
+function champernownesConstant(n) {
+ let fractionalPart = '';
+ for (let i = 0; fractionalPart.length <= n; i++) {
+ fractionalPart += i.toString();
+ }
+
+ let product = 1;
+ for (let i = 0; i < n.toString().length; i++) {
+ const index = 10 ** i;
+ product *= parseInt(fractionalPart[index], 10);
+ }
+
+ return product;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-41-pandigital-prime.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-41-pandigital-prime.md
new file mode 100644
index 00000000000..a774fa31167
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-41-pandigital-prime.md
@@ -0,0 +1,117 @@
+---
+id: 5900f3951000cf542c50fea8
+title: 'Problem 41: Pandigital prime'
+challengeType: 1
+forumTopicId: 302078
+dashedName: problem-41-pandigital-prime
+---
+
+# --description--
+
+We shall say that an `n`-digit number is pandigital if it makes use of all the digits 1 to `n` exactly once. For example, 2143 is a 4-digit pandigital and is also prime.
+
+What is the largest `n`-length digit pandigital prime that exists?
+
+# --hints--
+
+`pandigitalPrime(4)` should return a number.
+
+```js
+assert(typeof pandigitalPrime(4) === 'number');
+```
+
+`pandigitalPrime(4)` should return 4231.
+
+```js
+assert(pandigitalPrime(4) == 4231);
+```
+
+`pandigitalPrime(7)` should return 7652413.
+
+```js
+assert(pandigitalPrime(7) == 7652413);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pandigitalPrime(n) {
+
+ return n;
+}
+
+pandigitalPrime(7);
+```
+
+# --solutions--
+
+```js
+function pandigitalPrime(n) {
+ function isPrime(num) {
+ for (let i = 2, s = Math.sqrt(num); i <= s; i++) {
+ if (num % i === 0) {
+ return false;
+ }
+ }
+ return num !== 1;
+ }
+
+ function getPermutations(n) {
+ if (n === 1) {
+ permutations.push(digitsArr.join(''));
+ } else {
+ for (let i = 0; i < n - 1; i++) {
+ getPermutations(n - 1);
+ // swap(n % 2 === 0 ? i : 0, n - 1);
+ if (n % 2 === 0) {
+ swap(i, n - 1);
+ } else {
+ swap(0, n - 1);
+ }
+ }
+ getPermutations(n - 1);
+ }
+ }
+ function swap(x, y) {
+ let temp = digitsArr[x];
+ digitsArr[x] = digitsArr[y];
+ digitsArr[y] = temp;
+ }
+ let max = 0;
+ let permutations = [];
+ let digitsArr;
+ let pandigitalNum = '';
+
+ for (let max = n; max > 0; max--) {
+ pandigitalNum += max;
+ }
+
+ for (let i = 0; i < pandigitalNum.length; i++) {
+ if (max > 0) {
+ break;
+ } else {
+ permutations = [];
+ const currMax = pandigitalNum.slice(i);
+ digitsArr = currMax.split('');
+ getPermutations(digitsArr.length);
+
+ // sort permutations in descending order
+ permutations.sort(function(a, b) {
+ return b - a;
+ });
+
+ for (let perm of permutations) {
+ const thisPerm = parseInt(perm);
+ if (isPrime(thisPerm)) {
+ max = thisPerm;
+ break;
+ }
+ }
+ }
+ }
+
+ return max;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-42-coded-triangle-numbers.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-42-coded-triangle-numbers.md
new file mode 100644
index 00000000000..abda6f2d137
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-42-coded-triangle-numbers.md
@@ -0,0 +1,71 @@
+---
+id: 5900f3961000cf542c50fea9
+title: 'Problem 42: Coded triangle numbers'
+challengeType: 1
+forumTopicId: 302089
+dashedName: problem-42-coded-triangle-numbers
+---
+
+# --description--
+
+The `n`th term of the sequence of triangle numbers is given by, `tn` = ½`n`(`n`+1); so the first ten triangle numbers are:
+
+1, 3, 6, 10, 15, 21, 28, 36, 45, 55, ...
+
+By converting each letter in a word to a number corresponding to its alphabetical position and adding these values we form a word value. For example, the word value for SKY is 19 + 11 + 25 = 55 = `t`10 . If the word value is a triangle number then we shall call the word a triangle word.
+
+Using words array of `n`-length, how many are triangle words?
+
+# --hints--
+
+`codedTriangleNumbers(1400)` should return a number.
+
+```js
+assert(typeof codedTriangleNumbers(1400) === 'number');
+```
+
+`codedTriangleNumbers(1400)` should return 129.
+
+```js
+assert(codedTriangleNumbers(1400) == 129);
+```
+
+`codedTriangleNumbers(1500)` should return 137.
+
+```js
+assert(codedTriangleNumbers(1500) == 137);
+```
+
+`codedTriangleNumbers(1600)` should return 141.
+
+```js
+assert(codedTriangleNumbers(1600) == 141);
+```
+
+`codedTriangleNumbers(1786)` should return 162.
+
+```js
+assert(codedTriangleNumbers(1786) == 162);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function codedTriangleNumbers(n) {
+
+ return 1;
+}
+// Only change code above this line
+
+const words = ['A','ABILITY','ABLE','ABOUT','ABOVE','ABSENCE','ABSOLUTELY','ACADEMIC','ACCEPT','ACCESS','ACCIDENT','ACCOMPANY','ACCORDING','ACCOUNT','ACHIEVE','ACHIEVEMENT','ACID','ACQUIRE','ACROSS','ACT','ACTION','ACTIVE','ACTIVITY','ACTUAL','ACTUALLY','ADD','ADDITION','ADDITIONAL','ADDRESS','ADMINISTRATION','ADMIT','ADOPT','ADULT','ADVANCE','ADVANTAGE','ADVICE','ADVISE','AFFAIR','AFFECT','AFFORD','AFRAID','AFTER','AFTERNOON','AFTERWARDS','AGAIN','AGAINST','AGE','AGENCY','AGENT','AGO','AGREE','AGREEMENT','AHEAD','AID','AIM','AIR','AIRCRAFT','ALL','ALLOW','ALMOST','ALONE','ALONG','ALREADY','ALRIGHT','ALSO','ALTERNATIVE','ALTHOUGH','ALWAYS','AMONG','AMONGST','AMOUNT','AN','ANALYSIS','ANCIENT','AND','ANIMAL','ANNOUNCE','ANNUAL','ANOTHER','ANSWER','ANY','ANYBODY','ANYONE','ANYTHING','ANYWAY','APART','APPARENT','APPARENTLY','APPEAL','APPEAR','APPEARANCE','APPLICATION','APPLY','APPOINT','APPOINTMENT','APPROACH','APPROPRIATE','APPROVE','AREA','ARGUE','ARGUMENT','ARISE','ARM','ARMY','AROUND','ARRANGE','ARRANGEMENT','ARRIVE','ART','ARTICLE','ARTIST','AS','ASK','ASPECT','ASSEMBLY','ASSESS','ASSESSMENT','ASSET','ASSOCIATE','ASSOCIATION','ASSUME','ASSUMPTION','AT','ATMOSPHERE','ATTACH','ATTACK','ATTEMPT','ATTEND','ATTENTION','ATTITUDE','ATTRACT','ATTRACTIVE','AUDIENCE','AUTHOR','AUTHORITY','AVAILABLE','AVERAGE','AVOID','AWARD','AWARE','AWAY','AYE','BABY','BACK','BACKGROUND','BAD','BAG','BALANCE','BALL','BAND','BANK','BAR','BASE','BASIC','BASIS','BATTLE','BE','BEAR','BEAT','BEAUTIFUL','BECAUSE','BECOME','BED','BEDROOM','BEFORE','BEGIN','BEGINNING','BEHAVIOUR','BEHIND','BELIEF','BELIEVE','BELONG','BELOW','BENEATH','BENEFIT','BESIDE','BEST','BETTER','BETWEEN','BEYOND','BIG','BILL','BIND','BIRD','BIRTH','BIT','BLACK','BLOCK','BLOOD','BLOODY','BLOW','BLUE','BOARD','BOAT','BODY','BONE','BOOK','BORDER','BOTH','BOTTLE','BOTTOM','BOX','BOY','BRAIN','BRANCH','BREAK','BREATH','BRIDGE','BRIEF','BRIGHT','BRING','BROAD','BROTHER','BUDGET','BUILD','BUILDING','BURN','BUS','BUSINESS','BUSY','BUT','BUY','BY','CABINET','CALL','CAMPAIGN','CAN','CANDIDATE','CAPABLE','CAPACITY','CAPITAL','CAR','CARD','CARE','CAREER','CAREFUL','CAREFULLY','CARRY','CASE','CASH','CAT','CATCH','CATEGORY','CAUSE','CELL','CENTRAL','CENTRE','CENTURY','CERTAIN','CERTAINLY','CHAIN','CHAIR','CHAIRMAN','CHALLENGE','CHANCE','CHANGE','CHANNEL','CHAPTER','CHARACTER','CHARACTERISTIC','CHARGE','CHEAP','CHECK','CHEMICAL','CHIEF','CHILD','CHOICE','CHOOSE','CHURCH','CIRCLE','CIRCUMSTANCE','CITIZEN','CITY','CIVIL','CLAIM','CLASS','CLEAN','CLEAR','CLEARLY','CLIENT','CLIMB','CLOSE','CLOSELY','CLOTHES','CLUB','COAL','CODE','COFFEE','COLD','COLLEAGUE','COLLECT','COLLECTION','COLLEGE','COLOUR','COMBINATION','COMBINE','COME','COMMENT','COMMERCIAL','COMMISSION','COMMIT','COMMITMENT','COMMITTEE','COMMON','COMMUNICATION','COMMUNITY','COMPANY','COMPARE','COMPARISON','COMPETITION','COMPLETE','COMPLETELY','COMPLEX','COMPONENT','COMPUTER','CONCENTRATE','CONCENTRATION','CONCEPT','CONCERN','CONCERNED','CONCLUDE','CONCLUSION','CONDITION','CONDUCT','CONFERENCE','CONFIDENCE','CONFIRM','CONFLICT','CONGRESS','CONNECT','CONNECTION','CONSEQUENCE','CONSERVATIVE','CONSIDER','CONSIDERABLE','CONSIDERATION','CONSIST','CONSTANT','CONSTRUCTION','CONSUMER','CONTACT','CONTAIN','CONTENT','CONTEXT','CONTINUE','CONTRACT','CONTRAST','CONTRIBUTE','CONTRIBUTION','CONTROL','CONVENTION','CONVERSATION','COPY','CORNER','CORPORATE','CORRECT','COS','COST','COULD','COUNCIL','COUNT','COUNTRY','COUNTY','COUPLE','COURSE','COURT','COVER','CREATE','CREATION','CREDIT','CRIME','CRIMINAL','CRISIS','CRITERION','CRITICAL','CRITICISM','CROSS','CROWD','CRY','CULTURAL','CULTURE','CUP','CURRENT','CURRENTLY','CURRICULUM','CUSTOMER','CUT','DAMAGE','DANGER','DANGEROUS','DARK','DATA','DATE','DAUGHTER','DAY','DEAD','DEAL','DEATH','DEBATE','DEBT','DECADE','DECIDE','DECISION','DECLARE','DEEP','DEFENCE','DEFENDANT','DEFINE','DEFINITION','DEGREE','DELIVER','DEMAND','DEMOCRATIC','DEMONSTRATE','DENY','DEPARTMENT','DEPEND','DEPUTY','DERIVE','DESCRIBE','DESCRIPTION','DESIGN','DESIRE','DESK','DESPITE','DESTROY','DETAIL','DETAILED','DETERMINE','DEVELOP','DEVELOPMENT','DEVICE','DIE','DIFFERENCE','DIFFERENT','DIFFICULT','DIFFICULTY','DINNER','DIRECT','DIRECTION','DIRECTLY','DIRECTOR','DISAPPEAR','DISCIPLINE','DISCOVER','DISCUSS','DISCUSSION','DISEASE','DISPLAY','DISTANCE','DISTINCTION','DISTRIBUTION','DISTRICT','DIVIDE','DIVISION','DO','DOCTOR','DOCUMENT','DOG','DOMESTIC','DOOR','DOUBLE','DOUBT','DOWN','DRAW','DRAWING','DREAM','DRESS','DRINK','DRIVE','DRIVER','DROP','DRUG','DRY','DUE','DURING','DUTY','EACH','EAR','EARLY','EARN','EARTH','EASILY','EAST','EASY','EAT','ECONOMIC','ECONOMY','EDGE','EDITOR','EDUCATION','EDUCATIONAL','EFFECT','EFFECTIVE','EFFECTIVELY','EFFORT','EGG','EITHER','ELDERLY','ELECTION','ELEMENT','ELSE','ELSEWHERE','EMERGE','EMPHASIS','EMPLOY','EMPLOYEE','EMPLOYER','EMPLOYMENT','EMPTY','ENABLE','ENCOURAGE','END','ENEMY','ENERGY','ENGINE','ENGINEERING','ENJOY','ENOUGH','ENSURE','ENTER','ENTERPRISE','ENTIRE','ENTIRELY','ENTITLE','ENTRY','ENVIRONMENT','ENVIRONMENTAL','EQUAL','EQUALLY','EQUIPMENT','ERROR','ESCAPE','ESPECIALLY','ESSENTIAL','ESTABLISH','ESTABLISHMENT','ESTATE','ESTIMATE','EVEN','EVENING','EVENT','EVENTUALLY','EVER','EVERY','EVERYBODY','EVERYONE','EVERYTHING','EVIDENCE','EXACTLY','EXAMINATION','EXAMINE','EXAMPLE','EXCELLENT','EXCEPT','EXCHANGE','EXECUTIVE','EXERCISE','EXHIBITION','EXIST','EXISTENCE','EXISTING','EXPECT','EXPECTATION','EXPENDITURE','EXPENSE','EXPENSIVE','EXPERIENCE','EXPERIMENT','EXPERT','EXPLAIN','EXPLANATION','EXPLORE','EXPRESS','EXPRESSION','EXTEND','EXTENT','EXTERNAL','EXTRA','EXTREMELY','EYE','FACE','FACILITY','FACT','FACTOR','FACTORY','FAIL','FAILURE','FAIR','FAIRLY','FAITH','FALL','FAMILIAR','FAMILY','FAMOUS','FAR','FARM','FARMER','FASHION','FAST','FATHER','FAVOUR','FEAR','FEATURE','FEE','FEEL','FEELING','FEMALE','FEW','FIELD','FIGHT','FIGURE','FILE','FILL','FILM','FINAL','FINALLY','FINANCE','FINANCIAL','FIND','FINDING','FINE','FINGER','FINISH','FIRE','FIRM','FIRST','FISH','FIT','FIX','FLAT','FLIGHT','FLOOR','FLOW','FLOWER','FLY','FOCUS','FOLLOW','FOLLOWING','FOOD','FOOT','FOOTBALL','FOR','FORCE','FOREIGN','FOREST','FORGET','FORM','FORMAL','FORMER','FORWARD','FOUNDATION','FREE','FREEDOM','FREQUENTLY','FRESH','FRIEND','FROM','FRONT','FRUIT','FUEL','FULL','FULLY','FUNCTION','FUND','FUNNY','FURTHER','FUTURE','GAIN','GAME','GARDEN','GAS','GATE','GATHER','GENERAL','GENERALLY','GENERATE','GENERATION','GENTLEMAN','GET','GIRL','GIVE','GLASS','GO','GOAL','GOD','GOLD','GOOD','GOVERNMENT','GRANT','GREAT','GREEN','GREY','GROUND','GROUP','GROW','GROWING','GROWTH','GUEST','GUIDE','GUN','HAIR','HALF','HALL','HAND','HANDLE','HANG','HAPPEN','HAPPY','HARD','HARDLY','HATE','HAVE','HE','HEAD','HEALTH','HEAR','HEART','HEAT','HEAVY','HELL','HELP','HENCE','HER','HERE','HERSELF','HIDE','HIGH','HIGHLY','HILL','HIM','HIMSELF','HIS','HISTORICAL','HISTORY','HIT','HOLD','HOLE','HOLIDAY','HOME','HOPE','HORSE','HOSPITAL','HOT','HOTEL','HOUR','HOUSE','HOUSEHOLD','HOUSING','HOW','HOWEVER','HUGE','HUMAN','HURT','HUSBAND','I','IDEA','IDENTIFY','IF','IGNORE','ILLUSTRATE','IMAGE','IMAGINE','IMMEDIATE','IMMEDIATELY','IMPACT','IMPLICATION','IMPLY','IMPORTANCE','IMPORTANT','IMPOSE','IMPOSSIBLE','IMPRESSION','IMPROVE','IMPROVEMENT','IN','INCIDENT','INCLUDE','INCLUDING','INCOME','INCREASE','INCREASED','INCREASINGLY','INDEED','INDEPENDENT','INDEX','INDICATE','INDIVIDUAL','INDUSTRIAL','INDUSTRY','INFLUENCE','INFORM','INFORMATION','INITIAL','INITIATIVE','INJURY','INSIDE','INSIST','INSTANCE','INSTEAD','INSTITUTE','INSTITUTION','INSTRUCTION','INSTRUMENT','INSURANCE','INTEND','INTENTION','INTEREST','INTERESTED','INTERESTING','INTERNAL','INTERNATIONAL','INTERPRETATION','INTERVIEW','INTO','INTRODUCE','INTRODUCTION','INVESTIGATE','INVESTIGATION','INVESTMENT','INVITE','INVOLVE','IRON','IS','ISLAND','ISSUE','IT','ITEM','ITS','ITSELF','JOB','JOIN','JOINT','JOURNEY','JUDGE','JUMP','JUST','JUSTICE','KEEP','KEY','KID','KILL','KIND','KING','KITCHEN','KNEE','KNOW','KNOWLEDGE','LABOUR','LACK','LADY','LAND','LANGUAGE','LARGE','LARGELY','LAST','LATE','LATER','LATTER','LAUGH','LAUNCH','LAW','LAWYER','LAY','LEAD','LEADER','LEADERSHIP','LEADING','LEAF','LEAGUE','LEAN','LEARN','LEAST','LEAVE','LEFT','LEG','LEGAL','LEGISLATION','LENGTH','LESS','LET','LETTER','LEVEL','LIABILITY','LIBERAL','LIBRARY','LIE','LIFE','LIFT','LIGHT','LIKE','LIKELY','LIMIT','LIMITED','LINE','LINK','LIP','LIST','LISTEN','LITERATURE','LITTLE','LIVE','LIVING','LOAN','LOCAL','LOCATION','LONG','LOOK','LORD','LOSE','LOSS','LOT','LOVE','LOVELY','LOW','LUNCH','MACHINE','MAGAZINE','MAIN','MAINLY','MAINTAIN','MAJOR','MAJORITY','MAKE','MALE','MAN','MANAGE','MANAGEMENT','MANAGER','MANNER','MANY','MAP','MARK','MARKET','MARRIAGE','MARRIED','MARRY','MASS','MASTER','MATCH','MATERIAL','MATTER','MAY','MAYBE','ME','MEAL','MEAN','MEANING','MEANS','MEANWHILE','MEASURE','MECHANISM','MEDIA','MEDICAL','MEET','MEETING','MEMBER','MEMBERSHIP','MEMORY','MENTAL','MENTION','MERELY','MESSAGE','METAL','METHOD','MIDDLE','MIGHT','MILE','MILITARY','MILK','MIND','MINE','MINISTER','MINISTRY','MINUTE','MISS','MISTAKE','MODEL','MODERN','MODULE','MOMENT','MONEY','MONTH','MORE','MORNING','MOST','MOTHER','MOTION','MOTOR','MOUNTAIN','MOUTH','MOVE','MOVEMENT','MUCH','MURDER','MUSEUM','MUSIC','MUST','MY','MYSELF','NAME','NARROW','NATION','NATIONAL','NATURAL','NATURE','NEAR','NEARLY','NECESSARILY','NECESSARY','NECK','NEED','NEGOTIATION','NEIGHBOUR','NEITHER','NETWORK','NEVER','NEVERTHELESS','NEW','NEWS','NEWSPAPER','NEXT','NICE','NIGHT','NO','NOBODY','NOD','NOISE','NONE','NOR','NORMAL','NORMALLY','NORTH','NORTHERN','NOSE','NOT','NOTE','NOTHING','NOTICE','NOTION','NOW','NUCLEAR','NUMBER','NURSE','OBJECT','OBJECTIVE','OBSERVATION','OBSERVE','OBTAIN','OBVIOUS','OBVIOUSLY','OCCASION','OCCUR','ODD','OF','OFF','OFFENCE','OFFER','OFFICE','OFFICER','OFFICIAL','OFTEN','OIL','OKAY','OLD','ON','ONCE','ONE','ONLY','ONTO','OPEN','OPERATE','OPERATION','OPINION','OPPORTUNITY','OPPOSITION','OPTION','OR','ORDER','ORDINARY','ORGANISATION','ORGANISE','ORGANIZATION','ORIGIN','ORIGINAL','OTHER','OTHERWISE','OUGHT','OUR','OURSELVES','OUT','OUTCOME','OUTPUT','OUTSIDE','OVER','OVERALL','OWN','OWNER','PACKAGE','PAGE','PAIN','PAINT','PAINTING','PAIR','PANEL','PAPER','PARENT','PARK','PARLIAMENT','PART','PARTICULAR','PARTICULARLY','PARTLY','PARTNER','PARTY','PASS','PASSAGE','PAST','PATH','PATIENT','PATTERN','PAY','PAYMENT','PEACE','PENSION','PEOPLE','PER','PERCENT','PERFECT','PERFORM','PERFORMANCE','PERHAPS','PERIOD','PERMANENT','PERSON','PERSONAL','PERSUADE','PHASE','PHONE','PHOTOGRAPH','PHYSICAL','PICK','PICTURE','PIECE','PLACE','PLAN','PLANNING','PLANT','PLASTIC','PLATE','PLAY','PLAYER','PLEASE','PLEASURE','PLENTY','PLUS','POCKET','POINT','POLICE','POLICY','POLITICAL','POLITICS','POOL','POOR','POPULAR','POPULATION','POSITION','POSITIVE','POSSIBILITY','POSSIBLE','POSSIBLY','POST','POTENTIAL','POUND','POWER','POWERFUL','PRACTICAL','PRACTICE','PREFER','PREPARE','PRESENCE','PRESENT','PRESIDENT','PRESS','PRESSURE','PRETTY','PREVENT','PREVIOUS','PREVIOUSLY','PRICE','PRIMARY','PRIME','PRINCIPLE','PRIORITY','PRISON','PRISONER','PRIVATE','PROBABLY','PROBLEM','PROCEDURE','PROCESS','PRODUCE','PRODUCT','PRODUCTION','PROFESSIONAL','PROFIT','PROGRAM','PROGRAMME','PROGRESS','PROJECT','PROMISE','PROMOTE','PROPER','PROPERLY','PROPERTY','PROPORTION','PROPOSE','PROPOSAL','PROSPECT','PROTECT','PROTECTION','PROVE','PROVIDE','PROVIDED','PROVISION','PUB','PUBLIC','PUBLICATION','PUBLISH','PULL','PUPIL','PURPOSE','PUSH','PUT','QUALITY','QUARTER','QUESTION','QUICK','QUICKLY','QUIET','QUITE','RACE','RADIO','RAILWAY','RAIN','RAISE','RANGE','RAPIDLY','RARE','RATE','RATHER','REACH','REACTION','READ','READER','READING','READY','REAL','REALISE','REALITY','REALIZE','REALLY','REASON','REASONABLE','RECALL','RECEIVE','RECENT','RECENTLY','RECOGNISE','RECOGNITION','RECOGNIZE','RECOMMEND','RECORD','RECOVER','RED','REDUCE','REDUCTION','REFER','REFERENCE','REFLECT','REFORM','REFUSE','REGARD','REGION','REGIONAL','REGULAR','REGULATION','REJECT','RELATE','RELATION','RELATIONSHIP','RELATIVE','RELATIVELY','RELEASE','RELEVANT','RELIEF','RELIGION','RELIGIOUS','RELY','REMAIN','REMEMBER','REMIND','REMOVE','REPEAT','REPLACE','REPLY','REPORT','REPRESENT','REPRESENTATION','REPRESENTATIVE','REQUEST','REQUIRE','REQUIREMENT','RESEARCH','RESOURCE','RESPECT','RESPOND','RESPONSE','RESPONSIBILITY','RESPONSIBLE','REST','RESTAURANT','RESULT','RETAIN','RETURN','REVEAL','REVENUE','REVIEW','REVOLUTION','RICH','RIDE','RIGHT','RING','RISE','RISK','RIVER','ROAD','ROCK','ROLE','ROLL','ROOF','ROOM','ROUND','ROUTE','ROW','ROYAL','RULE','RUN','RURAL','SAFE','SAFETY','SALE','SAME','SAMPLE','SATISFY','SAVE','SAY','SCALE','SCENE','SCHEME','SCHOOL','SCIENCE','SCIENTIFIC','SCIENTIST','SCORE','SCREEN','SEA','SEARCH','SEASON','SEAT','SECOND','SECONDARY','SECRETARY','SECTION','SECTOR','SECURE','SECURITY','SEE','SEEK','SEEM','SELECT','SELECTION','SELL','SEND','SENIOR','SENSE','SENTENCE','SEPARATE','SEQUENCE','SERIES','SERIOUS','SERIOUSLY','SERVANT','SERVE','SERVICE','SESSION','SET','SETTLE','SETTLEMENT','SEVERAL','SEVERE','SEX','SEXUAL','SHAKE','SHALL','SHAPE','SHARE','SHE','SHEET','SHIP','SHOE','SHOOT','SHOP','SHORT','SHOT','SHOULD','SHOULDER','SHOUT','SHOW','SHUT','SIDE','SIGHT','SIGN','SIGNAL','SIGNIFICANCE','SIGNIFICANT','SILENCE','SIMILAR','SIMPLE','SIMPLY','SINCE','SING','SINGLE','SIR','SISTER','SIT','SITE','SITUATION','SIZE','SKILL','SKIN','SKY','SLEEP','SLIGHTLY','SLIP','SLOW','SLOWLY','SMALL','SMILE','SO','SOCIAL','SOCIETY','SOFT','SOFTWARE','SOIL','SOLDIER','SOLICITOR','SOLUTION','SOME','SOMEBODY','SOMEONE','SOMETHING','SOMETIMES','SOMEWHAT','SOMEWHERE','SON','SONG','SOON','SORRY','SORT','SOUND','SOURCE','SOUTH','SOUTHERN','SPACE','SPEAK','SPEAKER','SPECIAL','SPECIES','SPECIFIC','SPEECH','SPEED','SPEND','SPIRIT','SPORT','SPOT','SPREAD','SPRING','STAFF','STAGE','STAND','STANDARD','STAR','START','STATE','STATEMENT','STATION','STATUS','STAY','STEAL','STEP','STICK','STILL','STOCK','STONE','STOP','STORE','STORY','STRAIGHT','STRANGE','STRATEGY','STREET','STRENGTH','STRIKE','STRONG','STRONGLY','STRUCTURE','STUDENT','STUDIO','STUDY','STUFF','STYLE','SUBJECT','SUBSTANTIAL','SUCCEED','SUCCESS','SUCCESSFUL','SUCH','SUDDENLY','SUFFER','SUFFICIENT','SUGGEST','SUGGESTION','SUITABLE','SUM','SUMMER','SUN','SUPPLY','SUPPORT','SUPPOSE','SURE','SURELY','SURFACE','SURPRISE','SURROUND','SURVEY','SURVIVE','SWITCH','SYSTEM','TABLE','TAKE','TALK','TALL','TAPE','TARGET','TASK','TAX','TEA','TEACH','TEACHER','TEACHING','TEAM','TEAR','TECHNICAL','TECHNIQUE','TECHNOLOGY','TELEPHONE','TELEVISION','TELL','TEMPERATURE','TEND','TERM','TERMS','TERRIBLE','TEST','TEXT','THAN','THANK','THANKS','THAT','THE','THEATRE','THEIR','THEM','THEME','THEMSELVES','THEN','THEORY','THERE','THEREFORE','THESE','THEY','THIN','THING','THINK','THIS','THOSE','THOUGH','THOUGHT','THREAT','THREATEN','THROUGH','THROUGHOUT','THROW','THUS','TICKET','TIME','TINY','TITLE','TO','TODAY','TOGETHER','TOMORROW','TONE','TONIGHT','TOO','TOOL','TOOTH','TOP','TOTAL','TOTALLY','TOUCH','TOUR','TOWARDS','TOWN','TRACK','TRADE','TRADITION','TRADITIONAL','TRAFFIC','TRAIN','TRAINING','TRANSFER','TRANSPORT','TRAVEL','TREAT','TREATMENT','TREATY','TREE','TREND','TRIAL','TRIP','TROOP','TROUBLE','TRUE','TRUST','TRUTH','TRY','TURN','TWICE','TYPE','TYPICAL','UNABLE','UNDER','UNDERSTAND','UNDERSTANDING','UNDERTAKE','UNEMPLOYMENT','UNFORTUNATELY','UNION','UNIT','UNITED','UNIVERSITY','UNLESS','UNLIKELY','UNTIL','UP','UPON','UPPER','URBAN','US','USE','USED','USEFUL','USER','USUAL','USUALLY','VALUE','VARIATION','VARIETY','VARIOUS','VARY','VAST','VEHICLE','VERSION','VERY','VIA','VICTIM','VICTORY','VIDEO','VIEW','VILLAGE','VIOLENCE','VISION','VISIT','VISITOR','VITAL','VOICE','VOLUME','VOTE','WAGE','WAIT','WALK','WALL','WANT','WAR','WARM','WARN','WASH','WATCH','WATER','WAVE','WAY','WE','WEAK','WEAPON','WEAR','WEATHER','WEEK','WEEKEND','WEIGHT','WELCOME','WELFARE','WELL','WEST','WESTERN','WHAT','WHATEVER','WHEN','WHERE','WHEREAS','WHETHER','WHICH','WHILE','WHILST','WHITE','WHO','WHOLE','WHOM','WHOSE','WHY','WIDE','WIDELY','WIFE','WILD','WILL','WIN','WIND','WINDOW','WINE','WING','WINNER','WINTER','WISH','WITH','WITHDRAW','WITHIN','WITHOUT','WOMAN','WONDER','WONDERFUL','WOOD','WORD','WORK','WORKER','WORKING','WORKS','WORLD','WORRY','WORTH','WOULD','WRITE','WRITER','WRITING','WRONG','YARD','YEAH','YEAR','YES','YESTERDAY','YET','YOU','YOUNG','YOUR','YOURSELF','YOUTH'];
+
+codedTriangleNumbers(1786);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
new file mode 100644
index 00000000000..53ae7b50350
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-43-sub-string-divisibility.md
@@ -0,0 +1,126 @@
+---
+id: 5900f3971000cf542c50feaa
+title: 'Problem 43: Sub-string divisibility'
+challengeType: 1
+forumTopicId: 302100
+dashedName: problem-43-sub-string-divisibility
+---
+
+# --description--
+
+The number, 1406357289, is a 0 to 9 pandigital number because it is made up of each of the digits 0 to 9 in some order, but it also has a rather interesting sub-string divisibility property.
+
+Let $d_1$ be the $1^{st}$ digit, $d_2$ be the $2^{nd}$ digit, and so on. In this way, we note the following:
+
+- ${d_2}{d_3}{d_4} = 406$ is divisible by 2
+- ${d_3}{d_4}{d_5} = 063$ is divisible by 3
+- ${d_4}{d_5}{d_6} = 635$ is divisible by 5
+- ${d_5}{d_6}{d_7} = 357$ is divisible by 7
+- ${d_6}{d_7}{d_8} = 572$ is divisible by 11
+- ${d_7}{d_8}{d_9} = 728$ is divisible by 13
+- ${d_8}{d_9}{d_{10}} = 289$ is divisible by 17
+
+Find the sum of all 0 to `n` pandigital numbers with sub-strings fulfilling `n - 2` of these divisibility properties.
+
+**Note:** Pandigital numbers starting with `0` are to be considered in the result.
+
+# --hints--
+
+`substringDivisibility(5)` should return a number.
+
+```js
+assert(typeof substringDivisibility(5) === 'number');
+```
+
+`substringDivisibility(5)` should return `12444480`.
+
+```js
+assert.strictEqual(substringDivisibility(5), 12444480)
+```
+
+`substringDivisibility(7)` should return `1099210170`.
+
+```js
+assert.strictEqual(substringDivisibility(7), 1099210170)
+```
+
+`substringDivisibility(8)` should return `1113342912`.
+
+```js
+assert.strictEqual(substringDivisibility(8), 1113342912)
+```
+
+`substringDivisibility(9)` should return `16695334890`.
+
+```js
+assert.strictEqual(substringDivisibility(9), 16695334890)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function substringDivisibility(n) {
+
+ return true;
+}
+
+substringDivisibility(5);
+```
+
+# --solutions--
+
+```js
+function substringDivisibility(n) {
+ function isSubDivisable(digits) {
+ const factors = [2, 3, 5, 7, 11, 13, 17];
+
+ for (let i = 1; i < digits.length - 2; i++) {
+ const subNumber = digits[i] * 100 + digits[i + 1] * 10 + digits[i + 2];
+ if (subNumber % factors[i - 1] !== 0) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ function heapsPermutations(k, digits, conditionCheck, results) {
+ if (k === 1) {
+ if (conditionCheck(digits)) {
+ const number = parseInt(digits.join(''), 10);
+ results.push(number);
+ }
+ return;
+ }
+
+ heapsPermutations(k - 1, digits, conditionCheck, results);
+
+ for (let i = 0; i < k - 1; i++) {
+ if (k % 2 === 0) {
+ [digits[i], digits[k - 1]] = [digits[k - 1], digits[i]];
+ } else {
+ [digits[0], digits[k - 1]] = [digits[k - 1], digits[0]];
+ }
+ heapsPermutations(k - 1, digits, conditionCheck, results);
+ }
+ return;
+ }
+
+ const allowedDigits = [...new Array(n + 1).keys()];
+ const divisablePandigitals = [];
+ heapsPermutations(
+ allowedDigits.length,
+ allowedDigits,
+ isSubDivisable,
+ divisablePandigitals
+ );
+
+ let sum = 0;
+ for (let i = 0; i < divisablePandigitals.length; i++) {
+ sum += divisablePandigitals[i];
+ }
+
+ return sum;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-44-pentagon-numbers.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-44-pentagon-numbers.md
new file mode 100644
index 00000000000..44905c1be79
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-44-pentagon-numbers.md
@@ -0,0 +1,77 @@
+---
+id: 5900f3981000cf542c50feab
+title: 'Problem 44: Pentagon numbers'
+challengeType: 1
+forumTopicId: 302111
+dashedName: problem-44-pentagon-numbers
+---
+
+# --description--
+
+Pentagonal numbers are generated by the formula, Pn =`n`(3`n`−1)/2. The first ten pentagonal numbers are:
+
+1, 5, 12, 22, 35, 51, 70, 92, 117, 145, ...
+
+It can be seen that P4 + P7 = 22 + 70 = 92 = P8 . However, their difference, 70 − 22 = 48, is not pentagonal.
+
+Find the pair of pentagonal numbers, Pj and Pk , for which their sum and difference are pentagonal and D = |Pk − Pj | is minimized; what is the value of D?
+
+# --hints--
+
+`pentagonNumbers()` should return a number.
+
+```js
+assert(typeof pentagonNumbers() === 'number');
+```
+
+`pentagonNumbers()` should return 5482660.
+
+```js
+assert.strictEqual(pentagonNumbers(), 5482660);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pentagonNumbers() {
+
+ return true;
+}
+
+pentagonNumbers();
+```
+
+# --solutions--
+
+```js
+function pentagonNumbers() {
+ function isPentagonal(num) {
+ // Formula found by solving pentagonal number
+ // equation for n.
+ const n = (Math.sqrt((24 * num) + 1) + 1) / 6;
+ return n % 1 === 0;
+ }
+
+ function pentagonal(num) {
+ return (num * ((3 * num) - 1)) / 2;
+ }
+ let result;
+ let i = 1;
+ while (!result) {
+ i++;
+ const num1 = (i * ((3 * i) - 1)) / 2; // Pentagonal num formula
+ const minDiff = num1 - (((i - 1) * ((3 * (i - 1)) - 1)) / 2);
+ let j = i - 1;
+ while (j > 0 && !result) {
+ const num2 = (j * ((3 * j) - 1)) / 2;
+ if (isPentagonal(num1 - num2) && isPentagonal(num1 + num2)) {
+ result = num1 - num2;
+ }
+ j--;
+ }
+ }
+ return result;
+ }
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-45-triangular-pentagonal-and-hexagonal.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-45-triangular-pentagonal-and-hexagonal.md
new file mode 100644
index 00000000000..e80bcc8dd50
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-45-triangular-pentagonal-and-hexagonal.md
@@ -0,0 +1,82 @@
+---
+id: 5900f3991000cf542c50feac
+title: 'Problem 45: Triangular, pentagonal, and hexagonal'
+challengeType: 1
+forumTopicId: 302122
+dashedName: problem-45-triangular-pentagonal-and-hexagonal
+---
+
+# --description--
+
+Triangle, pentagonal, and hexagonal numbers are generated by the following formulae:
+
+Triangle
Tn =n (n +1)/2
1, 3, 6, 10, 15, ...
Pentagonal
Pn =n (3n −1)/2
1, 5, 12, 22, 35, ...
Hexagonal
Hn =n (2n −1)
1, 6, 15, 28, 45, ...
285 = P165 = H143 = 40755.
+
+Find the next triangle number that is also pentagonal and hexagonal.
+
+# --hints--
+
+`triPentaHexa(40756)` should return a number.
+
+```js
+assert(typeof triPentaHexa(40756) === 'number');
+```
+
+`triPentaHexa(40756)` should return 1533776805.
+
+```js
+assert.strictEqual(triPentaHexa(40756), 1533776805);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function triPentaHexa(n) {
+
+ return true;
+}
+
+triPentaHexa(40756);
+```
+
+# --solutions--
+
+```js
+function triPentaHexa(n) {
+ function triangular(num) {
+ return (num * (num + 1)) / 2;
+}
+
+function isPentagonal(num) {
+ // Formula found by completing the square and
+ // solving for n.
+ const n = (Math.sqrt((24 * num) + 1) + 1) / 6;
+ return n % 1 === 0;
+}
+
+ function isHexagonal(num) {
+ // Formula found by completing the square and
+ // solving for n.
+ const n = Math.sqrt(0.5 * (num + (1 / 8))) + 0.25;
+ return n % 1 === 0;
+}
+
+let iTri = n;
+let tri;
+let found = false;
+while (!found) {
+ iTri++;
+ tri = triangular(iTri);
+ if (isPentagonal(tri) && isHexagonal(tri)) {
+ found = true;
+ }
+ }
+ return tri;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-46-goldbachs-other-conjecture.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-46-goldbachs-other-conjecture.md
new file mode 100644
index 00000000000..1bcc859d05e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-46-goldbachs-other-conjecture.md
@@ -0,0 +1,99 @@
+---
+id: 5900f39a1000cf542c50fead
+title: 'Problem 46: Goldbach''s other conjecture'
+challengeType: 1
+forumTopicId: 302134
+dashedName: problem-46-goldbachs-other-conjecture
+---
+
+# --description--
+
+It was proposed by Christian Goldbach that every odd composite number can be written as the sum of a prime and twice a square.
+
+
+ 9 = 7 + 2×12 2 2 2 2 2
+
+
+It turns out that the conjecture was false.
+
+What is the smallest odd composite that cannot be written as the sum of a prime and twice a square?
+
+# --hints--
+
+`goldbachsOtherConjecture()` should return a number.
+
+```js
+assert(typeof goldbachsOtherConjecture() === 'number');
+```
+
+`goldbachsOtherConjecture()` should return 5777.
+
+```js
+assert.strictEqual(goldbachsOtherConjecture(), 5777);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function goldbachsOtherConjecture() {
+
+ return true;
+}
+
+goldbachsOtherConjecture();
+```
+
+# --solutions--
+
+```js
+function goldbachsOtherConjecture() { function isPrime(num) {
+ if (num < 2) {
+ return false;
+ } else if (num === 2) {
+ return true;
+ }
+ const sqrtOfNum = Math.floor(num ** 0.5);
+ for (let i = 2; i <= sqrtOfNum + 1; i++) {
+ if (num % i === 0) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ function isSquare(num) {
+ return Math.sqrt(num) % 1 === 0;
+ }
+
+ // construct a list of prime numbers
+ const primes = [];
+ for (let i = 2; primes.length < 1000; i++) {
+ if (isPrime(i)) primes.push(i);
+ }
+
+ let num = 3;
+ let answer;
+ while (!answer) {
+ num += 2;
+ if (!isPrime(num)) {
+ let found = false;
+ for (let primeI = 0; primeI < primes.length && !found; primeI++) {
+ const square = (num - primes[primeI]) / 2;
+ if (isSquare(square)) {
+ found = true;
+ break;
+ }
+ }
+ if (!found) answer = num;
+ }
+ }
+ return answer;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-47-distinct-primes-factors.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-47-distinct-primes-factors.md
new file mode 100644
index 00000000000..3b79403a4ea
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-47-distinct-primes-factors.md
@@ -0,0 +1,94 @@
+---
+id: 5900f39c1000cf542c50feae
+title: 'Problem 47: Distinct primes factors'
+challengeType: 1
+forumTopicId: 302145
+dashedName: problem-47-distinct-primes-factors
+---
+
+# --description--
+
+The first two consecutive numbers to have two distinct prime factors are:
+
+
+ 14 = 2 × 7
+
+The first three consecutive numbers to have three distinct prime factors are:
+
+
+ 644 = 22 × 7 × 23
+
+Find the first four consecutive integers to have four distinct prime factors each. What is the first of these numbers?
+
+# --hints--
+
+`distinctPrimeFactors(2, 2)` should return a number.
+
+```js
+assert(typeof distinctPrimeFactors(2, 2) === 'number');
+```
+
+`distinctPrimeFactors(2, 2)` should return 14.
+
+```js
+assert.strictEqual(distinctPrimeFactors(2, 2), 14);
+```
+
+`distinctPrimeFactors(3, 3)` should return 644.
+
+```js
+assert.strictEqual(distinctPrimeFactors(3, 3), 644);
+```
+
+`distinctPrimeFactors(4, 4)` should return 134043.
+
+```js
+assert.strictEqual(distinctPrimeFactors(4, 4), 134043);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function distinctPrimeFactors(targetNumPrimes, targetConsecutive) {
+
+ return true;
+}
+
+distinctPrimeFactors(4, 4);
+```
+
+# --solutions--
+
+```js
+function distinctPrimeFactors(targetNumPrimes, targetConsecutive) {
+ const primeLimit = targetNumPrimes * targetConsecutive * 10000;
+ const numFactors = Array(primeLimit).fill(0);
+
+ let numConsecutive = 0;
+ for (let i = 2; i < primeLimit; i++) {
+ if (numFactors[i] === targetNumPrimes) {
+ // Current number is composite with target num factors
+ numConsecutive++;
+ if (numConsecutive === targetConsecutive) {
+ return i - numConsecutive + 1;
+ }
+ } else {
+ // Current number is not matching composite
+ numConsecutive = 0;
+ if (numFactors[i] === 0) {
+ // Current number is prime
+ for (let j = i; j < primeLimit; j += i) {
+ numFactors[j]++;
+ }
+ }
+ }
+ }
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-48-self-powers.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-48-self-powers.md
new file mode 100644
index 00000000000..d429c978791
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-48-self-powers.md
@@ -0,0 +1,80 @@
+---
+id: 5900f39c1000cf542c50feaf
+title: 'Problem 48: Self powers'
+challengeType: 1
+forumTopicId: 302157
+dashedName: problem-48-self-powers
+---
+
+# --description--
+
+The series, 11 + 22 + 33 + ... + 1010 = 10405071317.
+
+Find the last ten digits of the series, 11 + 22 + 33 + ... + 10001000 .
+
+# --hints--
+
+`selfPowers(10, 3)` should return a number.
+
+```js
+assert(typeof selfPowers(10, 3) === 'number');
+```
+
+`selfPowers(10, 3)` should return 317.
+
+```js
+assert.strictEqual(selfPowers(10, 3), 317);
+```
+
+`selfPowers(150, 6)` should return 29045.
+
+```js
+assert.strictEqual(selfPowers(150, 6), 29045);
+```
+
+`selfPowers(673, 7)` should return 2473989.
+
+```js
+assert.strictEqual(selfPowers(673, 7), 2473989);
+```
+
+`selfPowers(1000, 10)` should return 9110846700.
+
+```js
+assert.strictEqual(selfPowers(1000, 10), 9110846700);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function selfPowers(power, lastDigits) {
+
+ return true;
+}
+
+selfPowers(1000, 10);
+```
+
+# --solutions--
+
+```js
+function selfPowers(power, lastDigits) {
+ let sum = 0;
+ const modulo = Math.pow(10, lastDigits);
+
+ for (let i = 1; i <= power; i++) {
+ let temp = i;
+ for (let j = 1; j < i; j++) {
+ temp *= i;
+ temp %= modulo;
+ }
+
+ sum += temp;
+ sum %= modulo;
+ }
+
+ return sum;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-49-prime-permutations.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-49-prime-permutations.md
new file mode 100644
index 00000000000..3c0c1d3d362
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-49-prime-permutations.md
@@ -0,0 +1,93 @@
+---
+id: 5900f39d1000cf542c50feb0
+title: 'Problem 49: Prime permutations'
+challengeType: 1
+forumTopicId: 302159
+dashedName: problem-49-prime-permutations
+---
+
+# --description--
+
+The arithmetic sequence, 1487, 4817, 8147, in which each of the terms increases by 3330, is unusual in two ways: (i) each of the three terms are prime, and, (ii) each of the 4-digit numbers are permutations of one another.
+
+There are no arithmetic sequences made up of three 1-, 2-, or 3-digit primes, exhibiting this property, but there is one other 4-digit increasing sequence.
+
+What 12-digit number do you form by concatenating the three terms in this sequence?
+
+# --hints--
+
+`primePermutations()` should return a number.
+
+```js
+assert(typeof primePermutations() === 'number');
+```
+
+`primePermutations()` should return 296962999629.
+
+```js
+assert.strictEqual(primePermutations(), 296962999629);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primePermutations() {
+
+ return true;
+}
+
+primePermutations();
+```
+
+# --solutions--
+
+```js
+function primePermutations() {
+ function arePermutations(num1, num2) {
+ const numStr1 = num1.toString();
+ let numStr2 = num2.toString();
+ if (numStr1.length !== numStr2.length) {
+ return false;
+ }
+
+ for (let i = 0; i < numStr1.length; i++) {
+ const index = numStr2.indexOf(numStr1[i]);
+ if (index === -1) {
+ return false;
+ }
+ numStr2 = numStr2.slice(0, index) + numStr2.slice(index + 1);
+ }
+ return true;
+ }
+
+ function isPrime(num) {
+ if (num < 2) {
+ return false;
+ } else if (num === 2) {
+ return true;
+ }
+ const sqrtOfNum = Math.floor(num ** 0.5);
+ for (let i = 2; i <= sqrtOfNum + 1; i++) {
+ if (num % i === 0) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ for (let num1 = 1000; num1 <= 9999; num1++) {
+ const num2 = num1 + 3330;
+ const num3 = num2 + 3330;
+ if (isPrime(num1) && isPrime(num2) && isPrime(num3)) {
+ if (arePermutations(num1, num2) && arePermutations(num1, num3)
+ && num1 !== 1487) {
+ // concatenate and return numbers
+ return (num1 * 100000000) + (num2 * 10000) + num3;
+ }
+ }
+ }
+ return 0;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-5-smallest-multiple.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-5-smallest-multiple.md
new file mode 100644
index 00000000000..2f20bceaadf
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-5-smallest-multiple.md
@@ -0,0 +1,83 @@
+---
+id: 5900f3711000cf542c50fe84
+title: 'Problem 5: Smallest multiple'
+challengeType: 1
+forumTopicId: 302160
+dashedName: problem-5-smallest-multiple
+---
+
+# --description--
+
+2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any remainder.
+
+What is the smallest positive number that is evenly divisible by all of the numbers from 1 to `n`?
+
+# --hints--
+
+`smallestMult(5)` should return a number.
+
+```js
+assert(typeof smallestMult(5) === 'number');
+```
+
+`smallestMult(5)` should return 60.
+
+```js
+assert.strictEqual(smallestMult(5), 60);
+```
+
+`smallestMult(7)` should return 420.
+
+```js
+assert.strictEqual(smallestMult(7), 420);
+```
+
+`smallestMult(10)` should return 2520.
+
+```js
+assert.strictEqual(smallestMult(10), 2520);
+```
+
+`smallestMult(13)` should return 360360.
+
+```js
+assert.strictEqual(smallestMult(13), 360360);
+```
+
+`smallestMult(20)` should return 232792560.
+
+```js
+assert.strictEqual(smallestMult(20), 232792560);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function smallestMult(n) {
+
+ return true;
+}
+
+smallestMult(20);
+```
+
+# --solutions--
+
+```js
+function smallestMult(n){
+ function gcd(a, b) {
+ return b === 0 ? a : gcd(b, a%b); // Euclidean algorithm
+ }
+
+ function lcm(a, b) {
+ return a * b / gcd(a, b);
+ }
+ var result = 1;
+ for(var i = 2; i <= n; i++) {
+ result = lcm(result, i);
+ }
+ return result;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
new file mode 100644
index 00000000000..7cd5bc67b14
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-50-consecutive-prime-sum.md
@@ -0,0 +1,139 @@
+---
+id: 5900f39e1000cf542c50feb1
+title: 'Problem 50: Consecutive prime sum'
+challengeType: 1
+forumTopicId: 302161
+dashedName: problem-50-consecutive-prime-sum
+---
+
+# --description--
+
+The prime 41, can be written as the sum of six consecutive primes:
+
+41 = 2 + 3 + 5 + 7 + 11 + 13
+
+This is the longest sum of consecutive primes that adds to a prime below one-hundred.
+
+The longest sum of consecutive primes below one-thousand that adds to a prime, contains 21 terms, and is equal to 953.
+
+Which prime, below one-million, can be written as the sum of the most consecutive primes?
+
+# --hints--
+
+`consecutivePrimeSum(1000)` should return a number.
+
+```js
+assert(typeof consecutivePrimeSum(1000) === 'number');
+```
+
+`consecutivePrimeSum(1000)` should return 953.
+
+```js
+assert.strictEqual(consecutivePrimeSum(1000), 953);
+```
+
+`consecutivePrimeSum(1000000)` should return 997651.
+
+```js
+assert.strictEqual(consecutivePrimeSum(1000000), 997651);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function consecutivePrimeSum(limit) {
+
+ return true;
+}
+
+consecutivePrimeSum(1000000);
+```
+
+# --solutions--
+
+```js
+class PrimeSeive {
+ constructor(num) {
+ const seive = Array(Math.floor((num - 1) / 2)).fill(true);
+ const primes = [2];
+ const upper = Math.floor((num - 1) / 2);
+ const sqrtUpper = Math.floor((Math.sqrt(num) - 1) / 2);
+
+ for (let i = 0; i <= sqrtUpper; i++) {
+ if (seive[i]) {
+ // Mark value in seive array
+ const prime = 2 * i + 3;
+ primes.push(prime);
+ // Mark all multiples of this number as false (not prime)
+ const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSqaredIndex; j < upper; j += prime) {
+ seive[j] = false;
+ }
+ }
+ }
+ for (let i = sqrtUpper + 1; i < upper; i++) {
+ if (seive[i]) {
+ primes.push(2 * i + 3);
+ }
+ }
+
+ this._seive = seive;
+ this._primes = primes;
+ }
+
+ isPrime(num) {
+ return num === 2
+ ? true
+ : num % 2 === 0
+ ? false
+ : this.isOddPrime(num);
+ }
+
+ isOddPrime(num) {
+ return this._seive[(num - 3) / 2];
+ }
+
+ get primes() {
+ return this._primes;
+ }
+};
+
+function consecutivePrimeSum(limit) {
+ // Initalize seive
+ const primeSeive = new PrimeSeive(limit);
+
+ // Initalize for longest sum < 100
+ let bestPrime = 41;
+ let bestI = 0;
+ let bestJ = 5;
+
+ // Find longest sum < limit
+ let sumOfCurrRange = 41;
+ let i = 0, j = 5;
+ // -- Loop while current some starting at i is < limit
+ while (sumOfCurrRange < limit) {
+ let currSum = sumOfCurrRange;
+ // -- Loop while pushing j towards end of PRIMES list
+ // keeping sum under limit
+ while (currSum < limit) {
+ if (primeSeive.isPrime(currSum)) {
+ bestPrime = sumOfCurrRange = currSum;
+ bestI = i;
+ bestJ = j;
+ }
+ // -- Increment inner loop
+ j++;
+ currSum += primeSeive.primes[j];
+ }
+ // -- Increment outer loop
+ i++;
+ j = i + (bestJ - bestI);
+ sumOfCurrRange -= primeSeive.primes[i - 1];
+ sumOfCurrRange += primeSeive.primes[j];
+ }
+ // Return
+ return bestPrime;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
new file mode 100644
index 00000000000..cdbfc3e568b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-51-prime-digit-replacements.md
@@ -0,0 +1,140 @@
+---
+id: 5900f39f1000cf542c50feb2
+title: 'Problem 51: Prime digit replacements'
+challengeType: 1
+forumTopicId: 302162
+dashedName: problem-51-prime-digit-replacements
+---
+
+# --description--
+
+By replacing the 1st digit of the 2-digit number \*3, it turns out that six of the nine possible values: 13, 23, 43, 53, 73, and 83, are all prime.
+
+By replacing the 3rd and 4th digits of 56\*\*3 with the same digit, this 5-digit number is the first example having seven primes among the ten generated numbers, yielding the family: 56003, 56113, 56333, 56443, 56663, 56773, and 56993. Consequently 56003, being the first member of this family, is the smallest prime with this property.
+
+Find the smallest prime which, by replacing part of the number (not necessarily adjacent digits) with the same digit, is part of an `n` prime value family.
+
+# --hints--
+
+`primeDigitReplacements(6)` should return a number.
+
+```js
+assert(typeof primeDigitReplacements(6) === 'number');
+```
+
+`primeDigitReplacements(6)` should return `13`.
+
+```js
+assert.strictEqual(primeDigitReplacements(6), 13);
+```
+
+`primeDigitReplacements(7)` should return `56003`.
+
+```js
+assert.strictEqual(primeDigitReplacements(7), 56003);
+```
+
+`primeDigitReplacements(8)` should return `121313`.
+
+```js
+assert.strictEqual(primeDigitReplacements(8), 121313);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeDigitReplacements(n) {
+
+ return true;
+}
+
+primeDigitReplacements(6);
+```
+
+# --solutions--
+
+```js
+class PrimeSeive {
+ constructor(num) {
+ const seive = Array(Math.floor((num - 1) / 2)).fill(true);
+ const upper = Math.floor((num - 1) / 2);
+ const sqrtUpper = Math.floor((Math.sqrt(num) - 1) / 2);
+
+ for (let i = 0; i <= sqrtUpper; i++) {
+ if (seive[i]) {
+ // Mark value in seive array
+ const prime = 2 * i + 3;
+ // Mark all multiples of this number as false (not prime)
+ const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
+ for (let j = primeSqaredIndex; j < upper; j += prime) {
+ seive[j] = false;
+ }
+ }
+ }
+
+ this._seive = seive;
+ }
+
+ isPrime(num) {
+ return num === 2
+ ? true
+ : num % 2 === 0
+ ? false
+ : this.isOddPrime(num);
+ }
+
+ isOddPrime(num) {
+ return this._seive[(num - 3) / 2];
+ }
+};
+
+function primeDigitReplacements(n) {
+ const primeSeive = new PrimeSeive(n * n * n * 2000);
+
+ function isNFamily(number, n) {
+ const prime = number.toString();
+ const lastDigit = prime[prime.length - 1];
+ return doesReplacingMakeFamily(prime, '0', n) ||
+ doesReplacingMakeFamily(prime, '2', n) ||
+ (lastDigit !== '1' && doesReplacingMakeFamily(prime, '1', n));
+ }
+
+ function doesReplacingMakeFamily(prime, digitToReplace, family) {
+ let miss = 0;
+ const base = parseInt(
+ prime
+ .split('')
+ .map(digit => digit == digitToReplace ? '0' : digit)
+ .join('')
+ );
+ const replacements = parseInt(
+ prime
+ .split('')
+ .map(digit => digit === digitToReplace ? '1' : '0')
+ .join('')
+ );
+ const start = prime[0] === digitToReplace ? 1 : 0;
+ for (let i = start; i < 10; i++) {
+ const nextNumber = base + i * replacements;
+ if (!isPartOfFamily(nextNumber, prime)) miss++;
+ if (10 - start - miss < family) break;
+ }
+ return 10 - start - miss === family;
+ }
+
+ function isPartOfFamily(number, prime) {
+ return (
+ primeSeive.isPrime(number) && number.toString().length === prime.length
+ );
+ }
+
+ for (let number = 1; number < 125000; number++) {
+ if (primeSeive.isPrime(number) && isNFamily(number, n)) {
+ return number;
+ }
+ }
+ return -1;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-52-permuted-multiples.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-52-permuted-multiples.md
new file mode 100644
index 00000000000..7a3886a6e27
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-52-permuted-multiples.md
@@ -0,0 +1,81 @@
+---
+id: 5900f3a01000cf542c50feb3
+title: 'Problem 52: Permuted multiples'
+challengeType: 1
+forumTopicId: 302163
+dashedName: problem-52-permuted-multiples
+---
+
+# --description--
+
+It can be seen that the number, 125874, and its double, 251748, contain exactly the same digits, but in a different order.
+
+Find the smallest positive integer, such that multiplied by integers $\\{2, 3, \ldots, n\\}$, contain the same digits.
+
+# --hints--
+
+`permutedMultiples(2)` should return a number.
+
+```js
+assert(typeof permutedMultiples(2) === 'number');
+```
+
+`permutedMultiples(2)` should return `125874`.
+
+```js
+assert.strictEqual(permutedMultiples(2), 125874);
+```
+
+`permutedMultiples(6)` should return `142857`.
+
+```js
+assert.strictEqual(permutedMultiples(6), 142857);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function permutedMultiples(n) {
+
+ return true;
+}
+
+permutedMultiples(2);
+```
+
+# --solutions--
+
+```js
+function permutedMultiples(n) {
+ const isPermutation = (a, b) =>
+ a.length !== b.length
+ ? false
+ : a.split('').sort().join() === b.split('').sort().join();
+
+
+ let start = 1;
+ let found = false;
+ let result = 0;
+
+ while (!found) {
+ start *= 10;
+ for (let i = start; i < start * 10 / n; i++) {
+ found = true;
+ for (let j = 2; j <= n; j++) {
+ if (!isPermutation(i + '', j * i + '')) {
+ found = false;
+ break;
+ }
+ }
+ if (found) {
+ result = i;
+ break;
+ }
+ }
+ }
+
+ return result;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-53-combinatoric-selections.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-53-combinatoric-selections.md
new file mode 100644
index 00000000000..8d96ff14392
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-53-combinatoric-selections.md
@@ -0,0 +1,89 @@
+---
+id: 5900f3a11000cf542c50feb4
+title: 'Problem 53: Combinatoric selections'
+challengeType: 1
+forumTopicId: 302164
+dashedName: problem-53-combinatoric-selections
+---
+
+# --description--
+
+There are exactly ten ways of selecting three from five, 12345:
+
+123, 124, 125, 134, 135, 145, 234, 235, 245, and 345
+
+In combinatorics, we use the notation, $\\displaystyle \\binom 5 3 = 10$
+
+In general, $\\displaystyle \\binom n r = \\dfrac{n!}{r!(n-r)!}$, where $r \\le n$, $n! = n \\times (n-1) \\times ... \\times 3 \\times 2 \\times 1$, and $0! = 1$.
+
+It is not until $n = 23$, that a value exceeds one-million: $\\displaystyle \\binom {23} {10} = 1144066$.
+
+How many, not necessarily distinct, values of $\\displaystyle \\binom n r$ for $1 \\le n \\le 100$, are greater than one-million?
+
+# --hints--
+
+`combinatoricSelections(1000)` should return a number.
+
+```js
+assert(typeof combinatoricSelections(1000) === 'number');
+```
+
+`combinatoricSelections(1000)` should return 4626.
+
+```js
+assert.strictEqual(combinatoricSelections(1000), 4626);
+```
+
+`combinatoricSelections(10000)` should return 4431.
+
+```js
+assert.strictEqual(combinatoricSelections(10000), 4431);
+```
+
+`combinatoricSelections(100000)` should return 4255.
+
+```js
+assert.strictEqual(combinatoricSelections(100000), 4255);
+```
+
+`combinatoricSelections(1000000)` should return 4075.
+
+```js
+assert.strictEqual(combinatoricSelections(1000000), 4075);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function combinatoricSelections(limit) {
+
+ return 1;
+}
+
+combinatoricSelections(1000000);
+```
+
+# --solutions--
+
+```js
+function combinatoricSelections(limit) {
+ const factorial = n =>
+ Array.apply(null, { length: n })
+ .map((_, i) => i + 1)
+ .reduce((p, c) => p * c, 1);
+
+ let result = 0;
+ const nMax = 100;
+
+ for (let n = 1; n <= nMax; n++) {
+ for (let r = 0; r <= n; r++) {
+ if (factorial(n) / (factorial(r) * factorial(n - r)) >= limit)
+ result++;
+ }
+ }
+
+ return result;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-54-poker-hands.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-54-poker-hands.md
new file mode 100644
index 00000000000..b08e9a13bda
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-54-poker-hands.md
@@ -0,0 +1,1096 @@
+---
+id: 5900f3a21000cf542c50feb5
+title: 'Problem 54: Poker hands'
+challengeType: 1
+forumTopicId: 302165
+dashedName: problem-54-poker-hands
+---
+
+# --description--
+
+In the card game poker, a hand consists of five cards and are ranked, from lowest to highest, in the following way:
+
+
+ High Card: Highest value card.
+ One Pair: Two cards of the same value.
+ Two Pairs: Two different pairs.
+ Three of a Kind: Three cards of the same value.
+ Straight: All cards are consecutive values.
+ Flush: All cards of the same suit.
+ Full House: Three of a kind and a pair.
+ Four of a Kind: Four cards of the same value.
+ Straight Flush: All cards are consecutive values of same suit.
+ Royal Flush: Ten, Jack, Queen, King, Ace, in same suit.
+
+
+The cards are valued in the order: 2, 3, 4, 5, 6, 7, 8, 9, 10, Jack, Queen, King, Ace.
+
+If two players have the same ranked hands then the rank made up of the highest value wins; for example, a pair of eights beats a pair of fives (see example 1 below). But if two ranks tie, for example, both players have a pair of queens, then highest cards in each hand are compared (see example 4 below); if the highest cards tie then the next highest cards are compared, and so on.
+
+Consider the following five hands dealt to two players:
+
+| Hand | Player 1 | Player 2 | Winner |
+| ------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------- |
+| 1 | 5H 5C 6S 7S KD 2 | 5D 8C 9S JS AC 3 | 2D 9C AS AH AC 4 | 4D 6S 9H QH QC 5 | 2H 2D 4C 4D 4S
+ 349 + 943 = 1292,
+
+That is, 349 took three iterations to arrive at a palindrome.
+
+Although no one has proved it yet, it is thought that some numbers, like 196, never produce a palindrome. A number that never forms a palindrome through the reverse and add process is called a Lychrel number. Due to the theoretical nature of these numbers, and for the purpose of this problem, we shall assume that a number is Lychrel until proven otherwise. In addition you are given that for every number below ten-thousand, it will either (i) become a palindrome in less than fifty iterations, or, (ii) no one, with all the computing power that exists, has managed so far to map it to a palindrome. In fact, 10677 is the first number to be shown to require over fifty iterations before producing a palindrome: 4668731596684224866951378664 (53 iterations, 28-digits).
+
+Surprisingly, there are palindromic numbers that are themselves Lychrel numbers; the first example is 4994.
+
+How many Lychrel numbers are there below `num`?
+
+**Note:** Wording was modified slightly on 24 April 2007 to emphasize the theoretical nature of Lychrel numbers.
+
+# --hints--
+
+`countLychrelNumbers(1000)` should return a number.
+
+```js
+assert(typeof countLychrelNumbers(1000) === 'number');
+```
+
+`countLychrelNumbers(1000)` should return 13.
+
+```js
+assert.strictEqual(countLychrelNumbers(1000), 13);
+```
+
+`countLychrelNumbers(3243)` should return 39.
+
+```js
+assert.strictEqual(countLychrelNumbers(3243), 39);
+```
+
+`countLychrelNumbers(5000)` should return 76.
+
+```js
+assert.strictEqual(countLychrelNumbers(5000), 76);
+```
+
+`countLychrelNumbers(7654)` should return 140.
+
+```js
+assert.strictEqual(countLychrelNumbers(7654), 140);
+```
+
+`countLychrelNumbers(10000)` should return 249.
+
+```js
+assert.strictEqual(countLychrelNumbers(10000), 249);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countLychrelNumbers(num) {
+
+ return true;
+}
+
+countLychrelNumbers(10000);
+```
+
+# --solutions--
+
+```js
+const countLychrelNumbers = (size) => {
+ const numReverse = (num) => {
+ return Number(num.toString().split('').reverse().join(''));
+ };
+ const isPalin = (num) => {
+ if (numReverse(num) === num) {
+ return true;
+ }
+ return false;
+ };
+ let total = 0;
+ for (let i = 1; i < size; i++) {
+ let loopCount = 1;
+ let sum = i;
+ while (loopCount < 50) {
+ sum = sum + numReverse(sum);
+ if (isPalin(sum)) {
+ break;
+ } else {
+ loopCount++;
+ }
+ }
+ if (loopCount === 50) {
+ total++;
+ }
+ }
+ return total;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-56-powerful-digit-sum.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-56-powerful-digit-sum.md
new file mode 100644
index 00000000000..e445973f332
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-56-powerful-digit-sum.md
@@ -0,0 +1,101 @@
+---
+id: 5900f3a41000cf542c50feb7
+title: 'Problem 56: Powerful digit sum'
+challengeType: 1
+forumTopicId: 302167
+dashedName: problem-56-powerful-digit-sum
+---
+
+# --description--
+
+A googol ($10^{100}$) is a massive number: one followed by one-hundred zeros; $100^{100}$ is almost unimaginably large: one followed by two-hundred zeros. Despite their size, the sum of the digits in each number is only 1.
+
+Considering natural numbers of the form, $a^b$, where `a`, `b` < `n`, what is the maximum digital sum?
+
+# --hints--
+
+`powerfulDigitSum(3)` should return a number.
+
+```js
+assert(typeof powerfulDigitSum(3) === 'number');
+```
+
+`powerfulDigitSum(3)` should return `4`.
+
+```js
+assert.strictEqual(powerfulDigitSum(3), 4);
+```
+
+`powerfulDigitSum(10)` should return `45`.
+
+```js
+assert.strictEqual(powerfulDigitSum(10), 45);
+```
+
+`powerfulDigitSum(50)` should return `406`.
+
+```js
+assert.strictEqual(powerfulDigitSum(50), 406);
+```
+
+`powerfulDigitSum(75)` should return `684`.
+
+```js
+assert.strictEqual(powerfulDigitSum(75), 684);
+```
+
+`powerfulDigitSum(100)` should return `972`.
+
+```js
+assert.strictEqual(powerfulDigitSum(100), 972);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function powerfulDigitSum(n) {
+
+ return true;
+}
+
+powerfulDigitSum(3);
+```
+
+# --solutions--
+
+```js
+function powerfulDigitSum(n) {
+ function sumDigitsOfPower(numA, numB) {
+ let digitsSum = 0;
+ let number = power(numA, numB);
+ while (number > 0n) {
+ const digit = number % 10n;
+ digitsSum += parseInt(digit, 10);
+ number = number / 10n;
+ }
+ return digitsSum;
+ }
+
+ function power(numA, numB) {
+ let sum = 1n;
+ for (let b = 0; b < numB; b++) {
+ sum = sum * BigInt(numA);
+ }
+ return sum;
+ }
+
+ const limit = n - 1;
+ let maxDigitsSum = 0;
+ for (let a = limit; a > 0; a--) {
+ for (let b = limit; b > 0; b--) {
+ const curDigitSum = sumDigitsOfPower(a, b);
+ if (curDigitSum > maxDigitsSum) {
+ maxDigitsSum = curDigitSum;
+ }
+ }
+ }
+ return maxDigitsSum;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-57-square-root-convergents.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-57-square-root-convergents.md
new file mode 100644
index 00000000000..034974d882c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-57-square-root-convergents.md
@@ -0,0 +1,98 @@
+---
+id: 5900f3a51000cf542c50feb8
+title: 'Problem 57: Square root convergents'
+challengeType: 1
+forumTopicId: 302168
+dashedName: problem-57-square-root-convergents
+---
+
+# --description--
+
+It is possible to show that the square root of two can be expressed as an infinite continued fraction.
+
+$\sqrt 2 =1+ \frac 1 {2+ \frac 1 {2 +\frac 1 {2+ \dots}}}$
+
+By expanding this for the first four iterations, we get:
+
+$1 + \\frac 1 2 = \\frac 32 = 1.5$
+
+$1 + \\frac 1 {2 + \\frac 1 2} = \\frac 7 5 = 1.4$
+
+$1 + \\frac 1 {2 + \\frac 1 {2+\\frac 1 2}} = \\frac {17}{12} = 1.41666 \\dots$
+
+$1 + \\frac 1 {2 + \\frac 1 {2+\\frac 1 {2+\\frac 1 2}}} = \\frac {41}{29} = 1.41379 \\dots$
+
+The next three expansions are $\\frac {99}{70}$, $\\frac {239}{169}$, and $\\frac {577}{408}$, but the eighth expansion, $\\frac {1393}{985}$, is the first example where the number of digits in the numerator exceeds the number of digits in the denominator.
+
+In the first `n` expansions, how many fractions contain a numerator with more digits than denominator?
+
+# --hints--
+
+`squareRootConvergents(10)` should return a number.
+
+```js
+assert(typeof squareRootConvergents(10) === 'number');
+```
+
+`squareRootConvergents(10)` should return 1.
+
+```js
+assert.strictEqual(squareRootConvergents(10), 1);
+```
+
+`squareRootConvergents(100)` should return 15.
+
+```js
+assert.strictEqual(squareRootConvergents(100), 15);
+```
+
+`squareRootConvergents(1000)` should return 153.
+
+```js
+assert.strictEqual(squareRootConvergents(1000), 153);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function squareRootConvergents(n) {
+
+ return true;
+}
+
+squareRootConvergents(1000);
+```
+
+# --solutions--
+
+```js
+function squareRootConvergents(n) {
+ function countDigits(number) {
+ let counter = 0;
+ while (number > 0) {
+ counter++;
+ number = number / 10n;
+ }
+ return counter;
+ }
+
+ // Use BigInt as integer won't handle all cases
+ let numerator = 3n;
+ let denominator = 2n;
+ let moreDigitsInNumerator = 0;
+
+ for (let i = 2; i <= n; i++) {
+ [numerator, denominator] = [
+ numerator + 2n * denominator,
+ denominator + numerator
+ ];
+
+ if (countDigits(numerator) > countDigits(denominator)) {
+ moreDigitsInNumerator++;
+ }
+ }
+ return moreDigitsInNumerator;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-58-spiral-primes.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-58-spiral-primes.md
new file mode 100644
index 00000000000..70b80ebf2a1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-58-spiral-primes.md
@@ -0,0 +1,105 @@
+---
+id: 5900f3a61000cf542c50feb9
+title: 'Problem 58: Spiral primes'
+challengeType: 1
+forumTopicId: 302169
+dashedName: problem-58-spiral-primes
+---
+
+# --description--
+
+Starting with 1 and spiralling anticlockwise in the following way, a square spiral with side length 7 is formed.
+
+
+ 37 31 17 13 5 3 7 43
+
+It is interesting to note that the odd squares lie along the bottom right diagonal, but what is more interesting is that 8 out of the 13 numbers lying along both diagonals are prime; that is, a ratio of 8/13 ≈ 62%.
+
+If one complete new layer is wrapped around the spiral above, a square spiral with side length 9 will be formed. If this process is continued, what is the side length of the square spiral for which the percent of primes along both diagonals first falls below `percent`?
+
+# --hints--
+
+`spiralPrimes(50)` should return a number.
+
+```js
+assert(typeof spiralPrimes(50) === 'number');
+```
+
+`spiralPrimes(50)` should return `11`.
+
+```js
+assert.strictEqual(spiralPrimes(50), 11);
+```
+
+`spiralPrimes(15)` should return `981`.
+
+```js
+assert.strictEqual(spiralPrimes(15), 981);
+```
+
+`spiralPrimes(10)` should return `26241`.
+
+```js
+assert.strictEqual(spiralPrimes(10), 26241);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function spiralPrimes(percent) {
+
+ return true;
+}
+
+spiralPrimes(50);
+```
+
+# --solutions--
+
+```js
+function spiralPrimes(percent) {
+ function isPrime(n) {
+ if (n <= 3) {
+ return n > 1;
+ } else if (n % 2 === 0 || n % 3 === 0) {
+ return false;
+ }
+
+ for (let i = 5; i * i <= n; i += 6) {
+ if (n % i === 0 || n % (i + 2) === 0) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+ let totalCount = 1;
+ let primesCount = 0;
+ let curNumber = 1;
+ let curSideLength = 1;
+ let ratio = 1;
+ const wantedRatio = percent / 100;
+
+ while (ratio >= wantedRatio) {
+ curSideLength += 2;
+ for (let i = 0; i < 4; i++) {
+ curNumber += curSideLength - 1;
+ totalCount++;
+ if (i !== 3 && isPrime(curNumber)) {
+ primesCount++;
+ }
+ }
+ ratio = primesCount / totalCount;
+ }
+ return curSideLength;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-59-xor-decryption.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-59-xor-decryption.md
new file mode 100644
index 00000000000..0784e292908
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-59-xor-decryption.md
@@ -0,0 +1,58 @@
+---
+id: 5900f3a81000cf542c50feba
+title: 'Problem 59: XOR decryption'
+challengeType: 1
+forumTopicId: 302170
+dashedName: problem-59-xor-decryption
+---
+
+# --description--
+
+Each character on a computer is assigned a unique code and the preferred standard is ASCII (American Standard Code for Information Interchange). For example, uppercase A = 65, asterisk (\*) = 42, and lowercase k = 107.
+
+A modern encryption method is to take a text file, convert the bytes to ASCII, then XOR each byte with a given value, taken from a secret key. The advantage with the XOR function is that using the same encryption key on the cipher text, restores the plain text; for example, 65 XOR 42 = 107, then 107 XOR 42 = 65.
+
+For unbreakable encryption, the key is the same length as the plain text message, and the key is made up of random bytes. The user would keep the encrypted message and the encryption key in different locations, and without both "halves", it is impossible to decrypt the message.
+
+Unfortunately, this method is impractical for most users, so the modified method is to use a password as a key. If the password is shorter than the message, which is likely, the key is repeated cyclically throughout the message. The balance for this method is using a sufficiently long password key for security, but short enough to be memorable.
+
+Your task has been made easy, as the encryption key consists of three lower case characters. Using `cipher`, an array containing the encrypted ASCII codes, and the knowledge that the plain text must contain common English words, decrypt the message and find the sum of the ASCII values in the original text.
+
+# --hints--
+
+`XORDecryption(cipher)` should return a number.
+
+```js
+assert(typeof XORDecryption(cipher) === 'number');
+```
+
+`XORDecryption(cipher)` should return 129448.
+
+```js
+assert.strictEqual(XORDecryption(cipher), 129448);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function XORDecryption(arr) {
+
+ return true;
+}
+
+// Only change code above this line
+
+const cipher = [
+ 36,22,80,0,0,4,23,25,19,17,88,4,4,19,21,11,88,22,23,23,29,69,12,24,0,88,25,11,12,2,10,28,5,6,12,25,10,22,80,10,30,80,10,22,21,69,23,22,69,61,5,9,29,2,66,11,80,8,23,3,17,88,19,0,20,21,7,10,17,17,29,20,69,8,17,21,29,2,22,84,80,71,60,21,69,11,5,8,21,25,22,88,3,0,10,25,0,10,5,8,88,2,0,27,25,21,10,31,6,25,2,16,21,82,69,35,63,11,88,4,13,29,80,22,13,29,22,88,31,3,88,3,0,10,25,0,11,80,10,30,80,23,29,19,12,8,2,10,27,17,9,11,45,95,88,57,69,16,17,19,29,80,23,29,19,0,22,4,9,1,80,3,23,5,11,28,92,69,9,5,12,12,21,69,13,30,0,0,0,0,27,4,0,28,28,28,84,80,4,22,80,0,20,21,2,25,30,17,88,21,29,8,2,0,11,3,12,23,30,69,30,31,23,88,4,13,29,80,0,22,4,12,10,21,69,11,5,8,88,31,3,88,4,13,17,3,69,11,21,23,17,21,22,88,65,69,83,80,84,87,68,69,83,80,84,87,73,69,83,80,84,87,65,83,88,91,69,29,4,6,86,92,69,15,24,12,27,24,69,28,21,21,29,30,1,11,80,10,22,80,17,16,21,69,9,5,4,28,2,4,12,5,23,29,80,10,30,80,17,16,21,69,27,25,23,27,28,0,84,80,22,23,80,17,16,17,17,88,25,3,88,4,13,29,80,17,10,5,0,88,3,16,21,80,10,30,80,17,16,25,22,88,3,0,10,25,0,11,80,12,11,80,10,26,4,4,17,30,0,28,92,69,30,2,10,21,80,12,12,80,4,12,80,10,22,19,0,88,4,13,29,80,20,13,17,1,10,17,17,13,2,0,88,31,3,88,4,13,29,80,6,17,2,6,20,21,69,30,31,9,20,31,18,11,94,69,54,17,8,29,28,28,84,80,44,88,24,4,14,21,69,30,31,16,22,20,69,12,24,4,12,80,17,16,21,69,11,5,8,88,31,3,88,4,13,17,3,69,11,21,23,17,21,22,88,25,22,88,17,69,11,25,29,12,24,69,8,17,23,12,80,10,30,80,17,16,21,69,11,1,16,25,2,0,88,31,3,88,4,13,29,80,21,29,2,12,21,21,17,29,2,69,23,22,69,12,24,0,88,19,12,10,19,9,29,80,18,16,31,22,29,80,1,17,17,8,29,4,0,10,80,12,11,80,84,67,80,10,10,80,7,1,80,21,13,4,17,17,30,2,88,4,13,29,80,22,13,29,69,23,22,69,12,24,12,11,80,22,29,2,12,29,3,69,29,1,16,25,28,69,12,31,69,11,92,69,17,4,69,16,17,22,88,4,13,29,80,23,25,4,12,23,80,22,9,2,17,80,70,76,88,29,16,20,4,12,8,28,12,29,20,69,26,9,69,11,80,17,23,80,84,88,31,3,88,4,13,29,80,21,29,2,12,21,21,17,29,2,69,12,31,69,12,24,0,88,20,12,25,29,0,12,21,23,86,80,44,88,7,12,20,28,69,11,31,10,22,80,22,16,31,18,88,4,13,25,4,69,12,24,0,88,3,16,21,80,10,30,80,17,16,25,22,88,3,0,10,25,0,11,80,17,23,80,7,29,80,4,8,0,23,23,8,12,21,17,17,29,28,28,88,65,75,78,68,81,65,67,81,72,70,83,64,68,87,74,70,81,75,70,81,67,80,4,22,20,69,30,2,10,21,80,8,13,28,17,17,0,9,1,25,11,31,80,17,16,25,22,88,30,16,21,18,0,10,80,7,1,80,22,17,8,73,88,17,11,28,80,17,16,21,11,88,4,4,19,25,11,31,80,17,16,21,69,11,1,16,25,2,0,88,2,10,23,4,73,88,4,13,29,80,11,13,29,7,29,2,69,75,94,84,76,65,80,65,66,83,77,67,80,64,73,82,65,67,87,75,72,69,17,3,69,17,30,1,29,21,1,88,0,23,23,20,16,27,21,1,84,80,18,16,25,6,16,80,0,0,0,23,29,3,22,29,3,69,12,24,0,88,0,0,10,25,8,29,4,0,10,80,10,30,80,4,88,19,12,10,19,9,29,80,18,16,31,22,29,80,1,17,17,8,29,4,0,10,80,12,11,80,84,86,80,35,23,28,9,23,7,12,22,23,69,25,23,4,17,30,69,12,24,0,88,3,4,21,21,69,11,4,0,8,3,69,26,9,69,15,24,12,27,24,69,49,80,13,25,20,69,25,2,23,17,6,0,28,80,4,12,80,17,16,25,22,88,3,16,21,92,69,49,80,13,25,6,0,88,20,12,11,19,10,14,21,23,29,20,69,12,24,4,12,80,17,16,21,69,11,5,8,88,31,3,88,4,13,29,80,22,29,2,12,29,3,69,73,80,78,88,65,74,73,70,69,83,80,84,87,72,84,88,91,69,73,95,87,77,70,69,83,80,84,87,70,87,77,80,78,88,21,17,27,94,69,25,28,22,23,80,1,29,0,0,22,20,22,88,31,11,88,4,13,29,80,20,13,17,1,10,17,17,13,2,0,88,31,3,88,4,13,29,80,6,17,2,6,20,21,75,88,62,4,21,21,9,1,92,69,12,24,0,88,3,16,21,80,10,30,80,17,16,25,22,88,29,16,20,4,12,8,28,12,29,20,69,26,9,69,65,64,69,31,25,19,29,3,69,12,24,0,88,18,12,9,5,4,28,2,4,12,21,69,80,22,10,13,2,17,16,80,21,23,7,0,10,89,69,23,22,69,12,24,0,88,19,12,10,19,16,21,22,0,10,21,11,27,21,69,23,22,69,12,24,0,88,0,0,10,25,8,29,4,0,10,80,10,30,80,4,88,19,12,10,19,9,29,80,18,16,31,22,29,80,1,17,17,8,29,4,0,10,80,12,11,80,84,86,80,36,22,20,69,26,9,69,11,25,8,17,28,4,10,80,23,29,17,22,23,30,12,22,23,69,49,80,13,25,6,0,88,28,12,19,21,18,17,3,0,88,18,0,29,30,69,25,18,9,29,80,17,23,80,1,29,4,0,10,29,12,22,21,69,12,24,0,88,3,16,21,3,69,23,22,69,12,24,0,88,3,16,26,3,0,9,5,0,22,4,69,11,21,23,17,21,22,88,25,11,88,7,13,17,19,13,88,4,13,29,80,0,0,0,10,22,21,11,12,3,69,25,2,0,88,21,19,29,30,69,22,5,8,26,21,23,11,94
+];
+
+XORDecryption(cipher);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-6-sum-square-difference.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-6-sum-square-difference.md
new file mode 100644
index 00000000000..65a460bd803
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-6-sum-square-difference.md
@@ -0,0 +1,78 @@
+---
+id: 5900f3721000cf542c50fe85
+title: 'Problem 6: Sum square difference'
+challengeType: 1
+forumTopicId: 302171
+dashedName: problem-6-sum-square-difference
+---
+
+# --description--
+
+The sum of the squares of the first ten natural numbers is,
+
+12 + 22 + ... + 102 = 385
+
+The square of the sum of the first ten natural numbers is,
+
+(1 + 2 + ... + 10)2 = 552 = 3025
+
+Hence the difference between the sum of the squares of the first ten natural numbers and the square of the sum is 3025 − 385 = 2640.
+
+Find the difference between the sum of the squares of the first `n` natural numbers and the square of the sum.
+
+# --hints--
+
+`sumSquareDifference(10)` should return a number.
+
+```js
+assert(typeof sumSquareDifference(10) === 'number');
+```
+
+`sumSquareDifference(10)` should return 2640.
+
+```js
+assert.strictEqual(sumSquareDifference(10), 2640);
+```
+
+`sumSquareDifference(20)` should return 41230.
+
+```js
+assert.strictEqual(sumSquareDifference(20), 41230);
+```
+
+`sumSquareDifference(100)` should return 25164150.
+
+```js
+assert.strictEqual(sumSquareDifference(100), 25164150);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumSquareDifference(n) {
+
+ return true;
+}
+
+sumSquareDifference(100);
+```
+
+# --solutions--
+
+```js
+const sumSquareDifference = (number)=>{
+ let squareOfSum = Math.pow(sumOfArithmeticSeries(1,1,number),2);
+ let sumOfSquare = sumOfSquareOfNumbers(number);
+ return squareOfSum - sumOfSquare;
+}
+
+function sumOfArithmeticSeries(a,d,n){
+ return (n/2)*(2*a+(n-1)*d);
+}
+
+function sumOfSquareOfNumbers(n){
+ return (n*(n+1)*(2*n+1))/6;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-60-prime-pair-sets.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-60-prime-pair-sets.md
new file mode 100644
index 00000000000..dc4a88c2cfb
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-60-prime-pair-sets.md
@@ -0,0 +1,46 @@
+---
+id: 5900f3a81000cf542c50febb
+title: 'Problem 60: Prime pair sets'
+challengeType: 1
+forumTopicId: 302172
+dashedName: problem-60-prime-pair-sets
+---
+
+# --description--
+
+The primes 3, 7, 109, and 673, are quite remarkable. By taking any two primes and concatenating them in any order the result will always be prime. For example, taking 7 and 109, both 7109 and 1097 are prime. The sum of these four primes, 792, represents the lowest sum for a set of four primes with this property.
+
+Find the lowest sum for a set of five primes for which any two primes concatenate to produce another prime.
+
+# --hints--
+
+`primePairSets()` should return a number.
+
+```js
+assert(typeof primePairSets() === 'number');
+```
+
+`primePairSets()` should return 26033.
+
+```js
+assert.strictEqual(primePairSets(), 26033);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primePairSets() {
+
+ return true;
+}
+
+primePairSets();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-61-cyclical-figurate-numbers.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-61-cyclical-figurate-numbers.md
new file mode 100644
index 00000000000..99fee7255e8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-61-cyclical-figurate-numbers.md
@@ -0,0 +1,252 @@
+---
+id: 5900f3a91000cf542c50febc
+title: 'Problem 61: Cyclical figurate numbers'
+challengeType: 1
+forumTopicId: 302173
+dashedName: problem-61-cyclical-figurate-numbers
+---
+
+# --description--
+
+Triangle, square, pentagonal, hexagonal, heptagonal, and octagonal numbers are all figurate (polygonal) numbers and are generated by the following formulae:
+
+| Type of Number | Formula | Sequence |
+| -------------- | ----------------------------- | --------------------- |
+| Triangle | $P_3(n) = \frac{n(n+1)}{2}$ | 1, 3, 6, 10, 15, ... |
+| Square | $P_4(n) = n^2$ | 1, 4, 9, 16, 25, ... |
+| Pentagonal | $P_5(n) = \frac{n(3n−1)}2$ | 1, 5, 12, 22, 35, ... |
+| Hexagonal | $P_6(n) = n(2n−1)$ | 1, 6, 15, 28, 45, ... |
+| Heptagonal | $P_7(n) = \frac{n(5n−3)}{2}$ | 1, 7, 18, 34, 55, ... |
+| Octagonal | $P_8(n) = n(3n−2)$ | 1, 8, 21, 40, 65, ... |
+
+The ordered set of three 4-digit numbers: 8128, 2882, 8281, has three interesting properties.
+
+1. The set is cyclic, in that the last two digits of each number is the first two digits of the next number (including the last number with the first).
+2. Each polygonal type: triangle ($P_3(127) = 8128$), square ($P_4(91) = 8281$), and pentagonal ($P_5(44) = 2882$), is represented by a different number in the set.
+3. This is the only set of 4-digit numbers with this property.
+
+Find the sum of all numbers in ordered sets of `n` cyclic 4-digit numbers for which each of the $P_3$ to $P_{n + 2}$ polygonal types, is represented by a different number in the set.
+
+# --hints--
+
+`cyclicalFigurateNums(3)` should return a number.
+
+```js
+assert(typeof cyclicalFigurateNums(3) === 'number');
+```
+
+`cyclicalFigurateNums(3)` should return `19291`.
+
+```js
+assert.strictEqual(cyclicalFigurateNums(3), 19291);
+```
+
+`cyclicalFigurateNums(4)` should return `28684`.
+
+```js
+assert.strictEqual(cyclicalFigurateNums(4), 28684);
+```
+
+`cyclicalFigurateNums(5)` should return `76255`.
+
+```js
+assert.strictEqual(cyclicalFigurateNums(5), 76255);
+```
+
+`cyclicalFigurateNums(6)` should return `28684`.
+
+```js
+assert.strictEqual(cyclicalFigurateNums(6), 28684);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cyclicalFigurateNums(n) {
+
+ return true;
+}
+
+cyclicalFigurateNums(3);
+```
+
+# --solutions--
+
+```js
+function cyclicalFigurateNums(n) {
+ function getChains(chain, n, numberTypes, numsExcludingLastNeededType) {
+ if (chain.length === n) {
+ return [chain];
+ }
+
+ const nextNumbers = getNextNumbersInChain(
+ chain[chain.length - 1],
+ numsExcludingLastNeededType
+ );
+
+ const chains = [];
+ for (let j = 0; j < nextNumbers.length; j++) {
+ const nextNumber = nextNumbers[j];
+ if (chain.indexOf(nextNumber) === -1) {
+ const nextChain = [...chain, nextNumber];
+ chains.push(
+ ...getChains(nextChain, n, numberTypes, numsExcludingLastNeededType)
+ );
+ }
+ }
+ return chains;
+ }
+
+ function getNextNumbersInChain(num, numsExcludingLastNeededType) {
+ const results = [];
+ const beginning = num % 100;
+ numsExcludingLastNeededType.forEach(number => {
+ if (Math.floor(number / 100) === beginning) {
+ results.push(number);
+ }
+ });
+ return results;
+ }
+
+ function fillNumberTypes(n, numberTypes, numsExcludingLastNeededType) {
+ const [, lastTypeCheck, lastTypeArr] = numberTypes[n - 1];
+
+ for (let i = 1000; i <= 9999; i++) {
+ for (let j = 0; j < n - 1; j++) {
+ const [, typeCheck, typeArr] = numberTypes[j];
+ if (typeCheck(i)) {
+ typeArr.push(i);
+ numsExcludingLastNeededType.add(i);
+ }
+ }
+
+ if (lastTypeCheck(i)) {
+ lastTypeArr.push(i);
+ }
+ }
+ }
+
+ function isCyclicalChain(chain, n, numberTypes) {
+ const numberTypesInChain = getNumberTypesInChain(chain, numberTypes);
+
+ if (!isChainAllowed(numberTypesInChain, n)) {
+ return false;
+ }
+
+ const isChainCyclic =
+ Math.floor(chain[0] / 100) === chain[chain.length - 1] % 100;
+ return isChainCyclic;
+ }
+
+ function getNumberTypesInChain(chain, numberTypes) {
+ const numbersInChain = {};
+ for (let i = 0; i < numberTypes.length; i++) {
+ const numberTypeName = numberTypes[i][0];
+ numbersInChain[numberTypeName] = [];
+ }
+
+ for (let i = 0; i < chain.length; i++) {
+ for (let j = 0; j < n; j++) {
+ const [typeName, , typeNumbers] = numberTypes[j];
+ const typeNumbersInChain = numbersInChain[typeName];
+ if (typeNumbers.indexOf(chain[i]) !== -1) {
+ typeNumbersInChain.push(chain[i]);
+ }
+ }
+ }
+ return numbersInChain;
+ }
+
+ function isChainAllowed(numberTypesInChain, n) {
+ for (let i = 0; i < n; i++) {
+ const typeName = numberTypes[i][0];
+ const isNumberWithTypeInChain = numberTypesInChain[typeName].length > 0;
+ if (!isNumberWithTypeInChain) {
+ return false;
+ }
+
+ for (let j = i + 1; j < n; j++) {
+ const otherTypeName = numberTypes[j][0];
+ if (
+ isNumberRepeatedAsOnlyNumberInTwoTypes(
+ numberTypesInChain[typeName],
+ numberTypesInChain[otherTypeName]
+ )
+ ) {
+ return false;
+ }
+ }
+ }
+ return true;
+ }
+
+ function isNumberRepeatedAsOnlyNumberInTwoTypes(
+ typeNumbers,
+ otherTypeNumbers
+ ) {
+ return (
+ typeNumbers.length === 1 &&
+ otherTypeNumbers.length === 1 &&
+ typeNumbers[0] === otherTypeNumbers[0]
+ );
+ }
+
+ function isTriangle(num) {
+ return ((8 * num + 1) ** 0.5 - 1) % 2 === 0;
+ }
+
+ function isSquare(num) {
+ return num ** 0.5 === parseInt(num ** 0.5, 10);
+ }
+
+ function isPentagonal(num) {
+ return ((24 * num + 1) ** 0.5 + 1) % 6 === 0;
+ }
+
+ function isHexagonal(num) {
+ return ((8 * num + 1) ** 0.5 + 1) % 4 === 0;
+ }
+
+ function isHeptagonal(num) {
+ return ((40 * num + 9) ** 0.5 + 3) % 10 === 0;
+ }
+
+ function isOctagonal(num) {
+ return ((3 * num + 1) ** 0.5 + 1) % 3 === 0;
+ }
+
+ const numberTypes = [
+ ['triangle', isTriangle, []],
+ ['square', isSquare, []],
+ ['pentagonal', isPentagonal, []],
+ ['hexagonal', isHexagonal, []],
+ ['heptagonal', isHeptagonal, []],
+ ['octagonal', isOctagonal, []]
+ ];
+ const numsExcludingLastNeededType = new Set();
+ fillNumberTypes(n, numberTypes, numsExcludingLastNeededType);
+
+ const nNumberChains = [];
+ const [, , lastType] = numberTypes[n - 1];
+ for (let i = 0; i < lastType.length; i++) {
+ const startOfChain = lastType[i];
+ nNumberChains.push(
+ ...getChains([startOfChain], n, numberTypes, numsExcludingLastNeededType)
+ );
+ }
+
+ const cyclicalChains = nNumberChains.filter(chain =>
+ isCyclicalChain(chain, n, numberTypes)
+ );
+
+ let sum = 0;
+ for (let i = 0; i < cyclicalChains.length; i++) {
+ for (let j = 0; j < cyclicalChains[0].length; j++) {
+ sum += cyclicalChains[i][j];
+ }
+ }
+ return sum;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-62-cubic-permutations.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-62-cubic-permutations.md
new file mode 100644
index 00000000000..a89d136f83c
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-62-cubic-permutations.md
@@ -0,0 +1,97 @@
+---
+id: 5900f3aa1000cf542c50febd
+title: 'Problem 62: Cubic permutations'
+challengeType: 1
+forumTopicId: 302174
+dashedName: problem-62-cubic-permutations
+---
+
+# --description--
+
+The cube, 41063625 ($345^3$), can be permuted to produce two other cubes: 56623104 ($384^3$) and 66430125 ($405^3$). In fact, 41063625 is the smallest cube which has exactly three permutations of its digits which are also cube.
+
+Find the smallest cube for which exactly `n` permutations of its digits are cube.
+
+# --hints--
+
+`cubicPermutations(2)` should return a number.
+
+```js
+assert(typeof cubicPermutations(2) === 'number');
+```
+
+`cubicPermutations(2)` should return `125`.
+
+```js
+assert.strictEqual(cubicPermutations(2), 125);
+```
+
+`cubicPermutations(3)` should return `41063625`.
+
+```js
+assert.strictEqual(cubicPermutations(3), 41063625);
+```
+
+`cubicPermutations(4)` should return `1006012008`.
+
+```js
+assert.strictEqual(cubicPermutations(4), 1006012008);
+```
+
+`cubicPermutations(5)` should return `127035954683`.
+
+```js
+assert.strictEqual(cubicPermutations(5), 127035954683);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cubicPermutations(n) {
+
+ return true;
+}
+
+cubicPermutations(2);
+```
+
+# --solutions--
+
+```js
+function cubicPermutations(n) {
+ function getDigits(num) {
+ const digits = [];
+ while (num > 0) {
+ digits.push(num % 10);
+ num = Math.floor(num / 10);
+ }
+ return digits;
+ }
+
+ function getCube(num) {
+ return num ** 3;
+ }
+
+ const digitsToCubeCounts = {};
+ let curNum = 1;
+ let digits;
+
+ while (!digitsToCubeCounts[digits] || digitsToCubeCounts[digits].count < n) {
+ const cube = getCube(curNum);
+ digits = getDigits(cube).sort().join();
+ if (!digitsToCubeCounts[digits]) {
+ digitsToCubeCounts[digits] = {
+ count: 1,
+ smallestCube: cube
+ };
+ } else {
+ digitsToCubeCounts[digits].count += 1;
+ }
+
+ curNum++;
+ }
+ return digitsToCubeCounts[digits].smallestCube;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-63-powerful-digit-counts.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-63-powerful-digit-counts.md
new file mode 100644
index 00000000000..2c8b0bb8cd6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-63-powerful-digit-counts.md
@@ -0,0 +1,122 @@
+---
+id: 5900f3ab1000cf542c50febe
+title: 'Problem 63: Powerful digit counts'
+challengeType: 1
+forumTopicId: 302175
+dashedName: problem-63-powerful-digit-counts
+---
+
+# --description--
+
+The 5-digit number, 16807 = 75 , is also a fifth power. Similarly, the 9-digit number, 134217728 = 89 , is a ninth power.
+
+Complete the function so that it returns how many positive integers are of length `n` and an `n`th power.
+
+# --hints--
+
+`powerfulDigitCounts(1)` should return a number.
+
+```js
+assert(typeof powerfulDigitCounts(1) === 'number');
+```
+
+`powerfulDigitCounts(1)` should return `9`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(1), 9);
+```
+
+`powerfulDigitCounts(2)` should return `6`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(2), 6);
+```
+
+`powerfulDigitCounts(3)` should return `5`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(3), 5);
+```
+
+`powerfulDigitCounts(4)` should return `4`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(4), 4);
+```
+
+`powerfulDigitCounts(5)` should return `3`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(5), 3);
+```
+
+`powerfulDigitCounts(6)` should return `3`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(6), 3);
+```
+
+`powerfulDigitCounts(7)` should return `2`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(7), 2);
+```
+
+`powerfulDigitCounts(8)` should return `2`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(8), 2);
+```
+
+`powerfulDigitCounts(10)` should return `2`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(10), 2);
+```
+
+`powerfulDigitCounts(21)` should return `1`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(21), 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function powerfulDigitCounts(n) {
+
+ return true;
+}
+
+powerfulDigitCounts(1);
+```
+
+# --solutions--
+
+```js
+function powerfulDigitCounts(n) {
+ function countDigits(num) {
+ let counter = 0;
+ while (num > 0) {
+ num = Math.floor(num / 10);
+ counter++;
+ }
+ return counter;
+ }
+
+ let numbersCount = 0;
+
+ let curNum = 1;
+ while (curNum < 10) {
+ let power = n;
+ if (power === countDigits(curNum ** power)) {
+ numbersCount++;
+ }
+ curNum++;
+ }
+
+ return numbersCount;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-64-odd-period-square-roots.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-64-odd-period-square-roots.md
new file mode 100644
index 00000000000..a6acdfc610e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-64-odd-period-square-roots.md
@@ -0,0 +1,148 @@
+---
+id: 5900f3ac1000cf542c50febf
+title: 'Problem 64: Odd period square roots'
+challengeType: 1
+forumTopicId: 302176
+dashedName: problem-64-odd-period-square-roots
+---
+
+# --description--
+
+All square roots are periodic when written as continued fractions and can be written in the form:
+
+$\\displaystyle \\quad \\quad \\sqrt{N}=a_0+\\frac 1 {a_1+\\frac 1 {a_2+ \\frac 1 {a3+ \\dots}}}$
+
+For example, let us consider $\\sqrt{23}$:
+
+$\\quad \\quad \\sqrt{23}=4+\\sqrt{23}-4=4+\\frac 1 {\\frac 1 {\\sqrt{23}-4}}=4+\\frac 1 {1+\\frac{\\sqrt{23}-3}7}$
+
+If we continue we would get the following expansion:
+
+$\\displaystyle \\quad \\quad \\sqrt{23}=4+\\frac 1 {1+\\frac 1 {3+ \\frac 1 {1+\\frac 1 {8+ \\dots}}}}$
+
+The process can be summarized as follows:
+
+$\\quad \\quad a_0=4, \\frac 1 {\\sqrt{23}-4}=\\frac {\\sqrt{23}+4} 7=1+\\frac {\\sqrt{23}-3} 7$
+
+$\\quad \\quad a_1=1, \\frac 7 {\\sqrt{23}-3}=\\frac {7(\\sqrt{23}+3)} {14}=3+\\frac {\\sqrt{23}-3} 2$
+
+$\\quad \\quad a_2=3, \\frac 2 {\\sqrt{23}-3}=\\frac {2(\\sqrt{23}+3)} {14}=1+\\frac {\\sqrt{23}-4} 7$
+
+$\\quad \\quad a_3=1, \\frac 7 {\\sqrt{23}-4}=\\frac {7(\\sqrt{23}+4)} 7=8+\\sqrt{23}-4$
+
+$\\quad \\quad a_4=8, \\frac 1 {\\sqrt{23}-4}=\\frac {\\sqrt{23}+4} 7=1+\\frac {\\sqrt{23}-3} 7$
+
+$\\quad \\quad a_5=1, \\frac 7 {\\sqrt{23}-3}=\\frac {7 (\\sqrt{23}+3)} {14}=3+\\frac {\\sqrt{23}-3} 2$
+
+$\\quad \\quad a_6=3, \\frac 2 {\\sqrt{23}-3}=\\frac {2(\\sqrt{23}+3)} {14}=1+\\frac {\\sqrt{23}-4} 7$
+
+$\\quad \\quad a_7=1, \\frac 7 {\\sqrt{23}-4}=\\frac {7(\\sqrt{23}+4)} {7}=8+\\sqrt{23}-4$
+
+It can be seen that the sequence is repeating. For conciseness, we use the notation $\\sqrt{23}=\[4;(1,3,1,8)]$, to indicate that the block (1,3,1,8) repeats indefinitely.
+
+The first ten continued fraction representations of (irrational) square roots are:
+
+$\\quad \\quad \\sqrt{2}=\[1;(2)]$, period = 1
+
+$\\quad \\quad \\sqrt{3}=\[1;(1,2)]$, period = 2
+
+$\\quad \\quad \\sqrt{5}=\[2;(4)]$, period = 1
+
+$\\quad \\quad \\sqrt{6}=\[2;(2,4)]$, period = 2
+
+$\\quad \\quad \\sqrt{7}=\[2;(1,1,1,4)]$, period = 4
+
+$\\quad \\quad \\sqrt{8}=\[2;(1,4)]$, period = 2
+
+$\\quad \\quad \\sqrt{10}=\[3;(6)]$, period = 1
+
+$\\quad \\quad \\sqrt{11}=\[3;(3,6)]$, period = 2
+
+$\\quad \\quad \\sqrt{12}=\[3;(2,6)]$, period = 2
+
+$\\quad \\quad \\sqrt{13}=\[3;(1,1,1,1,6)]$, period = 5
+
+Exactly four continued fractions, for $N \\le 13$, have an odd period.
+
+How many continued fractions for $N \\le n$ have an odd period?
+
+# --hints--
+
+`oddPeriodSqrts(13)` should return a number.
+
+```js
+assert(typeof oddPeriodSqrts(13) === 'number');
+```
+
+`oddPeriodSqrts(500)` should return `83`.
+
+```js
+assert.strictEqual(oddPeriodSqrts(500), 83);
+```
+
+`oddPeriodSqrts(1000)` should return `152`.
+
+```js
+assert.strictEqual(oddPeriodSqrts(1000), 152);
+```
+
+`oddPeriodSqrts(5000)` should return `690`.
+
+```js
+assert.strictEqual(oddPeriodSqrts(5000), 690);
+```
+
+`oddPeriodSqrts(10000)` should return `1322`.
+
+```js
+assert.strictEqual(oddPeriodSqrts(10000), 1322);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function oddPeriodSqrts(n) {
+
+ return true;
+}
+
+oddPeriodSqrts(13);
+```
+
+# --solutions--
+
+```js
+function oddPeriodSqrts(n) {
+ // Based on https://www.mathblog.dk/project-euler-continued-fractions-odd-period/
+ function getPeriod(num) {
+ let period = 0;
+ let m = 0;
+ let d = 1;
+ let a = Math.floor(Math.sqrt(num));
+ const a0 = a;
+ while (2 * a0 !== a) {
+ m = d * a - m;
+ d = Math.floor((num - m ** 2) / d);
+ a = Math.floor((Math.sqrt(num) + m) / d);
+ period++;
+ }
+ return period;
+ }
+
+ function isPerfectSquare(num) {
+ return Number.isInteger(Math.sqrt(num));
+ }
+
+ let counter = 0;
+ for (let i = 2; i <= n; i++) {
+ if (!isPerfectSquare(i)) {
+ if (getPeriod(i) % 2 !== 0) {
+ counter++;
+ }
+ }
+ }
+ return counter;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-65-convergents-of-e.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-65-convergents-of-e.md
new file mode 100644
index 00000000000..9aa62302442
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-65-convergents-of-e.md
@@ -0,0 +1,117 @@
+---
+id: 5900f3ad1000cf542c50fec0
+title: 'Problem 65: Convergents of e'
+challengeType: 1
+forumTopicId: 302177
+dashedName: problem-65-convergents-of-e
+---
+
+# --description--
+
+The square root of 2 can be written as an infinite continued fraction.
+
+$\\sqrt{2} = 1 + \\dfrac{1}{2 + \\dfrac{1}{2 + \\dfrac{1}{2 + \\dfrac{1}{2 + ...}}}}$
+
+The infinite continued fraction can be written, $\\sqrt{2} = \[1; (2)]$ indicates that 2 repeats *ad infinitum*. In a similar way, $\\sqrt{23} = \[4; (1, 3, 1, 8)]$. It turns out that the sequence of partial values of continued fractions for square roots provide the best rational approximations. Let us consider the convergents for $\\sqrt{2}$.
+
+$1 + \\dfrac{1}{2} = \\dfrac{3}{2}\\\\ 1 + \\dfrac{1}{2 + \\dfrac{1}{2}} = \\dfrac{7}{5}\\\\ 1 + \\dfrac{1}{2 + \\dfrac{1}{2 + \\dfrac{1}{2}}} = \\dfrac{17}{12}\\\\ 1 + \\dfrac{1}{2 + \\dfrac{1}{2 + \\dfrac{1}{2 + \\dfrac{1}{2}}}} = \\dfrac{41}{29}$
+
+Hence the sequence of the first ten convergents for $\\sqrt{2}$ are:
+
+$1, \\dfrac{3}{2}, \\dfrac{7}{5}, \\dfrac{17}{12}, \\dfrac{41}{29}, \\dfrac{99}{70}, \\dfrac{239}{169}, \\dfrac{577}{408}, \\dfrac{1393}{985}, \\dfrac{3363}{2378}, ...$
+
+What is most surprising is that the important mathematical constant, $e = \[2; 1, 2, 1, 1, 4, 1, 1, 6, 1, ... , 1, 2k, 1, ...]$. The first ten terms in the sequence of convergents for `e` are:
+
+$2, 3, \\dfrac{8}{3}, \\dfrac{11}{4}, \\dfrac{19}{7}, \\dfrac{87}{32}, \\dfrac{106}{39}, \\dfrac{193}{71}, \\dfrac{1264}{465}, \\dfrac{1457}{536}, ...$
+
+The sum of digits in the numerator of the 10th convergent is $1 + 4 + 5 + 7 = 17$.
+
+Find the sum of digits in the numerator of the `n`th convergent of the continued fraction for `e`.
+
+# --hints--
+
+`convergentsOfE(10)` should return a number.
+
+```js
+assert(typeof convergentsOfE(10) === 'number');
+```
+
+`convergentsOfE(10)` should return `17`.
+
+```js
+assert.strictEqual(convergentsOfE(10), 17);
+```
+
+`convergentsOfE(30)` should return `53`.
+
+```js
+assert.strictEqual(convergentsOfE(30), 53);
+```
+
+`convergentsOfE(50)` should return `91`.
+
+```js
+assert.strictEqual(convergentsOfE(50), 91);
+```
+
+`convergentsOfE(70)` should return `169`.
+
+```js
+assert.strictEqual(convergentsOfE(70), 169);
+```
+
+`convergentsOfE(100)` should return `272`.
+
+```js
+assert.strictEqual(convergentsOfE(100), 272);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function convergentsOfE(n) {
+
+ return true;
+}
+
+convergentsOfE(10);
+```
+
+# --solutions--
+
+```js
+function convergentsOfE(n) {
+ function sumDigits(num) {
+ let sum = 0n;
+ while (num > 0) {
+ sum += num % 10n;
+ num = num / 10n;
+ }
+ return parseInt(sum);
+ }
+
+ // BigInt is needed for high convergents
+ let convergents = [
+ [2n, 1n],
+ [3n, 1n]
+ ];
+ const multipliers = [1n, 1n, 2n];
+ for (let i = 2; i < n; i++) {
+ const [secondLastConvergent, lastConvergent] = convergents;
+ const [secondLastNumerator, secondLastDenominator] = secondLastConvergent;
+ const [lastNumerator, lastDenominator] = lastConvergent;
+ const curMultiplier = multipliers[i % 3];
+
+ const numerator = secondLastNumerator + curMultiplier * lastNumerator;
+ const denominator = secondLastDenominator + curMultiplier * lastDenominator;
+
+ convergents = [lastConvergent, [numerator, denominator]]
+ if (i % 3 === 2) {
+ multipliers[2] += 2n;
+ }
+ }
+ return sumDigits(convergents[1][0]);
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-66-diophantine-equation.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-66-diophantine-equation.md
new file mode 100644
index 00000000000..9e01ce1b0c5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-66-diophantine-equation.md
@@ -0,0 +1,129 @@
+---
+id: 5900f3ae1000cf542c50fec1
+title: 'Problem 66: Diophantine equation'
+challengeType: 1
+forumTopicId: 302178
+dashedName: problem-66-diophantine-equation
+---
+
+# --description--
+
+Consider quadratic Diophantine equations of the form:
+
+x2 – Dy2 = 1
+
+For example, when D=13, the minimal solution in x is 6492 – 13×1802 = 1.
+
+It can be assumed that there are no solutions in positive integers when D is square.
+
+By finding minimal solutions in x for D = {2, 3, 5, 6, 7}, we obtain the following:
+
+
+ 32 – 2×22 = 12 – 3×12 = 19 2 – 5×42 = 12 – 6×22 = 12 – 7×32 = 1
+
+Hence, by considering minimal solutions in `x` for D ≤ 7, the largest `x` is obtained when D=5.
+
+Find the value of D ≤ `n` in minimal solutions of `x` for which the largest value of `x` is obtained.
+
+# --hints--
+
+`diophantineEquation(7)` should return a number.
+
+```js
+assert(typeof diophantineEquation(7) === 'number');
+```
+
+`diophantineEquation(7)` should return `5`.
+
+```js
+assert.strictEqual(diophantineEquation(7), 5);
+```
+
+`diophantineEquation(100)` should return `61`.
+
+```js
+assert.strictEqual(diophantineEquation(100), 61);
+```
+
+`diophantineEquation(409)` should return `409`.
+
+```js
+assert.strictEqual(diophantineEquation(409), 409);
+```
+
+`diophantineEquation(500)` should return `421`.
+
+```js
+assert.strictEqual(diophantineEquation(500), 421);
+```
+
+`diophantineEquation(1000)` should return `661`.
+
+```js
+assert.strictEqual(diophantineEquation(1000), 661);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function diophantineEquation(n) {
+
+ return true;
+}
+
+diophantineEquation(7);
+```
+
+# --solutions--
+
+```js
+function diophantineEquation(n) {
+ // Based on https://www.mathblog.dk/project-euler-66-diophantine-equation/
+ function isSolution(D, numerator, denominator) {
+ return numerator * numerator - BigInt(D) * denominator * denominator === 1n;
+ }
+
+ let result = 0;
+ let biggestX = 0;
+
+ for (let D = 2; D <= n; D++) {
+ let boundary = Math.floor(Math.sqrt(D));
+ if (boundary ** 2 === D) {
+ continue;
+ }
+
+ let m = 0n;
+ let d = 1n;
+ let a = BigInt(boundary);
+
+ let [numerator, prevNumerator] = [a, 1n];
+
+ let [denominator, prevDenominator] = [1n, 0n];
+
+ while (!isSolution(D, numerator, denominator)) {
+ m = d * a - m;
+ d = (BigInt(D) - m * m) / d;
+ a = (BigInt(boundary) + m) / d;
+
+ [numerator, prevNumerator] = [a * numerator + prevNumerator, numerator];
+ [denominator, prevDenominator] = [
+ a * denominator + prevDenominator,
+ denominator
+ ];
+ }
+
+ if (numerator > biggestX) {
+ biggestX = numerator;
+ result = D;
+ }
+ }
+ return result;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-67-maximum-path-sum-ii.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-67-maximum-path-sum-ii.md
new file mode 100644
index 00000000000..c3aa2fb6e3b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-67-maximum-path-sum-ii.md
@@ -0,0 +1,96 @@
+---
+id: 5900f3b01000cf542c50fec2
+title: 'Problem 67: Maximum path sum II'
+challengeType: 1
+forumTopicId: 302179
+dashedName: problem-67-maximum-path-sum-ii
+---
+
+# --description--
+
+By starting at the top of the triangle below and moving to adjacent numbers on the row below, the maximum total from top to bottom is 23.
+
+
+ 3 7 44 69 3
+
+
+That is, 3 + 7 + 4 + 9 = 23.
+
+Find the maximum total from top to bottom in `numTriangle`, a 2D array defined in the background containing a triangle with one-hundred rows.
+
+**Note:** This is a much more difficult version of Problem 18. It is not possible to try every route to solve this problem, as there are 299 altogether! If you could check one trillion (1012 ) routes every second it would take over twenty billion years to check them all. There is an efficient algorithm to solve it. ;o)
+
+# --hints--
+
+`maximumPathSumII(testTriangle)` should return a number.
+
+```js
+assert(typeof maximumPathSumII(_testTriangle) === 'number');
+```
+
+`maximumPathSumII(testTriangle)` should return 23.
+
+```js
+assert.strictEqual(maximumPathSumII(_testTriangle), 23);
+```
+
+`maximumPathSumII(numTriangle)` should return 7273.
+
+```js
+assert.strictEqual(maximumPathSumII(_numTriangle), 7273);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+const _testTriangle = [[3, 0, 0, 0],
+ [7, 4, 0, 0],
+ [2, 4, 6, 0],
+ [8, 5, 9, 3]];
+const _numTriangle = [[59,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[73,41,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[52,40,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[26,53,6,34,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[10,51,87,86,81,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[61,95,66,57,25,68,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[90,81,80,38,92,67,73,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[30,28,51,76,81,18,75,44,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[84,14,95,87,62,81,17,78,58,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[21,46,71,58,2,79,62,39,31,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[56,34,35,53,78,31,81,18,90,93,15,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[78,53,4,21,84,93,32,13,97,11,37,51,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[45,3,81,79,5,18,78,86,13,30,63,99,95,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[39,87,96,28,3,38,42,17,82,87,58,7,22,57,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[6,17,51,17,7,93,9,7,75,97,95,78,87,8,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[67,66,59,60,88,99,94,65,55,77,55,34,27,53,78,28,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[76,40,41,4,87,16,9,42,75,69,23,97,30,60,10,79,87,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[12,10,44,26,21,36,32,84,98,60,13,12,36,16,63,31,91,35,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[70,39,6,5,55,27,38,48,28,22,34,35,62,62,15,14,94,89,86,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[66,56,68,84,96,21,34,34,34,81,62,40,65,54,62,5,98,3,2,60,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[38,89,46,37,99,54,34,53,36,14,70,26,2,90,45,13,31,61,83,73,47,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[36,10,63,96,60,49,41,5,37,42,14,58,84,93,96,17,9,43,5,43,6,59,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[66,57,87,57,61,28,37,51,84,73,79,15,39,95,88,87,43,39,11,86,77,74,18,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[54,42,5,79,30,49,99,73,46,37,50,2,45,9,54,52,27,95,27,65,19,45,26,45,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[71,39,17,78,76,29,52,90,18,99,78,19,35,62,71,19,23,65,93,85,49,33,75,9,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[33,24,47,61,60,55,32,88,57,55,91,54,46,57,7,77,98,52,80,99,24,25,46,78,79,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[92,9,13,55,10,67,26,78,76,82,63,49,51,31,24,68,5,57,7,54,69,21,67,43,17,63,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[24,59,6,8,98,74,66,26,61,60,13,3,9,9,24,30,71,8,88,70,72,70,29,90,11,82,41,34,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[66,82,67,4,36,60,92,77,91,85,62,49,59,61,30,90,29,94,26,41,89,4,53,22,83,41,9,74,90,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[48,28,26,37,28,52,77,26,51,32,18,98,79,36,62,13,17,8,19,54,89,29,73,68,42,14,8,16,70,37,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[37,60,69,70,72,71,9,59,13,60,38,13,57,36,9,30,43,89,30,39,15,2,44,73,5,73,26,63,56,86,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[55,55,85,50,62,99,84,77,28,85,3,21,27,22,19,26,82,69,54,4,13,7,85,14,1,15,70,59,89,95,10,19,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[4,9,31,92,91,38,92,86,98,75,21,5,64,42,62,84,36,20,73,42,21,23,22,51,51,79,25,45,85,53,3,43,22,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[75,63,2,49,14,12,89,14,60,78,92,16,44,82,38,30,72,11,46,52,90,27,8,65,78,3,85,41,57,79,39,52,33,48,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[78,27,56,56,39,13,19,43,86,72,58,95,39,7,4,34,21,98,39,15,39,84,89,69,84,46,37,57,59,35,59,50,26,15,93,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[42,89,36,27,78,91,24,11,17,41,5,94,7,69,51,96,3,96,47,90,90,45,91,20,50,56,10,32,36,49,4,53,85,92,25,65,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[52,9,61,30,61,97,66,21,96,92,98,90,6,34,96,60,32,69,68,33,75,84,18,31,71,50,84,63,3,3,19,11,28,42,75,45,45,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[61,31,61,68,96,34,49,39,5,71,76,59,62,67,6,47,96,99,34,21,32,47,52,7,71,60,42,72,94,56,82,83,84,40,94,87,82,46,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[1,20,60,14,17,38,26,78,66,81,45,95,18,51,98,81,48,16,53,88,37,52,69,95,72,93,22,34,98,20,54,27,73,61,56,63,60,34,63,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[93,42,94,83,47,61,27,51,79,79,45,1,44,73,31,70,83,42,88,25,53,51,30,15,65,94,80,44,61,84,12,77,2,62,2,65,94,42,14,94,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[32,73,9,67,68,29,74,98,10,19,85,48,38,31,85,67,53,93,93,77,47,67,39,72,94,53,18,43,77,40,78,32,29,59,24,6,2,83,50,60,66,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[32,1,44,30,16,51,15,81,98,15,10,62,86,79,50,62,45,60,70,38,31,85,65,61,64,6,69,84,14,22,56,43,9,48,66,69,83,91,60,40,36,61,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[92,48,22,99,15,95,64,43,1,16,94,2,99,19,17,69,11,58,97,56,89,31,77,45,67,96,12,73,8,20,36,47,81,44,50,64,68,85,40,81,85,52,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[91,35,92,45,32,84,62,15,19,64,21,66,6,1,52,80,62,59,12,25,88,28,91,50,40,16,22,99,92,79,87,51,21,77,74,77,7,42,38,42,74,83,2,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[46,19,77,66,24,18,5,32,2,84,31,99,92,58,96,72,91,36,62,99,55,29,53,42,12,37,26,58,89,50,66,19,82,75,12,48,24,87,91,85,2,7,3,76,86,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[99,98,84,93,7,17,33,61,92,20,66,60,24,66,40,30,67,5,37,29,24,96,3,27,70,62,13,4,45,47,59,88,43,20,66,15,46,92,30,4,71,66,78,70,53,99,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[67,60,38,6,88,4,17,72,10,99,71,7,42,25,54,5,26,64,91,50,45,71,6,30,67,48,69,82,8,56,80,67,18,46,66,63,1,20,8,80,47,7,91,16,3,79,87,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[18,54,78,49,80,48,77,40,68,23,60,88,58,80,33,57,11,69,55,53,64,2,94,49,60,92,16,35,81,21,82,96,25,24,96,18,2,5,49,3,50,77,6,32,84,27,18,38,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[68,1,50,4,3,21,42,94,53,24,89,5,92,26,52,36,68,11,85,1,4,42,2,45,15,6,50,4,53,73,25,74,81,88,98,21,67,84,79,97,99,20,95,4,40,46,2,58,87,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[94,10,2,78,88,52,21,3,88,60,6,53,49,71,20,91,12,65,7,49,21,22,11,41,58,99,36,16,9,48,17,24,52,36,23,15,72,16,84,56,2,99,43,76,81,71,29,39,49,17,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[64,39,59,84,86,16,17,66,3,9,43,6,64,18,63,29,68,6,23,7,87,14,26,35,17,12,98,41,53,64,78,18,98,27,28,84,80,67,75,62,10,11,76,90,54,10,5,54,41,39,66,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[43,83,18,37,32,31,52,29,95,47,8,76,35,11,4,53,35,43,34,10,52,57,12,36,20,39,40,55,78,44,7,31,38,26,8,15,56,88,86,1,52,62,10,24,32,5,60,65,53,28,57,99,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[3,50,3,52,7,73,49,92,66,80,1,46,8,67,25,36,73,93,7,42,25,53,13,96,76,83,87,90,54,89,78,22,78,91,73,51,69,9,79,94,83,53,9,40,69,62,10,79,49,47,3,81,30,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[71,54,73,33,51,76,59,54,79,37,56,45,84,17,62,21,98,69,41,95,65,24,39,37,62,3,24,48,54,64,46,82,71,78,33,67,9,16,96,68,52,74,79,68,32,21,13,78,96,60,9,69,20,36,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[73,26,21,44,46,38,17,83,65,98,7,23,52,46,61,97,33,13,60,31,70,15,36,77,31,58,56,93,75,68,21,36,69,53,90,75,25,82,39,50,65,94,29,30,11,33,11,13,96,2,56,47,7,49,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[76,46,73,30,10,20,60,70,14,56,34,26,37,39,48,24,55,76,84,91,39,86,95,61,50,14,53,93,64,67,37,31,10,84,42,70,48,20,10,72,60,61,84,79,69,65,99,73,89,25,85,48,92,56,97,16,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[3,14,80,27,22,30,44,27,67,75,79,32,51,54,81,29,65,14,19,4,13,82,4,91,43,40,12,52,29,99,7,76,60,25,1,7,61,71,37,92,40,47,99,66,57,1,43,44,22,40,53,53,9,69,26,81,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[49,80,56,90,93,87,47,13,75,28,87,23,72,79,32,18,27,20,28,10,37,59,21,18,70,4,79,96,3,31,45,71,81,6,14,18,17,5,31,50,92,79,23,47,9,39,47,91,43,54,69,47,42,95,62,46,32,85,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[37,18,62,85,87,28,64,5,77,51,47,26,30,65,5,70,65,75,59,80,42,52,25,20,44,10,92,17,71,95,52,14,77,13,24,55,11,65,26,91,1,30,63,15,49,48,41,17,67,47,3,68,20,90,98,32,4,40,68,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[90,51,58,60,6,55,23,68,5,19,76,94,82,36,96,43,38,90,87,28,33,83,5,17,70,83,96,93,6,4,78,47,80,6,23,84,75,23,87,72,99,14,50,98,92,38,90,64,61,58,76,94,36,66,87,80,51,35,61,38,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[57,95,64,6,53,36,82,51,40,33,47,14,7,98,78,65,39,58,53,6,50,53,4,69,40,68,36,69,75,78,75,60,3,32,39,24,74,47,26,90,13,40,44,71,90,76,51,24,36,50,25,45,70,80,61,80,61,43,90,64,11,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[18,29,86,56,68,42,79,10,42,44,30,12,96,18,23,18,52,59,2,99,67,46,60,86,43,38,55,17,44,93,42,21,55,14,47,34,55,16,49,24,23,29,96,51,55,10,46,53,27,92,27,46,63,57,30,65,43,27,21,20,24,83,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[81,72,93,19,69,52,48,1,13,83,92,69,20,48,69,59,20,62,5,42,28,89,90,99,32,72,84,17,8,87,36,3,60,31,36,36,81,26,97,36,48,54,56,56,27,16,91,8,23,11,87,99,33,47,2,14,44,73,70,99,43,35,33,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[90,56,61,86,56,12,70,59,63,32,1,15,81,47,71,76,95,32,65,80,54,70,34,51,40,45,33,4,64,55,78,68,88,47,31,47,68,87,3,84,23,44,89,72,35,8,31,76,63,26,90,85,96,67,65,91,19,14,17,86,4,71,32,95,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[37,13,4,22,64,37,37,28,56,62,86,33,7,37,10,44,52,82,52,6,19,52,57,75,90,26,91,24,6,21,14,67,76,30,46,14,35,89,89,41,3,64,56,97,87,63,22,34,3,79,17,45,11,53,25,56,96,61,23,18,63,31,37,37,47,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[77,23,26,70,72,76,77,4,28,64,71,69,14,85,96,54,95,48,6,62,99,83,86,77,97,75,71,66,30,19,57,90,33,1,60,61,14,12,90,99,32,77,56,41,18,14,87,49,10,14,90,64,18,50,21,74,14,16,88,5,45,73,82,47,74,44,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[22,97,41,13,34,31,54,61,56,94,3,24,59,27,98,77,4,9,37,40,12,26,87,9,71,70,7,18,64,57,80,21,12,71,83,94,60,39,73,79,73,19,97,32,64,29,41,7,48,84,85,67,12,74,95,20,24,52,41,67,56,61,29,93,35,72,69,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[72,23,63,66,1,11,7,30,52,56,95,16,65,26,83,90,50,74,60,18,16,48,43,77,37,11,99,98,30,94,91,26,62,73,45,12,87,73,47,27,1,88,66,99,21,41,95,80,2,53,23,32,61,48,32,43,43,83,14,66,95,91,19,81,80,67,25,88,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[8,62,32,18,92,14,83,71,37,96,11,83,39,99,5,16,23,27,10,67,2,25,44,11,55,31,46,64,41,56,44,74,26,81,51,31,45,85,87,9,81,95,22,28,76,69,46,48,64,87,67,76,27,89,31,11,74,16,62,3,60,94,42,47,9,34,94,93,72,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[56,18,90,18,42,17,42,32,14,86,6,53,33,95,99,35,29,15,44,20,49,59,25,54,34,59,84,21,23,54,35,90,78,16,93,13,37,88,54,19,86,67,68,55,66,84,65,42,98,37,87,56,33,28,58,38,28,38,66,27,52,21,81,15,8,22,97,32,85,27,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[91,53,40,28,13,34,91,25,1,63,50,37,22,49,71,58,32,28,30,18,68,94,23,83,63,62,94,76,80,41,90,22,82,52,29,12,18,56,10,8,35,14,37,57,23,65,67,40,72,39,93,39,70,89,40,34,7,46,94,22,20,5,53,64,56,30,5,56,61,88,27,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[23,95,11,12,37,69,68,24,66,10,87,70,43,50,75,7,62,41,83,58,95,93,89,79,45,39,2,22,5,22,95,43,62,11,68,29,17,40,26,44,25,71,87,16,70,85,19,25,59,94,90,41,41,80,61,70,55,60,84,33,95,76,42,63,15,9,3,40,38,12,3,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[9,84,56,80,61,55,85,97,16,94,82,94,98,57,84,30,84,48,93,90,71,5,95,90,73,17,30,98,40,64,65,89,7,79,9,19,56,36,42,30,23,69,73,72,7,5,27,61,24,31,43,48,71,84,21,28,26,65,65,59,65,74,77,20,10,81,61,84,95,8,52,23,70,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[47,81,28,9,98,51,67,64,35,51,59,36,92,82,77,65,80,24,72,53,22,7,27,10,21,28,30,22,48,82,80,48,56,20,14,43,18,25,50,95,90,31,77,8,9,48,44,80,90,22,93,45,82,17,13,96,25,26,8,73,34,99,6,49,24,6,83,51,40,14,15,10,25,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[54,25,10,81,30,64,24,74,75,80,36,75,82,60,22,69,72,91,45,67,3,62,79,54,89,74,44,83,64,96,66,73,44,30,74,50,37,5,9,97,70,1,60,46,37,91,39,75,75,18,58,52,72,78,51,81,86,52,8,97,1,46,43,66,98,62,81,18,70,93,73,8,32,46,34,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[96,80,82,7,59,71,92,53,19,20,88,66,3,26,26,10,24,27,50,82,94,73,63,8,51,33,22,45,19,13,58,33,90,15,22,50,36,13,55,6,35,47,82,52,33,61,36,27,28,46,98,14,73,20,73,32,16,26,80,53,47,66,76,38,94,45,2,1,22,52,47,96,64,58,52,39,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[88,46,23,39,74,63,81,64,20,90,33,33,76,55,58,26,10,46,42,26,74,74,12,83,32,43,9,2,73,55,86,54,85,34,28,23,29,79,91,62,47,41,82,87,99,22,48,90,20,5,96,75,95,4,43,28,81,39,81,1,28,42,78,25,39,77,90,57,58,98,17,36,73,22,63,74,51,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[29,39,74,94,95,78,64,24,38,86,63,87,93,6,70,92,22,16,80,64,29,52,20,27,23,50,14,13,87,15,72,96,81,22,8,49,72,30,70,24,79,31,16,64,59,21,89,34,96,91,48,76,43,53,88,1,57,80,23,81,90,79,58,1,80,87,17,99,86,90,72,63,32,69,14,28,88,69,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[37,17,71,95,56,93,71,35,43,45,4,98,92,94,84,96,11,30,31,27,31,60,92,3,48,5,98,91,86,94,35,90,90,8,48,19,33,28,68,37,59,26,65,96,50,68,22,7,9,49,34,31,77,49,43,6,75,17,81,87,61,79,52,26,27,72,29,50,7,98,86,1,17,10,46,64,24,18,56,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[51,30,25,94,88,85,79,91,40,33,63,84,49,67,98,92,15,26,75,19,82,5,18,78,65,93,61,48,91,43,59,41,70,51,22,15,92,81,67,91,46,98,11,11,65,31,66,10,98,65,83,21,5,56,5,98,73,67,46,74,69,34,8,30,5,52,7,98,32,95,30,94,65,50,24,63,28,81,99,57,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[19,23,61,36,9,89,71,98,65,17,30,29,89,26,79,74,94,11,44,48,97,54,81,55,39,66,69,45,28,47,13,86,15,76,74,70,84,32,36,33,79,20,78,14,41,47,89,28,81,5,99,66,81,86,38,26,6,25,13,60,54,55,23,53,27,5,89,25,23,11,13,54,59,54,56,34,16,24,53,44,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[13,40,57,72,21,15,60,8,4,19,11,98,34,45,9,97,86,71,3,15,56,19,15,44,97,31,90,4,87,87,76,8,12,30,24,62,84,28,12,85,82,53,99,52,13,94,6,65,97,86,9,50,94,68,69,74,30,67,87,94,63,7,78,27,80,36,69,41,6,92,32,78,37,82,30,5,18,87,99,72,19,99,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[44,20,55,77,69,91,27,31,28,81,80,27,2,7,97,23,95,98,12,25,75,29,47,71,7,47,78,39,41,59,27,76,13,15,66,61,68,35,69,86,16,53,67,63,99,85,41,56,8,28,33,40,94,76,90,85,31,70,24,65,84,65,99,82,19,25,54,37,21,46,33,2,52,99,51,33,26,4,87,2,8,18,96,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[54,42,61,45,91,6,64,79,80,82,32,16,83,63,42,49,19,78,65,97,40,42,14,61,49,34,4,18,25,98,59,30,82,72,26,88,54,36,21,75,3,88,99,53,46,51,55,78,22,94,34,40,68,87,84,25,30,76,25,8,92,84,42,61,40,38,9,99,40,23,29,39,46,55,10,90,35,84,56,70,63,23,91,39,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[52,92,3,71,89,7,9,37,68,66,58,20,44,92,51,56,13,71,79,99,26,37,2,6,16,67,36,52,58,16,79,73,56,60,59,27,44,77,94,82,20,50,98,33,9,87,94,37,40,83,64,83,58,85,17,76,53,2,83,52,22,27,39,20,48,92,45,21,9,42,24,23,12,37,52,28,50,78,79,20,86,62,73,20,59,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[54,96,80,15,91,90,99,70,10,9,58,90,93,50,81,99,54,38,36,10,30,11,35,84,16,45,82,18,11,97,36,43,96,79,97,65,40,48,23,19,17,31,64,52,65,65,37,32,65,76,99,79,34,65,79,27,55,33,3,1,33,27,61,28,66,8,4,70,49,46,48,83,1,45,19,96,13,81,14,21,31,79,93,85,50,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[92,92,48,84,59,98,31,53,23,27,15,22,79,95,24,76,5,79,16,93,97,89,38,89,42,83,2,88,94,95,82,21,1,97,48,39,31,78,9,65,50,56,97,61,1,7,65,27,21,23,14,15,80,97,44,78,49,35,33,45,81,74,34,5,31,57,9,38,94,7,69,54,69,32,65,68,46,68,78,90,24,28,49,51,45,86,35,0,0,0,0,0,0,0,0,0,0,0,0,0],[41,63,89,76,87,31,86,9,46,14,87,82,22,29,47,16,13,10,70,72,82,95,48,64,58,43,13,75,42,69,21,12,67,13,64,85,58,23,98,9,37,76,5,22,31,12,66,50,29,99,86,72,45,25,10,28,19,6,90,43,29,31,67,79,46,25,74,14,97,35,76,37,65,46,23,82,6,22,30,76,93,66,94,17,96,13,20,72,0,0,0,0,0,0,0,0,0,0,0,0],[63,40,78,8,52,9,90,41,70,28,36,14,46,44,85,96,24,52,58,15,87,37,5,98,99,39,13,61,76,38,44,99,83,74,90,22,53,80,56,98,30,51,63,39,44,30,91,91,4,22,27,73,17,35,53,18,35,45,54,56,27,78,48,13,69,36,44,38,71,25,30,56,15,22,73,43,32,69,59,25,93,83,45,11,34,94,44,39,92,0,0,0,0,0,0,0,0,0,0,0],[12,36,56,88,13,96,16,12,55,54,11,47,19,78,17,17,68,81,77,51,42,55,99,85,66,27,81,79,93,42,65,61,69,74,14,1,18,56,12,1,58,37,91,22,42,66,83,25,19,4,96,41,25,45,18,69,96,88,36,93,10,12,98,32,44,83,83,4,72,91,4,27,73,7,34,37,71,60,59,31,1,54,54,44,96,93,83,36,4,45,0,0,0,0,0,0,0,0,0,0],[30,18,22,20,42,96,65,79,17,41,55,69,94,81,29,80,91,31,85,25,47,26,43,49,2,99,34,67,99,76,16,14,15,93,8,32,99,44,61,77,67,50,43,55,87,55,53,72,17,46,62,25,50,99,73,5,93,48,17,31,70,80,59,9,44,59,45,13,74,66,58,94,87,73,16,14,85,38,74,99,64,23,79,28,71,42,20,37,82,31,23,0,0,0,0,0,0,0,0,0],[51,96,39,65,46,71,56,13,29,68,53,86,45,33,51,49,12,91,21,21,76,85,2,17,98,15,46,12,60,21,88,30,92,83,44,59,42,50,27,88,46,86,94,73,45,54,23,24,14,10,94,21,20,34,23,51,4,83,99,75,90,63,60,16,22,33,83,70,11,32,10,50,29,30,83,46,11,5,31,17,86,42,49,1,44,63,28,60,7,78,95,40,0,0,0,0,0,0,0,0],[44,61,89,59,4,49,51,27,69,71,46,76,44,4,9,34,56,39,15,6,94,91,75,90,65,27,56,23,74,6,23,33,36,69,14,39,5,34,35,57,33,22,76,46,56,10,61,65,98,9,16,69,4,62,65,18,99,76,49,18,72,66,73,83,82,40,76,31,89,91,27,88,17,35,41,35,32,51,32,67,52,68,74,85,80,57,7,11,62,66,47,22,67,0,0,0,0,0,0,0],[65,37,19,97,26,17,16,24,24,17,50,37,64,82,24,36,32,11,68,34,69,31,32,89,79,93,96,68,49,90,14,23,4,4,67,99,81,74,70,74,36,96,68,9,64,39,88,35,54,89,96,58,66,27,88,97,32,14,6,35,78,20,71,6,85,66,57,2,58,91,72,5,29,56,73,48,86,52,9,93,22,57,79,42,12,1,31,68,17,59,63,76,7,77,0,0,0,0,0,0],[73,81,14,13,17,20,11,9,1,83,8,85,91,70,84,63,62,77,37,7,47,1,59,95,39,69,39,21,99,9,87,2,97,16,92,36,74,71,90,66,33,73,73,75,52,91,11,12,26,53,5,26,26,48,61,50,90,65,1,87,42,47,74,35,22,73,24,26,56,70,52,5,48,41,31,18,83,27,21,39,80,85,26,8,44,2,71,7,63,22,5,52,19,8,20,0,0,0,0,0],[17,25,21,11,72,93,33,49,64,23,53,82,3,13,91,65,85,2,40,5,42,31,77,42,5,36,6,54,4,58,7,76,87,83,25,57,66,12,74,33,85,37,74,32,20,69,3,97,91,68,82,44,19,14,89,28,85,85,80,53,34,87,58,98,88,78,48,65,98,40,11,57,10,67,70,81,60,79,74,72,97,59,79,47,30,20,54,80,89,91,14,5,33,36,79,39,0,0,0,0],[60,85,59,39,60,7,57,76,77,92,6,35,15,72,23,41,45,52,95,18,64,79,86,53,56,31,69,11,91,31,84,50,44,82,22,81,41,40,30,42,30,91,48,94,74,76,64,58,74,25,96,57,14,19,3,99,28,83,15,75,99,1,89,85,79,50,3,95,32,67,44,8,7,41,62,64,29,20,14,76,26,55,48,71,69,66,19,72,44,25,14,1,48,74,12,98,7,0,0,0],[64,66,84,24,18,16,27,48,20,14,47,69,30,86,48,40,23,16,61,21,51,50,26,47,35,33,91,28,78,64,43,68,4,79,51,8,19,60,52,95,6,68,46,86,35,97,27,58,4,65,30,58,99,12,12,75,91,39,50,31,42,64,70,4,46,7,98,73,98,93,37,89,77,91,64,71,64,65,66,21,78,62,81,74,42,20,83,70,73,95,78,45,92,27,34,53,71,15,0,0],[30,11,85,31,34,71,13,48,5,14,44,3,19,67,23,73,19,57,6,90,94,72,57,69,81,62,59,68,88,57,55,69,49,13,7,87,97,80,89,5,71,5,5,26,38,40,16,62,45,99,18,38,98,24,21,26,62,74,69,4,85,57,77,35,58,67,91,79,79,57,86,28,66,34,72,51,76,78,36,95,63,90,8,78,47,63,45,31,22,70,52,48,79,94,15,77,61,67,68,0],[23,33,44,81,80,92,93,75,94,88,23,61,39,76,22,3,28,94,32,6,49,65,41,34,18,23,8,47,62,60,3,63,33,13,80,52,31,54,73,43,70,26,16,69,57,87,83,31,3,93,70,81,47,95,77,44,29,68,39,51,56,59,63,7,25,70,7,77,43,53,64,3,94,42,95,39,18,1,66,21,16,97,20,50,90,16,70,10,95,69,29,6,25,61,41,26,15,59,63,35]];
+```
+
+## --seed-contents--
+
+```js
+function maximumPathSumII(triangle) {
+
+ return true;
+}
+
+const testTriangle = [[3, 0, 0, 0],
+ [7, 4, 0, 0],
+ [2, 4, 6, 0],
+ [8, 5, 9, 3]];
+
+maximumPathSumII(testTriangle);
+```
+
+# --solutions--
+
+```js
+function maximumPathSumII(triangle) {
+ const newTriangle = [];
+ for (let i = 0; i < triangle.length; i++) {
+ newTriangle.push(triangle[i].slice());
+ }
+
+ for (let i = newTriangle.length - 2; i >= 0; i--) {
+ for (let j = i; j >= 0; j--) {
+ let higherOption = 0;
+ if (newTriangle[i + 1][j + 1] > newTriangle[i + 1][j]) {
+ higherOption = newTriangle[i + 1][j + 1];
+ } else {
+ higherOption = newTriangle[i + 1][j];
+ }
+ newTriangle[i][j] += higherOption;
+ }
+ }
+ return newTriangle[0][0];
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-68-magic-5-gon-ring.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-68-magic-5-gon-ring.md
new file mode 100644
index 00000000000..7d8984cc7f8
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-68-magic-5-gon-ring.md
@@ -0,0 +1,71 @@
+---
+id: 5900f3b01000cf542c50fec3
+title: 'Problem 68: Magic 5-gon ring'
+challengeType: 1
+forumTopicId: 302180
+dashedName: problem-68-magic-5-gon-ring
+---
+
+# --description--
+
+Consider the following "magic" 3-gon ring, filled with the numbers 1 to 6, and each line adding to nine.
+
+
+
+|
Total
|
Solution Set
|
+| -------------------------------------- | --------------------------------------------- |
+| 9 | 4,2,3; 5,3,1; 6,1,2 |
+| 9 | 4,3,2; 6,2,1; 5,1,3 |
+| 10 | 2,3,5; 4,5,1; 6,1,3 |
+| 10 | 2,5,3; 6,3,1; 4,1,5 |
+| 11 | 1,4,6; 3,6,2; 5,2,4 |
+| 11 | 1,6,4; 5,4,2; 3,2,6 |
+| 12 | 1,5,6; 2,6,4; 3,4,5 |
+| 12 | 1,6,5; 3,5,4; 2,4,6 |
+
+
+
+| $n$ | $\text{Relatively Prime}$ | $\displaystyle{\phi}(n)$ | $\displaystyle\frac{n}{{\phi}(n)}$ |
+| --- | ------------------------- | ------------------------ | ---------------------------------- |
+| 2 | 1 | 1 | 2 |
+| 3 | 1,2 | 2 | 1.5 |
+| 4 | 1,3 | 2 | 2 |
+| 5 | 1,2,3,4 | 4 | 1.25 |
+| 6 | 1,5 | 2 | 3 |
+| 7 | 1,2,3,4,5,6 | 6 | 1.1666... |
+| 8 | 1,3,5,7 | 4 | 2 |
+| 9 | 1,2,4,5,7,8 | 6 | 1.5 |
+| 10 | 1,3,7,9 | 4 | 2.5 |
+
+
+
+It can be seen that `n` = 6 produces a maximum $\displaystyle\frac{n}{{\phi}(n)}$ for `n` ≤ 10.
+
+Find the value of `n` ≤ `limit` for which $\displaystyle\frac{n}{{\phi(n)}}$ is a maximum.
+
+# --hints--
+
+`totientMaximum(10)` should return a number.
+
+```js
+assert(typeof totientMaximum(10) === 'number');
+```
+
+`totientMaximum(10)` should return `6`.
+
+```js
+assert.strictEqual(totientMaximum(10), 6);
+```
+
+`totientMaximum(10000)` should return `2310`.
+
+```js
+assert.strictEqual(totientMaximum(10000), 2310);
+```
+
+`totientMaximum(500000)` should return `30030`.
+
+```js
+assert.strictEqual(totientMaximum(500000), 30030);
+```
+
+`totientMaximum(1000000)` should return `510510`.
+
+```js
+assert.strictEqual(totientMaximum(1000000), 510510);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function totientMaximum(limit) {
+
+ return true;
+}
+
+totientMaximum(10);
+```
+
+# --solutions--
+
+```js
+function totientMaximum(limit) {
+ function getSievePrimes(max) {
+ const primesMap = new Array(max).fill(true);
+ primesMap[0] = false;
+ primesMap[1] = false;
+ const primes = [];
+ for (let i = 2; i < max; i = i + 2) {
+ if (primesMap[i]) {
+ primes.push(i);
+ for (let j = i * i; j < max; j = j + i) {
+ primesMap[j] = false;
+ }
+ }
+ if (i === 2) {
+ i = 1;
+ }
+ }
+ return primes;
+ }
+
+ const MAX_PRIME = 50;
+ const primes = getSievePrimes(MAX_PRIME);
+ let result = 1;
+
+ for (let i = 0; result * primes[i] < limit; i++) {
+ result *= primes[i];
+ }
+ return result;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-7-10001st-prime.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-7-10001st-prime.md
new file mode 100644
index 00000000000..6780c8fa2d1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-7-10001st-prime.md
@@ -0,0 +1,86 @@
+---
+id: 5900f3731000cf542c50fe86
+title: 'Problem 7: 10001st prime'
+challengeType: 1
+forumTopicId: 302182
+dashedName: problem-7-10001st-prime
+---
+
+# --description--
+
+By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13, we can see that the 6th prime is 13.
+
+What is the `n`th prime number?
+
+# --hints--
+
+`nthPrime(6)` should return a number.
+
+```js
+assert(typeof nthPrime(6) === 'number');
+```
+
+`nthPrime(6)` should return 13.
+
+```js
+assert.strictEqual(nthPrime(6), 13);
+```
+
+`nthPrime(10)` should return 29.
+
+```js
+assert.strictEqual(nthPrime(10), 29);
+```
+
+`nthPrime(100)` should return 541.
+
+```js
+assert.strictEqual(nthPrime(100), 541);
+```
+
+`nthPrime(1000)` should return 7919.
+
+```js
+assert.strictEqual(nthPrime(1000), 7919);
+```
+
+`nthPrime(10001)` should return 104743.
+
+```js
+assert.strictEqual(nthPrime(10001), 104743);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nthPrime(n) {
+
+ return true;
+}
+
+nthPrime(10001);
+```
+
+# --solutions--
+
+```js
+const nthPrime = n => {
+ let pN = 2;
+ let step = 0;
+ while (step < n) {
+ let isPrime = true;
+ let rootN = Math.sqrt(pN);
+ for (let i = 2; i <= rootN; i++) {
+ if (!(pN % i)) {
+ isPrime = false;
+ break;
+ }
+ }
+ isPrime ? step++ : '';
+ pN++;
+ }
+ return pN - 1;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-70-totient-permutation.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-70-totient-permutation.md
new file mode 100644
index 00000000000..1328f1ca1e7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-70-totient-permutation.md
@@ -0,0 +1,118 @@
+---
+id: 5900f3b21000cf542c50fec5
+title: 'Problem 70: Totient permutation'
+challengeType: 1
+forumTopicId: 302183
+dashedName: problem-70-totient-permutation
+---
+
+# --description--
+
+Euler's Totient function, ${\phi}(n)$ (sometimes called the phi function), is used to determine the number of positive numbers less than or equal to `n` which are relatively prime to `n`. For example, as 1, 2, 4, 5, 7, and 8, are all less than nine and relatively prime to nine, ${\phi}(9) = 6$. The number 1 is considered to be relatively prime to every positive number, so ${\phi}(1) = 1$.
+
+Interestingly, ${\phi}(87109) = 79180$, and it can be seen that 87109 is a permutation of 79180.
+
+Find the value of `n`, 1 < `n` < `limit`, for which ${\phi}(n)$ is a permutation of `n` and the ratio $\displaystyle\frac{n}{{\phi}(n)}$ produces a minimum.
+
+# --hints--
+
+`totientPermutation(10000)` should return a number.
+
+```js
+assert(typeof totientPermutation(10000) === 'number');
+```
+
+`totientPermutation(10000)` should return `4435`.
+
+```js
+assert.strictEqual(totientPermutation(10000), 4435);
+```
+
+`totientPermutation(100000)` should return `75841`.
+
+```js
+assert.strictEqual(totientPermutation(100000), 75841);
+```
+
+`totientPermutation(500000)` should return `474883`.
+
+```js
+assert.strictEqual(totientPermutation(500000), 474883);
+```
+
+`totientPermutation(10000000)` should return `8319823`.
+
+```js
+assert.strictEqual(totientPermutation(10000000), 8319823);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function totientPermutation(limit) {
+
+ return true;
+}
+
+totientPermutation(10000);
+```
+
+# --solutions--
+
+```js
+function totientPermutation(limit) {
+ function getSievePrimes(max) {
+ const primes = [];
+ const primesMap = new Array(max).fill(true);
+ primesMap[0] = false;
+ primesMap[1] = false;
+
+ for (let i = 2; i < max; i += 2) {
+ if (primesMap[i]) {
+ primes.push(i);
+ for (let j = i * i; j < max; j += i) {
+ primesMap[j] = false;
+ }
+ }
+ if (i === 2) {
+ i = 1;
+ }
+ }
+ return primes;
+ }
+
+ function sortDigits(number) {
+ return number.toString().split('').sort().join('');
+ }
+
+ function isPermutation(numberA, numberB) {
+ return sortDigits(numberA) === sortDigits(numberB);
+ }
+
+ const MAX_PRIME = 4000;
+ const primes = getSievePrimes(MAX_PRIME);
+
+ let nValue = 1;
+ let minRatio = Infinity;
+
+ for (let i = 1; i < primes.length; i++) {
+ for (let j = i + 1; j < primes.length; j++) {
+ const num = primes[i] * primes[j];
+ if (num > limit) {
+ break;
+ }
+
+ const phi = (primes[i] - 1) * (primes[j] - 1);
+ const ratio = num / phi;
+
+ if (minRatio > ratio && isPermutation(num, phi)) {
+ nValue = num;
+ minRatio = ratio;
+ }
+ }
+ }
+ return nValue;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-71-ordered-fractions.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-71-ordered-fractions.md
new file mode 100644
index 00000000000..267a17669b0
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-71-ordered-fractions.md
@@ -0,0 +1,95 @@
+---
+id: 5900f3b31000cf542c50fec6
+title: 'Problem 71: Ordered fractions'
+challengeType: 1
+forumTopicId: 302184
+dashedName: problem-71-ordered-fractions
+---
+
+# --description--
+
+Consider the fraction, $\frac{n}{d}$, where `n` and `d` are positive integers. If `n` < `d` and highest common factor, ${{HCF}(n, d)} = 1$, it is called a reduced proper fraction.
+
+If we list the set of reduced proper fractions for `d` ≤ 8 in ascending order of size, we get:
+
+$$\frac{1}{8}, \frac{1}{7}, \frac{1}{6}, \frac{1}{5}, \frac{1}{4}, \frac{2}{7}, \frac{1}{3}, \frac{3}{8}, \frac{\textbf2}{\textbf5}, \frac{3}{7}, \frac{1}{2}, \frac{4}{7}, \frac{3}{5}, \frac{5}{8}, \frac{2}{3}, \frac{5}{7}, \frac{3}{4}, \frac{4}{5}, \frac{5}{6}, \frac{6}{7}, \frac{7}{8}$$
+
+It can be seen that $\frac{2}{5}$ is the fraction immediately to the left of $\frac{3}{7}$.
+
+By listing the set of reduced proper fractions for `d` ≤ `limit` in ascending order of size, find the numerator of the fraction immediately to the left of $\frac{3}{7}$.
+
+# --hints--
+
+`orderedFractions(8)` should return a number.
+
+```js
+assert(typeof orderedFractions(8) === 'number');
+```
+
+`orderedFractions(8)` should return `2`.
+
+```js
+assert.strictEqual(orderedFractions(8), 2);
+```
+
+`orderedFractions(10)` should return `2`.
+
+```js
+assert.strictEqual(orderedFractions(10), 2);
+```
+
+`orderedFractions(9994)` should return `4283`.
+
+```js
+assert.strictEqual(orderedFractions(9994), 4283);
+```
+
+`orderedFractions(500000)` should return `214283`.
+
+```js
+assert.strictEqual(orderedFractions(500000), 214283);
+```
+
+`orderedFractions(1000000)` should return `428570`.
+
+```js
+assert.strictEqual(orderedFractions(1000000), 428570);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function orderedFractions(limit) {
+
+ return true;
+}
+
+orderedFractions(8);
+```
+
+# --solutions--
+
+```js
+function orderedFractions(limit) {
+ const fractions = [];
+ const fractionValues = {};
+ const highBoundary = 3 / 7;
+ let lowBoundary = 2 / 7;
+
+ for (let denominator = limit; denominator > 2; denominator--) {
+ let numerator = Math.floor((3 * denominator - 1) / 7);
+ let value = numerator / denominator;
+ if (value > highBoundary || value < lowBoundary) {
+ continue;
+ }
+ fractionValues[value] = [numerator, denominator];
+ fractions.push(value);
+ lowBoundary = value;
+ }
+
+ fractions.sort();
+ return fractionValues[fractions[fractions.length - 1]][0];
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-72-counting-fractions.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-72-counting-fractions.md
new file mode 100644
index 00000000000..dab392ae0ae
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-72-counting-fractions.md
@@ -0,0 +1,90 @@
+---
+id: 5900f3b41000cf542c50fec7
+title: 'Problem 72: Counting fractions'
+challengeType: 1
+forumTopicId: 302185
+dashedName: problem-72-counting-fractions
+---
+
+# --description--
+
+Consider the fraction, $\frac{n}{d}$, where `n` and `d` are positive integers. If `n` < `d` and highest common factor, ${HCF}(n, d) = 1$, it is called a reduced proper fraction.
+
+If we list the set of reduced proper fractions for `d` ≤ 8 in ascending order of size, we get:
+
+$$\frac{1}{8}, \frac{1}{7}, \frac{1}{6}, \frac{1}{5}, \frac{1}{4}, \frac{2}{7}, \frac{1}{3}, \frac{3}{8}, \frac{2}{5}, \frac{3}{7}, \frac{1}{2}, \frac{4}{7}, \frac{3}{5}, \frac{5}{8}, \frac{2}{3}, \frac{5}{7}, \frac{3}{4}, \frac{4}{5}, \frac{5}{6}, \frac{6}{7}, \frac{7}{8}$$
+
+It can be seen that there are `21` elements in this set.
+
+How many elements would be contained in the set of reduced proper fractions for `d` ≤ `limit`?
+
+# --hints--
+
+`countingFractions(8)` should return a number.
+
+```js
+assert(typeof countingFractions(8) === 'number');
+```
+
+`countingFractions(8)` should return `21`.
+
+```js
+assert.strictEqual(countingFractions(8), 21);
+```
+
+`countingFractions(20000)` should return `121590395`.
+
+```js
+assert.strictEqual(countingFractions(20000), 121590395);
+```
+
+`countingFractions(500000)` should return `75991039675`.
+
+```js
+assert.strictEqual(countingFractions(500000), 75991039675);
+```
+
+`countingFractions(1000000)` should return `303963552391`.
+
+```js
+assert.strictEqual(countingFractions(1000000), 303963552391);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countingFractions(limit) {
+
+ return true;
+}
+
+countingFractions(8);
+```
+
+# --solutions--
+
+```js
+function countingFractions(limit) {
+ const phi = {};
+ let count = 0;
+
+ for (let i = 2; i <= limit; i++) {
+ if (!phi[i]) {
+ phi[i] = i;
+ }
+ if (phi[i] === i) {
+ for (let j = i; j <= limit; j += i) {
+ if (!phi[j]) {
+ phi[j] = j;
+ }
+ phi[j] = (phi[j] / i) * (i - 1);
+ }
+ }
+ count += phi[i];
+ }
+
+ return count;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-73-counting-fractions-in-a-range.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-73-counting-fractions-in-a-range.md
new file mode 100644
index 00000000000..b53ef258385
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-73-counting-fractions-in-a-range.md
@@ -0,0 +1,83 @@
+---
+id: 5900f3b61000cf542c50fec8
+title: 'Problem 73: Counting fractions in a range'
+challengeType: 1
+forumTopicId: 302186
+dashedName: problem-73-counting-fractions-in-a-range
+---
+
+# --description--
+
+Consider the fraction, $\frac{n}{d}$, where `n` and `d` are positive integers. If `n` < `d` and highest common factor, ${HCF}(n, d) = 1$, it is called a reduced proper fraction.
+
+If we list the set of reduced proper fractions for `d` ≤ 8 in ascending order of size, we get:
+
+$$\frac{1}{8}, \frac{1}{7}, \frac{1}{6}, \frac{1}{5}, \frac{1}{4}, \frac{2}{7}, \frac{1}{3}, \mathbf{\frac{3}{8}, \frac{2}{5}, \frac{3}{7}}, \frac{1}{2}, \frac{4}{7}, \frac{3}{5}, \frac{5}{8}, \frac{2}{3}, \frac{5}{7}, \frac{3}{4}, \frac{4}{5}, \frac{5}{6}, \frac{6}{7}, \frac{7}{8}$$
+
+It can be seen that there are `3` fractions between $\frac{1}{3}$ and $\frac{1}{2}$.
+
+How many fractions lie between $\frac{1}{3}$ and $\frac{1}{2}$ in the sorted set of reduced proper fractions for `d` ≤ `limit`?
+
+# --hints--
+
+`countingFractionsInARange(8)` should return a number.
+
+```js
+assert(typeof countingFractionsInARange(8) === 'number');
+```
+
+`countingFractionsInARange(8)` should return `3`.
+
+```js
+assert.strictEqual(countingFractionsInARange(8), 3);
+```
+
+`countingFractionsInARange(1000)` should return `50695`.
+
+```js
+assert.strictEqual(countingFractionsInARange(1000), 50695);
+```
+
+`countingFractionsInARange(6000)` should return `1823861`.
+
+```js
+assert.strictEqual(countingFractionsInARange(6000), 1823861);
+```
+
+`countingFractionsInARange(12000)` should return `7295372`.
+
+```js
+assert.strictEqual(countingFractionsInARange(12000), 7295372);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countingFractionsInARange(limit) {
+
+ return true;
+}
+
+countingFractionsInARange(8);
+```
+
+# --solutions--
+
+```js
+function countingFractionsInARange(limit) {
+ let result = 0;
+ const stack = [[3, 2]];
+ while (stack.length > 0) {
+ const [startDenominator, endDenominator] = stack.pop();
+ const curDenominator = startDenominator + endDenominator;
+ if (curDenominator <= limit) {
+ result++;
+ stack.push([startDenominator, curDenominator]);
+ stack.push([curDenominator, endDenominator]);
+ }
+ }
+ return result;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-74-digit-factorial-chains.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-74-digit-factorial-chains.md
new file mode 100644
index 00000000000..0b94dee88dd
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-74-digit-factorial-chains.md
@@ -0,0 +1,127 @@
+---
+id: 5900f3b61000cf542c50fec9
+title: 'Problem 74: Digit factorial chains'
+challengeType: 1
+forumTopicId: 302187
+dashedName: problem-74-digit-factorial-chains
+---
+
+# --description--
+
+The number 145 is well known for the property that the sum of the factorial of its digits is equal to 145:
+
+$$1! + 4! + 5! = 1 + 24 + 120 = 145$$
+
+Perhaps less well known is 169, in that it produces the longest chain of numbers that link back to 169; it turns out that there are only three such loops that exist:
+
+$$\begin{align} &169 → 363601 → 1454 → 169\\\\
+&871 → 45361 → 871\\\\ &872 → 45362 → 872\\\\
+\end{align}$$
+
+It is not difficult to prove that EVERY starting number will eventually get stuck in a loop. For example,
+
+$$\begin{align} &69 → 363600 → 1454 → 169 → 363601\\ (→ 1454)\\\\
+&78 → 45360 → 871 → 45361\\ (→ 871)\\\\ &540 → 145\\ (→ 145)\\\\
+\end{align}$$
+
+Starting with 69 produces a chain of five non-repeating terms, but the longest non-repeating chain with a starting number below one million is sixty terms.
+
+How many chains, with a starting number below `n`, contain exactly sixty non-repeating terms?
+
+# --hints--
+
+`digitFactorialChains(2000)` should return a number.
+
+```js
+assert(typeof digitFactorialChains(2000) === 'number');
+```
+
+`digitFactorialChains(2000)` should return `6`.
+
+```js
+assert.strictEqual(digitFactorialChains(2000), 6);
+```
+
+`digitFactorialChains(100000)` should return `42`.
+
+```js
+assert.strictEqual(digitFactorialChains(100000), 42);
+```
+
+`digitFactorialChains(500000)` should return `282`.
+
+```js
+assert.strictEqual(digitFactorialChains(500000), 282);
+```
+
+`digitFactorialChains(1000000)` should return `402`.
+
+```js
+assert.strictEqual(digitFactorialChains(1000000), 402);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitFactorialChains(n) {
+
+ return true;
+}
+
+digitFactorialChains(2000);
+```
+
+# --solutions--
+
+```js
+function digitFactorialChains(n) {
+ function sumDigitsFactorials(number) {
+ let sum = 0;
+ while (number > 0) {
+ sum += factorials[number % 10];
+ number = Math.floor(number / 10);
+ }
+ return sum;
+ }
+
+ const factorials = [1];
+ for (let i = 1; i < 10; i++) {
+ factorials.push(factorials[factorials.length - 1] * i);
+ }
+
+ const sequences = {
+ 169: 3,
+ 871: 2,
+ 872: 2,
+ 1454: 3,
+ 45362: 2,
+ 45461: 2,
+ 3693601: 3
+ };
+ let result = 0;
+
+ for (let i = 2; i < n; i++) {
+ let curNum = i;
+ let chainLength = 0;
+ const curSequence = [];
+ while (curSequence.indexOf(curNum) === -1) {
+ curSequence.push(curNum);
+ curNum = sumDigitsFactorials(curNum);
+ chainLength++;
+ if (sequences.hasOwnProperty(curNum) > 0) {
+ chainLength += sequences[curNum];
+ break;
+ }
+ }
+ if (chainLength === 60) {
+ result++;
+ }
+ for (let j = 1; j < curSequence.length; j++) {
+ sequences[curSequence[j]] = chainLength - j;
+ }
+ }
+ return result;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-75-singular-integer-right-triangles.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-75-singular-integer-right-triangles.md
new file mode 100644
index 00000000000..40ab4fb3e00
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-75-singular-integer-right-triangles.md
@@ -0,0 +1,117 @@
+---
+id: 5900f3b71000cf542c50feca
+title: 'Problem 75: Singular integer right triangles'
+challengeType: 1
+forumTopicId: 302188
+dashedName: problem-75-singular-integer-right-triangles
+---
+
+# --description--
+
+It turns out that 12 cm is the smallest length of wire that can be bent to form an integer sided right angle triangle in exactly one way, but there are many more examples.
+
+
+ 12 cm: (3,4,5)24 cm: (6,8,10)30 cm: (5,12,13)36 cm: (9,12,15)40 cm: (8,15,17)48 cm: (12,16,20)
+
+In contrast, some lengths of wire, like 20 cm, cannot be bent to form an integer sided right angle triangle, and other lengths allow more than one solution to be found; for example, using 120 cm it is possible to form exactly three different integer sided right angle triangles.
+
+
+ 120 cm: (30,40,50), (20,48,52), (24,45,51)
+
+Given that L is the length of the wire, for how many values of L ≤ `n` can exactly one, integer sided right angle, triangle be formed?
+
+# --hints--
+
+`singularIntRightTriangles(48)` should return a number.
+
+```js
+assert(typeof singularIntRightTriangles(48) === 'number');
+```
+
+`singularIntRightTriangles(48)` should return `6`.
+
+```js
+assert.strictEqual(singularIntRightTriangles(48), 6);
+```
+
+`singularIntRightTriangles(700000)` should return `75783`.
+
+```js
+assert.strictEqual(singularIntRightTriangles(700000), 75783);
+```
+
+`singularIntRightTriangles(1000000)` should return `107876`.
+
+```js
+assert.strictEqual(singularIntRightTriangles(1000000), 107876);
+```
+
+`singularIntRightTriangles(1500000)` should return `161667`.
+
+```js
+assert.strictEqual(singularIntRightTriangles(1500000), 161667);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function singularIntRightTriangles(n) {
+
+ return true;
+}
+
+singularIntRightTriangles(48);
+```
+
+# --solutions--
+
+```js
+function singularIntRightTriangles(limit) {
+ function euclidFormula(m, n) {
+ return [m ** 2 - n ** 2, 2 * m * n, m ** 2 + n ** 2];
+ }
+
+ function gcd(numberA, numberB) {
+ if (numberB === 0) {
+ return numberA;
+ }
+ return gcd(numberB, numberA % numberB);
+ }
+
+ function notBothOdd(numberA, numberB) {
+ return (numberA + numberB) % 2 === 1;
+ }
+
+ function areCoprime(numberA, numberB) {
+ return gcd(numberA, numberB) === 1;
+ }
+
+ const trianglesWithPerimeter = new Array(limit + 1).fill(0);
+ const mLimit = Math.sqrt(limit / 2);
+
+ for (let m = 2; m < mLimit; m++) {
+ for (let n = 1; n < m; n++) {
+ if (notBothOdd(m, n) && areCoprime(m, n)) {
+ const [sideA, sideB, sideC] = euclidFormula(m, n);
+ const perimeter = sideA + sideB + sideC;
+ let curPerimeter = perimeter;
+ while (curPerimeter <= limit) {
+ trianglesWithPerimeter[curPerimeter]++;
+ curPerimeter += perimeter;
+ }
+ }
+ }
+ }
+ return trianglesWithPerimeter.filter(trianglesCount => trianglesCount === 1)
+ .length;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-76-counting-summations.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-76-counting-summations.md
new file mode 100644
index 00000000000..04a358b584d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-76-counting-summations.md
@@ -0,0 +1,83 @@
+---
+id: 5900f3b81000cf542c50fecb
+title: 'Problem 76: Counting summations'
+challengeType: 1
+forumTopicId: 302189
+dashedName: problem-76-counting-summations
+---
+
+# --description--
+
+It is possible to write five as a sum in exactly six different ways:
+
+
+ 4 + 1
+
+How many different ways can `n` be written as a sum of at least two positive integers?
+
+# --hints--
+
+`countingSummations(5)` should return a number.
+
+```js
+assert(typeof countingSummations(5) === 'number');
+```
+
+`countingSummations(5)` should return `6`.
+
+```js
+assert.strictEqual(countingSummations(5), 6);
+```
+
+`countingSummations(20)` should return `626`.
+
+```js
+assert.strictEqual(countingSummations(20), 626);
+```
+
+`countingSummations(50)` should return `204225`.
+
+```js
+assert.strictEqual(countingSummations(50), 204225);
+```
+
+`countingSummations(100)` should return `190569291`.
+
+```js
+assert.strictEqual(countingSummations(100), 190569291);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countingSummations(n) {
+
+ return true;
+}
+
+countingSummations(5);
+```
+
+# --solutions--
+
+```js
+function countingSummations(n) {
+ const combinations = new Array(n + 1).fill(0);
+ combinations[0] = 1;
+
+ for (let i = 1; i < n; i++) {
+ for (let j = i; j < n + 1; j++) {
+ combinations[j] += combinations[j - i];
+ }
+ }
+ return combinations[n];
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-77-prime-summations.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-77-prime-summations.md
new file mode 100644
index 00000000000..a5639dc73a4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-77-prime-summations.md
@@ -0,0 +1,110 @@
+---
+id: 5900f3b91000cf542c50fecc
+title: 'Problem 77: Prime summations'
+challengeType: 1
+forumTopicId: 302190
+dashedName: problem-77-prime-summations
+---
+
+# --description--
+
+It is possible to write ten as the sum of primes in exactly five different ways:
+
+
+ 7 + 3
+
+What is the first value which can be written as the sum of primes in over `n` ways?
+
+# --hints--
+
+`primeSummations(5)` should return a number.
+
+```js
+assert(typeof primeSummations(5) === 'number');
+```
+
+`primeSummations(5)` should return `11`.
+
+```js
+assert.strictEqual(primeSummations(5), 11);
+```
+
+`primeSummations(100)` should return `31`.
+
+```js
+assert.strictEqual(primeSummations(100), 31);
+```
+
+`primeSummations(1000)` should return `53`.
+
+```js
+assert.strictEqual(primeSummations(1000), 53);
+```
+
+`primeSummations(5000)` should return `71`.
+
+```js
+assert.strictEqual(primeSummations(5000), 71);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeSummations(n) {
+
+ return true;
+}
+
+primeSummations(5);
+```
+
+# --solutions--
+
+```js
+function primeSummations(n) {
+ function getSievePrimes(max) {
+ const primesMap = new Array(max).fill(true);
+ primesMap[0] = false;
+ primesMap[1] = false;
+ const primes = [];
+
+ for (let i = 2; i < max; i += 2) {
+ if (primesMap[i]) {
+ primes.push(i);
+ for (let j = i * i; j < max; j += i) {
+ primesMap[j] = false;
+ }
+ }
+ if (i === 2) {
+ i = 1;
+ }
+ }
+ return primes;
+ }
+
+ const MAX_NUMBER = 100;
+ const primes = getSievePrimes(MAX_NUMBER);
+
+ for (let curNumber = 2; curNumber < MAX_NUMBER; curNumber++) {
+ const combinations = new Array(curNumber + 1).fill(0);
+ combinations[0] = 1;
+ for (let i = 0; i < primes.length; i++) {
+ for (let j = primes[i]; j <= curNumber; j++) {
+ combinations[j] += combinations[j - primes[i]];
+ }
+ }
+ if (combinations[curNumber] > n) {
+ return curNumber;
+ }
+ }
+
+ return false;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-78-coin-partitions.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-78-coin-partitions.md
new file mode 100644
index 00000000000..65d3ebad7e4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-78-coin-partitions.md
@@ -0,0 +1,103 @@
+---
+id: 5900f3ba1000cf542c50fecd
+title: 'Problem 78: Coin partitions'
+challengeType: 1
+forumTopicId: 302191
+dashedName: problem-78-coin-partitions
+---
+
+# --description--
+
+Let ${p}(n)$ represent the number of different ways in which `n` coins can be separated into piles. For example, five coins can be separated into piles in exactly seven different ways, so ${p}(5) = 7$.
+
+
+
+| Coin piles |
+| ----------------- |
+| OOOOO |
+| OOOO O |
+| OOO OO |
+| OOO O O |
+| OO OO O |
+| OO O O O |
+| O O O O O |
+
+
73167176531330624919225119674426574742355349194934
+96983520312774506326239578318016984801869478851843
+85861560789112949495459501737958331952853208805511
+12540698747158523863050715693290963295227443043557
+66896648950445244523161731856403098711121722383113
+62229893423380308135336276614282806444486645238749
+30358907296290491560440772390713810515859307960866
+70172427121883998797908792274921901699720888093776
+65727333001053367881220235421809751254540594752243
+52584907711670556013604839586446706324415722155397
+53697817977846174064955149290862569321978468622482
+83972241375657056057490261407972968652414535100474
+82166370484403199890008895243450658541227588666881
+16427171479924442928230863465674813919123162824586
+17866458359124566529476545682848912883142607690042
+24219022671055626321111109370544217506941658960408
+07198403850962455444362981230987879927244284909188
+84580156166097919133875499200524063689912560717606
+05886116467109405077541002256983155200055935729725
+71636269561882670428252483600823257530420752963450
+
+Find the `n` adjacent digits in the 1000-digit number that have the greatest product. What is the value of this product?
+
+# --hints--
+
+`largestProductinaSeries(4)` should return a number.
+
+```js
+assert(typeof largestProductinaSeries(4) === 'number');
+```
+
+`largestProductinaSeries(4)` should return 5832.
+
+```js
+assert.strictEqual(largestProductinaSeries(4), 5832);
+```
+
+`largestProductinaSeries(13)` should return 23514624000.
+
+```js
+assert.strictEqual(largestProductinaSeries(13), 23514624000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function largestProductinaSeries(n) {
+
+ let thousandDigits = [7,3,1,6,7,1,7,6,5,3,1,3,3,0,6,2,4,9,1,9,2,2,5,1,1,9,6,7,4,4,2,6,5,7,4,7,4,2,3,5,5,3,4,9,1,9,4,9,3,4,9,6,9,8,3,5,2,0,3,1,2,7,7,4,5,0,6,3,2,6,2,3,9,5,7,8,3,1,8,0,1,6,9,8,4,8,0,1,8,6,9,4,7,8,8,5,1,8,4,3,8,5,8,6,1,5,6,0,7,8,9,1,1,2,9,4,9,4,9,5,4,5,9,5,0,1,7,3,7,9,5,8,3,3,1,9,5,2,8,5,3,2,0,8,8,0,5,5,1,1,1,2,5,4,0,6,9,8,7,4,7,1,5,8,5,2,3,8,6,3,0,5,0,7,1,5,6,9,3,2,9,0,9,6,3,2,9,5,2,2,7,4,4,3,0,4,3,5,5,7,6,6,8,9,6,6,4,8,9,5,0,4,4,5,2,4,4,5,2,3,1,6,1,7,3,1,8,5,6,4,0,3,0,9,8,7,1,1,1,2,1,7,2,2,3,8,3,1,1,3,6,2,2,2,9,8,9,3,4,2,3,3,8,0,3,0,8,1,3,5,3,3,6,2,7,6,6,1,4,2,8,2,8,0,6,4,4,4,4,8,6,6,4,5,2,3,8,7,4,9,3,0,3,5,8,9,0,7,2,9,6,2,9,0,4,9,1,5,6,0,4,4,0,7,7,2,3,9,0,7,1,3,8,1,0,5,1,5,8,5,9,3,0,7,9,6,0,8,6,6,7,0,1,7,2,4,2,7,1,2,1,8,8,3,9,9,8,7,9,7,9,0,8,7,9,2,2,7,4,9,2,1,9,0,1,6,9,9,7,2,0,8,8,8,0,9,3,7,7,6,6,5,7,2,7,3,3,3,0,0,1,0,5,3,3,6,7,8,8,1,2,2,0,2,3,5,4,2,1,8,0,9,7,5,1,2,5,4,5,4,0,5,9,4,7,5,2,2,4,3,5,2,5,8,4,9,0,7,7,1,1,6,7,0,5,5,6,0,1,3,6,0,4,8,3,9,5,8,6,4,4,6,7,0,6,3,2,4,4,1,5,7,2,2,1,5,5,3,9,7,5,3,6,9,7,8,1,7,9,7,7,8,4,6,1,7,4,0,6,4,9,5,5,1,4,9,2,9,0,8,6,2,5,6,9,3,2,1,9,7,8,4,6,8,6,2,2,4,8,2,8,3,9,7,2,2,4,1,3,7,5,6,5,7,0,5,6,0,5,7,4,9,0,2,6,1,4,0,7,9,7,2,9,6,8,6,5,2,4,1,4,5,3,5,1,0,0,4,7,4,8,2,1,6,6,3,7,0,4,8,4,4,0,3,1,9,9,8,9,0,0,0,8,8,9,5,2,4,3,4,5,0,6,5,8,5,4,1,2,2,7,5,8,8,6,6,6,8,8,1,1,6,4,2,7,1,7,1,4,7,9,9,2,4,4,4,2,9,2,8,2,3,0,8,6,3,4,6,5,6,7,4,8,1,3,9,1,9,1,2,3,1,6,2,8,2,4,5,8,6,1,7,8,6,6,4,5,8,3,5,9,1,2,4,5,6,6,5,2,9,4,7,6,5,4,5,6,8,2,8,4,8,9,1,2,8,8,3,1,4,2,6,0,7,6,9,0,0,4,2,2,4,2,1,9,0,2,2,6,7,1,0,5,5,6,2,6,3,2,1,1,1,1,1,0,9,3,7,0,5,4,4,2,1,7,5,0,6,9,4,1,6,5,8,9,6,0,4,0,8,0,7,1,9,8,4,0,3,8,5,0,9,6,2,4,5,5,4,4,4,3,6,2,9,8,1,2,3,0,9,8,7,8,7,9,9,2,7,2,4,4,2,8,4,9,0,9,1,8,8,8,4,5,8,0,1,5,6,1,6,6,0,9,7,9,1,9,1,3,3,8,7,5,4,9,9,2,0,0,5,2,4,0,6,3,6,8,9,9,1,2,5,6,0,7,1,7,6,0,6,0,5,8,8,6,1,1,6,4,6,7,1,0,9,4,0,5,0,7,7,5,4,1,0,0,2,2,5,6,9,8,3,1,5,5,2,0,0,0,5,5,9,3,5,7,2,9,7,2,5,7,1,6,3,6,2,6,9,5,6,1,8,8,2,6,7,0,4,2,8,2,5,2,4,8,3,6,0,0,8,2,3,2,5,7,5,3,0,4,2,0,7,5,2,9,6,3,4,5,0];
+ return true;
+}
+
+largestProductinaSeries(13);
+```
+
+# --solutions--
+
+```js
+const largestProductinaSeries = (number)=>{
+ let thousandDigits = [7,3,1,6,7,1,7,6,5,3,1,3,3,0,6,2,4,9,1,9,2,2,5,1,1,9,6,7,4,4,2,6,5,7,4,7,4,2,3,5,5,3,4,9,1,9,4,9,3,4,9,6,9,8,3,5,2,0,3,1,2,7,7,4,5,0,6,3,2,6,2,3,9,5,7,8,3,1,8,0,1,6,9,8,4,8,0,1,8,6,9,4,7,8,8,5,1,8,4,3,8,5,8,6,1,5,6,0,7,8,9,1,1,2,9,4,9,4,9,5,4,5,9,5,0,1,7,3,7,9,5,8,3,3,1,9,5,2,8,5,3,2,0,8,8,0,5,5,1,1,1,2,5,4,0,6,9,8,7,4,7,1,5,8,5,2,3,8,6,3,0,5,0,7,1,5,6,9,3,2,9,0,9,6,3,2,9,5,2,2,7,4,4,3,0,4,3,5,5,7,6,6,8,9,6,6,4,8,9,5,0,4,4,5,2,4,4,5,2,3,1,6,1,7,3,1,8,5,6,4,0,3,0,9,8,7,1,1,1,2,1,7,2,2,3,8,3,1,1,3,6,2,2,2,9,8,9,3,4,2,3,3,8,0,3,0,8,1,3,5,3,3,6,2,7,6,6,1,4,2,8,2,8,0,6,4,4,4,4,8,6,6,4,5,2,3,8,7,4,9,3,0,3,5,8,9,0,7,2,9,6,2,9,0,4,9,1,5,6,0,4,4,0,7,7,2,3,9,0,7,1,3,8,1,0,5,1,5,8,5,9,3,0,7,9,6,0,8,6,6,7,0,1,7,2,4,2,7,1,2,1,8,8,3,9,9,8,7,9,7,9,0,8,7,9,2,2,7,4,9,2,1,9,0,1,6,9,9,7,2,0,8,8,8,0,9,3,7,7,6,6,5,7,2,7,3,3,3,0,0,1,0,5,3,3,6,7,8,8,1,2,2,0,2,3,5,4,2,1,8,0,9,7,5,1,2,5,4,5,4,0,5,9,4,7,5,2,2,4,3,5,2,5,8,4,9,0,7,7,1,1,6,7,0,5,5,6,0,1,3,6,0,4,8,3,9,5,8,6,4,4,6,7,0,6,3,2,4,4,1,5,7,2,2,1,5,5,3,9,7,5,3,6,9,7,8,1,7,9,7,7,8,4,6,1,7,4,0,6,4,9,5,5,1,4,9,2,9,0,8,6,2,5,6,9,3,2,1,9,7,8,4,6,8,6,2,2,4,8,2,8,3,9,7,2,2,4,1,3,7,5,6,5,7,0,5,6,0,5,7,4,9,0,2,6,1,4,0,7,9,7,2,9,6,8,6,5,2,4,1,4,5,3,5,1,0,0,4,7,4,8,2,1,6,6,3,7,0,4,8,4,4,0,3,1,9,9,8,9,0,0,0,8,8,9,5,2,4,3,4,5,0,6,5,8,5,4,1,2,2,7,5,8,8,6,6,6,8,8,1,1,6,4,2,7,1,7,1,4,7,9,9,2,4,4,4,2,9,2,8,2,3,0,8,6,3,4,6,5,6,7,4,8,1,3,9,1,9,1,2,3,1,6,2,8,2,4,5,8,6,1,7,8,6,6,4,5,8,3,5,9,1,2,4,5,6,6,5,2,9,4,7,6,5,4,5,6,8,2,8,4,8,9,1,2,8,8,3,1,4,2,6,0,7,6,9,0,0,4,2,2,4,2,1,9,0,2,2,6,7,1,0,5,5,6,2,6,3,2,1,1,1,1,1,0,9,3,7,0,5,4,4,2,1,7,5,0,6,9,4,1,6,5,8,9,6,0,4,0,8,0,7,1,9,8,4,0,3,8,5,0,9,6,2,4,5,5,4,4,4,3,6,2,9,8,1,2,3,0,9,8,7,8,7,9,9,2,7,2,4,4,2,8,4,9,0,9,1,8,8,8,4,5,8,0,1,5,6,1,6,6,0,9,7,9,1,9,1,3,3,8,7,5,4,9,9,2,0,0,5,2,4,0,6,3,6,8,9,9,1,2,5,6,0,7,1,7,6,0,6,0,5,8,8,6,1,1,6,4,6,7,1,0,9,4,0,5,0,7,7,5,4,1,0,0,2,2,5,6,9,8,3,1,5,5,2,0,0,0,5,5,9,3,5,7,2,9,7,2,5,7,1,6,3,6,2,6,9,5,6,1,8,8,2,6,7,0,4,2,8,2,5,2,4,8,3,6,0,0,8,2,3,2,5,7,5,3,0,4,2,0,7,5,2,9,6,3,4,5,0];
+ let numberOfDigits = thousandDigits.length;
+ let currentIndex = 0;
+ let productOfAdjDigits = [];
+
+ while(currentIndex<=(numberOfDigits-number)){
+ let currentAdj = thousandDigits.slice(currentIndex,currentIndex+number);
+ let isAdjDigits = false;
+
+ productOfAdjDigits.push(currentAdj.reduce((prev,cur)=>{
+ return prev*cur;
+ }));
+
+ currentIndex++;
+ }
+
+ return Math.max(...productOfAdjDigits);
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-80-square-root-digital-expansion.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-80-square-root-digital-expansion.md
new file mode 100644
index 00000000000..34d7dd6eea4
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-80-square-root-digital-expansion.md
@@ -0,0 +1,109 @@
+---
+id: 5900f3bc1000cf542c50fecf
+title: 'Problem 80: Square root digital expansion'
+challengeType: 1
+forumTopicId: 302194
+dashedName: problem-80-square-root-digital-expansion
+---
+
+# --description--
+
+It is well known that if the square root of a natural number is not an integer, then it is irrational. The decimal expansion of such square roots is infinite without any repeating pattern at all.
+
+The square root of two is `1.41421356237309504880...`, and the digital sum of the first one hundred decimal digits is `475`.
+
+For the first `n` natural numbers, find the total of the digital sums of the first one hundred decimal digits for all the irrational square roots.
+
+# --hints--
+
+`sqrtDigitalExpansion(2)` should return a number.
+
+```js
+assert(typeof sqrtDigitalExpansion(2) === 'number');
+```
+
+`sqrtDigitalExpansion(2)` should return `475`.
+
+```js
+assert.strictEqual(sqrtDigitalExpansion(2), 475);
+```
+
+`sqrtDigitalExpansion(50)` should return `19543`.
+
+```js
+assert.strictEqual(sqrtDigitalExpansion(50), 19543);
+```
+
+`sqrtDigitalExpansion(100)` should return `40886`.
+
+```js
+assert.strictEqual(sqrtDigitalExpansion(100), 40886);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sqrtDigitalExpansion(n) {
+
+ return true;
+}
+
+sqrtDigitalExpansion(2);
+```
+
+# --solutions--
+
+```js
+function sqrtDigitalExpansion(n) {
+ function sumDigits(number) {
+ let sum = 0;
+ while (number > 0n) {
+ let digit = number % 10n;
+ sum += parseInt(digit, 10);
+ number = number / 10n;
+ }
+ return sum;
+ }
+
+ function power(numberA, numberB) {
+ let result = 1n;
+ for (let b = 0; b < numberB; b++) {
+ result = result * BigInt(numberA);
+ }
+ return result;
+ }
+
+ // Based on http://www.afjarvis.staff.shef.ac.uk/maths/jarvisspec02.pdf
+ function expandSquareRoot(number, numDigits) {
+ let a = 5n * BigInt(number);
+ let b = 5n;
+ const boundaryWithNeededDigits = power(10, numDigits + 1);
+
+ while (b < boundaryWithNeededDigits) {
+ if (a >= b) {
+ a = a - b;
+ b = b + 10n;
+ } else {
+ a = a * 100n;
+ b = (b / 10n) * 100n + 5n;
+ }
+ }
+ return b / 100n;
+ }
+
+ let result = 0;
+ let nextPerfectRoot = 1;
+ const requiredDigits = 100;
+ for (let i = 1; i <= n; i++) {
+ if (nextPerfectRoot ** 2 === i) {
+ nextPerfectRoot++;
+ continue;
+ }
+ result += sumDigits(expandSquareRoot(i, requiredDigits));
+ }
+
+ return result;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-81-path-sum-two-ways.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-81-path-sum-two-ways.md
new file mode 100644
index 00000000000..5fe3982048f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-81-path-sum-two-ways.md
@@ -0,0 +1,185 @@
+---
+id: 5900f3bd1000cf542c50fed0
+title: 'Problem 81: Path sum: two ways'
+challengeType: 1
+forumTopicId: 302195
+dashedName: problem-81-path-sum-two-ways
+---
+
+# --description--
+
+In the 5 by 5 matrix below, the minimal path sum from the top left to the bottom right, by **only moving to the right and down**, is indicated in bold red and is equal to `2427`.
+
+ $$\begin{pmatrix} \color{red}{131} & 673 & 234 & 103 & 18\\\\
+ \color{red}{201} & \color{red}{96} & \color{red}{342} & 965 & 150\\\\ 630 & 803 & \color{red}{746} & \color{red}{422} & 111\\\\
+ 537 & 699 & 497 & \color{red}{121} & 956\\\\ 805 & 732 & 524 & \color{red}{37} & \color{red}{331} \end{pmatrix}$$
+
+Find the minimal path sum from the top left to the bottom right by only moving right and down in `matrix`, a 2D array representing a matrix. The maximum matrix size used in the tests will be 80 by 80.
+
+# --hints--
+
+`pathSumTwoWays(testMatrix1)` should return a number.
+
+```js
+assert(typeof pathSumTwoWays(_testMatrix1) === 'number');
+```
+
+`pathSumTwoWays(testMatrix1)` should return `2427`.
+
+```js
+assert.strictEqual(pathSumTwoWays(_testMatrix1), 2427);
+```
+
+`pathSumTwoWays(testMatrix2)` should return `427337`.
+
+```js
+assert.strictEqual(pathSumTwoWays(_testMatrix2), 427337);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testMatrix1 = [
+ [131, 673, 234, 103, 18],
+ [201, 96, 342, 965, 150],
+ [630, 803, 746, 422, 111],
+ [537, 699, 497, 121, 956],
+ [805, 732, 524, 37, 331]
+];
+const _testMatrix2 = [
+ [4445,2697,5115,718,2209,2212,654,4348,3079,6821,7668,3276,8874,4190,3785,2752,9473,7817,9137,496,7338,3434,7152,4355,4552,7917,7827,2460,2350,691,3514,5880,3145,7633,7199,3783,5066,7487,3285,1084,8985,760,872,8609,8051,1134,9536,5750,9716,9371,7619,5617,275,9721,2997,2698,1887,8825,6372,3014,2113,7122,7050,6775,5948,2758,1219,3539,348,7989,2735,9862,1263,8089,6401,9462,3168,2758,3748,5870],
+ [1096,20,1318,7586,5167,2642,1443,5741,7621,7030,5526,4244,2348,4641,9827,2448,6918,5883,3737,300,7116,6531,567,5997,3971,6623,820,6148,3287,1874,7981,8424,7672,7575,6797,6717,1078,5008,4051,8795,5820,346,1851,6463,2117,6058,3407,8211,117,4822,1317,4377,4434,5925,8341,4800,1175,4173,690,8978,7470,1295,3799,8724,3509,9849,618,3320,7068,9633,2384,7175,544,6583,1908,9983,481,4187,9353,9377],
+ [9607,7385,521,6084,1364,8983,7623,1585,6935,8551,2574,8267,4781,3834,2764,2084,2669,4656,9343,7709,2203,9328,8004,6192,5856,3555,2260,5118,6504,1839,9227,1259,9451,1388,7909,5733,6968,8519,9973,1663,5315,7571,3035,4325,4283,2304,6438,3815,9213,9806,9536,196,5542,6907,2475,1159,5820,9075,9470,2179,9248,1828,4592,9167,3713,4640,47,3637,309,7344,6955,346,378,9044,8635,7466,5036,9515,6385,9230],
+ [7206,3114,7760,1094,6150,5182,7358,7387,4497,955,101,1478,7777,6966,7010,8417,6453,4955,3496,107,449,8271,131,2948,6185,784,5937,8001,6104,8282,4165,3642,710,2390,575,715,3089,6964,4217,192,5949,7006,715,3328,1152,66,8044,4319,1735,146,4818,5456,6451,4113,1063,4781,6799,602,1504,6245,6550,1417,1343,2363,3785,5448,4545,9371,5420,5068,4613,4882,4241,5043,7873,8042,8434,3939,9256,2187],
+ [3620,8024,577,9997,7377,7682,1314,1158,6282,6310,1896,2509,5436,1732,9480,706,496,101,6232,7375,2207,2306,110,6772,3433,2878,8140,5933,8688,1399,2210,7332,6172,6403,7333,4044,2291,1790,2446,7390,8698,5723,3678,7104,1825,2040,140,3982,4905,4160,2200,5041,2512,1488,2268,1175,7588,8321,8078,7312,977,5257,8465,5068,3453,3096,1651,7906,253,9250,6021,8791,8109,6651,3412,345,4778,5152,4883,7505],
+ [1074,5438,9008,2679,5397,5429,2652,3403,770,9188,4248,2493,4361,8327,9587,707,9525,5913,93,1899,328,2876,3604,673,8576,6908,7659,2544,3359,3883,5273,6587,3065,1749,3223,604,9925,6941,2823,8767,7039,3290,3214,1787,7904,3421,7137,9560,8451,2669,9219,6332,1576,5477,6755,8348,4164,4307,2984,4012,6629,1044,2874,6541,4942,903,1404,9125,5160,8836,4345,2581,460,8438,1538,5507,668,3352,2678,6942],
+ [4295,1176,5596,1521,3061,9868,7037,7129,8933,6659,5947,5063,3653,9447,9245,2679,767,714,116,8558,163,3927,8779,158,5093,2447,5782,3967,1716,931,7772,8164,1117,9244,5783,7776,3846,8862,6014,2330,6947,1777,3112,6008,3491,1906,5952,314,4602,8994,5919,9214,3995,5026,7688,6809,5003,3128,2509,7477,110,8971,3982,8539,2980,4689,6343,5411,2992,5270,5247,9260,2269,7474,1042,7162,5206,1232,4556,4757],
+ [510,3556,5377,1406,5721,4946,2635,7847,4251,8293,8281,6351,4912,287,2870,3380,3948,5322,3840,4738,9563,1906,6298,3234,8959,1562,6297,8835,7861,239,6618,1322,2553,2213,5053,5446,4402,6500,5182,8585,6900,5756,9661,903,5186,7687,5998,7997,8081,8955,4835,6069,2621,1581,732,9564,1082,1853,5442,1342,520,1737,3703,5321,4793,2776,1508,1647,9101,2499,6891,4336,7012,3329,3212,1442,9993,3988,4930,7706],
+ [9444,3401,5891,9716,1228,7107,109,3563,2700,6161,5039,4992,2242,8541,7372,2067,1294,3058,1306,320,8881,5756,9326,411,8650,8824,5495,8282,8397,2000,1228,7817,2099,6473,3571,5994,4447,1299,5991,543,7874,2297,1651,101,2093,3463,9189,6872,6118,872,1008,1779,2805,9084,4048,2123,5877,55,3075,1737,9459,4535,6453,3644,108,5982,4437,5213,1340,6967,9943,5815,669,8074,1838,6979,9132,9315,715,5048],
+ [3327,4030,7177,6336,9933,5296,2621,4785,2755,4832,2512,2118,2244,4407,2170,499,7532,9742,5051,7687,970,6924,3527,4694,5145,1306,2165,5940,2425,8910,3513,1909,6983,346,6377,4304,9330,7203,6605,3709,3346,970,369,9737,5811,4427,9939,3693,8436,5566,1977,3728,2399,3985,8303,2492,5366,9802,9193,7296,1033,5060,9144,2766,1151,7629,5169,5995,58,7619,7565,4208,1713,6279,3209,4908,9224,7409,1325,8540],
+ [6882,1265,1775,3648,4690,959,5837,4520,5394,1378,9485,1360,4018,578,9174,2932,9890,3696,116,1723,1178,9355,7063,1594,1918,8574,7594,7942,1547,6166,7888,354,6932,4651,1010,7759,6905,661,7689,6092,9292,3845,9605,8443,443,8275,5163,7720,7265,6356,7779,1798,1754,5225,6661,1180,8024,5666,88,9153,1840,3508,1193,4445,2648,3538,6243,6375,8107,5902,5423,2520,1122,5015,6113,8859,9370,966,8673,2442],
+ [7338,3423,4723,6533,848,8041,7921,8277,4094,5368,7252,8852,9166,2250,2801,6125,8093,5738,4038,9808,7359,9494,601,9116,4946,2702,5573,2921,9862,1462,1269,2410,4171,2709,7508,6241,7522,615,2407,8200,4189,5492,5649,7353,2590,5203,4274,710,7329,9063,956,8371,3722,4253,4785,1194,4828,4717,4548,940,983,2575,4511,2938,1827,2027,2700,1236,841,5760,1680,6260,2373,3851,1841,4968,1172,5179,7175,3509],
+ [4420,1327,3560,2376,6260,2988,9537,4064,4829,8872,9598,3228,1792,7118,9962,9336,4368,9189,6857,1829,9863,6287,7303,7769,2707,8257,2391,2009,3975,4993,3068,9835,3427,341,8412,2134,4034,8511,6421,3041,9012,2983,7289,100,1355,7904,9186,6920,5856,2008,6545,8331,3655,5011,839,8041,9255,6524,3862,8788,62,7455,3513,5003,8413,3918,2076,7960,6108,3638,6999,3436,1441,4858,4181,1866,8731,7745,3744,1000],
+ [356,8296,8325,1058,1277,4743,3850,2388,6079,6462,2815,5620,8495,5378,75,4324,3441,9870,1113,165,1544,1179,2834,562,6176,2313,6836,8839,2986,9454,5199,6888,1927,5866,8760,320,1792,8296,7898,6121,7241,5886,5814,2815,8336,1576,4314,3109,2572,6011,2086,9061,9403,3947,5487,9731,7281,3159,1819,1334,3181,5844,5114,9898,4634,2531,4412,6430,4262,8482,4546,4555,6804,2607,9421,686,8649,8860,7794,6672],
+ [9870,152,1558,4963,8750,4754,6521,6256,8818,5208,5691,9659,8377,9725,5050,5343,2539,6101,1844,9700,7750,8114,5357,3001,8830,4438,199,9545,8496,43,2078,327,9397,106,6090,8181,8646,6414,7499,5450,4850,6273,5014,4131,7639,3913,6571,8534,9703,4391,7618,445,1320,5,1894,6771,7383,9191,4708,9706,6939,7937,8726,9382,5216,3685,2247,9029,8154,1738,9984,2626,9438,4167,6351,5060,29,1218,1239,4785],
+ [192,5213,8297,8974,4032,6966,5717,1179,6523,4679,9513,1481,3041,5355,9303,9154,1389,8702,6589,7818,6336,3539,5538,3094,6646,6702,6266,2759,4608,4452,617,9406,8064,6379,444,5602,4950,1810,8391,1536,316,8714,1178,5182,5863,5110,5372,4954,1978,2971,5680,4863,2255,4630,5723,2168,538,1692,1319,7540,440,6430,6266,7712,7385,5702,620,641,3136,7350,1478,3155,2820,9109,6261,1122,4470,14,8493,2095],
+ [1046,4301,6082,474,4974,7822,2102,5161,5172,6946,8074,9716,6586,9962,9749,5015,2217,995,5388,4402,7652,6399,6539,1349,8101,3677,1328,9612,7922,2879,231,5887,2655,508,4357,4964,3554,5930,6236,7384,4614,280,3093,9600,2110,7863,2631,6626,6620,68,1311,7198,7561,1768,5139,1431,221,230,2940,968,5283,6517,2146,1646,869,9402,7068,8645,7058,1765,9690,4152,2926,9504,2939,7504,6074,2944,6470,7859],
+ [4659,736,4951,9344,1927,6271,8837,8711,3241,6579,7660,5499,5616,3743,5801,4682,9748,8796,779,1833,4549,8138,4026,775,4170,2432,4174,3741,7540,8017,2833,4027,396,811,2871,1150,9809,2719,9199,8504,1224,540,2051,3519,7982,7367,2761,308,3358,6505,2050,4836,5090,7864,805,2566,2409,6876,3361,8622,5572,5895,3280,441,7893,8105,1634,2929,274,3926,7786,6123,8233,9921,2674,5340,1445,203,4585,3837],
+ [5759,338,7444,7968,7742,3755,1591,4839,1705,650,7061,2461,9230,9391,9373,2413,1213,431,7801,4994,2380,2703,6161,6878,8331,2538,6093,1275,5065,5062,2839,582,1014,8109,3525,1544,1569,8622,7944,2905,6120,1564,1839,5570,7579,1318,2677,5257,4418,5601,7935,7656,5192,1864,5886,6083,5580,6202,8869,1636,7907,4759,9082,5854,3185,7631,6854,5872,5632,5280,1431,2077,9717,7431,4256,8261,9680,4487,4752,4286],
+ [1571,1428,8599,1230,7772,4221,8523,9049,4042,8726,7567,6736,9033,2104,4879,4967,6334,6716,3994,1269,8995,6539,3610,7667,6560,6065,874,848,4597,1711,7161,4811,6734,5723,6356,6026,9183,2586,5636,1092,7779,7923,8747,6887,7505,9909,1792,3233,4526,3176,1508,8043,720,5212,6046,4988,709,5277,8256,3642,1391,5803,1468,2145,3970,6301,7767,2359,8487,9771,8785,7520,856,1605,8972,2402,2386,991,1383,5963],
+ [1822,4824,5957,6511,9868,4113,301,9353,6228,2881,2966,6956,9124,9574,9233,1601,7340,973,9396,540,4747,8590,9535,3650,7333,7583,4806,3593,2738,8157,5215,8472,2284,9473,3906,6982,5505,6053,7936,6074,7179,6688,1564,1103,6860,5839,2022,8490,910,7551,7805,881,7024,1855,9448,4790,1274,3672,2810,774,7623,4223,4850,6071,9975,4935,1915,9771,6690,3846,517,463,7624,4511,614,6394,3661,7409,1395,8127],
+ [8738,3850,9555,3695,4383,2378,87,6256,6740,7682,9546,4255,6105,2000,1851,4073,8957,9022,6547,5189,2487,303,9602,7833,1628,4163,6678,3144,8589,7096,8913,5823,4890,7679,1212,9294,5884,2972,3012,3359,7794,7428,1579,4350,7246,4301,7779,7790,3294,9547,4367,3549,1958,8237,6758,3497,3250,3456,6318,1663,708,7714,6143,6890,3428,6853,9334,7992,591,6449,9786,1412,8500,722,5468,1371,108,3939,4199,2535],
+ [7047,4323,1934,5163,4166,461,3544,2767,6554,203,6098,2265,9078,2075,4644,6641,8412,9183,487,101,7566,5622,1975,5726,2920,5374,7779,5631,3753,3725,2672,3621,4280,1162,5812,345,8173,9785,1525,955,5603,2215,2580,5261,2765,2990,5979,389,3907,2484,1232,5933,5871,3304,1138,1616,5114,9199,5072,7442,7245,6472,4760,6359,9053,7876,2564,9404,3043,9026,2261,3374,4460,7306,2326,966,828,3274,1712,3446],
+ [3975,4565,8131,5800,4570,2306,8838,4392,9147,11,3911,7118,9645,4994,2028,6062,5431,2279,8752,2658,7836,994,7316,5336,7185,3289,1898,9689,2331,5737,3403,1124,2679,3241,7748,16,2724,5441,6640,9368,9081,5618,858,4969,17,2103,6035,8043,7475,2181,939,415,1617,8500,8253,2155,7843,7974,7859,1746,6336,3193,2617,8736,4079,6324,6645,8891,9396,5522,6103,1857,8979,3835,2475,1310,7422,610,8345,7615],
+ [9248,5397,5686,2988,3446,4359,6634,9141,497,9176,6773,7448,1907,8454,916,1596,2241,1626,1384,2741,3649,5362,8791,7170,2903,2475,5325,6451,924,3328,522,90,4813,9737,9557,691,2388,1383,4021,1609,9206,4707,5200,7107,8104,4333,9860,5013,1224,6959,8527,1877,4545,7772,6268,621,4915,9349,5970,706,9583,3071,4127,780,8231,3017,9114,3836,7503,2383,1977,4870,8035,2379,9704,1037,3992,3642,1016,4303],
+ [5093,138,4639,6609,1146,5565,95,7521,9077,2272,974,4388,2465,2650,722,4998,3567,3047,921,2736,7855,173,2065,4238,1048,5,6847,9548,8632,9194,5942,4777,7910,8971,6279,7253,2516,1555,1833,3184,9453,9053,6897,7808,8629,4877,1871,8055,4881,7639,1537,7701,2508,7564,5845,5023,2304,5396,3193,2955,1088,3801,6203,1748,3737,1276,13,4120,7715,8552,3047,2921,106,7508,304,1280,7140,2567,9135,5266],
+ [6237,4607,7527,9047,522,7371,4883,2540,5867,6366,5301,1570,421,276,3361,527,6637,4861,2401,7522,5808,9371,5298,2045,5096,5447,7755,5115,7060,8529,4078,1943,1697,1764,5453,7085,960,2405,739,2100,5800,728,9737,5704,5693,1431,8979,6428,673,7540,6,7773,5857,6823,150,5869,8486,684,5816,9626,7451,5579,8260,3397,5322,6920,1879,2127,2884,5478,4977,9016,6165,6292,3062,5671,5968,78,4619,4763],
+ [9905,7127,9390,5185,6923,3721,9164,9705,4341,1031,1046,5127,7376,6528,3248,4941,1178,7889,3364,4486,5358,9402,9158,8600,1025,874,1839,1783,309,9030,1843,845,8398,1433,7118,70,8071,2877,3904,8866,6722,4299,10,1929,5897,4188,600,1889,3325,2485,6473,4474,7444,6992,4846,6166,4441,2283,2629,4352,7775,1101,2214,9985,215,8270,9750,2740,8361,7103,5930,8664,9690,8302,9267,344,2077,1372,1880,9550],
+ [5825,8517,7769,2405,8204,1060,3603,7025,478,8334,1997,3692,7433,9101,7294,7498,9415,5452,3850,3508,6857,9213,6807,4412,7310,854,5384,686,4978,892,8651,3241,2743,3801,3813,8588,6701,4416,6990,6490,3197,6838,6503,114,8343,5844,8646,8694,65,791,5979,2687,2621,2019,8097,1423,3644,9764,4921,3266,3662,5561,2476,8271,8138,6147,1168,3340,1998,9874,6572,9873,6659,5609,2711,3931,9567,4143,7833,8887],
+ [6223,2099,2700,589,4716,8333,1362,5007,2753,2848,4441,8397,7192,8191,4916,9955,6076,3370,6396,6971,3156,248,3911,2488,4930,2458,7183,5455,170,6809,6417,3390,1956,7188,577,7526,2203,968,8164,479,8699,7915,507,6393,4632,1597,7534,3604,618,3280,6061,9793,9238,8347,568,9645,2070,5198,6482,5000,9212,6655,5961,7513,1323,3872,6170,3812,4146,2736,67,3151,5548,2781,9679,7564,5043,8587,1893,4531],
+ [5826,3690,6724,2121,9308,6986,8106,6659,2142,1642,7170,2877,5757,6494,8026,6571,8387,9961,6043,9758,9607,6450,8631,8334,7359,5256,8523,2225,7487,1977,9555,8048,5763,2414,4948,4265,2427,8978,8088,8841,9208,9601,5810,9398,8866,9138,4176,5875,7212,3272,6759,5678,7649,4922,5422,1343,8197,3154,3600,687,1028,4579,2084,9467,4492,7262,7296,6538,7657,7134,2077,1505,7332,6890,8964,4879,7603,7400,5973,739],
+ [1861,1613,4879,1884,7334,966,2000,7489,2123,4287,1472,3263,4726,9203,1040,4103,6075,6049,330,9253,4062,4268,1635,9960,577,1320,3195,9628,1030,4092,4979,6474,6393,2799,6967,8687,7724,7392,9927,2085,3200,6466,8702,265,7646,8665,7986,7266,4574,6587,612,2724,704,3191,8323,9523,3002,704,5064,3960,8209,2027,2758,8393,4875,4641,9584,6401,7883,7014,768,443,5490,7506,1852,2005,8850,5776,4487,4269],
+ [4052,6687,4705,7260,6645,6715,3706,5504,8672,2853,1136,8187,8203,4016,871,1809,1366,4952,9294,5339,6872,2645,6083,7874,3056,5218,7485,8796,7401,3348,2103,426,8572,4163,9171,3176,948,7654,9344,3217,1650,5580,7971,2622,76,2874,880,2034,9929,1546,2659,5811,3754,7096,7436,9694,9960,7415,2164,953,2360,4194,2397,1047,2196,6827,575,784,2675,8821,6802,7972,5996,6699,2134,7577,2887,1412,4349,4380],
+ [4629,2234,6240,8132,7592,3181,6389,1214,266,1910,2451,8784,2790,1127,6932,1447,8986,2492,5476,397,889,3027,7641,5083,5776,4022,185,3364,5701,2442,2840,4160,9525,4828,6602,2614,7447,3711,4505,7745,8034,6514,4907,2605,7753,6958,7270,6936,3006,8968,439,2326,4652,3085,3425,9863,5049,5361,8688,297,7580,8777,7916,6687,8683,7141,306,9569,2384,1500,3346,4601,7329,9040,6097,2727,6314,4501,4974,2829],
+ [8316,4072,2025,6884,3027,1808,5714,7624,7880,8528,4205,8686,7587,3230,1139,7273,6163,6986,3914,9309,1464,9359,4474,7095,2212,7302,2583,9462,7532,6567,1606,4436,8981,5612,6796,4385,5076,2007,6072,3678,8331,1338,3299,8845,4783,8613,4071,1232,6028,2176,3990,2148,3748,103,9453,538,6745,9110,926,3125,473,5970,8728,7072,9062,1404,1317,5139,9862,6496,6062,3338,464,1600,2532,1088,8232,7739,8274,3873],
+ [2341,523,7096,8397,8301,6541,9844,244,4993,2280,7689,4025,4196,5522,7904,6048,2623,9258,2149,9461,6448,8087,7245,1917,8340,7127,8466,5725,6996,3421,5313,512,9164,9837,9794,8369,4185,1488,7210,1524,1016,4620,9435,2478,7765,8035,697,6677,3724,6988,5853,7662,3895,9593,1185,4727,6025,5734,7665,3070,138,8469,6748,6459,561,7935,8646,2378,462,7755,3115,9690,8877,3946,2728,8793,244,6323,8666,4271],
+ [6430,2406,8994,56,1267,3826,9443,7079,7579,5232,6691,3435,6718,5698,4144,7028,592,2627,217,734,6194,8156,9118,58,2640,8069,4127,3285,694,3197,3377,4143,4802,3324,8134,6953,7625,3598,3584,4289,7065,3434,2106,7132,5802,7920,9060,7531,3321,1725,1067,3751,444,5503,6785,7937,6365,4803,198,6266,8177,1470,6390,1606,2904,7555,9834,8667,2033,1723,5167,1666,8546,8152,473,4475,6451,7947,3062,3281],
+ [2810,3042,7759,1741,2275,2609,7676,8640,4117,1958,7500,8048,1757,3954,9270,1971,4796,2912,660,5511,3553,1012,5757,4525,6084,7198,8352,5775,7726,8591,7710,9589,3122,4392,6856,5016,749,2285,3356,7482,9956,7348,2599,8944,495,3462,3578,551,4543,7207,7169,7796,1247,4278,6916,8176,3742,8385,2310,1345,8692,2667,4568,1770,8319,3585,4920,3890,4928,7343,5385,9772,7947,8786,2056,9266,3454,2807,877,2660],
+ [6206,8252,5928,5837,4177,4333,207,7934,5581,9526,8906,1498,8411,2984,5198,5134,2464,8435,8514,8674,3876,599,5327,826,2152,4084,2433,9327,9697,4800,2728,3608,3849,3861,3498,9943,1407,3991,7191,9110,5666,8434,4704,6545,5944,2357,1163,4995,9619,6754,4200,9682,6654,4862,4744,5953,6632,1054,293,9439,8286,2255,696,8709,1533,1844,6441,430,1999,6063,9431,7018,8057,2920,6266,6799,356,3597,4024,6665],
+ [3847,6356,8541,7225,2325,2946,5199,469,5450,7508,2197,9915,8284,7983,6341,3276,3321,16,1321,7608,5015,3362,8491,6968,6818,797,156,2575,706,9516,5344,5457,9210,5051,8099,1617,9951,7663,8253,9683,2670,1261,4710,1068,8753,4799,1228,2621,3275,6188,4699,1791,9518,8701,5932,4275,6011,9877,2933,4182,6059,2930,6687,6682,9771,654,9437,3169,8596,1827,5471,8909,2352,123,4394,3208,8756,5513,6917,2056],
+ [5458,8173,3138,3290,4570,4892,3317,4251,9699,7973,1163,1935,5477,6648,9614,5655,9592,975,9118,2194,7322,8248,8413,3462,8560,1907,7810,6650,7355,2939,4973,6894,3933,3784,3200,2419,9234,4747,2208,2207,1945,2899,1407,6145,8023,3484,5688,7686,2737,3828,3704,9004,5190,9740,8643,8650,5358,4426,1522,1707,3613,9887,6956,2447,2762,833,1449,9489,2573,1080,4167,3456,6809,2466,227,7125,2759,6250,6472,8089],
+ [3266,7025,9756,3914,1265,9116,7723,9788,6805,5493,2092,8688,6592,9173,4431,4028,6007,7131,4446,4815,3648,6701,759,3312,8355,4485,4187,5188,8746,7759,3528,2177,5243,8379,3838,7233,4607,9187,7216,2190,6967,2920,6082,7910,5354,3609,8958,6949,7731,494,8753,8707,1523,4426,3543,7085,647,6771,9847,646,5049,824,8417,5260,2730,5702,2513,9275,4279,2767,8684,1165,9903,4518,55,9682,8963,6005,2102,6523],
+ [1998,8731,936,1479,5259,7064,4085,91,7745,7136,3773,3810,730,8255,2705,2653,9790,6807,2342,355,9344,2668,3690,2028,9679,8102,574,4318,6481,9175,5423,8062,2867,9657,7553,3442,3920,7430,3945,7639,3714,3392,2525,4995,4850,2867,7951,9667,486,9506,9888,781,8866,1702,3795,90,356,1483,4200,2131,6969,5931,486,6880,4404,1084,5169,4910,6567,8335,4686,5043,2614,3352,2667,4513,6472,7471,5720,1616],
+ [8878,1613,1716,868,1906,2681,564,665,5995,2474,7496,3432,9491,9087,8850,8287,669,823,347,6194,2264,2592,7871,7616,8508,4827,760,2676,4660,4881,7572,3811,9032,939,4384,929,7525,8419,5556,9063,662,8887,7026,8534,3111,1454,2082,7598,5726,6687,9647,7608,73,3014,5063,670,5461,5631,3367,9796,8475,7908,5073,1565,5008,5295,4457,1274,4788,1728,338,600,8415,8535,9351,7750,6887,5845,1741,125],
+ [3637,6489,9634,9464,9055,2413,7824,9517,7532,3577,7050,6186,6980,9365,9782,191,870,2497,8498,2218,2757,5420,6468,586,3320,9230,1034,1393,9886,5072,9391,1178,8464,8042,6869,2075,8275,3601,7715,9470,8786,6475,8373,2159,9237,2066,3264,5000,679,355,3069,4073,494,2308,5512,4334,9438,8786,8637,9774,1169,1949,6594,6072,4270,9158,7916,5752,6794,9391,6301,5842,3285,2141,3898,8027,4310,8821,7079,1307],
+ [8497,6681,4732,7151,7060,5204,9030,7157,833,5014,8723,3207,9796,9286,4913,119,5118,7650,9335,809,3675,2597,5144,3945,5090,8384,187,4102,1260,2445,2792,4422,8389,9290,50,1765,1521,6921,8586,4368,1565,5727,7855,2003,4834,9897,5911,8630,5070,1330,7692,7557,7980,6028,5805,9090,8265,3019,3802,698,9149,5748,1965,9658,4417,5994,5584,8226,2937,272,5743,1278,5698,8736,2595,6475,5342,6596,1149,6920],
+ [8188,8009,9546,6310,8772,2500,9846,6592,6872,3857,1307,8125,7042,1544,6159,2330,643,4604,7899,6848,371,8067,2062,3200,7295,1857,9505,6936,384,2193,2190,301,8535,5503,1462,7380,5114,4824,8833,1763,4974,8711,9262,6698,3999,2645,6937,7747,1128,2933,3556,7943,2885,3122,9105,5447,418,2899,5148,3699,9021,9501,597,4084,175,1621,1,1079,6067,5812,4326,9914,6633,5394,4233,6728,9084,1864,5863,1225],
+ [9935,8793,9117,1825,9542,8246,8437,3331,9128,9675,6086,7075,319,1334,7932,3583,7167,4178,1726,7720,695,8277,7887,6359,5912,1719,2780,8529,1359,2013,4498,8072,1129,9998,1147,8804,9405,6255,1619,2165,7491,1,8882,7378,3337,503,5758,4109,3577,985,3200,7615,8058,5032,1080,6410,6873,5496,1466,2412,9885,5904,4406,3605,8770,4361,6205,9193,1537,9959,214,7260,9566,1685,100,4920,7138,9819,5637,976],
+ [3466,9854,985,1078,7222,8888,5466,5379,3578,4540,6853,8690,3728,6351,7147,3134,6921,9692,857,3307,4998,2172,5783,3931,9417,2541,6299,13,787,2099,9131,9494,896,8600,1643,8419,7248,2660,2609,8579,91,6663,5506,7675,1947,6165,4286,1972,9645,3805,1663,1456,8853,5705,9889,7489,1107,383,4044,2969,3343,152,7805,4980,9929,5033,1737,9953,7197,9158,4071,1324,473,9676,3984,9680,3606,8160,7384,5432],
+ [1005,4512,5186,3953,2164,3372,4097,3247,8697,3022,9896,4101,3871,6791,3219,2742,4630,6967,7829,5991,6134,1197,1414,8923,8787,1394,8852,5019,7768,5147,8004,8825,5062,9625,7988,1110,3992,7984,9966,6516,6251,8270,421,3723,1432,4830,6935,8095,9059,2214,6483,6846,3120,1587,6201,6691,9096,9627,6671,4002,3495,9939,7708,7465,5879,6959,6634,3241,3401,2355,9061,2611,7830,3941,2177,2146,5089,7079,519,6351],
+ [7280,8586,4261,2831,7217,3141,9994,9940,5462,2189,4005,6942,9848,5350,8060,6665,7519,4324,7684,657,9453,9296,2944,6843,7499,7847,1728,9681,3906,6353,5529,2822,3355,3897,7724,4257,7489,8672,4356,3983,1948,6892,7415,4153,5893,4190,621,1736,4045,9532,7701,3671,1211,1622,3176,4524,9317,7800,5638,6644,6943,5463,3531,2821,1347,5958,3436,1438,2999,994,850,4131,2616,1549,3465,5946,690,9273,6954,7991],
+ [9517,399,3249,2596,7736,2142,1322,968,7350,1614,468,3346,3265,7222,6086,1661,5317,2582,7959,4685,2807,2917,1037,5698,1529,3972,8716,2634,3301,3412,8621,743,8001,4734,888,7744,8092,3671,8941,1487,5658,7099,2781,99,1932,4443,4756,4652,9328,1581,7855,4312,5976,7255,6480,3996,2748,1973,9731,4530,2790,9417,7186,5303,3557,351,7182,9428,1342,9020,7599,1392,8304,2070,9138,7215,2008,9937,1106,7110],
+ [7444,769,9688,632,1571,6820,8743,4338,337,3366,3073,1946,8219,104,4210,6986,249,5061,8693,7960,6546,1004,8857,5997,9352,4338,6105,5008,2556,6518,6694,4345,3727,7956,20,3954,8652,4424,9387,2035,8358,5962,5304,5194,8650,8282,1256,1103,2138,6679,1985,3653,2770,2433,4278,615,2863,1715,242,3790,2636,6998,3088,1671,2239,957,5411,4595,6282,2881,9974,2401,875,7574,2987,4587,3147,6766,9885,2965],
+ [3287,3016,3619,6818,9073,6120,5423,557,2900,2015,8111,3873,1314,4189,1846,4399,7041,7583,2427,2864,3525,5002,2069,748,1948,6015,2684,438,770,8367,1663,7887,7759,1885,157,7770,4520,4878,3857,1137,3525,3050,6276,5569,7649,904,4533,7843,2199,5648,7628,9075,9441,3600,7231,2388,5640,9096,958,3058,584,5899,8150,1181,9616,1098,8162,6819,8171,1519,1140,7665,8801,2632,1299,9192,707,9955,2710,7314],
+ [1772,2963,7578,3541,3095,1488,7026,2634,6015,4633,4370,2762,1650,2174,909,8158,2922,8467,4198,4280,9092,8856,8835,5457,2790,8574,9742,5054,9547,4156,7940,8126,9824,7340,8840,6574,3547,1477,3014,6798,7134,435,9484,9859,3031,4,1502,4133,1738,1807,4825,463,6343,9701,8506,9822,9555,8688,8168,3467,3234,6318,1787,5591,419,6593,7974,8486,9861,6381,6758,194,3061,4315,2863,4665,3789,2201,1492,4416],
+ [126,8927,6608,5682,8986,6867,1715,6076,3159,788,3140,4744,830,9253,5812,5021,7616,8534,1546,9590,1101,9012,9821,8132,7857,4086,1069,7491,2988,1579,2442,4321,2149,7642,6108,250,6086,3167,24,9528,7663,2685,1220,9196,1397,5776,1577,1730,5481,977,6115,199,6326,2183,3767,5928,5586,7561,663,8649,9688,949,5913,9160,1870,5764,9887,4477,6703,1413,4995,5494,7131,2192,8969,7138,3997,8697,646,1028],
+ [8074,1731,8245,624,4601,8706,155,8891,309,2552,8208,8452,2954,3124,3469,4246,3352,1105,4509,8677,9901,4416,8191,9283,5625,7120,2952,8881,7693,830,4580,8228,9459,8611,4499,1179,4988,1394,550,2336,6089,6872,269,7213,1848,917,6672,4890,656,1478,6536,3165,4743,4990,1176,6211,7207,5284,9730,4738,1549,4986,4942,8645,3698,9429,1439,2175,6549,3058,6513,1574,6988,8333,3406,5245,5431,7140,7085,6407],
+ [7845,4694,2530,8249,290,5948,5509,1588,5940,4495,5866,5021,4626,3979,3296,7589,4854,1998,5627,3926,8346,6512,9608,1918,7070,4747,4182,2858,2766,4606,6269,4107,8982,8568,9053,4244,5604,102,2756,727,5887,2566,7922,44,5986,621,1202,374,6988,4130,3627,6744,9443,4568,1398,8679,397,3928,9159,367,2917,6127,5788,3304,8129,911,2669,1463,9749,264,4478,8940,1109,7309,2462,117,4692,7724,225,2312],
+ [4164,3637,2000,941,8903,39,3443,7172,1031,3687,4901,8082,4945,4515,7204,9310,9349,9535,9940,218,1788,9245,2237,1541,5670,6538,6047,5553,9807,8101,1925,8714,445,8332,7309,6830,5786,5736,7306,2710,3034,1838,7969,6318,7912,2584,2080,7437,6705,2254,7428,820,782,9861,7596,3842,3631,8063,5240,6666,394,4565,7865,4895,9890,6028,6117,4724,9156,4473,4552,602,470,6191,4927,5387,884,3146,1978,3000],
+ [4258,6880,1696,3582,5793,4923,2119,1155,9056,9698,6603,3768,5514,9927,9609,6166,6566,4536,4985,4934,8076,9062,6741,6163,7399,4562,2337,5600,2919,9012,8459,1308,6072,1225,9306,8818,5886,7243,7365,8792,6007,9256,6699,7171,4230,7002,8720,7839,4533,1671,478,7774,1607,2317,5437,4705,7886,4760,6760,7271,3081,2997,3088,7675,6208,3101,6821,6840,122,9633,4900,2067,8546,4549,2091,7188,5605,8599,6758,5229],
+ [7854,5243,9155,3556,8812,7047,2202,1541,5993,4600,4760,713,434,7911,7426,7414,8729,322,803,7960,7563,4908,6285,6291,736,3389,9339,4132,8701,7534,5287,3646,592,3065,7582,2592,8755,6068,8597,1982,5782,1894,2900,6236,4039,6569,3037,5837,7698,700,7815,2491,7272,5878,3083,6778,6639,3589,5010,8313,2581,6617,5869,8402,6808,2951,2321,5195,497,2190,6187,1342,1316,4453,7740,4154,2959,1781,1482,8256],
+ [7178,2046,4419,744,8312,5356,6855,8839,319,2962,5662,47,6307,8662,68,4813,567,2712,9931,1678,3101,8227,6533,4933,6656,92,5846,4780,6256,6361,4323,9985,1231,2175,7178,3034,9744,6155,9165,7787,5836,9318,7860,9644,8941,6480,9443,8188,5928,161,6979,2352,5628,6991,1198,8067,5867,6620,3778,8426,2994,3122,3124,6335,3918,8897,2655,9670,634,1088,1576,8935,7255,474,8166,7417,9547,2886,5560,3842],
+ [6957,3111,26,7530,7143,1295,1744,6057,3009,1854,8098,5405,2234,4874,9447,2620,9303,27,7410,969,40,2966,5648,7596,8637,4238,3143,3679,7187,690,9980,7085,7714,9373,5632,7526,6707,3951,9734,4216,2146,3602,5371,6029,3039,4433,4855,4151,1449,3376,8009,7240,7027,4602,2947,9081,4045,8424,9352,8742,923,2705,4266,3232,2264,6761,363,2651,3383,7770,6730,7856,7340,9679,2158,610,4471,4608,910,6241],
+ [4417,6756,1013,8797,658,8809,5032,8703,7541,846,3357,2920,9817,1745,9980,7593,4667,3087,779,3218,6233,5568,4296,2289,2654,7898,5021,9461,5593,8214,9173,4203,2271,7980,2983,5952,9992,8399,3468,1776,3188,9314,1720,6523,2933,621,8685,5483,8986,6163,3444,9539,4320,155,3992,2828,2150,6071,524,2895,5468,8063,1210,3348,9071,4862,483,9017,4097,6186,9815,3610,5048,1644,1003,9865,9332,2145,1944,2213],
+ [9284,3803,4920,1927,6706,4344,7383,4786,9890,2010,5228,1224,3158,6967,8580,8990,8883,5213,76,8306,2031,4980,5639,9519,7184,5645,7769,3259,8077,9130,1317,3096,9624,3818,1770,695,2454,947,6029,3474,9938,3527,5696,4760,7724,7738,2848,6442,5767,6845,8323,4131,2859,7595,2500,4815,3660,9130,8580,7016,8231,4391,8369,3444,4069,4021,556,6154,627,2778,1496,4206,6356,8434,8491,3816,8231,3190,5575,1015],
+ [3787,7572,1788,6803,5641,6844,1961,4811,8535,9914,9999,1450,8857,738,4662,8569,6679,2225,7839,8618,286,2648,5342,2294,3205,4546,176,8705,3741,6134,8324,8021,7004,5205,7032,6637,9442,5539,5584,4819,5874,5807,8589,6871,9016,983,1758,3786,1519,6241,185,8398,495,3370,9133,3051,4549,9674,7311,9738,3316,9383,2658,2776,9481,7558,619,3943,3324,6491,4933,153,9738,4623,912,3595,7771,7939,1219,4405],
+ [2650,3883,4154,5809,315,7756,4430,1788,4451,1631,6461,7230,6017,5751,138,588,5282,2442,9110,9035,6349,2515,1570,6122,4192,4174,3530,1933,4186,4420,4609,5739,4135,2963,6308,1161,8809,8619,2796,3819,6971,8228,4188,1492,909,8048,2328,6772,8467,7671,9068,2226,7579,6422,7056,8042,3296,2272,3006,2196,7320,3238,3490,3102,37,1293,3212,4767,5041,8773,5794,4456,6174,7279,7054,2835,7053,9088,790,6640],
+ [3101,1057,7057,3826,6077,1025,2955,1224,1114,6729,5902,4698,6239,7203,9423,1804,4417,6686,1426,6941,8071,1029,4985,9010,6122,6597,1622,1574,3513,1684,7086,5505,3244,411,9638,4150,907,9135,829,981,1707,5359,8781,9751,5,9131,3973,7159,1340,6955,7514,7993,6964,8198,1933,2797,877,3993,4453,8020,9349,8646,2779,8679,2961,3547,3374,3510,1129,3568,2241,2625,9138,5974,8206,7669,7678,1833,8700,4480],
+ [4865,9912,8038,8238,782,3095,8199,1127,4501,7280,2112,2487,3626,2790,9432,1475,6312,8277,4827,2218,5806,7132,8752,1468,7471,6386,739,8762,8323,8120,5169,9078,9058,3370,9560,7987,8585,8531,5347,9312,1058,4271,1159,5286,5404,6925,8606,9204,7361,2415,560,586,4002,2644,1927,2824,768,4409,2942,3345,1002,808,4941,6267,7979,5140,8643,7553,9438,7320,4938,2666,4609,2778,8158,6730,3748,3867,1866,7181],
+ [171,3771,7134,8927,4778,2913,3326,2004,3089,7853,1378,1729,4777,2706,9578,1360,5693,3036,1851,7248,2403,2273,8536,6501,9216,613,9671,7131,7719,6425,773,717,8803,160,1114,7554,7197,753,4513,4322,8499,4533,2609,4226,8710,6627,644,9666,6260,4870,5744,7385,6542,6203,7703,6130,8944,5589,2262,6803,6381,7414,6888,5123,7320,9392,9061,6780,322,8975,7050,5089,1061,2260,3199,1150,1865,5386,9699,6501],
+ [3744,8454,6885,8277,919,1923,4001,6864,7854,5519,2491,6057,8794,9645,1776,5714,9786,9281,7538,6916,3215,395,2501,9618,4835,8846,9708,2813,3303,1794,8309,7176,2206,1602,1838,236,4593,2245,8993,4017,10,8215,6921,5206,4023,5932,6997,7801,262,7640,3107,8275,4938,7822,2425,3223,3886,2105,8700,9526,2088,8662,8034,7004,5710,2124,7164,3574,6630,9980,4242,2901,9471,1491,2117,4562,1130,9086,4117,6698],
+ [2810,2280,2331,1170,4554,4071,8387,1215,2274,9848,6738,1604,7281,8805,439,1298,8318,7834,9426,8603,6092,7944,1309,8828,303,3157,4638,4439,9175,1921,4695,7716,1494,1015,1772,5913,1127,1952,1950,8905,4064,9890,385,9357,7945,5035,7082,5369,4093,6546,5187,5637,2041,8946,1758,7111,6566,1027,1049,5148,7224,7248,296,6169,375,1656,7993,2816,3717,4279,4675,1609,3317,42,6201,3100,3144,163,9530,4531],
+ [7096,6070,1009,4988,3538,5801,7149,3063,2324,2912,7911,7002,4338,7880,2481,7368,3516,2016,7556,2193,1388,3865,8125,4637,4096,8114,750,3144,1938,7002,9343,4095,1392,4220,3455,6969,9647,1321,9048,1996,1640,6626,1788,314,9578,6630,2813,6626,4981,9908,7024,4355,3201,3521,3864,3303,464,1923,595,9801,3391,8366,8084,9374,1041,8807,9085,1892,9431,8317,9016,9221,8574,9981,9240,5395,2009,6310,2854,9255],
+ [8830,3145,2960,9615,8220,6061,3452,2918,6481,9278,2297,3385,6565,7066,7316,5682,107,7646,4466,68,1952,9603,8615,54,7191,791,6833,2560,693,9733,4168,570,9127,9537,1925,8287,5508,4297,8452,8795,6213,7994,2420,4208,524,5915,8602,8330,2651,8547,6156,1812,6271,7991,9407,9804,1553,6866,1128,2119,4691,9711,8315,5879,9935,6900,482,682,4126,1041,428,6247,3720,5882,7526,2582,4327,7725,3503,2631],
+ [2738,9323,721,7434,1453,6294,2957,3786,5722,6019,8685,4386,3066,9057,6860,499,5315,3045,5194,7111,3137,9104,941,586,3066,755,4177,8819,7040,5309,3583,3897,4428,7788,4721,7249,6559,7324,825,7311,3760,6064,6070,9672,4882,584,1365,9739,9331,5783,2624,7889,1604,1303,1555,7125,8312,425,8936,3233,7724,1480,403,7440,1784,1754,4721,1569,652,3893,4574,5692,9730,4813,9844,8291,9199,7101,3391,8914],
+ [6044,2928,9332,3328,8588,447,3830,1176,3523,2705,8365,6136,5442,9049,5526,8575,8869,9031,7280,706,2794,8814,5767,4241,7696,78,6570,556,5083,1426,4502,3336,9518,2292,1885,3740,3153,9348,9331,8051,2759,5407,9028,7840,9255,831,515,2612,9747,7435,8964,4971,2048,4900,5967,8271,1719,9670,2810,6777,1594,6367,6259,8316,3815,1689,6840,9437,4361,822,9619,3065,83,6344,7486,8657,8228,9635,6932,4864],
+ [8478,4777,6334,4678,7476,4963,6735,3096,5860,1405,5127,7269,7793,4738,227,9168,2996,8928,765,733,1276,7677,6258,1528,9558,3329,302,8901,1422,8277,6340,645,9125,8869,5952,141,8141,1816,9635,4025,4184,3093,83,2344,2747,9352,7966,1206,1126,1826,218,7939,2957,2729,810,8752,5247,4174,4038,8884,7899,9567,301,5265,5752,7524,4381,1669,3106,8270,6228,6373,754,2547,4240,2313,5514,3022,1040,9738],
+ [2265,8192,1763,1369,8469,8789,4836,52,1212,6690,5257,8918,6723,6319,378,4039,2421,8555,8184,9577,1432,7139,8078,5452,9628,7579,4161,7490,5159,8559,1011,81,478,5840,1964,1334,6875,8670,9900,739,1514,8692,522,9316,6955,1345,8132,2277,3193,9773,3923,4177,2183,1236,6747,6575,4874,6003,6409,8187,745,8776,9440,7543,9825,2582,7381,8147,7236,5185,7564,6125,218,7991,6394,391,7659,7456,5128,5294],
+ [2132,8992,8160,5782,4420,3371,3798,5054,552,5631,7546,4716,1332,6486,7892,7441,4370,6231,4579,2121,8615,1145,9391,1524,1385,2400,9437,2454,7896,7467,2928,8400,3299,4025,7458,4703,7206,6358,792,6200,725,4275,4136,7390,5984,4502,7929,5085,8176,4600,119,3568,76,9363,6943,2248,9077,9731,6213,5817,6729,4190,3092,6910,759,2682,8380,1254,9604,3011,9291,5329,9453,9746,2739,6522,3765,5634,1113,5789],
+ [5304,5499,564,2801,679,2653,1783,3608,7359,7797,3284,796,3222,437,7185,6135,8571,2778,7488,5746,678,6140,861,7750,803,9859,9918,2425,3734,2698,9005,4864,9818,6743,2475,132,9486,3825,5472,919,292,4411,7213,7699,6435,9019,6769,1388,802,2124,1345,8493,9487,8558,7061,8777,8833,2427,2238,5409,4957,8503,3171,7622,5779,6145,2417,5873,5563,5693,9574,9491,1937,7384,4563,6842,5432,2751,3406,7981]
+];
+```
+
+## --seed-contents--
+
+```js
+function pathSumTwoWays(matrix) {
+
+ return true;
+}
+
+// Only change code above this line
+
+const testMatrix1 = [
+ [131, 673, 234, 103, 18],
+ [201, 96, 342, 965, 150],
+ [630, 803, 746, 422, 111],
+ [537, 699, 497, 121, 956],
+ [805, 732, 524, 37, 331]
+];
+
+pathSumTwoWays(testMatrix1);
+```
+
+# --solutions--
+
+```js
+function pathSumTwoWays(matrix) {
+ function makeMinimalMove(row, column) {
+ if (resultMatrix[row][column + 1] < resultMatrix[row + 1][column]) {
+ return resultMatrix[row][column + 1];
+ }
+ return resultMatrix[row + 1][column];
+ }
+
+ const size = matrix.length;
+ const resultMatrix = [];
+ for (let i = 0; i < size; i++) {
+ resultMatrix.push([...matrix[i]])
+ }
+
+ for (let i = size - 2; i >= 0; i--) {
+ resultMatrix[size - 1][i] += resultMatrix[size - 1][i + 1];
+ resultMatrix[i][size - 1] += resultMatrix[i + 1][size - 1];
+ }
+
+ for (let row = size - 2; row >= 0; row--) {
+ for (let column = size - 2; column >= 0; column--) {
+ resultMatrix[row][column] += makeMinimalMove(row, column);
+ }
+ }
+ return resultMatrix[0][0];
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-82-path-sum-three-ways.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-82-path-sum-three-ways.md
new file mode 100644
index 00000000000..0895540d468
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-82-path-sum-three-ways.md
@@ -0,0 +1,195 @@
+---
+id: 5900f3be1000cf542c50fed1
+title: 'Problem 82: Path sum: three ways'
+challengeType: 1
+forumTopicId: 302196
+dashedName: problem-82-path-sum-three-ways
+---
+
+# --description--
+
+**Note:** This problem is a more challenging version of Problem 81.
+
+The minimal path sum in the 5 by 5 matrix below, by starting in any cell in the left column and finishing in any cell in the right column, and only moving up, down, and right, is indicated in red and bold; the sum is equal to `994`.
+
+ $$\begin{pmatrix} 131 & 673 & \color{red}{234} & \color{red}{103} & \color{red}{18}\\\\
+ \color{red}{201} & \color{red}{96} & \color{red}{342} & 965 & 150\\\\ 630 & 803 & 746 & 422 & 111\\\\
+ 537 & 699 & 497 & 121 & 956\\\\ 805 & 732 & 524 & 37 & 331 \end{pmatrix}$$
+
+Find the minimal path sum from the left column to the right column in `matrix`, a 2D array representing a matrix. The maximum matrix size used in tests will be 80 by 80.
+
+# --hints--
+
+`pathSumThreeWays(testMatrix1)` should return a number.
+
+```js
+assert(typeof pathSumThreeWays(_testMatrix1) === 'number');
+```
+
+`pathSumThreeWays(testMatrix1)` should return `994`.
+
+```js
+assert.strictEqual(pathSumThreeWays(_testMatrix1), 994);
+```
+
+`pathSumThreeWays(testMatrix2)` should return `260324`.
+
+```js
+assert.strictEqual(pathSumThreeWays(_testMatrix2), 260324);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testMatrix1 = [
+ [131, 673, 234, 103, 18],
+ [201, 96, 342, 965, 150],
+ [630, 803, 746, 422, 111],
+ [537, 699, 497, 121, 956],
+ [805, 732, 524, 37, 331]
+];
+const _testMatrix2 = [
+ [4445,2697,5115,718,2209,2212,654,4348,3079,6821,7668,3276,8874,4190,3785,2752,9473,7817,9137,496,7338,3434,7152,4355,4552,7917,7827,2460,2350,691,3514,5880,3145,7633,7199,3783,5066,7487,3285,1084,8985,760,872,8609,8051,1134,9536,5750,9716,9371,7619,5617,275,9721,2997,2698,1887,8825,6372,3014,2113,7122,7050,6775,5948,2758,1219,3539,348,7989,2735,9862,1263,8089,6401,9462,3168,2758,3748,5870],
+ [1096,20,1318,7586,5167,2642,1443,5741,7621,7030,5526,4244,2348,4641,9827,2448,6918,5883,3737,300,7116,6531,567,5997,3971,6623,820,6148,3287,1874,7981,8424,7672,7575,6797,6717,1078,5008,4051,8795,5820,346,1851,6463,2117,6058,3407,8211,117,4822,1317,4377,4434,5925,8341,4800,1175,4173,690,8978,7470,1295,3799,8724,3509,9849,618,3320,7068,9633,2384,7175,544,6583,1908,9983,481,4187,9353,9377],
+ [9607,7385,521,6084,1364,8983,7623,1585,6935,8551,2574,8267,4781,3834,2764,2084,2669,4656,9343,7709,2203,9328,8004,6192,5856,3555,2260,5118,6504,1839,9227,1259,9451,1388,7909,5733,6968,8519,9973,1663,5315,7571,3035,4325,4283,2304,6438,3815,9213,9806,9536,196,5542,6907,2475,1159,5820,9075,9470,2179,9248,1828,4592,9167,3713,4640,47,3637,309,7344,6955,346,378,9044,8635,7466,5036,9515,6385,9230],
+ [7206,3114,7760,1094,6150,5182,7358,7387,4497,955,101,1478,7777,6966,7010,8417,6453,4955,3496,107,449,8271,131,2948,6185,784,5937,8001,6104,8282,4165,3642,710,2390,575,715,3089,6964,4217,192,5949,7006,715,3328,1152,66,8044,4319,1735,146,4818,5456,6451,4113,1063,4781,6799,602,1504,6245,6550,1417,1343,2363,3785,5448,4545,9371,5420,5068,4613,4882,4241,5043,7873,8042,8434,3939,9256,2187],
+ [3620,8024,577,9997,7377,7682,1314,1158,6282,6310,1896,2509,5436,1732,9480,706,496,101,6232,7375,2207,2306,110,6772,3433,2878,8140,5933,8688,1399,2210,7332,6172,6403,7333,4044,2291,1790,2446,7390,8698,5723,3678,7104,1825,2040,140,3982,4905,4160,2200,5041,2512,1488,2268,1175,7588,8321,8078,7312,977,5257,8465,5068,3453,3096,1651,7906,253,9250,6021,8791,8109,6651,3412,345,4778,5152,4883,7505],
+ [1074,5438,9008,2679,5397,5429,2652,3403,770,9188,4248,2493,4361,8327,9587,707,9525,5913,93,1899,328,2876,3604,673,8576,6908,7659,2544,3359,3883,5273,6587,3065,1749,3223,604,9925,6941,2823,8767,7039,3290,3214,1787,7904,3421,7137,9560,8451,2669,9219,6332,1576,5477,6755,8348,4164,4307,2984,4012,6629,1044,2874,6541,4942,903,1404,9125,5160,8836,4345,2581,460,8438,1538,5507,668,3352,2678,6942],
+ [4295,1176,5596,1521,3061,9868,7037,7129,8933,6659,5947,5063,3653,9447,9245,2679,767,714,116,8558,163,3927,8779,158,5093,2447,5782,3967,1716,931,7772,8164,1117,9244,5783,7776,3846,8862,6014,2330,6947,1777,3112,6008,3491,1906,5952,314,4602,8994,5919,9214,3995,5026,7688,6809,5003,3128,2509,7477,110,8971,3982,8539,2980,4689,6343,5411,2992,5270,5247,9260,2269,7474,1042,7162,5206,1232,4556,4757],
+ [510,3556,5377,1406,5721,4946,2635,7847,4251,8293,8281,6351,4912,287,2870,3380,3948,5322,3840,4738,9563,1906,6298,3234,8959,1562,6297,8835,7861,239,6618,1322,2553,2213,5053,5446,4402,6500,5182,8585,6900,5756,9661,903,5186,7687,5998,7997,8081,8955,4835,6069,2621,1581,732,9564,1082,1853,5442,1342,520,1737,3703,5321,4793,2776,1508,1647,9101,2499,6891,4336,7012,3329,3212,1442,9993,3988,4930,7706],
+ [9444,3401,5891,9716,1228,7107,109,3563,2700,6161,5039,4992,2242,8541,7372,2067,1294,3058,1306,320,8881,5756,9326,411,8650,8824,5495,8282,8397,2000,1228,7817,2099,6473,3571,5994,4447,1299,5991,543,7874,2297,1651,101,2093,3463,9189,6872,6118,872,1008,1779,2805,9084,4048,2123,5877,55,3075,1737,9459,4535,6453,3644,108,5982,4437,5213,1340,6967,9943,5815,669,8074,1838,6979,9132,9315,715,5048],
+ [3327,4030,7177,6336,9933,5296,2621,4785,2755,4832,2512,2118,2244,4407,2170,499,7532,9742,5051,7687,970,6924,3527,4694,5145,1306,2165,5940,2425,8910,3513,1909,6983,346,6377,4304,9330,7203,6605,3709,3346,970,369,9737,5811,4427,9939,3693,8436,5566,1977,3728,2399,3985,8303,2492,5366,9802,9193,7296,1033,5060,9144,2766,1151,7629,5169,5995,58,7619,7565,4208,1713,6279,3209,4908,9224,7409,1325,8540],
+ [6882,1265,1775,3648,4690,959,5837,4520,5394,1378,9485,1360,4018,578,9174,2932,9890,3696,116,1723,1178,9355,7063,1594,1918,8574,7594,7942,1547,6166,7888,354,6932,4651,1010,7759,6905,661,7689,6092,9292,3845,9605,8443,443,8275,5163,7720,7265,6356,7779,1798,1754,5225,6661,1180,8024,5666,88,9153,1840,3508,1193,4445,2648,3538,6243,6375,8107,5902,5423,2520,1122,5015,6113,8859,9370,966,8673,2442],
+ [7338,3423,4723,6533,848,8041,7921,8277,4094,5368,7252,8852,9166,2250,2801,6125,8093,5738,4038,9808,7359,9494,601,9116,4946,2702,5573,2921,9862,1462,1269,2410,4171,2709,7508,6241,7522,615,2407,8200,4189,5492,5649,7353,2590,5203,4274,710,7329,9063,956,8371,3722,4253,4785,1194,4828,4717,4548,940,983,2575,4511,2938,1827,2027,2700,1236,841,5760,1680,6260,2373,3851,1841,4968,1172,5179,7175,3509],
+ [4420,1327,3560,2376,6260,2988,9537,4064,4829,8872,9598,3228,1792,7118,9962,9336,4368,9189,6857,1829,9863,6287,7303,7769,2707,8257,2391,2009,3975,4993,3068,9835,3427,341,8412,2134,4034,8511,6421,3041,9012,2983,7289,100,1355,7904,9186,6920,5856,2008,6545,8331,3655,5011,839,8041,9255,6524,3862,8788,62,7455,3513,5003,8413,3918,2076,7960,6108,3638,6999,3436,1441,4858,4181,1866,8731,7745,3744,1000],
+ [356,8296,8325,1058,1277,4743,3850,2388,6079,6462,2815,5620,8495,5378,75,4324,3441,9870,1113,165,1544,1179,2834,562,6176,2313,6836,8839,2986,9454,5199,6888,1927,5866,8760,320,1792,8296,7898,6121,7241,5886,5814,2815,8336,1576,4314,3109,2572,6011,2086,9061,9403,3947,5487,9731,7281,3159,1819,1334,3181,5844,5114,9898,4634,2531,4412,6430,4262,8482,4546,4555,6804,2607,9421,686,8649,8860,7794,6672],
+ [9870,152,1558,4963,8750,4754,6521,6256,8818,5208,5691,9659,8377,9725,5050,5343,2539,6101,1844,9700,7750,8114,5357,3001,8830,4438,199,9545,8496,43,2078,327,9397,106,6090,8181,8646,6414,7499,5450,4850,6273,5014,4131,7639,3913,6571,8534,9703,4391,7618,445,1320,5,1894,6771,7383,9191,4708,9706,6939,7937,8726,9382,5216,3685,2247,9029,8154,1738,9984,2626,9438,4167,6351,5060,29,1218,1239,4785],
+ [192,5213,8297,8974,4032,6966,5717,1179,6523,4679,9513,1481,3041,5355,9303,9154,1389,8702,6589,7818,6336,3539,5538,3094,6646,6702,6266,2759,4608,4452,617,9406,8064,6379,444,5602,4950,1810,8391,1536,316,8714,1178,5182,5863,5110,5372,4954,1978,2971,5680,4863,2255,4630,5723,2168,538,1692,1319,7540,440,6430,6266,7712,7385,5702,620,641,3136,7350,1478,3155,2820,9109,6261,1122,4470,14,8493,2095],
+ [1046,4301,6082,474,4974,7822,2102,5161,5172,6946,8074,9716,6586,9962,9749,5015,2217,995,5388,4402,7652,6399,6539,1349,8101,3677,1328,9612,7922,2879,231,5887,2655,508,4357,4964,3554,5930,6236,7384,4614,280,3093,9600,2110,7863,2631,6626,6620,68,1311,7198,7561,1768,5139,1431,221,230,2940,968,5283,6517,2146,1646,869,9402,7068,8645,7058,1765,9690,4152,2926,9504,2939,7504,6074,2944,6470,7859],
+ [4659,736,4951,9344,1927,6271,8837,8711,3241,6579,7660,5499,5616,3743,5801,4682,9748,8796,779,1833,4549,8138,4026,775,4170,2432,4174,3741,7540,8017,2833,4027,396,811,2871,1150,9809,2719,9199,8504,1224,540,2051,3519,7982,7367,2761,308,3358,6505,2050,4836,5090,7864,805,2566,2409,6876,3361,8622,5572,5895,3280,441,7893,8105,1634,2929,274,3926,7786,6123,8233,9921,2674,5340,1445,203,4585,3837],
+ [5759,338,7444,7968,7742,3755,1591,4839,1705,650,7061,2461,9230,9391,9373,2413,1213,431,7801,4994,2380,2703,6161,6878,8331,2538,6093,1275,5065,5062,2839,582,1014,8109,3525,1544,1569,8622,7944,2905,6120,1564,1839,5570,7579,1318,2677,5257,4418,5601,7935,7656,5192,1864,5886,6083,5580,6202,8869,1636,7907,4759,9082,5854,3185,7631,6854,5872,5632,5280,1431,2077,9717,7431,4256,8261,9680,4487,4752,4286],
+ [1571,1428,8599,1230,7772,4221,8523,9049,4042,8726,7567,6736,9033,2104,4879,4967,6334,6716,3994,1269,8995,6539,3610,7667,6560,6065,874,848,4597,1711,7161,4811,6734,5723,6356,6026,9183,2586,5636,1092,7779,7923,8747,6887,7505,9909,1792,3233,4526,3176,1508,8043,720,5212,6046,4988,709,5277,8256,3642,1391,5803,1468,2145,3970,6301,7767,2359,8487,9771,8785,7520,856,1605,8972,2402,2386,991,1383,5963],
+ [1822,4824,5957,6511,9868,4113,301,9353,6228,2881,2966,6956,9124,9574,9233,1601,7340,973,9396,540,4747,8590,9535,3650,7333,7583,4806,3593,2738,8157,5215,8472,2284,9473,3906,6982,5505,6053,7936,6074,7179,6688,1564,1103,6860,5839,2022,8490,910,7551,7805,881,7024,1855,9448,4790,1274,3672,2810,774,7623,4223,4850,6071,9975,4935,1915,9771,6690,3846,517,463,7624,4511,614,6394,3661,7409,1395,8127],
+ [8738,3850,9555,3695,4383,2378,87,6256,6740,7682,9546,4255,6105,2000,1851,4073,8957,9022,6547,5189,2487,303,9602,7833,1628,4163,6678,3144,8589,7096,8913,5823,4890,7679,1212,9294,5884,2972,3012,3359,7794,7428,1579,4350,7246,4301,7779,7790,3294,9547,4367,3549,1958,8237,6758,3497,3250,3456,6318,1663,708,7714,6143,6890,3428,6853,9334,7992,591,6449,9786,1412,8500,722,5468,1371,108,3939,4199,2535],
+ [7047,4323,1934,5163,4166,461,3544,2767,6554,203,6098,2265,9078,2075,4644,6641,8412,9183,487,101,7566,5622,1975,5726,2920,5374,7779,5631,3753,3725,2672,3621,4280,1162,5812,345,8173,9785,1525,955,5603,2215,2580,5261,2765,2990,5979,389,3907,2484,1232,5933,5871,3304,1138,1616,5114,9199,5072,7442,7245,6472,4760,6359,9053,7876,2564,9404,3043,9026,2261,3374,4460,7306,2326,966,828,3274,1712,3446],
+ [3975,4565,8131,5800,4570,2306,8838,4392,9147,11,3911,7118,9645,4994,2028,6062,5431,2279,8752,2658,7836,994,7316,5336,7185,3289,1898,9689,2331,5737,3403,1124,2679,3241,7748,16,2724,5441,6640,9368,9081,5618,858,4969,17,2103,6035,8043,7475,2181,939,415,1617,8500,8253,2155,7843,7974,7859,1746,6336,3193,2617,8736,4079,6324,6645,8891,9396,5522,6103,1857,8979,3835,2475,1310,7422,610,8345,7615],
+ [9248,5397,5686,2988,3446,4359,6634,9141,497,9176,6773,7448,1907,8454,916,1596,2241,1626,1384,2741,3649,5362,8791,7170,2903,2475,5325,6451,924,3328,522,90,4813,9737,9557,691,2388,1383,4021,1609,9206,4707,5200,7107,8104,4333,9860,5013,1224,6959,8527,1877,4545,7772,6268,621,4915,9349,5970,706,9583,3071,4127,780,8231,3017,9114,3836,7503,2383,1977,4870,8035,2379,9704,1037,3992,3642,1016,4303],
+ [5093,138,4639,6609,1146,5565,95,7521,9077,2272,974,4388,2465,2650,722,4998,3567,3047,921,2736,7855,173,2065,4238,1048,5,6847,9548,8632,9194,5942,4777,7910,8971,6279,7253,2516,1555,1833,3184,9453,9053,6897,7808,8629,4877,1871,8055,4881,7639,1537,7701,2508,7564,5845,5023,2304,5396,3193,2955,1088,3801,6203,1748,3737,1276,13,4120,7715,8552,3047,2921,106,7508,304,1280,7140,2567,9135,5266],
+ [6237,4607,7527,9047,522,7371,4883,2540,5867,6366,5301,1570,421,276,3361,527,6637,4861,2401,7522,5808,9371,5298,2045,5096,5447,7755,5115,7060,8529,4078,1943,1697,1764,5453,7085,960,2405,739,2100,5800,728,9737,5704,5693,1431,8979,6428,673,7540,6,7773,5857,6823,150,5869,8486,684,5816,9626,7451,5579,8260,3397,5322,6920,1879,2127,2884,5478,4977,9016,6165,6292,3062,5671,5968,78,4619,4763],
+ [9905,7127,9390,5185,6923,3721,9164,9705,4341,1031,1046,5127,7376,6528,3248,4941,1178,7889,3364,4486,5358,9402,9158,8600,1025,874,1839,1783,309,9030,1843,845,8398,1433,7118,70,8071,2877,3904,8866,6722,4299,10,1929,5897,4188,600,1889,3325,2485,6473,4474,7444,6992,4846,6166,4441,2283,2629,4352,7775,1101,2214,9985,215,8270,9750,2740,8361,7103,5930,8664,9690,8302,9267,344,2077,1372,1880,9550],
+ [5825,8517,7769,2405,8204,1060,3603,7025,478,8334,1997,3692,7433,9101,7294,7498,9415,5452,3850,3508,6857,9213,6807,4412,7310,854,5384,686,4978,892,8651,3241,2743,3801,3813,8588,6701,4416,6990,6490,3197,6838,6503,114,8343,5844,8646,8694,65,791,5979,2687,2621,2019,8097,1423,3644,9764,4921,3266,3662,5561,2476,8271,8138,6147,1168,3340,1998,9874,6572,9873,6659,5609,2711,3931,9567,4143,7833,8887],
+ [6223,2099,2700,589,4716,8333,1362,5007,2753,2848,4441,8397,7192,8191,4916,9955,6076,3370,6396,6971,3156,248,3911,2488,4930,2458,7183,5455,170,6809,6417,3390,1956,7188,577,7526,2203,968,8164,479,8699,7915,507,6393,4632,1597,7534,3604,618,3280,6061,9793,9238,8347,568,9645,2070,5198,6482,5000,9212,6655,5961,7513,1323,3872,6170,3812,4146,2736,67,3151,5548,2781,9679,7564,5043,8587,1893,4531],
+ [5826,3690,6724,2121,9308,6986,8106,6659,2142,1642,7170,2877,5757,6494,8026,6571,8387,9961,6043,9758,9607,6450,8631,8334,7359,5256,8523,2225,7487,1977,9555,8048,5763,2414,4948,4265,2427,8978,8088,8841,9208,9601,5810,9398,8866,9138,4176,5875,7212,3272,6759,5678,7649,4922,5422,1343,8197,3154,3600,687,1028,4579,2084,9467,4492,7262,7296,6538,7657,7134,2077,1505,7332,6890,8964,4879,7603,7400,5973,739],
+ [1861,1613,4879,1884,7334,966,2000,7489,2123,4287,1472,3263,4726,9203,1040,4103,6075,6049,330,9253,4062,4268,1635,9960,577,1320,3195,9628,1030,4092,4979,6474,6393,2799,6967,8687,7724,7392,9927,2085,3200,6466,8702,265,7646,8665,7986,7266,4574,6587,612,2724,704,3191,8323,9523,3002,704,5064,3960,8209,2027,2758,8393,4875,4641,9584,6401,7883,7014,768,443,5490,7506,1852,2005,8850,5776,4487,4269],
+ [4052,6687,4705,7260,6645,6715,3706,5504,8672,2853,1136,8187,8203,4016,871,1809,1366,4952,9294,5339,6872,2645,6083,7874,3056,5218,7485,8796,7401,3348,2103,426,8572,4163,9171,3176,948,7654,9344,3217,1650,5580,7971,2622,76,2874,880,2034,9929,1546,2659,5811,3754,7096,7436,9694,9960,7415,2164,953,2360,4194,2397,1047,2196,6827,575,784,2675,8821,6802,7972,5996,6699,2134,7577,2887,1412,4349,4380],
+ [4629,2234,6240,8132,7592,3181,6389,1214,266,1910,2451,8784,2790,1127,6932,1447,8986,2492,5476,397,889,3027,7641,5083,5776,4022,185,3364,5701,2442,2840,4160,9525,4828,6602,2614,7447,3711,4505,7745,8034,6514,4907,2605,7753,6958,7270,6936,3006,8968,439,2326,4652,3085,3425,9863,5049,5361,8688,297,7580,8777,7916,6687,8683,7141,306,9569,2384,1500,3346,4601,7329,9040,6097,2727,6314,4501,4974,2829],
+ [8316,4072,2025,6884,3027,1808,5714,7624,7880,8528,4205,8686,7587,3230,1139,7273,6163,6986,3914,9309,1464,9359,4474,7095,2212,7302,2583,9462,7532,6567,1606,4436,8981,5612,6796,4385,5076,2007,6072,3678,8331,1338,3299,8845,4783,8613,4071,1232,6028,2176,3990,2148,3748,103,9453,538,6745,9110,926,3125,473,5970,8728,7072,9062,1404,1317,5139,9862,6496,6062,3338,464,1600,2532,1088,8232,7739,8274,3873],
+ [2341,523,7096,8397,8301,6541,9844,244,4993,2280,7689,4025,4196,5522,7904,6048,2623,9258,2149,9461,6448,8087,7245,1917,8340,7127,8466,5725,6996,3421,5313,512,9164,9837,9794,8369,4185,1488,7210,1524,1016,4620,9435,2478,7765,8035,697,6677,3724,6988,5853,7662,3895,9593,1185,4727,6025,5734,7665,3070,138,8469,6748,6459,561,7935,8646,2378,462,7755,3115,9690,8877,3946,2728,8793,244,6323,8666,4271],
+ [6430,2406,8994,56,1267,3826,9443,7079,7579,5232,6691,3435,6718,5698,4144,7028,592,2627,217,734,6194,8156,9118,58,2640,8069,4127,3285,694,3197,3377,4143,4802,3324,8134,6953,7625,3598,3584,4289,7065,3434,2106,7132,5802,7920,9060,7531,3321,1725,1067,3751,444,5503,6785,7937,6365,4803,198,6266,8177,1470,6390,1606,2904,7555,9834,8667,2033,1723,5167,1666,8546,8152,473,4475,6451,7947,3062,3281],
+ [2810,3042,7759,1741,2275,2609,7676,8640,4117,1958,7500,8048,1757,3954,9270,1971,4796,2912,660,5511,3553,1012,5757,4525,6084,7198,8352,5775,7726,8591,7710,9589,3122,4392,6856,5016,749,2285,3356,7482,9956,7348,2599,8944,495,3462,3578,551,4543,7207,7169,7796,1247,4278,6916,8176,3742,8385,2310,1345,8692,2667,4568,1770,8319,3585,4920,3890,4928,7343,5385,9772,7947,8786,2056,9266,3454,2807,877,2660],
+ [6206,8252,5928,5837,4177,4333,207,7934,5581,9526,8906,1498,8411,2984,5198,5134,2464,8435,8514,8674,3876,599,5327,826,2152,4084,2433,9327,9697,4800,2728,3608,3849,3861,3498,9943,1407,3991,7191,9110,5666,8434,4704,6545,5944,2357,1163,4995,9619,6754,4200,9682,6654,4862,4744,5953,6632,1054,293,9439,8286,2255,696,8709,1533,1844,6441,430,1999,6063,9431,7018,8057,2920,6266,6799,356,3597,4024,6665],
+ [3847,6356,8541,7225,2325,2946,5199,469,5450,7508,2197,9915,8284,7983,6341,3276,3321,16,1321,7608,5015,3362,8491,6968,6818,797,156,2575,706,9516,5344,5457,9210,5051,8099,1617,9951,7663,8253,9683,2670,1261,4710,1068,8753,4799,1228,2621,3275,6188,4699,1791,9518,8701,5932,4275,6011,9877,2933,4182,6059,2930,6687,6682,9771,654,9437,3169,8596,1827,5471,8909,2352,123,4394,3208,8756,5513,6917,2056],
+ [5458,8173,3138,3290,4570,4892,3317,4251,9699,7973,1163,1935,5477,6648,9614,5655,9592,975,9118,2194,7322,8248,8413,3462,8560,1907,7810,6650,7355,2939,4973,6894,3933,3784,3200,2419,9234,4747,2208,2207,1945,2899,1407,6145,8023,3484,5688,7686,2737,3828,3704,9004,5190,9740,8643,8650,5358,4426,1522,1707,3613,9887,6956,2447,2762,833,1449,9489,2573,1080,4167,3456,6809,2466,227,7125,2759,6250,6472,8089],
+ [3266,7025,9756,3914,1265,9116,7723,9788,6805,5493,2092,8688,6592,9173,4431,4028,6007,7131,4446,4815,3648,6701,759,3312,8355,4485,4187,5188,8746,7759,3528,2177,5243,8379,3838,7233,4607,9187,7216,2190,6967,2920,6082,7910,5354,3609,8958,6949,7731,494,8753,8707,1523,4426,3543,7085,647,6771,9847,646,5049,824,8417,5260,2730,5702,2513,9275,4279,2767,8684,1165,9903,4518,55,9682,8963,6005,2102,6523],
+ [1998,8731,936,1479,5259,7064,4085,91,7745,7136,3773,3810,730,8255,2705,2653,9790,6807,2342,355,9344,2668,3690,2028,9679,8102,574,4318,6481,9175,5423,8062,2867,9657,7553,3442,3920,7430,3945,7639,3714,3392,2525,4995,4850,2867,7951,9667,486,9506,9888,781,8866,1702,3795,90,356,1483,4200,2131,6969,5931,486,6880,4404,1084,5169,4910,6567,8335,4686,5043,2614,3352,2667,4513,6472,7471,5720,1616],
+ [8878,1613,1716,868,1906,2681,564,665,5995,2474,7496,3432,9491,9087,8850,8287,669,823,347,6194,2264,2592,7871,7616,8508,4827,760,2676,4660,4881,7572,3811,9032,939,4384,929,7525,8419,5556,9063,662,8887,7026,8534,3111,1454,2082,7598,5726,6687,9647,7608,73,3014,5063,670,5461,5631,3367,9796,8475,7908,5073,1565,5008,5295,4457,1274,4788,1728,338,600,8415,8535,9351,7750,6887,5845,1741,125],
+ [3637,6489,9634,9464,9055,2413,7824,9517,7532,3577,7050,6186,6980,9365,9782,191,870,2497,8498,2218,2757,5420,6468,586,3320,9230,1034,1393,9886,5072,9391,1178,8464,8042,6869,2075,8275,3601,7715,9470,8786,6475,8373,2159,9237,2066,3264,5000,679,355,3069,4073,494,2308,5512,4334,9438,8786,8637,9774,1169,1949,6594,6072,4270,9158,7916,5752,6794,9391,6301,5842,3285,2141,3898,8027,4310,8821,7079,1307],
+ [8497,6681,4732,7151,7060,5204,9030,7157,833,5014,8723,3207,9796,9286,4913,119,5118,7650,9335,809,3675,2597,5144,3945,5090,8384,187,4102,1260,2445,2792,4422,8389,9290,50,1765,1521,6921,8586,4368,1565,5727,7855,2003,4834,9897,5911,8630,5070,1330,7692,7557,7980,6028,5805,9090,8265,3019,3802,698,9149,5748,1965,9658,4417,5994,5584,8226,2937,272,5743,1278,5698,8736,2595,6475,5342,6596,1149,6920],
+ [8188,8009,9546,6310,8772,2500,9846,6592,6872,3857,1307,8125,7042,1544,6159,2330,643,4604,7899,6848,371,8067,2062,3200,7295,1857,9505,6936,384,2193,2190,301,8535,5503,1462,7380,5114,4824,8833,1763,4974,8711,9262,6698,3999,2645,6937,7747,1128,2933,3556,7943,2885,3122,9105,5447,418,2899,5148,3699,9021,9501,597,4084,175,1621,1,1079,6067,5812,4326,9914,6633,5394,4233,6728,9084,1864,5863,1225],
+ [9935,8793,9117,1825,9542,8246,8437,3331,9128,9675,6086,7075,319,1334,7932,3583,7167,4178,1726,7720,695,8277,7887,6359,5912,1719,2780,8529,1359,2013,4498,8072,1129,9998,1147,8804,9405,6255,1619,2165,7491,1,8882,7378,3337,503,5758,4109,3577,985,3200,7615,8058,5032,1080,6410,6873,5496,1466,2412,9885,5904,4406,3605,8770,4361,6205,9193,1537,9959,214,7260,9566,1685,100,4920,7138,9819,5637,976],
+ [3466,9854,985,1078,7222,8888,5466,5379,3578,4540,6853,8690,3728,6351,7147,3134,6921,9692,857,3307,4998,2172,5783,3931,9417,2541,6299,13,787,2099,9131,9494,896,8600,1643,8419,7248,2660,2609,8579,91,6663,5506,7675,1947,6165,4286,1972,9645,3805,1663,1456,8853,5705,9889,7489,1107,383,4044,2969,3343,152,7805,4980,9929,5033,1737,9953,7197,9158,4071,1324,473,9676,3984,9680,3606,8160,7384,5432],
+ [1005,4512,5186,3953,2164,3372,4097,3247,8697,3022,9896,4101,3871,6791,3219,2742,4630,6967,7829,5991,6134,1197,1414,8923,8787,1394,8852,5019,7768,5147,8004,8825,5062,9625,7988,1110,3992,7984,9966,6516,6251,8270,421,3723,1432,4830,6935,8095,9059,2214,6483,6846,3120,1587,6201,6691,9096,9627,6671,4002,3495,9939,7708,7465,5879,6959,6634,3241,3401,2355,9061,2611,7830,3941,2177,2146,5089,7079,519,6351],
+ [7280,8586,4261,2831,7217,3141,9994,9940,5462,2189,4005,6942,9848,5350,8060,6665,7519,4324,7684,657,9453,9296,2944,6843,7499,7847,1728,9681,3906,6353,5529,2822,3355,3897,7724,4257,7489,8672,4356,3983,1948,6892,7415,4153,5893,4190,621,1736,4045,9532,7701,3671,1211,1622,3176,4524,9317,7800,5638,6644,6943,5463,3531,2821,1347,5958,3436,1438,2999,994,850,4131,2616,1549,3465,5946,690,9273,6954,7991],
+ [9517,399,3249,2596,7736,2142,1322,968,7350,1614,468,3346,3265,7222,6086,1661,5317,2582,7959,4685,2807,2917,1037,5698,1529,3972,8716,2634,3301,3412,8621,743,8001,4734,888,7744,8092,3671,8941,1487,5658,7099,2781,99,1932,4443,4756,4652,9328,1581,7855,4312,5976,7255,6480,3996,2748,1973,9731,4530,2790,9417,7186,5303,3557,351,7182,9428,1342,9020,7599,1392,8304,2070,9138,7215,2008,9937,1106,7110],
+ [7444,769,9688,632,1571,6820,8743,4338,337,3366,3073,1946,8219,104,4210,6986,249,5061,8693,7960,6546,1004,8857,5997,9352,4338,6105,5008,2556,6518,6694,4345,3727,7956,20,3954,8652,4424,9387,2035,8358,5962,5304,5194,8650,8282,1256,1103,2138,6679,1985,3653,2770,2433,4278,615,2863,1715,242,3790,2636,6998,3088,1671,2239,957,5411,4595,6282,2881,9974,2401,875,7574,2987,4587,3147,6766,9885,2965],
+ [3287,3016,3619,6818,9073,6120,5423,557,2900,2015,8111,3873,1314,4189,1846,4399,7041,7583,2427,2864,3525,5002,2069,748,1948,6015,2684,438,770,8367,1663,7887,7759,1885,157,7770,4520,4878,3857,1137,3525,3050,6276,5569,7649,904,4533,7843,2199,5648,7628,9075,9441,3600,7231,2388,5640,9096,958,3058,584,5899,8150,1181,9616,1098,8162,6819,8171,1519,1140,7665,8801,2632,1299,9192,707,9955,2710,7314],
+ [1772,2963,7578,3541,3095,1488,7026,2634,6015,4633,4370,2762,1650,2174,909,8158,2922,8467,4198,4280,9092,8856,8835,5457,2790,8574,9742,5054,9547,4156,7940,8126,9824,7340,8840,6574,3547,1477,3014,6798,7134,435,9484,9859,3031,4,1502,4133,1738,1807,4825,463,6343,9701,8506,9822,9555,8688,8168,3467,3234,6318,1787,5591,419,6593,7974,8486,9861,6381,6758,194,3061,4315,2863,4665,3789,2201,1492,4416],
+ [126,8927,6608,5682,8986,6867,1715,6076,3159,788,3140,4744,830,9253,5812,5021,7616,8534,1546,9590,1101,9012,9821,8132,7857,4086,1069,7491,2988,1579,2442,4321,2149,7642,6108,250,6086,3167,24,9528,7663,2685,1220,9196,1397,5776,1577,1730,5481,977,6115,199,6326,2183,3767,5928,5586,7561,663,8649,9688,949,5913,9160,1870,5764,9887,4477,6703,1413,4995,5494,7131,2192,8969,7138,3997,8697,646,1028],
+ [8074,1731,8245,624,4601,8706,155,8891,309,2552,8208,8452,2954,3124,3469,4246,3352,1105,4509,8677,9901,4416,8191,9283,5625,7120,2952,8881,7693,830,4580,8228,9459,8611,4499,1179,4988,1394,550,2336,6089,6872,269,7213,1848,917,6672,4890,656,1478,6536,3165,4743,4990,1176,6211,7207,5284,9730,4738,1549,4986,4942,8645,3698,9429,1439,2175,6549,3058,6513,1574,6988,8333,3406,5245,5431,7140,7085,6407],
+ [7845,4694,2530,8249,290,5948,5509,1588,5940,4495,5866,5021,4626,3979,3296,7589,4854,1998,5627,3926,8346,6512,9608,1918,7070,4747,4182,2858,2766,4606,6269,4107,8982,8568,9053,4244,5604,102,2756,727,5887,2566,7922,44,5986,621,1202,374,6988,4130,3627,6744,9443,4568,1398,8679,397,3928,9159,367,2917,6127,5788,3304,8129,911,2669,1463,9749,264,4478,8940,1109,7309,2462,117,4692,7724,225,2312],
+ [4164,3637,2000,941,8903,39,3443,7172,1031,3687,4901,8082,4945,4515,7204,9310,9349,9535,9940,218,1788,9245,2237,1541,5670,6538,6047,5553,9807,8101,1925,8714,445,8332,7309,6830,5786,5736,7306,2710,3034,1838,7969,6318,7912,2584,2080,7437,6705,2254,7428,820,782,9861,7596,3842,3631,8063,5240,6666,394,4565,7865,4895,9890,6028,6117,4724,9156,4473,4552,602,470,6191,4927,5387,884,3146,1978,3000],
+ [4258,6880,1696,3582,5793,4923,2119,1155,9056,9698,6603,3768,5514,9927,9609,6166,6566,4536,4985,4934,8076,9062,6741,6163,7399,4562,2337,5600,2919,9012,8459,1308,6072,1225,9306,8818,5886,7243,7365,8792,6007,9256,6699,7171,4230,7002,8720,7839,4533,1671,478,7774,1607,2317,5437,4705,7886,4760,6760,7271,3081,2997,3088,7675,6208,3101,6821,6840,122,9633,4900,2067,8546,4549,2091,7188,5605,8599,6758,5229],
+ [7854,5243,9155,3556,8812,7047,2202,1541,5993,4600,4760,713,434,7911,7426,7414,8729,322,803,7960,7563,4908,6285,6291,736,3389,9339,4132,8701,7534,5287,3646,592,3065,7582,2592,8755,6068,8597,1982,5782,1894,2900,6236,4039,6569,3037,5837,7698,700,7815,2491,7272,5878,3083,6778,6639,3589,5010,8313,2581,6617,5869,8402,6808,2951,2321,5195,497,2190,6187,1342,1316,4453,7740,4154,2959,1781,1482,8256],
+ [7178,2046,4419,744,8312,5356,6855,8839,319,2962,5662,47,6307,8662,68,4813,567,2712,9931,1678,3101,8227,6533,4933,6656,92,5846,4780,6256,6361,4323,9985,1231,2175,7178,3034,9744,6155,9165,7787,5836,9318,7860,9644,8941,6480,9443,8188,5928,161,6979,2352,5628,6991,1198,8067,5867,6620,3778,8426,2994,3122,3124,6335,3918,8897,2655,9670,634,1088,1576,8935,7255,474,8166,7417,9547,2886,5560,3842],
+ [6957,3111,26,7530,7143,1295,1744,6057,3009,1854,8098,5405,2234,4874,9447,2620,9303,27,7410,969,40,2966,5648,7596,8637,4238,3143,3679,7187,690,9980,7085,7714,9373,5632,7526,6707,3951,9734,4216,2146,3602,5371,6029,3039,4433,4855,4151,1449,3376,8009,7240,7027,4602,2947,9081,4045,8424,9352,8742,923,2705,4266,3232,2264,6761,363,2651,3383,7770,6730,7856,7340,9679,2158,610,4471,4608,910,6241],
+ [4417,6756,1013,8797,658,8809,5032,8703,7541,846,3357,2920,9817,1745,9980,7593,4667,3087,779,3218,6233,5568,4296,2289,2654,7898,5021,9461,5593,8214,9173,4203,2271,7980,2983,5952,9992,8399,3468,1776,3188,9314,1720,6523,2933,621,8685,5483,8986,6163,3444,9539,4320,155,3992,2828,2150,6071,524,2895,5468,8063,1210,3348,9071,4862,483,9017,4097,6186,9815,3610,5048,1644,1003,9865,9332,2145,1944,2213],
+ [9284,3803,4920,1927,6706,4344,7383,4786,9890,2010,5228,1224,3158,6967,8580,8990,8883,5213,76,8306,2031,4980,5639,9519,7184,5645,7769,3259,8077,9130,1317,3096,9624,3818,1770,695,2454,947,6029,3474,9938,3527,5696,4760,7724,7738,2848,6442,5767,6845,8323,4131,2859,7595,2500,4815,3660,9130,8580,7016,8231,4391,8369,3444,4069,4021,556,6154,627,2778,1496,4206,6356,8434,8491,3816,8231,3190,5575,1015],
+ [3787,7572,1788,6803,5641,6844,1961,4811,8535,9914,9999,1450,8857,738,4662,8569,6679,2225,7839,8618,286,2648,5342,2294,3205,4546,176,8705,3741,6134,8324,8021,7004,5205,7032,6637,9442,5539,5584,4819,5874,5807,8589,6871,9016,983,1758,3786,1519,6241,185,8398,495,3370,9133,3051,4549,9674,7311,9738,3316,9383,2658,2776,9481,7558,619,3943,3324,6491,4933,153,9738,4623,912,3595,7771,7939,1219,4405],
+ [2650,3883,4154,5809,315,7756,4430,1788,4451,1631,6461,7230,6017,5751,138,588,5282,2442,9110,9035,6349,2515,1570,6122,4192,4174,3530,1933,4186,4420,4609,5739,4135,2963,6308,1161,8809,8619,2796,3819,6971,8228,4188,1492,909,8048,2328,6772,8467,7671,9068,2226,7579,6422,7056,8042,3296,2272,3006,2196,7320,3238,3490,3102,37,1293,3212,4767,5041,8773,5794,4456,6174,7279,7054,2835,7053,9088,790,6640],
+ [3101,1057,7057,3826,6077,1025,2955,1224,1114,6729,5902,4698,6239,7203,9423,1804,4417,6686,1426,6941,8071,1029,4985,9010,6122,6597,1622,1574,3513,1684,7086,5505,3244,411,9638,4150,907,9135,829,981,1707,5359,8781,9751,5,9131,3973,7159,1340,6955,7514,7993,6964,8198,1933,2797,877,3993,4453,8020,9349,8646,2779,8679,2961,3547,3374,3510,1129,3568,2241,2625,9138,5974,8206,7669,7678,1833,8700,4480],
+ [4865,9912,8038,8238,782,3095,8199,1127,4501,7280,2112,2487,3626,2790,9432,1475,6312,8277,4827,2218,5806,7132,8752,1468,7471,6386,739,8762,8323,8120,5169,9078,9058,3370,9560,7987,8585,8531,5347,9312,1058,4271,1159,5286,5404,6925,8606,9204,7361,2415,560,586,4002,2644,1927,2824,768,4409,2942,3345,1002,808,4941,6267,7979,5140,8643,7553,9438,7320,4938,2666,4609,2778,8158,6730,3748,3867,1866,7181],
+ [171,3771,7134,8927,4778,2913,3326,2004,3089,7853,1378,1729,4777,2706,9578,1360,5693,3036,1851,7248,2403,2273,8536,6501,9216,613,9671,7131,7719,6425,773,717,8803,160,1114,7554,7197,753,4513,4322,8499,4533,2609,4226,8710,6627,644,9666,6260,4870,5744,7385,6542,6203,7703,6130,8944,5589,2262,6803,6381,7414,6888,5123,7320,9392,9061,6780,322,8975,7050,5089,1061,2260,3199,1150,1865,5386,9699,6501],
+ [3744,8454,6885,8277,919,1923,4001,6864,7854,5519,2491,6057,8794,9645,1776,5714,9786,9281,7538,6916,3215,395,2501,9618,4835,8846,9708,2813,3303,1794,8309,7176,2206,1602,1838,236,4593,2245,8993,4017,10,8215,6921,5206,4023,5932,6997,7801,262,7640,3107,8275,4938,7822,2425,3223,3886,2105,8700,9526,2088,8662,8034,7004,5710,2124,7164,3574,6630,9980,4242,2901,9471,1491,2117,4562,1130,9086,4117,6698],
+ [2810,2280,2331,1170,4554,4071,8387,1215,2274,9848,6738,1604,7281,8805,439,1298,8318,7834,9426,8603,6092,7944,1309,8828,303,3157,4638,4439,9175,1921,4695,7716,1494,1015,1772,5913,1127,1952,1950,8905,4064,9890,385,9357,7945,5035,7082,5369,4093,6546,5187,5637,2041,8946,1758,7111,6566,1027,1049,5148,7224,7248,296,6169,375,1656,7993,2816,3717,4279,4675,1609,3317,42,6201,3100,3144,163,9530,4531],
+ [7096,6070,1009,4988,3538,5801,7149,3063,2324,2912,7911,7002,4338,7880,2481,7368,3516,2016,7556,2193,1388,3865,8125,4637,4096,8114,750,3144,1938,7002,9343,4095,1392,4220,3455,6969,9647,1321,9048,1996,1640,6626,1788,314,9578,6630,2813,6626,4981,9908,7024,4355,3201,3521,3864,3303,464,1923,595,9801,3391,8366,8084,9374,1041,8807,9085,1892,9431,8317,9016,9221,8574,9981,9240,5395,2009,6310,2854,9255],
+ [8830,3145,2960,9615,8220,6061,3452,2918,6481,9278,2297,3385,6565,7066,7316,5682,107,7646,4466,68,1952,9603,8615,54,7191,791,6833,2560,693,9733,4168,570,9127,9537,1925,8287,5508,4297,8452,8795,6213,7994,2420,4208,524,5915,8602,8330,2651,8547,6156,1812,6271,7991,9407,9804,1553,6866,1128,2119,4691,9711,8315,5879,9935,6900,482,682,4126,1041,428,6247,3720,5882,7526,2582,4327,7725,3503,2631],
+ [2738,9323,721,7434,1453,6294,2957,3786,5722,6019,8685,4386,3066,9057,6860,499,5315,3045,5194,7111,3137,9104,941,586,3066,755,4177,8819,7040,5309,3583,3897,4428,7788,4721,7249,6559,7324,825,7311,3760,6064,6070,9672,4882,584,1365,9739,9331,5783,2624,7889,1604,1303,1555,7125,8312,425,8936,3233,7724,1480,403,7440,1784,1754,4721,1569,652,3893,4574,5692,9730,4813,9844,8291,9199,7101,3391,8914],
+ [6044,2928,9332,3328,8588,447,3830,1176,3523,2705,8365,6136,5442,9049,5526,8575,8869,9031,7280,706,2794,8814,5767,4241,7696,78,6570,556,5083,1426,4502,3336,9518,2292,1885,3740,3153,9348,9331,8051,2759,5407,9028,7840,9255,831,515,2612,9747,7435,8964,4971,2048,4900,5967,8271,1719,9670,2810,6777,1594,6367,6259,8316,3815,1689,6840,9437,4361,822,9619,3065,83,6344,7486,8657,8228,9635,6932,4864],
+ [8478,4777,6334,4678,7476,4963,6735,3096,5860,1405,5127,7269,7793,4738,227,9168,2996,8928,765,733,1276,7677,6258,1528,9558,3329,302,8901,1422,8277,6340,645,9125,8869,5952,141,8141,1816,9635,4025,4184,3093,83,2344,2747,9352,7966,1206,1126,1826,218,7939,2957,2729,810,8752,5247,4174,4038,8884,7899,9567,301,5265,5752,7524,4381,1669,3106,8270,6228,6373,754,2547,4240,2313,5514,3022,1040,9738],
+ [2265,8192,1763,1369,8469,8789,4836,52,1212,6690,5257,8918,6723,6319,378,4039,2421,8555,8184,9577,1432,7139,8078,5452,9628,7579,4161,7490,5159,8559,1011,81,478,5840,1964,1334,6875,8670,9900,739,1514,8692,522,9316,6955,1345,8132,2277,3193,9773,3923,4177,2183,1236,6747,6575,4874,6003,6409,8187,745,8776,9440,7543,9825,2582,7381,8147,7236,5185,7564,6125,218,7991,6394,391,7659,7456,5128,5294],
+ [2132,8992,8160,5782,4420,3371,3798,5054,552,5631,7546,4716,1332,6486,7892,7441,4370,6231,4579,2121,8615,1145,9391,1524,1385,2400,9437,2454,7896,7467,2928,8400,3299,4025,7458,4703,7206,6358,792,6200,725,4275,4136,7390,5984,4502,7929,5085,8176,4600,119,3568,76,9363,6943,2248,9077,9731,6213,5817,6729,4190,3092,6910,759,2682,8380,1254,9604,3011,9291,5329,9453,9746,2739,6522,3765,5634,1113,5789],
+ [5304,5499,564,2801,679,2653,1783,3608,7359,7797,3284,796,3222,437,7185,6135,8571,2778,7488,5746,678,6140,861,7750,803,9859,9918,2425,3734,2698,9005,4864,9818,6743,2475,132,9486,3825,5472,919,292,4411,7213,7699,6435,9019,6769,1388,802,2124,1345,8493,9487,8558,7061,8777,8833,2427,2238,5409,4957,8503,3171,7622,5779,6145,2417,5873,5563,5693,9574,9491,1937,7384,4563,6842,5432,2751,3406,7981]
+];
+```
+
+## --seed-contents--
+
+```js
+function pathSumThreeWays(matrix) {
+
+ return true;
+}
+
+// Only change code above this line
+
+const testMatrix1 = [
+ [131, 673, 234, 103, 18],
+ [201, 96, 342, 965, 150],
+ [630, 803, 746, 422, 111],
+ [537, 699, 497, 121, 956],
+ [805, 732, 524, 37, 331]
+];
+
+pathSumThreeWays(testMatrix1);
+```
+
+# --solutions--
+
+```js
+function pathSumThreeWays(matrix) {
+ function makeMinimumMoveFromUpOrRight(row, column) {
+ const curValue = matrix[row][column];
+ if (values[row - 1] > values[row]) {
+ return values[row] + curValue;
+ }
+ return values[row - 1] + curValue;
+ }
+ function isGoingFromDownBetter(row, column) {
+ return values[row] > values[row + 1] + matrix[row][column];
+ }
+
+ const size = matrix.length;
+ const values = [];
+ for (let row = 0; row < size; row++) {
+ values.push(matrix[row][size - 1]);
+ }
+
+ for (let column = size - 2; column >= 0; column--) {
+ values[0] += matrix[0][column];
+
+ for (let row = 1; row < size; row++) {
+ values[row] = makeMinimumMoveFromUpOrRight(row, column);
+ }
+
+ for (let row = size - 2; row >= 0; row--) {
+ if (isGoingFromDownBetter(row, column)) {
+ values[row] = values[row + 1] + matrix[row][column];
+ }
+ }
+ }
+
+ return Math.min(...values);
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-83-path-sum-four-ways.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-83-path-sum-four-ways.md
new file mode 100644
index 00000000000..8d3b60e0c0b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-83-path-sum-four-ways.md
@@ -0,0 +1,215 @@
+---
+id: 5900f3bf1000cf542c50fed2
+title: 'Problem 83: Path sum: four ways'
+challengeType: 1
+forumTopicId: 302197
+dashedName: problem-83-path-sum-four-ways
+---
+
+# --description--
+
+**Note:** This problem is a significantly more challenging version of Problem 81.
+
+In the 5 by 5 matrix below, the minimal path sum from the top left to the bottom right, by moving left, right, up, and down, is indicated in bold red and is equal to `2297`.
+
+ $$\begin{pmatrix} \color{red}{131} & 673 & \color{red}{234} & \color{red}{103} & \color{red}{18}\\\\
+ \color{red}{201} & \color{red}{96} & \color{red}{342} & 965 & \color{red}{150}\\\\ 630 & 803 & 746 & \color{red}{422} & \color{red}{111}\\\\
+ 537 & 699 & 497 & \color{red}{121} & 956\\\\ 805 & 732 & 524 & \color{red}{37} & \color{red}{331} \end{pmatrix}$$
+
+Find the minimal path sum from the top left to the bottom right by moving left, right, up, and down in `matrix`, a 2D array representing a matrix. The maximum matrix size used in tests will be 80 by 80.
+
+# --hints--
+
+`pathSumFourWays(testMatrix1)` should return a number.
+
+```js
+assert(typeof pathSumFourWays(_testMatrix1) === 'number');
+```
+
+`pathSumFourWays(testMatrix1)` should return `2297`.
+
+```js
+assert.strictEqual(pathSumFourWays(_testMatrix1), 2297);
+```
+
+`pathSumFourWays(testMatrix2)` should return `425185`.
+
+```js
+assert.strictEqual(pathSumFourWays(_testMatrix2), 425185);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testMatrix1 = [
+ [131, 673, 234, 103, 18],
+ [201, 96, 342, 965, 150],
+ [630, 803, 746, 422, 111],
+ [537, 699, 497, 121, 956],
+ [805, 732, 524, 37, 331]
+];
+const _testMatrix2 = [
+ [4445,2697,5115,718,2209,2212,654,4348,3079,6821,7668,3276,8874,4190,3785,2752,9473,7817,9137,496,7338,3434,7152,4355,4552,7917,7827,2460,2350,691,3514,5880,3145,7633,7199,3783,5066,7487,3285,1084,8985,760,872,8609,8051,1134,9536,5750,9716,9371,7619,5617,275,9721,2997,2698,1887,8825,6372,3014,2113,7122,7050,6775,5948,2758,1219,3539,348,7989,2735,9862,1263,8089,6401,9462,3168,2758,3748,5870],
+ [1096,20,1318,7586,5167,2642,1443,5741,7621,7030,5526,4244,2348,4641,9827,2448,6918,5883,3737,300,7116,6531,567,5997,3971,6623,820,6148,3287,1874,7981,8424,7672,7575,6797,6717,1078,5008,4051,8795,5820,346,1851,6463,2117,6058,3407,8211,117,4822,1317,4377,4434,5925,8341,4800,1175,4173,690,8978,7470,1295,3799,8724,3509,9849,618,3320,7068,9633,2384,7175,544,6583,1908,9983,481,4187,9353,9377],
+ [9607,7385,521,6084,1364,8983,7623,1585,6935,8551,2574,8267,4781,3834,2764,2084,2669,4656,9343,7709,2203,9328,8004,6192,5856,3555,2260,5118,6504,1839,9227,1259,9451,1388,7909,5733,6968,8519,9973,1663,5315,7571,3035,4325,4283,2304,6438,3815,9213,9806,9536,196,5542,6907,2475,1159,5820,9075,9470,2179,9248,1828,4592,9167,3713,4640,47,3637,309,7344,6955,346,378,9044,8635,7466,5036,9515,6385,9230],
+ [7206,3114,7760,1094,6150,5182,7358,7387,4497,955,101,1478,7777,6966,7010,8417,6453,4955,3496,107,449,8271,131,2948,6185,784,5937,8001,6104,8282,4165,3642,710,2390,575,715,3089,6964,4217,192,5949,7006,715,3328,1152,66,8044,4319,1735,146,4818,5456,6451,4113,1063,4781,6799,602,1504,6245,6550,1417,1343,2363,3785,5448,4545,9371,5420,5068,4613,4882,4241,5043,7873,8042,8434,3939,9256,2187],
+ [3620,8024,577,9997,7377,7682,1314,1158,6282,6310,1896,2509,5436,1732,9480,706,496,101,6232,7375,2207,2306,110,6772,3433,2878,8140,5933,8688,1399,2210,7332,6172,6403,7333,4044,2291,1790,2446,7390,8698,5723,3678,7104,1825,2040,140,3982,4905,4160,2200,5041,2512,1488,2268,1175,7588,8321,8078,7312,977,5257,8465,5068,3453,3096,1651,7906,253,9250,6021,8791,8109,6651,3412,345,4778,5152,4883,7505],
+ [1074,5438,9008,2679,5397,5429,2652,3403,770,9188,4248,2493,4361,8327,9587,707,9525,5913,93,1899,328,2876,3604,673,8576,6908,7659,2544,3359,3883,5273,6587,3065,1749,3223,604,9925,6941,2823,8767,7039,3290,3214,1787,7904,3421,7137,9560,8451,2669,9219,6332,1576,5477,6755,8348,4164,4307,2984,4012,6629,1044,2874,6541,4942,903,1404,9125,5160,8836,4345,2581,460,8438,1538,5507,668,3352,2678,6942],
+ [4295,1176,5596,1521,3061,9868,7037,7129,8933,6659,5947,5063,3653,9447,9245,2679,767,714,116,8558,163,3927,8779,158,5093,2447,5782,3967,1716,931,7772,8164,1117,9244,5783,7776,3846,8862,6014,2330,6947,1777,3112,6008,3491,1906,5952,314,4602,8994,5919,9214,3995,5026,7688,6809,5003,3128,2509,7477,110,8971,3982,8539,2980,4689,6343,5411,2992,5270,5247,9260,2269,7474,1042,7162,5206,1232,4556,4757],
+ [510,3556,5377,1406,5721,4946,2635,7847,4251,8293,8281,6351,4912,287,2870,3380,3948,5322,3840,4738,9563,1906,6298,3234,8959,1562,6297,8835,7861,239,6618,1322,2553,2213,5053,5446,4402,6500,5182,8585,6900,5756,9661,903,5186,7687,5998,7997,8081,8955,4835,6069,2621,1581,732,9564,1082,1853,5442,1342,520,1737,3703,5321,4793,2776,1508,1647,9101,2499,6891,4336,7012,3329,3212,1442,9993,3988,4930,7706],
+ [9444,3401,5891,9716,1228,7107,109,3563,2700,6161,5039,4992,2242,8541,7372,2067,1294,3058,1306,320,8881,5756,9326,411,8650,8824,5495,8282,8397,2000,1228,7817,2099,6473,3571,5994,4447,1299,5991,543,7874,2297,1651,101,2093,3463,9189,6872,6118,872,1008,1779,2805,9084,4048,2123,5877,55,3075,1737,9459,4535,6453,3644,108,5982,4437,5213,1340,6967,9943,5815,669,8074,1838,6979,9132,9315,715,5048],
+ [3327,4030,7177,6336,9933,5296,2621,4785,2755,4832,2512,2118,2244,4407,2170,499,7532,9742,5051,7687,970,6924,3527,4694,5145,1306,2165,5940,2425,8910,3513,1909,6983,346,6377,4304,9330,7203,6605,3709,3346,970,369,9737,5811,4427,9939,3693,8436,5566,1977,3728,2399,3985,8303,2492,5366,9802,9193,7296,1033,5060,9144,2766,1151,7629,5169,5995,58,7619,7565,4208,1713,6279,3209,4908,9224,7409,1325,8540],
+ [6882,1265,1775,3648,4690,959,5837,4520,5394,1378,9485,1360,4018,578,9174,2932,9890,3696,116,1723,1178,9355,7063,1594,1918,8574,7594,7942,1547,6166,7888,354,6932,4651,1010,7759,6905,661,7689,6092,9292,3845,9605,8443,443,8275,5163,7720,7265,6356,7779,1798,1754,5225,6661,1180,8024,5666,88,9153,1840,3508,1193,4445,2648,3538,6243,6375,8107,5902,5423,2520,1122,5015,6113,8859,9370,966,8673,2442],
+ [7338,3423,4723,6533,848,8041,7921,8277,4094,5368,7252,8852,9166,2250,2801,6125,8093,5738,4038,9808,7359,9494,601,9116,4946,2702,5573,2921,9862,1462,1269,2410,4171,2709,7508,6241,7522,615,2407,8200,4189,5492,5649,7353,2590,5203,4274,710,7329,9063,956,8371,3722,4253,4785,1194,4828,4717,4548,940,983,2575,4511,2938,1827,2027,2700,1236,841,5760,1680,6260,2373,3851,1841,4968,1172,5179,7175,3509],
+ [4420,1327,3560,2376,6260,2988,9537,4064,4829,8872,9598,3228,1792,7118,9962,9336,4368,9189,6857,1829,9863,6287,7303,7769,2707,8257,2391,2009,3975,4993,3068,9835,3427,341,8412,2134,4034,8511,6421,3041,9012,2983,7289,100,1355,7904,9186,6920,5856,2008,6545,8331,3655,5011,839,8041,9255,6524,3862,8788,62,7455,3513,5003,8413,3918,2076,7960,6108,3638,6999,3436,1441,4858,4181,1866,8731,7745,3744,1000],
+ [356,8296,8325,1058,1277,4743,3850,2388,6079,6462,2815,5620,8495,5378,75,4324,3441,9870,1113,165,1544,1179,2834,562,6176,2313,6836,8839,2986,9454,5199,6888,1927,5866,8760,320,1792,8296,7898,6121,7241,5886,5814,2815,8336,1576,4314,3109,2572,6011,2086,9061,9403,3947,5487,9731,7281,3159,1819,1334,3181,5844,5114,9898,4634,2531,4412,6430,4262,8482,4546,4555,6804,2607,9421,686,8649,8860,7794,6672],
+ [9870,152,1558,4963,8750,4754,6521,6256,8818,5208,5691,9659,8377,9725,5050,5343,2539,6101,1844,9700,7750,8114,5357,3001,8830,4438,199,9545,8496,43,2078,327,9397,106,6090,8181,8646,6414,7499,5450,4850,6273,5014,4131,7639,3913,6571,8534,9703,4391,7618,445,1320,5,1894,6771,7383,9191,4708,9706,6939,7937,8726,9382,5216,3685,2247,9029,8154,1738,9984,2626,9438,4167,6351,5060,29,1218,1239,4785],
+ [192,5213,8297,8974,4032,6966,5717,1179,6523,4679,9513,1481,3041,5355,9303,9154,1389,8702,6589,7818,6336,3539,5538,3094,6646,6702,6266,2759,4608,4452,617,9406,8064,6379,444,5602,4950,1810,8391,1536,316,8714,1178,5182,5863,5110,5372,4954,1978,2971,5680,4863,2255,4630,5723,2168,538,1692,1319,7540,440,6430,6266,7712,7385,5702,620,641,3136,7350,1478,3155,2820,9109,6261,1122,4470,14,8493,2095],
+ [1046,4301,6082,474,4974,7822,2102,5161,5172,6946,8074,9716,6586,9962,9749,5015,2217,995,5388,4402,7652,6399,6539,1349,8101,3677,1328,9612,7922,2879,231,5887,2655,508,4357,4964,3554,5930,6236,7384,4614,280,3093,9600,2110,7863,2631,6626,6620,68,1311,7198,7561,1768,5139,1431,221,230,2940,968,5283,6517,2146,1646,869,9402,7068,8645,7058,1765,9690,4152,2926,9504,2939,7504,6074,2944,6470,7859],
+ [4659,736,4951,9344,1927,6271,8837,8711,3241,6579,7660,5499,5616,3743,5801,4682,9748,8796,779,1833,4549,8138,4026,775,4170,2432,4174,3741,7540,8017,2833,4027,396,811,2871,1150,9809,2719,9199,8504,1224,540,2051,3519,7982,7367,2761,308,3358,6505,2050,4836,5090,7864,805,2566,2409,6876,3361,8622,5572,5895,3280,441,7893,8105,1634,2929,274,3926,7786,6123,8233,9921,2674,5340,1445,203,4585,3837],
+ [5759,338,7444,7968,7742,3755,1591,4839,1705,650,7061,2461,9230,9391,9373,2413,1213,431,7801,4994,2380,2703,6161,6878,8331,2538,6093,1275,5065,5062,2839,582,1014,8109,3525,1544,1569,8622,7944,2905,6120,1564,1839,5570,7579,1318,2677,5257,4418,5601,7935,7656,5192,1864,5886,6083,5580,6202,8869,1636,7907,4759,9082,5854,3185,7631,6854,5872,5632,5280,1431,2077,9717,7431,4256,8261,9680,4487,4752,4286],
+ [1571,1428,8599,1230,7772,4221,8523,9049,4042,8726,7567,6736,9033,2104,4879,4967,6334,6716,3994,1269,8995,6539,3610,7667,6560,6065,874,848,4597,1711,7161,4811,6734,5723,6356,6026,9183,2586,5636,1092,7779,7923,8747,6887,7505,9909,1792,3233,4526,3176,1508,8043,720,5212,6046,4988,709,5277,8256,3642,1391,5803,1468,2145,3970,6301,7767,2359,8487,9771,8785,7520,856,1605,8972,2402,2386,991,1383,5963],
+ [1822,4824,5957,6511,9868,4113,301,9353,6228,2881,2966,6956,9124,9574,9233,1601,7340,973,9396,540,4747,8590,9535,3650,7333,7583,4806,3593,2738,8157,5215,8472,2284,9473,3906,6982,5505,6053,7936,6074,7179,6688,1564,1103,6860,5839,2022,8490,910,7551,7805,881,7024,1855,9448,4790,1274,3672,2810,774,7623,4223,4850,6071,9975,4935,1915,9771,6690,3846,517,463,7624,4511,614,6394,3661,7409,1395,8127],
+ [8738,3850,9555,3695,4383,2378,87,6256,6740,7682,9546,4255,6105,2000,1851,4073,8957,9022,6547,5189,2487,303,9602,7833,1628,4163,6678,3144,8589,7096,8913,5823,4890,7679,1212,9294,5884,2972,3012,3359,7794,7428,1579,4350,7246,4301,7779,7790,3294,9547,4367,3549,1958,8237,6758,3497,3250,3456,6318,1663,708,7714,6143,6890,3428,6853,9334,7992,591,6449,9786,1412,8500,722,5468,1371,108,3939,4199,2535],
+ [7047,4323,1934,5163,4166,461,3544,2767,6554,203,6098,2265,9078,2075,4644,6641,8412,9183,487,101,7566,5622,1975,5726,2920,5374,7779,5631,3753,3725,2672,3621,4280,1162,5812,345,8173,9785,1525,955,5603,2215,2580,5261,2765,2990,5979,389,3907,2484,1232,5933,5871,3304,1138,1616,5114,9199,5072,7442,7245,6472,4760,6359,9053,7876,2564,9404,3043,9026,2261,3374,4460,7306,2326,966,828,3274,1712,3446],
+ [3975,4565,8131,5800,4570,2306,8838,4392,9147,11,3911,7118,9645,4994,2028,6062,5431,2279,8752,2658,7836,994,7316,5336,7185,3289,1898,9689,2331,5737,3403,1124,2679,3241,7748,16,2724,5441,6640,9368,9081,5618,858,4969,17,2103,6035,8043,7475,2181,939,415,1617,8500,8253,2155,7843,7974,7859,1746,6336,3193,2617,8736,4079,6324,6645,8891,9396,5522,6103,1857,8979,3835,2475,1310,7422,610,8345,7615],
+ [9248,5397,5686,2988,3446,4359,6634,9141,497,9176,6773,7448,1907,8454,916,1596,2241,1626,1384,2741,3649,5362,8791,7170,2903,2475,5325,6451,924,3328,522,90,4813,9737,9557,691,2388,1383,4021,1609,9206,4707,5200,7107,8104,4333,9860,5013,1224,6959,8527,1877,4545,7772,6268,621,4915,9349,5970,706,9583,3071,4127,780,8231,3017,9114,3836,7503,2383,1977,4870,8035,2379,9704,1037,3992,3642,1016,4303],
+ [5093,138,4639,6609,1146,5565,95,7521,9077,2272,974,4388,2465,2650,722,4998,3567,3047,921,2736,7855,173,2065,4238,1048,5,6847,9548,8632,9194,5942,4777,7910,8971,6279,7253,2516,1555,1833,3184,9453,9053,6897,7808,8629,4877,1871,8055,4881,7639,1537,7701,2508,7564,5845,5023,2304,5396,3193,2955,1088,3801,6203,1748,3737,1276,13,4120,7715,8552,3047,2921,106,7508,304,1280,7140,2567,9135,5266],
+ [6237,4607,7527,9047,522,7371,4883,2540,5867,6366,5301,1570,421,276,3361,527,6637,4861,2401,7522,5808,9371,5298,2045,5096,5447,7755,5115,7060,8529,4078,1943,1697,1764,5453,7085,960,2405,739,2100,5800,728,9737,5704,5693,1431,8979,6428,673,7540,6,7773,5857,6823,150,5869,8486,684,5816,9626,7451,5579,8260,3397,5322,6920,1879,2127,2884,5478,4977,9016,6165,6292,3062,5671,5968,78,4619,4763],
+ [9905,7127,9390,5185,6923,3721,9164,9705,4341,1031,1046,5127,7376,6528,3248,4941,1178,7889,3364,4486,5358,9402,9158,8600,1025,874,1839,1783,309,9030,1843,845,8398,1433,7118,70,8071,2877,3904,8866,6722,4299,10,1929,5897,4188,600,1889,3325,2485,6473,4474,7444,6992,4846,6166,4441,2283,2629,4352,7775,1101,2214,9985,215,8270,9750,2740,8361,7103,5930,8664,9690,8302,9267,344,2077,1372,1880,9550],
+ [5825,8517,7769,2405,8204,1060,3603,7025,478,8334,1997,3692,7433,9101,7294,7498,9415,5452,3850,3508,6857,9213,6807,4412,7310,854,5384,686,4978,892,8651,3241,2743,3801,3813,8588,6701,4416,6990,6490,3197,6838,6503,114,8343,5844,8646,8694,65,791,5979,2687,2621,2019,8097,1423,3644,9764,4921,3266,3662,5561,2476,8271,8138,6147,1168,3340,1998,9874,6572,9873,6659,5609,2711,3931,9567,4143,7833,8887],
+ [6223,2099,2700,589,4716,8333,1362,5007,2753,2848,4441,8397,7192,8191,4916,9955,6076,3370,6396,6971,3156,248,3911,2488,4930,2458,7183,5455,170,6809,6417,3390,1956,7188,577,7526,2203,968,8164,479,8699,7915,507,6393,4632,1597,7534,3604,618,3280,6061,9793,9238,8347,568,9645,2070,5198,6482,5000,9212,6655,5961,7513,1323,3872,6170,3812,4146,2736,67,3151,5548,2781,9679,7564,5043,8587,1893,4531],
+ [5826,3690,6724,2121,9308,6986,8106,6659,2142,1642,7170,2877,5757,6494,8026,6571,8387,9961,6043,9758,9607,6450,8631,8334,7359,5256,8523,2225,7487,1977,9555,8048,5763,2414,4948,4265,2427,8978,8088,8841,9208,9601,5810,9398,8866,9138,4176,5875,7212,3272,6759,5678,7649,4922,5422,1343,8197,3154,3600,687,1028,4579,2084,9467,4492,7262,7296,6538,7657,7134,2077,1505,7332,6890,8964,4879,7603,7400,5973,739],
+ [1861,1613,4879,1884,7334,966,2000,7489,2123,4287,1472,3263,4726,9203,1040,4103,6075,6049,330,9253,4062,4268,1635,9960,577,1320,3195,9628,1030,4092,4979,6474,6393,2799,6967,8687,7724,7392,9927,2085,3200,6466,8702,265,7646,8665,7986,7266,4574,6587,612,2724,704,3191,8323,9523,3002,704,5064,3960,8209,2027,2758,8393,4875,4641,9584,6401,7883,7014,768,443,5490,7506,1852,2005,8850,5776,4487,4269],
+ [4052,6687,4705,7260,6645,6715,3706,5504,8672,2853,1136,8187,8203,4016,871,1809,1366,4952,9294,5339,6872,2645,6083,7874,3056,5218,7485,8796,7401,3348,2103,426,8572,4163,9171,3176,948,7654,9344,3217,1650,5580,7971,2622,76,2874,880,2034,9929,1546,2659,5811,3754,7096,7436,9694,9960,7415,2164,953,2360,4194,2397,1047,2196,6827,575,784,2675,8821,6802,7972,5996,6699,2134,7577,2887,1412,4349,4380],
+ [4629,2234,6240,8132,7592,3181,6389,1214,266,1910,2451,8784,2790,1127,6932,1447,8986,2492,5476,397,889,3027,7641,5083,5776,4022,185,3364,5701,2442,2840,4160,9525,4828,6602,2614,7447,3711,4505,7745,8034,6514,4907,2605,7753,6958,7270,6936,3006,8968,439,2326,4652,3085,3425,9863,5049,5361,8688,297,7580,8777,7916,6687,8683,7141,306,9569,2384,1500,3346,4601,7329,9040,6097,2727,6314,4501,4974,2829],
+ [8316,4072,2025,6884,3027,1808,5714,7624,7880,8528,4205,8686,7587,3230,1139,7273,6163,6986,3914,9309,1464,9359,4474,7095,2212,7302,2583,9462,7532,6567,1606,4436,8981,5612,6796,4385,5076,2007,6072,3678,8331,1338,3299,8845,4783,8613,4071,1232,6028,2176,3990,2148,3748,103,9453,538,6745,9110,926,3125,473,5970,8728,7072,9062,1404,1317,5139,9862,6496,6062,3338,464,1600,2532,1088,8232,7739,8274,3873],
+ [2341,523,7096,8397,8301,6541,9844,244,4993,2280,7689,4025,4196,5522,7904,6048,2623,9258,2149,9461,6448,8087,7245,1917,8340,7127,8466,5725,6996,3421,5313,512,9164,9837,9794,8369,4185,1488,7210,1524,1016,4620,9435,2478,7765,8035,697,6677,3724,6988,5853,7662,3895,9593,1185,4727,6025,5734,7665,3070,138,8469,6748,6459,561,7935,8646,2378,462,7755,3115,9690,8877,3946,2728,8793,244,6323,8666,4271],
+ [6430,2406,8994,56,1267,3826,9443,7079,7579,5232,6691,3435,6718,5698,4144,7028,592,2627,217,734,6194,8156,9118,58,2640,8069,4127,3285,694,3197,3377,4143,4802,3324,8134,6953,7625,3598,3584,4289,7065,3434,2106,7132,5802,7920,9060,7531,3321,1725,1067,3751,444,5503,6785,7937,6365,4803,198,6266,8177,1470,6390,1606,2904,7555,9834,8667,2033,1723,5167,1666,8546,8152,473,4475,6451,7947,3062,3281],
+ [2810,3042,7759,1741,2275,2609,7676,8640,4117,1958,7500,8048,1757,3954,9270,1971,4796,2912,660,5511,3553,1012,5757,4525,6084,7198,8352,5775,7726,8591,7710,9589,3122,4392,6856,5016,749,2285,3356,7482,9956,7348,2599,8944,495,3462,3578,551,4543,7207,7169,7796,1247,4278,6916,8176,3742,8385,2310,1345,8692,2667,4568,1770,8319,3585,4920,3890,4928,7343,5385,9772,7947,8786,2056,9266,3454,2807,877,2660],
+ [6206,8252,5928,5837,4177,4333,207,7934,5581,9526,8906,1498,8411,2984,5198,5134,2464,8435,8514,8674,3876,599,5327,826,2152,4084,2433,9327,9697,4800,2728,3608,3849,3861,3498,9943,1407,3991,7191,9110,5666,8434,4704,6545,5944,2357,1163,4995,9619,6754,4200,9682,6654,4862,4744,5953,6632,1054,293,9439,8286,2255,696,8709,1533,1844,6441,430,1999,6063,9431,7018,8057,2920,6266,6799,356,3597,4024,6665],
+ [3847,6356,8541,7225,2325,2946,5199,469,5450,7508,2197,9915,8284,7983,6341,3276,3321,16,1321,7608,5015,3362,8491,6968,6818,797,156,2575,706,9516,5344,5457,9210,5051,8099,1617,9951,7663,8253,9683,2670,1261,4710,1068,8753,4799,1228,2621,3275,6188,4699,1791,9518,8701,5932,4275,6011,9877,2933,4182,6059,2930,6687,6682,9771,654,9437,3169,8596,1827,5471,8909,2352,123,4394,3208,8756,5513,6917,2056],
+ [5458,8173,3138,3290,4570,4892,3317,4251,9699,7973,1163,1935,5477,6648,9614,5655,9592,975,9118,2194,7322,8248,8413,3462,8560,1907,7810,6650,7355,2939,4973,6894,3933,3784,3200,2419,9234,4747,2208,2207,1945,2899,1407,6145,8023,3484,5688,7686,2737,3828,3704,9004,5190,9740,8643,8650,5358,4426,1522,1707,3613,9887,6956,2447,2762,833,1449,9489,2573,1080,4167,3456,6809,2466,227,7125,2759,6250,6472,8089],
+ [3266,7025,9756,3914,1265,9116,7723,9788,6805,5493,2092,8688,6592,9173,4431,4028,6007,7131,4446,4815,3648,6701,759,3312,8355,4485,4187,5188,8746,7759,3528,2177,5243,8379,3838,7233,4607,9187,7216,2190,6967,2920,6082,7910,5354,3609,8958,6949,7731,494,8753,8707,1523,4426,3543,7085,647,6771,9847,646,5049,824,8417,5260,2730,5702,2513,9275,4279,2767,8684,1165,9903,4518,55,9682,8963,6005,2102,6523],
+ [1998,8731,936,1479,5259,7064,4085,91,7745,7136,3773,3810,730,8255,2705,2653,9790,6807,2342,355,9344,2668,3690,2028,9679,8102,574,4318,6481,9175,5423,8062,2867,9657,7553,3442,3920,7430,3945,7639,3714,3392,2525,4995,4850,2867,7951,9667,486,9506,9888,781,8866,1702,3795,90,356,1483,4200,2131,6969,5931,486,6880,4404,1084,5169,4910,6567,8335,4686,5043,2614,3352,2667,4513,6472,7471,5720,1616],
+ [8878,1613,1716,868,1906,2681,564,665,5995,2474,7496,3432,9491,9087,8850,8287,669,823,347,6194,2264,2592,7871,7616,8508,4827,760,2676,4660,4881,7572,3811,9032,939,4384,929,7525,8419,5556,9063,662,8887,7026,8534,3111,1454,2082,7598,5726,6687,9647,7608,73,3014,5063,670,5461,5631,3367,9796,8475,7908,5073,1565,5008,5295,4457,1274,4788,1728,338,600,8415,8535,9351,7750,6887,5845,1741,125],
+ [3637,6489,9634,9464,9055,2413,7824,9517,7532,3577,7050,6186,6980,9365,9782,191,870,2497,8498,2218,2757,5420,6468,586,3320,9230,1034,1393,9886,5072,9391,1178,8464,8042,6869,2075,8275,3601,7715,9470,8786,6475,8373,2159,9237,2066,3264,5000,679,355,3069,4073,494,2308,5512,4334,9438,8786,8637,9774,1169,1949,6594,6072,4270,9158,7916,5752,6794,9391,6301,5842,3285,2141,3898,8027,4310,8821,7079,1307],
+ [8497,6681,4732,7151,7060,5204,9030,7157,833,5014,8723,3207,9796,9286,4913,119,5118,7650,9335,809,3675,2597,5144,3945,5090,8384,187,4102,1260,2445,2792,4422,8389,9290,50,1765,1521,6921,8586,4368,1565,5727,7855,2003,4834,9897,5911,8630,5070,1330,7692,7557,7980,6028,5805,9090,8265,3019,3802,698,9149,5748,1965,9658,4417,5994,5584,8226,2937,272,5743,1278,5698,8736,2595,6475,5342,6596,1149,6920],
+ [8188,8009,9546,6310,8772,2500,9846,6592,6872,3857,1307,8125,7042,1544,6159,2330,643,4604,7899,6848,371,8067,2062,3200,7295,1857,9505,6936,384,2193,2190,301,8535,5503,1462,7380,5114,4824,8833,1763,4974,8711,9262,6698,3999,2645,6937,7747,1128,2933,3556,7943,2885,3122,9105,5447,418,2899,5148,3699,9021,9501,597,4084,175,1621,1,1079,6067,5812,4326,9914,6633,5394,4233,6728,9084,1864,5863,1225],
+ [9935,8793,9117,1825,9542,8246,8437,3331,9128,9675,6086,7075,319,1334,7932,3583,7167,4178,1726,7720,695,8277,7887,6359,5912,1719,2780,8529,1359,2013,4498,8072,1129,9998,1147,8804,9405,6255,1619,2165,7491,1,8882,7378,3337,503,5758,4109,3577,985,3200,7615,8058,5032,1080,6410,6873,5496,1466,2412,9885,5904,4406,3605,8770,4361,6205,9193,1537,9959,214,7260,9566,1685,100,4920,7138,9819,5637,976],
+ [3466,9854,985,1078,7222,8888,5466,5379,3578,4540,6853,8690,3728,6351,7147,3134,6921,9692,857,3307,4998,2172,5783,3931,9417,2541,6299,13,787,2099,9131,9494,896,8600,1643,8419,7248,2660,2609,8579,91,6663,5506,7675,1947,6165,4286,1972,9645,3805,1663,1456,8853,5705,9889,7489,1107,383,4044,2969,3343,152,7805,4980,9929,5033,1737,9953,7197,9158,4071,1324,473,9676,3984,9680,3606,8160,7384,5432],
+ [1005,4512,5186,3953,2164,3372,4097,3247,8697,3022,9896,4101,3871,6791,3219,2742,4630,6967,7829,5991,6134,1197,1414,8923,8787,1394,8852,5019,7768,5147,8004,8825,5062,9625,7988,1110,3992,7984,9966,6516,6251,8270,421,3723,1432,4830,6935,8095,9059,2214,6483,6846,3120,1587,6201,6691,9096,9627,6671,4002,3495,9939,7708,7465,5879,6959,6634,3241,3401,2355,9061,2611,7830,3941,2177,2146,5089,7079,519,6351],
+ [7280,8586,4261,2831,7217,3141,9994,9940,5462,2189,4005,6942,9848,5350,8060,6665,7519,4324,7684,657,9453,9296,2944,6843,7499,7847,1728,9681,3906,6353,5529,2822,3355,3897,7724,4257,7489,8672,4356,3983,1948,6892,7415,4153,5893,4190,621,1736,4045,9532,7701,3671,1211,1622,3176,4524,9317,7800,5638,6644,6943,5463,3531,2821,1347,5958,3436,1438,2999,994,850,4131,2616,1549,3465,5946,690,9273,6954,7991],
+ [9517,399,3249,2596,7736,2142,1322,968,7350,1614,468,3346,3265,7222,6086,1661,5317,2582,7959,4685,2807,2917,1037,5698,1529,3972,8716,2634,3301,3412,8621,743,8001,4734,888,7744,8092,3671,8941,1487,5658,7099,2781,99,1932,4443,4756,4652,9328,1581,7855,4312,5976,7255,6480,3996,2748,1973,9731,4530,2790,9417,7186,5303,3557,351,7182,9428,1342,9020,7599,1392,8304,2070,9138,7215,2008,9937,1106,7110],
+ [7444,769,9688,632,1571,6820,8743,4338,337,3366,3073,1946,8219,104,4210,6986,249,5061,8693,7960,6546,1004,8857,5997,9352,4338,6105,5008,2556,6518,6694,4345,3727,7956,20,3954,8652,4424,9387,2035,8358,5962,5304,5194,8650,8282,1256,1103,2138,6679,1985,3653,2770,2433,4278,615,2863,1715,242,3790,2636,6998,3088,1671,2239,957,5411,4595,6282,2881,9974,2401,875,7574,2987,4587,3147,6766,9885,2965],
+ [3287,3016,3619,6818,9073,6120,5423,557,2900,2015,8111,3873,1314,4189,1846,4399,7041,7583,2427,2864,3525,5002,2069,748,1948,6015,2684,438,770,8367,1663,7887,7759,1885,157,7770,4520,4878,3857,1137,3525,3050,6276,5569,7649,904,4533,7843,2199,5648,7628,9075,9441,3600,7231,2388,5640,9096,958,3058,584,5899,8150,1181,9616,1098,8162,6819,8171,1519,1140,7665,8801,2632,1299,9192,707,9955,2710,7314],
+ [1772,2963,7578,3541,3095,1488,7026,2634,6015,4633,4370,2762,1650,2174,909,8158,2922,8467,4198,4280,9092,8856,8835,5457,2790,8574,9742,5054,9547,4156,7940,8126,9824,7340,8840,6574,3547,1477,3014,6798,7134,435,9484,9859,3031,4,1502,4133,1738,1807,4825,463,6343,9701,8506,9822,9555,8688,8168,3467,3234,6318,1787,5591,419,6593,7974,8486,9861,6381,6758,194,3061,4315,2863,4665,3789,2201,1492,4416],
+ [126,8927,6608,5682,8986,6867,1715,6076,3159,788,3140,4744,830,9253,5812,5021,7616,8534,1546,9590,1101,9012,9821,8132,7857,4086,1069,7491,2988,1579,2442,4321,2149,7642,6108,250,6086,3167,24,9528,7663,2685,1220,9196,1397,5776,1577,1730,5481,977,6115,199,6326,2183,3767,5928,5586,7561,663,8649,9688,949,5913,9160,1870,5764,9887,4477,6703,1413,4995,5494,7131,2192,8969,7138,3997,8697,646,1028],
+ [8074,1731,8245,624,4601,8706,155,8891,309,2552,8208,8452,2954,3124,3469,4246,3352,1105,4509,8677,9901,4416,8191,9283,5625,7120,2952,8881,7693,830,4580,8228,9459,8611,4499,1179,4988,1394,550,2336,6089,6872,269,7213,1848,917,6672,4890,656,1478,6536,3165,4743,4990,1176,6211,7207,5284,9730,4738,1549,4986,4942,8645,3698,9429,1439,2175,6549,3058,6513,1574,6988,8333,3406,5245,5431,7140,7085,6407],
+ [7845,4694,2530,8249,290,5948,5509,1588,5940,4495,5866,5021,4626,3979,3296,7589,4854,1998,5627,3926,8346,6512,9608,1918,7070,4747,4182,2858,2766,4606,6269,4107,8982,8568,9053,4244,5604,102,2756,727,5887,2566,7922,44,5986,621,1202,374,6988,4130,3627,6744,9443,4568,1398,8679,397,3928,9159,367,2917,6127,5788,3304,8129,911,2669,1463,9749,264,4478,8940,1109,7309,2462,117,4692,7724,225,2312],
+ [4164,3637,2000,941,8903,39,3443,7172,1031,3687,4901,8082,4945,4515,7204,9310,9349,9535,9940,218,1788,9245,2237,1541,5670,6538,6047,5553,9807,8101,1925,8714,445,8332,7309,6830,5786,5736,7306,2710,3034,1838,7969,6318,7912,2584,2080,7437,6705,2254,7428,820,782,9861,7596,3842,3631,8063,5240,6666,394,4565,7865,4895,9890,6028,6117,4724,9156,4473,4552,602,470,6191,4927,5387,884,3146,1978,3000],
+ [4258,6880,1696,3582,5793,4923,2119,1155,9056,9698,6603,3768,5514,9927,9609,6166,6566,4536,4985,4934,8076,9062,6741,6163,7399,4562,2337,5600,2919,9012,8459,1308,6072,1225,9306,8818,5886,7243,7365,8792,6007,9256,6699,7171,4230,7002,8720,7839,4533,1671,478,7774,1607,2317,5437,4705,7886,4760,6760,7271,3081,2997,3088,7675,6208,3101,6821,6840,122,9633,4900,2067,8546,4549,2091,7188,5605,8599,6758,5229],
+ [7854,5243,9155,3556,8812,7047,2202,1541,5993,4600,4760,713,434,7911,7426,7414,8729,322,803,7960,7563,4908,6285,6291,736,3389,9339,4132,8701,7534,5287,3646,592,3065,7582,2592,8755,6068,8597,1982,5782,1894,2900,6236,4039,6569,3037,5837,7698,700,7815,2491,7272,5878,3083,6778,6639,3589,5010,8313,2581,6617,5869,8402,6808,2951,2321,5195,497,2190,6187,1342,1316,4453,7740,4154,2959,1781,1482,8256],
+ [7178,2046,4419,744,8312,5356,6855,8839,319,2962,5662,47,6307,8662,68,4813,567,2712,9931,1678,3101,8227,6533,4933,6656,92,5846,4780,6256,6361,4323,9985,1231,2175,7178,3034,9744,6155,9165,7787,5836,9318,7860,9644,8941,6480,9443,8188,5928,161,6979,2352,5628,6991,1198,8067,5867,6620,3778,8426,2994,3122,3124,6335,3918,8897,2655,9670,634,1088,1576,8935,7255,474,8166,7417,9547,2886,5560,3842],
+ [6957,3111,26,7530,7143,1295,1744,6057,3009,1854,8098,5405,2234,4874,9447,2620,9303,27,7410,969,40,2966,5648,7596,8637,4238,3143,3679,7187,690,9980,7085,7714,9373,5632,7526,6707,3951,9734,4216,2146,3602,5371,6029,3039,4433,4855,4151,1449,3376,8009,7240,7027,4602,2947,9081,4045,8424,9352,8742,923,2705,4266,3232,2264,6761,363,2651,3383,7770,6730,7856,7340,9679,2158,610,4471,4608,910,6241],
+ [4417,6756,1013,8797,658,8809,5032,8703,7541,846,3357,2920,9817,1745,9980,7593,4667,3087,779,3218,6233,5568,4296,2289,2654,7898,5021,9461,5593,8214,9173,4203,2271,7980,2983,5952,9992,8399,3468,1776,3188,9314,1720,6523,2933,621,8685,5483,8986,6163,3444,9539,4320,155,3992,2828,2150,6071,524,2895,5468,8063,1210,3348,9071,4862,483,9017,4097,6186,9815,3610,5048,1644,1003,9865,9332,2145,1944,2213],
+ [9284,3803,4920,1927,6706,4344,7383,4786,9890,2010,5228,1224,3158,6967,8580,8990,8883,5213,76,8306,2031,4980,5639,9519,7184,5645,7769,3259,8077,9130,1317,3096,9624,3818,1770,695,2454,947,6029,3474,9938,3527,5696,4760,7724,7738,2848,6442,5767,6845,8323,4131,2859,7595,2500,4815,3660,9130,8580,7016,8231,4391,8369,3444,4069,4021,556,6154,627,2778,1496,4206,6356,8434,8491,3816,8231,3190,5575,1015],
+ [3787,7572,1788,6803,5641,6844,1961,4811,8535,9914,9999,1450,8857,738,4662,8569,6679,2225,7839,8618,286,2648,5342,2294,3205,4546,176,8705,3741,6134,8324,8021,7004,5205,7032,6637,9442,5539,5584,4819,5874,5807,8589,6871,9016,983,1758,3786,1519,6241,185,8398,495,3370,9133,3051,4549,9674,7311,9738,3316,9383,2658,2776,9481,7558,619,3943,3324,6491,4933,153,9738,4623,912,3595,7771,7939,1219,4405],
+ [2650,3883,4154,5809,315,7756,4430,1788,4451,1631,6461,7230,6017,5751,138,588,5282,2442,9110,9035,6349,2515,1570,6122,4192,4174,3530,1933,4186,4420,4609,5739,4135,2963,6308,1161,8809,8619,2796,3819,6971,8228,4188,1492,909,8048,2328,6772,8467,7671,9068,2226,7579,6422,7056,8042,3296,2272,3006,2196,7320,3238,3490,3102,37,1293,3212,4767,5041,8773,5794,4456,6174,7279,7054,2835,7053,9088,790,6640],
+ [3101,1057,7057,3826,6077,1025,2955,1224,1114,6729,5902,4698,6239,7203,9423,1804,4417,6686,1426,6941,8071,1029,4985,9010,6122,6597,1622,1574,3513,1684,7086,5505,3244,411,9638,4150,907,9135,829,981,1707,5359,8781,9751,5,9131,3973,7159,1340,6955,7514,7993,6964,8198,1933,2797,877,3993,4453,8020,9349,8646,2779,8679,2961,3547,3374,3510,1129,3568,2241,2625,9138,5974,8206,7669,7678,1833,8700,4480],
+ [4865,9912,8038,8238,782,3095,8199,1127,4501,7280,2112,2487,3626,2790,9432,1475,6312,8277,4827,2218,5806,7132,8752,1468,7471,6386,739,8762,8323,8120,5169,9078,9058,3370,9560,7987,8585,8531,5347,9312,1058,4271,1159,5286,5404,6925,8606,9204,7361,2415,560,586,4002,2644,1927,2824,768,4409,2942,3345,1002,808,4941,6267,7979,5140,8643,7553,9438,7320,4938,2666,4609,2778,8158,6730,3748,3867,1866,7181],
+ [171,3771,7134,8927,4778,2913,3326,2004,3089,7853,1378,1729,4777,2706,9578,1360,5693,3036,1851,7248,2403,2273,8536,6501,9216,613,9671,7131,7719,6425,773,717,8803,160,1114,7554,7197,753,4513,4322,8499,4533,2609,4226,8710,6627,644,9666,6260,4870,5744,7385,6542,6203,7703,6130,8944,5589,2262,6803,6381,7414,6888,5123,7320,9392,9061,6780,322,8975,7050,5089,1061,2260,3199,1150,1865,5386,9699,6501],
+ [3744,8454,6885,8277,919,1923,4001,6864,7854,5519,2491,6057,8794,9645,1776,5714,9786,9281,7538,6916,3215,395,2501,9618,4835,8846,9708,2813,3303,1794,8309,7176,2206,1602,1838,236,4593,2245,8993,4017,10,8215,6921,5206,4023,5932,6997,7801,262,7640,3107,8275,4938,7822,2425,3223,3886,2105,8700,9526,2088,8662,8034,7004,5710,2124,7164,3574,6630,9980,4242,2901,9471,1491,2117,4562,1130,9086,4117,6698],
+ [2810,2280,2331,1170,4554,4071,8387,1215,2274,9848,6738,1604,7281,8805,439,1298,8318,7834,9426,8603,6092,7944,1309,8828,303,3157,4638,4439,9175,1921,4695,7716,1494,1015,1772,5913,1127,1952,1950,8905,4064,9890,385,9357,7945,5035,7082,5369,4093,6546,5187,5637,2041,8946,1758,7111,6566,1027,1049,5148,7224,7248,296,6169,375,1656,7993,2816,3717,4279,4675,1609,3317,42,6201,3100,3144,163,9530,4531],
+ [7096,6070,1009,4988,3538,5801,7149,3063,2324,2912,7911,7002,4338,7880,2481,7368,3516,2016,7556,2193,1388,3865,8125,4637,4096,8114,750,3144,1938,7002,9343,4095,1392,4220,3455,6969,9647,1321,9048,1996,1640,6626,1788,314,9578,6630,2813,6626,4981,9908,7024,4355,3201,3521,3864,3303,464,1923,595,9801,3391,8366,8084,9374,1041,8807,9085,1892,9431,8317,9016,9221,8574,9981,9240,5395,2009,6310,2854,9255],
+ [8830,3145,2960,9615,8220,6061,3452,2918,6481,9278,2297,3385,6565,7066,7316,5682,107,7646,4466,68,1952,9603,8615,54,7191,791,6833,2560,693,9733,4168,570,9127,9537,1925,8287,5508,4297,8452,8795,6213,7994,2420,4208,524,5915,8602,8330,2651,8547,6156,1812,6271,7991,9407,9804,1553,6866,1128,2119,4691,9711,8315,5879,9935,6900,482,682,4126,1041,428,6247,3720,5882,7526,2582,4327,7725,3503,2631],
+ [2738,9323,721,7434,1453,6294,2957,3786,5722,6019,8685,4386,3066,9057,6860,499,5315,3045,5194,7111,3137,9104,941,586,3066,755,4177,8819,7040,5309,3583,3897,4428,7788,4721,7249,6559,7324,825,7311,3760,6064,6070,9672,4882,584,1365,9739,9331,5783,2624,7889,1604,1303,1555,7125,8312,425,8936,3233,7724,1480,403,7440,1784,1754,4721,1569,652,3893,4574,5692,9730,4813,9844,8291,9199,7101,3391,8914],
+ [6044,2928,9332,3328,8588,447,3830,1176,3523,2705,8365,6136,5442,9049,5526,8575,8869,9031,7280,706,2794,8814,5767,4241,7696,78,6570,556,5083,1426,4502,3336,9518,2292,1885,3740,3153,9348,9331,8051,2759,5407,9028,7840,9255,831,515,2612,9747,7435,8964,4971,2048,4900,5967,8271,1719,9670,2810,6777,1594,6367,6259,8316,3815,1689,6840,9437,4361,822,9619,3065,83,6344,7486,8657,8228,9635,6932,4864],
+ [8478,4777,6334,4678,7476,4963,6735,3096,5860,1405,5127,7269,7793,4738,227,9168,2996,8928,765,733,1276,7677,6258,1528,9558,3329,302,8901,1422,8277,6340,645,9125,8869,5952,141,8141,1816,9635,4025,4184,3093,83,2344,2747,9352,7966,1206,1126,1826,218,7939,2957,2729,810,8752,5247,4174,4038,8884,7899,9567,301,5265,5752,7524,4381,1669,3106,8270,6228,6373,754,2547,4240,2313,5514,3022,1040,9738],
+ [2265,8192,1763,1369,8469,8789,4836,52,1212,6690,5257,8918,6723,6319,378,4039,2421,8555,8184,9577,1432,7139,8078,5452,9628,7579,4161,7490,5159,8559,1011,81,478,5840,1964,1334,6875,8670,9900,739,1514,8692,522,9316,6955,1345,8132,2277,3193,9773,3923,4177,2183,1236,6747,6575,4874,6003,6409,8187,745,8776,9440,7543,9825,2582,7381,8147,7236,5185,7564,6125,218,7991,6394,391,7659,7456,5128,5294],
+ [2132,8992,8160,5782,4420,3371,3798,5054,552,5631,7546,4716,1332,6486,7892,7441,4370,6231,4579,2121,8615,1145,9391,1524,1385,2400,9437,2454,7896,7467,2928,8400,3299,4025,7458,4703,7206,6358,792,6200,725,4275,4136,7390,5984,4502,7929,5085,8176,4600,119,3568,76,9363,6943,2248,9077,9731,6213,5817,6729,4190,3092,6910,759,2682,8380,1254,9604,3011,9291,5329,9453,9746,2739,6522,3765,5634,1113,5789],
+ [5304,5499,564,2801,679,2653,1783,3608,7359,7797,3284,796,3222,437,7185,6135,8571,2778,7488,5746,678,6140,861,7750,803,9859,9918,2425,3734,2698,9005,4864,9818,6743,2475,132,9486,3825,5472,919,292,4411,7213,7699,6435,9019,6769,1388,802,2124,1345,8493,9487,8558,7061,8777,8833,2427,2238,5409,4957,8503,3171,7622,5779,6145,2417,5873,5563,5693,9574,9491,1937,7384,4563,6842,5432,2751,3406,7981]
+];
+```
+
+## --seed-contents--
+
+```js
+function pathSumFourWays(matrix) {
+
+ return true;
+}
+
+// Only change code above this line
+
+const testMatrix1 = [
+ [131, 673, 234, 103, 18],
+ [201, 96, 342, 965, 150],
+ [630, 803, 746, 422, 111],
+ [537, 699, 497, 121, 956],
+ [805, 732, 524, 37, 331]
+];
+
+pathSumFourWays(testMatrix1);
+```
+
+# --solutions--
+
+```js
+function pathSumFourWays(matrix) {
+ const MOVES = [
+ [-1, 0],
+ [1, 0],
+ [0, -1],
+ [0, 1]
+ ];
+
+ function getAllowedMoves(row, col) {
+ const moves = [];
+ for (let i = 0; i < MOVES.length; i++) {
+ const [rowChange, colChange] = MOVES[i];
+ const nextRow = row + rowChange;
+ const nextCol = col + colChange;
+ if (isMoveAllowed(nextRow, nextCol)) {
+ moves.push([nextRow, nextCol]);
+ }
+ }
+ return moves;
+ }
+
+ function isMoveAllowed(nextRow, nextCol) {
+ if (nextRow < 0 || nextRow >= size || nextCol < 0 || nextCol >= size) {
+ return false;
+ }
+ return true;
+ }
+
+ const size = matrix.length;
+ const resultMatrix = new Array(size)
+ .fill()
+ .map(() => new Array(size).fill(Infinity));
+
+ const [startRow, startCol] = new Array(2).fill(size - 1);
+ const queue = [[startRow, startCol]];
+ resultMatrix[startRow][startCol] = matrix[startRow][startCol];
+
+ while (queue.length > 0) {
+ const [curRow, curCol] = queue.shift();
+
+ const allowedMoves = getAllowedMoves(curRow, curCol);
+
+ for (let i = 0; i < allowedMoves.length; i++) {
+ const [nextRow, nextCol] = allowedMoves[i];
+ const bestPath = resultMatrix[nextRow][nextCol];
+ const newPath = resultMatrix[curRow][curCol] + matrix[nextRow][nextCol];
+ if (newPath < bestPath) {
+ resultMatrix[nextRow][nextCol] = newPath;
+ queue.push(allowedMoves[i]);
+ }
+ }
+ }
+ return resultMatrix[0][0];
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-84-monopoly-odds.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-84-monopoly-odds.md
new file mode 100644
index 00000000000..92c630f9429
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-84-monopoly-odds.md
@@ -0,0 +1,268 @@
+---
+id: 5900f3c11000cf542c50fed3
+title: 'Problem 84: Monopoly odds'
+challengeType: 1
+forumTopicId: 302198
+dashedName: problem-84-monopoly-odds
+---
+
+# --description--
+
+In the game, *Monopoly*, the standard board is set up in the following way:
+
+
+
+
+
+ GO
+ A1
+ CC1
+ A2
+ T1
+ R1
+ B1
+ CH1
+ B2
+ B3
+ JAIL
+
+
+ H2
+
+ C1
+
+
+ T2
+
+ U1
+
+
+ H1
+
+ C2
+
+
+ CH3
+
+ C3
+
+
+ R4
+
+ R2
+
+
+ G3
+
+ D1
+
+
+ CC3
+
+ CC2
+
+
+ G2
+
+ D2
+
+
+ G1
+
+ D3
+
+
+ G2J
+ F3
+ U2
+ F2
+ F1
+ R3
+ E3
+ E2
+ CH2
+ E1
+ FP
+
+
+
+
+ Community Chest (2/16 cards):
+
+ Advance to GO
+ Go to JAIL
+
+
+ Chance (10/16 cards):
+
+ Advance to GO
+ Go to JAIL
+ Go to C1
+ Go to E3
+ Go to H2
+ Go to R1
+ Go to next R (railway company)
+ Go to next R
+ Go to next U (utility company)
+ Go back 3 squares.
+
+
+
+The heart of this problem concerns the likelihood of visiting a particular square. That is, the probability of finishing at that square after a roll. For this reason it should be clear that, with the exception of G2J for which the probability of finishing on it is zero, the CH squares will have the lowest probabilities, as 5/8 request a movement to another square, and it is the final square that the player finishes at on each roll that we are interested in. We shall make no distinction between "Just Visiting" and being sent to JAIL, and we shall also ignore the rule about requiring a double to "get out of jail", assuming that they pay to get out on their next turn.
+
+By starting at GO and numbering the squares sequentially from 00 to 39 we can concatenate these two-digit numbers to produce strings that correspond with sets of squares.
+
+Statistically it can be shown that the three most popular squares, in order, are JAIL (6.24%) = Square 10, E3 (3.18%) = Square 24, and GO (3.09%) = Square 00. So these three most popular squares can be listed with the six-digit modal string `102400`.
+
+If, instead of using two 6-sided dice, two `n`-sided dice are used, find the six-digit modal string.
+
+# --hints--
+
+`monopolyOdds(8)` should return a string.
+
+```js
+assert(typeof monopolyOdds(8) === 'string');
+```
+
+`monopolyOdds(8)` should return string `102400`.
+
+```js
+assert.strictEqual(monopolyOdds(8), '102400');
+```
+
+`monopolyOdds(10)` should return string `100024`.
+
+```js
+assert.strictEqual(monopolyOdds(10), '100024');
+```
+
+`monopolyOdds(20)` should return string `100005`.
+
+```js
+assert.strictEqual(monopolyOdds(20), '100005');
+```
+
+`monopolyOdds(4)` should return string `101524`.
+
+```js
+assert.strictEqual(monopolyOdds(4), '101524');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function monopolyOdds(n) {
+
+ return true;
+}
+
+monopolyOdds(8);
+```
+
+# --solutions--
+
+```js
+function monopolyOdds(n) {
+ function chanceCard(position, chanceCardPosition) {
+ chanceCardPosition = (chanceCardPosition + 1) % 16;
+ if (chanceCardPosition < 6) {
+ position = chanceCardsMoves[chanceCardPosition];
+ } else if (chanceCardPosition === 6 || chanceCardPosition === 7) {
+ position = nextMovesFromR[position];
+ } else if (chanceCardPosition === 8) {
+ position = nextMovesFromU[position];
+ } else if (chanceCardPosition === 9) {
+ position -= 3;
+ }
+ return [position, chanceCardPosition];
+ }
+
+ function chestCard(position, chestPosition) {
+ chestPosition = (chestPosition + 1) % 16;
+ if (chestPosition < 2) {
+ position = chestCardsMoves[chestPosition];
+ }
+ return [position, chestPosition];
+ }
+
+ function isChest(position) {
+ return position === 2 || position === 17 || position === 33;
+ }
+
+ function isChance(position) {
+ return position === 7 || position === 22 || position === 36;
+ }
+
+ function isJail(position) {
+ return position === 30;
+ }
+
+ function roll(dice) {
+ return Math.floor(Math.random() * dice) + 1;
+ }
+
+ function getTopThree(board) {
+ return sortByVisits(board)
+ .slice(0, 3)
+ .map(elem => elem[0].toString().padStart(2, '0'))
+ .join('');
+ }
+
+ function sortByVisits(board) {
+ return board
+ .map((element, index) => [index, element])
+ .sort((a, b) => a[1] - b[1])
+ .reverse();
+ }
+
+ const rounds = 2000000;
+ const chestCardsMoves = [0, 10];
+ const chanceCardsMoves = [0, 10, 11, 24, 39, 5];
+ const nextMovesFromR = { 7: 15, 22: 25, 36: 5 };
+ const nextMovesFromU = { 7: 12, 36: 12, 22: 28 };
+
+ const board = new Array(40).fill(0);
+ let doubleCount = 0;
+ let curPosition = 0;
+ let curChestCard = 0;
+ let curChanceCard = 0;
+
+ for (let i = 0; i < rounds; i++) {
+ const dice1 = roll(n);
+ const dice2 = roll(n);
+
+ if (dice1 === dice2) {
+ doubleCount++;
+ } else {
+ doubleCount = 0;
+ }
+
+ if (doubleCount > 2) {
+ curPosition = 10;
+ doubleCount = 0;
+ } else {
+ curPosition = (curPosition + dice1 + dice2) % 40;
+
+ if (isChance(curPosition)) {
+ [curPosition, curChanceCard] = chanceCard(curPosition, curChanceCard);
+ } else if (isChest(curPosition)) {
+ [curPosition, curChestCard] = chestCard(curPosition, curChestCard);
+ } else if (isJail(curPosition)) {
+ curPosition = 10;
+ }
+ }
+ board[curPosition]++;
+ }
+ return getTopThree(board);
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-85-counting-rectangles.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-85-counting-rectangles.md
new file mode 100644
index 00000000000..eafbccb8aee
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-85-counting-rectangles.md
@@ -0,0 +1,109 @@
+---
+id: 5900f3c11000cf542c50fed4
+title: 'Problem 85: Counting rectangles'
+challengeType: 1
+forumTopicId: 302199
+dashedName: problem-85-counting-rectangles
+---
+
+# --description--
+
+By counting carefully it can be seen that a rectangular grid measuring 3 by 2 contains eighteen rectangles:
+
+
+ 28 = 22 + 23 + 24 2 + 23 + 24 2 + 23 + 24 2 + 33 + 24
+
+ k =2: 4 = 2 × 2 = 2 + 2k =3: 6 = 1 × 2 × 3 = 1 + 2 + 3k =4: 8 = 1 × 1 × 2 × 4 = 1 + 1 + 2 + 4k =5: 8 = 1 × 1 × 2 × 2 × 2 = 1 + 1 + 2 + 2 + 2k =6: 12 = 1 × 1 × 1 × 1 × 2 × 6 = 1 + 1 + 1 + 1 + 2 + 6
+
+ IIIIIIIIIIIIIIII
+
+However, according to the rules only XIIIIII and XVI are valid, and the last example is considered to be the most efficient, as it uses the least number of numerals.
+
+The array, `roman`, will contain numbers written with valid, but not necessarily minimal, Roman numerals.
+
+Find the number of characters saved by writing each of these in their minimal form.
+
+**Note:** You can assume that all the Roman numerals in the array contain no more than four consecutive identical units.
+
+# --hints--
+
+`romanNumerals(testNumerals1)` should return a number.
+
+```js
+assert(typeof romanNumerals(_testNumerals1) === 'number');
+```
+
+`romanNumerals(testNumerals1)` should return `19`.
+
+```js
+assert.strictEqual(romanNumerals(_testNumerals1), 19);
+```
+
+`romanNumerals(testNumerals2)` should return `743`.
+
+```js
+assert.strictEqual(romanNumerals(_testNumerals2), 743);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testNumerals1 = [
+ 'XIIIIII', 'XVI', 'MMMCCLXVIIII', 'XXXXVI', 'MMMMXX', 'CCLI', 'CCCCXX', 'MMMMDCXXXXI', 'DCCCCIIII', 'MXVIIII'
+];
+const _testNumerals2 = [
+ 'MMMMDCLXXII','MMDCCCLXXXIII','MMMDLXVIIII','MMMMDXCV','DCCCLXXII','MMCCCVI','MMMCDLXXXVII','MMMMCCXXI','MMMCCXX','MMMMDCCCLXXIII','MMMCCXXXVII','MMCCCLXXXXIX','MDCCCXXIIII','MMCXCVI','CCXCVIII','MMMCCCXXXII','MDCCXXX','MMMDCCCL','MMMMCCLXXXVI','MMDCCCXCVI','MMMDCII','MMMCCXII','MMMMDCCCCI','MMDCCCXCII','MDCXX','CMLXXXVII','MMMXXI','MMMMCCCXIV','MLXXII','MCCLXXVIIII','MMMMCCXXXXI','MMDCCCLXXII','MMMMXXXI','MMMDCCLXXX','MMDCCCLXXIX','MMMMLXXXV','MCXXI','MDCCCXXXVII','MMCCCLXVII','MCDXXXV','CCXXXIII','CMXX','MMMCLXIV','MCCCLXXXVI','DCCCXCVIII','MMMDCCCCXXXIV','CDXVIIII','MMCCXXXV','MDCCCXXXII','MMMMD','MMDCCLXIX','MMMMCCCLXXXXVI','MMDCCXLII','MMMDCCCVIIII','DCCLXXXIIII','MDCCCCXXXII','MMCXXVII','DCCCXXX','CCLXIX','MMMXI','MMMMCMLXXXXVIII','MMMMDLXXXVII','MMMMDCCCLX','MMCCLIV','CMIX','MMDCCCLXXXIIII','CLXXXII','MMCCCCXXXXV','MMMMDLXXXVIIII','MMMDCCCXXI','MMDCCCCLXXVI','MCCCCLXX','MMCDLVIIII','MMMDCCCLIX','MMMMCCCCXIX','MMMDCCCLXXV','XXXI','CDLXXXIII','MMMCXV','MMDCCLXIII','MMDXXX','MMMMCCCLVII','MMMDCI','MMMMCDLXXXIIII','MMMMCCCXVI','CCCLXXXVIII','MMMMCML','MMMMXXIV','MMMCCCCXXX','DCCX','MMMCCLX','MMDXXXIII','CCCLXIII','MMDCCXIII','MMMCCCXLIV','CLXXXXI','CXVI','MMMMCXXXIII','CLXX','DCCCXVIII','MLXVII','DLXXXX','MMDXXI','MMMMDLXXXXVIII','MXXII','LXI','DCCCCXLIII','MMMMDV','MMMMXXXIV','MDCCCLVIII','MMMCCLXXII','MMMMDCCXXXVI','MMMMLXXXIX','MDCCCLXXXI','MMMMDCCCXV','MMMMCCCCXI','MMMMCCCLIII','MDCCCLXXI','MMCCCCXI','MLXV','MMCDLXII','MMMMDXXXXII','MMMMDCCCXL','MMMMCMLVI','CCLXXXIV','MMMDCCLXXXVI','MMCLII','MMMCCCCXV','MMLXXXIII','MMMV','MMMV','DCCLXII','MMDCCCCXVI','MMDCXLVIII','CCLIIII','CCCXXV','MMDCCLXXXVIIII','MMMMDCLXXVIII','MMMMDCCCXCI','MMMMCCCXX','MMCCXLV','MMMDCCCLXIX','MMCCLXIIII','MMMDCCCXLIX','MMMMCCCLXIX','CMLXXXXI','MCMLXXXIX','MMCDLXI','MMDCLXXVIII','MMMMDCCLXI','MCDXXV','DL','CCCLXXII','MXVIIII','MCCCCLXVIII','CIII','MMMDCCLXXIIII','MMMDVIII','MMMMCCCLXXXXVII','MMDXXVII','MMDCCLXXXXV','MMMMCXLVI','MMMDCCLXXXII','MMMDXXXVI','MCXXII','CLI','DCLXXXIX','MMMCLI','MDCLXIII','MMMMDCCXCVII','MMCCCLXXXV','MMMDCXXVIII','MMMCDLX','MMMCMLII','MMMIV','MMMMDCCCLVIII','MMMDLXXXVIII','MCXXIV','MMMMLXXVI','CLXXIX','MMMCCCCXXVIIII','DCCLXXXV','MMMDCCCVI','LI','CLXXXVI','MMMMCCCLXXVI','MCCCLXVI','CCXXXIX','MMDXXXXI','MMDCCCXLI','DCCCLXXXVIII','MMMMDCCCIV','MDCCCCXV','MMCMVI','MMMMCMLXXXXV','MMDCCLVI','MMMMCCXLVIII','DCCCCIIII','MMCCCCIII','MMMDCCLXXXVIIII','MDCCCLXXXXV','DVII','MMMV','DCXXV','MMDCCCXCV','DCVIII','MMCDLXVI','MCXXVIII','MDCCXCVIII','MMDCLX','MMMDCCLXIV','MMCDLXXVII','MMDLXXXIIII','MMMMCCCXXII','MMMDCCCXLIIII','DCCCCLXVII','MMMCLXXXXIII','MCCXV','MMMMDCXI','MMMMDCLXXXXV','MMMCCCLII','MMCMIX','MMDCCXXV','MMDLXXXVI','MMMMDCXXVIIII','DCCCCXXXVIIII','MMCCXXXIIII','MMDCCLXXVIII','MDCCLXVIIII','MMCCLXXXV','MMMMDCCCLXXXVIII','MMCMXCI','MDXLII','MMMMDCCXIV','MMMMLI','DXXXXIII','MMDCCXI','MMMMCCLXXXIII','MMMDCCCLXXIII','MDCLVII','MMCD','MCCCXXVII','MMMMDCCIIII','MMMDCCXLVI','MMMCLXXXVII','MMMCCVIIII','MCCCCLXXIX','DL','DCCCLXXVI','MMDXCI','MMMMDCCCCXXXVI','MMCII','MMMDCCCXXXXV','MMMCDXLV','MMDCXXXXIV','MMD','MDCCCLXXXX','MMDCXLIII','MMCCXXXII','MMDCXXXXVIIII','DCCCLXXI','MDXCVIIII','MMMMCCLXXVIII','MDCLVIIII','MMMCCCLXXXIX','MDCLXXXV','MDLVIII','MMMMCCVII','MMMMDCXIV','MMMCCCLXIIII','MMIIII','MMMMCCCLXXIII','CCIII','MMMCCLV','MMMDXIII','MMMCCCXC','MMMDCCCXXI','MMMMCCCCXXXII','CCCLVI','MMMCCCLXXXVI','MXVIIII','MMMCCCCXIIII','CLXVII','MMMCCLXX','CCCCLXIV','MMXXXXII','MMMMCCLXXXX','MXL','CCXVI','CCCCLVIIII','MMCCCII','MCCCLVIII','MMMMCCCX','MCDLXXXXIV','MDCCCXIII','MMDCCCXL','MMMMCCCXXIII','DXXXIV','CVI','MMMMDCLXXX','DCCCVII','MMCMLXIIII','MMMDCCCXXXIII','DCCC','MDIII','MMCCCLXVI','MMMCCCCLXXI','MMDCCCCXVIII','CCXXXVII','CCCXXV','MDCCCXII','MMMCMV','MMMMCMXV','MMMMDCXCI','DXXI','MMCCXLVIIII','MMMMCMLII','MDLXXX','MMDCLXVI','CXXI','MMMDCCCLIIII','MMMCXXI','MCCIII','MMDCXXXXI','CCXCII','MMMMDXXXV','MMMCCCLXV','MMMMDLXV','MMMCCCCXXXII','MMMCCCVIII','DCCCCLXXXXII','MMCLXIV','MMMMCXI','MLXXXXVII','MMMCDXXXVIII','MDXXII','MLV','MMMMDLXVI','MMMCXII','XXXIII','MMMMDCCCXXVI','MMMLXVIIII','MMMLX','MMMCDLXVII','MDCCCLVII','MMCXXXVII','MDCCCCXXX','MMDCCCLXIII','MMMMDCXLIX','MMMMCMXLVIII','DCCCLXXVIIII','MDCCCLIII','MMMCMLXI','MMMMCCLXI','MMDCCCLIII','MMMDCCCVI','MMDXXXXIX','MMCLXXXXV','MMDXXX','MMMXIII','DCLXXIX','DCCLXII','MMMMDCCLXVIII','MDCCXXXXIII','CCXXXII','MMMMDCXXV','MMMCCCXXVIII','MDCVIII','MMMCLXXXXIIII','CLXXXI','MDCCCCXXXIII','MMMMDCXXX','MMMDCXXIV','MMMCCXXXVII','MCCCXXXXIIII','CXVIII','MMDCCCCIV','MMMMCDLXXV','MMMDLXIV','MDXCIII','MCCLXXXI','MMMDCCCXXIV','MCXLIII','MMMDCCCI','MCCLXXX','CCXV','MMDCCLXXI','MMDLXXXIII','MMMMDCXVII','MMMCMLXV','MCLXVIII','MMMMCCLXXVI','MMMDCCLXVIIII','MMMMDCCCIX','DLXXXXIX','DCCCXXII','MMMMIII','MMMMCCCLXXVI','DCCCXCIII','DXXXI','MXXXIIII','CCXII','MMMDCCLXXXIIII','MMMCXX','MMMCMXXVII','DCCCXXXX','MMCDXXXVIIII','MMMMDCCXVIII','LV','MMMDCCCCVI','MCCCII','MMCMLXVIIII','MDCCXI','MMMMDLXVII','MMCCCCLXI','MMDCCV','MMMCCCXXXIIII','MMMMDI','MMMDCCCXCV','MMDCCLXXXXI','MMMDXXVI','MMMDCCCLVI','MMDCXXX','MCCCVII','MMMMCCCLXII','MMMMXXV','MMCMXXV','MMLVI','MMDXXX','MMMMCVII','MDC','MCCIII','MMMMDCC','MMCCLXXV','MMDCCCXXXXVI','MMMMCCCLXV','CDXIIII','MLXIIII','CCV','MMMCMXXXI','CCCCLXVI','MDXXXII','MMMMCCCLVIII','MMV','MMMCLII','MCMLI','MMDCCXX','MMMMCCCCXXXVI','MCCLXXXI','MMMCMVI','DCCXXX','MMMMCCCLXV','DCCCXI','MMMMDCCCXIV','CCCXXI','MMDLXXV','CCCCLXXXX','MCCCLXXXXII','MMDCIX','DCCXLIIII','DXIV','MMMMCLII','CDLXI','MMMCXXVII','MMMMDCCCCLXIII','MMMDCLIIII','MCCCCXXXXII','MMCCCLX','CCCCLIII','MDCCLXXVI','MCMXXIII','MMMMDLXXVIII','MMDCCCCLX','MMMCCCLXXXX','MMMCDXXVI','MMMDLVIII','CCCLXI','MMMMDCXXII','MMDCCCXXI','MMDCCXIII','MMMMCLXXXVI','MDCCCCXXVI','MDV','MMDCCCCLXXVI','MMMMCCXXXVII','MMMDCCLXXVIIII','MMMCCCCLXVII','DCCXLI','MMCLXXXVIII','MCCXXXVI','MMDCXLVIII','MMMMCXXXII','MMMMDCCLXVI','MMMMCMLI','MMMMCLXV','MMMMDCCCXCIV','MCCLXXVII','LXXVIIII','DCCLII','MMMCCCXCVI','MMMCLV','MMDCCCXXXXVIII','DCCCXV','MXC','MMDCCLXXXXVII','MMMMCML','MMDCCCLXXVIII','DXXI','MCCCXLI','DCLXXXXI','MMCCCLXXXXVIII','MDCCCCLXXVIII','MMMMDXXV','MMMDCXXXVI','MMMCMXCVII','MMXVIIII','MMMDCCLXXIV','MMMCXXV','DXXXVIII','MMMMCLXVI','MDXII','MMCCCLXX','CCLXXI','DXIV','MMMCLIII','DLII','MMMCCCXLIX','MMCCCCXXVI','MMDCXLIII','MXXXXII','CCCLXXXV','MDCLXXVI','MDCXII','MMMCCCLXXXIII','MMDCCCCLXXXII','MMMMCCCLXXXV','MMDCXXI','DCCCXXX','MMMDCCCCLII','MMMDCCXXII','MMMMCDXCVIII','MMMCCLXVIIII','MMXXV','MMMMCDXIX','MMMMCCCX','MMMCCCCLXVI','MMMMDCLXXVIIII','MMMMDCXXXXIV','MMMCMXII','MMMMXXXIII','MMMMDLXXXII','DCCCLIV','MDXVIIII','MMMCLXXXXV','CCCCXX','MMDIX','MMCMLXXXVIII','DCCXLIII','DCCLX','D','MCCCVII','MMMMCCCLXXXIII','MDCCCLXXIIII','MMMDCCCCLXXXVII','MMMMCCCVII','MMMDCCLXXXXVI','CDXXXIV','MCCLXVIII','MMMMDLX','MMMMDXII','MMMMCCCCLIIII','MCMLXXXXIII','MMMMDCCCIII','MMDCLXXXIII','MDCCCXXXXIV','XXXXVII','MMMDCCCXXXII','MMMDCCCXLII','MCXXXV','MDCXXVIIII','MMMCXXXXIIII','MMMMCDXVII','MMMDXXIII','MMMMCCCCLXI','DCLXXXXVIIII','LXXXXI','CXXXIII','MCDX','MCCLVII','MDCXXXXII','MMMCXXIV','MMMMLXXXX','MMDCCCCXLV','MLXXX','MMDCCCCLX','MCDLIII','MMMCCCLXVII','MMMMCCCLXXIV','MMMDCVIII','DCCCCXXIII','MMXCI','MMDCCIV','MMMMDCCCXXXIV','CCCLXXI','MCCLXXXII','MCMIII','CCXXXI','DCCXXXVIII','MMMMDCCXLVIIII','MMMMCMXXXV','DCCCLXXV','DCCXCI','MMMMDVII','MMMMDCCCLXVIIII','CCCXCV','MMMMDCCXX','MCCCCII','MMMCCCXC','MMMCCCII','MMDCCLXXVII','MMDCLIIII','CCXLIII','MMMDCXVIII','MMMCCCIX','MCXV','MMCCXXV','MLXXIIII','MDCCXXVI','MMMCCCXX','MMDLXX','MMCCCCVI','MMDCCXX','MMMMDCCCCXCV','MDCCCXXXII','MMMMDCCCCXXXX','XCIV','MMCCCCLX','MMXVII','MLXXI','MMMDXXVIII','MDCCCCII','MMMCMLVII','MMCLXXXXVIII','MDCCCCLV','MCCCCLXXIIII','MCCCLII','MCDXLVI','MMMMDXVIII','DCCLXXXIX','MMMDCCLXIV','MDCCCCXLIII','CLXXXXV','MMMMCCXXXVI','MMMDCCCXXI','MMMMCDLXXVII','MCDLIII','MMCCXLVI','DCCCLV','MCDLXX','DCLXXVIII','MMDCXXXIX','MMMMDCLX','MMDCCLI','MMCXXXV','MMMCCXII','MMMMCMLXII','MMMMCCV','MCCCCLXIX','MMMMCCIII','CLXVII','MCCCLXXXXIIII','MMMMDCVIII','MMDCCCLXI','MMLXXIX','CMLXIX','MMDCCCXLVIIII','DCLXII','MMMCCCXLVII','MDCCCXXXV','MMMMDCCXCVI','DCXXX','XXVI','MMLXIX','MMCXI','DCXXXVII','MMMMCCCXXXXVIII','MMMMDCLXI','MMMMDCLXXIIII','MMMMVIII','MMMMDCCCLXII','MDCXCI','MMCCCXXIIII','CCCCXXXXV','MMDCCCXXI','MCVI','MMDCCLXVIII','MMMMCXL','MLXVIII','CMXXVII','CCCLV','MDCCLXXXIX','MMMCCCCLXV','MMDCCLXII','MDLXVI','MMMCCCXVIII','MMMMCCLXXXI','MMCXXVII','MMDCCCLXVIII','MMMCXCII','MMMMDCLVIII','MMMMDCCCXXXXII','MMDCCCCLXXXXVI','MDCCXL','MDCCLVII','MMMMDCCCLXXXVI','DCCXXXIII','MMMMDCCCCLXXXV','MMCCXXXXVIII','MMMCCLXXVIII','MMMDCLXXVIII','DCCCI','MMMMLXXXXVIIII','MMMCCCCLXXII','MMCLXXXVII','CCLXVI','MCDXLIII','MMCXXVIII','MDXIV','CCCXCVIII','CLXXVIII','MMCXXXXVIIII','MMMDCLXXXIV','CMLVIII','MCDLIX','MMMMDCCCXXXII','MMMMDCXXXIIII','MDCXXI','MMMDCXLV','MCLXXVIII','MCDXXII','IV','MCDLXXXXIII','MMMMDCCLXV','CCLI','MMMMDCCCXXXVIII','DCLXII','MCCCLXVII','MMMMDCCCXXXVI','MMDCCXLI','MLXI','MMMCDLXVIII','MCCCCXCIII','XXXIII','MMMDCLXIII','MMMMDCL','DCCCXXXXIIII','MMDLVII','DXXXVII','MCCCCXXIIII','MCVII','MMMMDCCXL','MMMMCXXXXIIII','MCCCCXXIV','MMCLXVIII','MMXCIII','MDCCLXXX','MCCCLIIII','MMDCLXXI','MXI','MCMLIV','MMMCCIIII','DCCLXXXVIIII','MDCLIV','MMMDCXIX','CMLXXXI','DCCLXXXVII','XXV','MMMXXXVI','MDVIIII','CLXIII','MMMCDLVIIII','MMCCCCVII','MMMLXX','MXXXXII','MMMMCCCLXVIII','MMDCCCXXVIII','MMMMDCXXXXI','MMMMDCCCXXXXV','MMMXV','MMMMCCXVIIII','MMDCCXIIII','MMMXXVII','MDCCLVIIII','MMCXXIIII','MCCCLXXIV','DCLVIII','MMMLVII','MMMCXLV','MMXCVII','MMMCCCLXXXVII','MMMMCCXXII','DXII','MMMDLV','MCCCLXXVIII','MMMCLIIII','MMMMCLXXXX','MMMCLXXXIIII','MDCXXIII','MMMMCCXVI','MMMMDLXXXIII','MMMDXXXXIII','MMMMCCCCLV','MMMDLXXXI','MMMCCLXXVI','MMMMXX','MMMMDLVI','MCCCCLXXX','MMMXXII','MMXXII','MMDCCCCXXXI','MMMDXXV','MMMDCLXXXVIIII','MMMDLXXXXVII','MDLXIIII','CMXC','MMMXXXVIII','MDLXXXVIII','MCCCLXXVI','MMCDLIX','MMDCCCXVIII','MDCCCXXXXVI','MMMMCMIV','MMMMDCIIII','MMCCXXXV','XXXXVI','MMMMCCXVII','MMCCXXIV','MCMLVIIII','MLXXXIX','MMMMLXXXIX','CLXXXXIX','MMMDCCCCLVIII','MMMMCCLXXIII','MCCCC','DCCCLIX','MMMCCCLXXXII','MMMCCLXVIIII','MCLXXXV','CDLXXXVII','DCVI','MMX','MMCCXIII','MMMMDCXX','MMMMXXVIII','DCCCLXII','MMMMCCCXLIII','MMMMCLXV','DXCI','MMMMCLXXX','MMMDCCXXXXI','MMMMXXXXVI','DCLX','MMMCCCXI','MCCLXXX','MMCDLXXII','DCCLXXI','MMMCCCXXXVI','MCCCCLXXXVIIII','CDLVIII','DCCLVI','MMMMDCXXXVIII','MMCCCLXXXIII','MMMMDCCLXXV','MMMXXXVI','CCCLXXXXIX','CV','CCCCXIII','CCCCXVI','MDCCCLXXXIIII','MMDCCLXXXII','MMMMCCCCLXXXI','MXXV','MMCCCLXXVIIII','MMMCCXII','MMMMCCXXXIII','MMCCCLXXXVI','MMMDCCCLVIIII','MCCXXXVII','MDCLXXV','XXXV','MMDLI','MMMCCXXX','MMMMCXXXXV','CCCCLIX','MMMMDCCCLXXIII','MMCCCXVII','DCCCXVI','MMMCCCXXXXV','MDCCCCXCV','CLXXXI','MMMMDCCLXX','MMMDCCCIII','MMCLXXVII','MMMDCCXXIX','MMDCCCXCIIII','MMMCDXXIIII','MMMMXXVIII','MMMMDCCCCLXVIII','MDCCCXX','MMMMCDXXI','MMMMDLXXXIX','CCXVI','MDVIII','MMCCLXXI','MMMDCCCLXXI','MMMCCCLXXVI','MMCCLXI','MMMMDCCCXXXIV','DLXXXVI','MMMMDXXXII','MMMXXIIII','MMMMCDIV','MMMMCCCXLVIII','MMMMCXXXVIII','MMMCCCLXVI','MDCCXVIII','MMCXX','CCCLIX','MMMMDCCLXXII','MDCCCLXXV','MMMMDCCCXXIV','DCCCXXXXVIII','MMMDCCCCXXXVIIII','MMMMCCXXXV','MDCLXXXIII','MMCCLXXXIV','MCLXXXXIIII','DXXXXIII','MCCCXXXXVIII','MMCLXXIX','MMMMCCLXIV','MXXII','MMMCXIX','MDCXXXVII','MMDCCVI','MCLXXXXVIII','MMMCXVI','MCCCLX','MMMCDX','CCLXVIIII','MMMCCLX','MCXXVIII','LXXXII','MCCCCLXXXI','MMMI','MMMCCCLXIV','MMMCCCXXVIIII','CXXXVIII','MMCCCXX','MMMCCXXVIIII','MCCLXVI','MMMCCCCXXXXVI','MMDCCXCIX','MCMLXXI','MMCCLXVIII','CDLXXXXIII','MMMMDCCXXII','MMMMDCCLXXXVII','MMMDCCLIV','MMCCLXIII','MDXXXVII','DCCXXXIIII','MCII','MMMDCCCLXXI','MMMLXXIII','MDCCCLIII','MMXXXVIII','MDCCXVIIII','MDCCCCXXXVII','MMCCCXVI','MCMXXII','MMMCCCLVIII','MMMMDCCCXX','MCXXIII','MMMDLXI','MMMMDXXII','MDCCCX','MMDXCVIIII','MMMDCCCCVIII','MMMMDCCCCXXXXVI','MMDCCCXXXV','MMCXCIV','MCMLXXXXIII','MMMCCCLXXVI','MMMMDCLXXXV','CMLXIX','DCXCII','MMXXVIII','MMMMCCCXXX','XXXXVIIII'
+];
+```
+
+## --seed-contents--
+
+```js
+function romanNumerals(roman) {
+
+ return true;
+}
+
+// Only change code above this line
+
+const testNumerals1 = [
+ 'XIIIIII', 'XVI', 'MMMCCLXVIIII', 'XXXXVI', 'MMMMXX', 'CCLI', 'CCCCXX', 'MMMMDCXXXXI', 'DCCCCIIII', 'MXVIIII'
+];
+
+romanNumerals(testNumerals1);
+```
+
+# --solutions--
+
+```js
+function romanNumerals(roman) {
+ const numerals = [...roman];
+ const replaces = [
+ ['VIIII', 'IX'],
+ ['IIII', 'IV'],
+ ['LXXXX', 'XC'],
+ ['XXXX', 'XL'],
+ ['DCCCC', 'CM'],
+ ['CCCC', 'CD']
+ ];
+ let savedChars = 0;
+ for (let i = 0; i < numerals.length; i++) {
+ const charsBefore = numerals[i].length;
+ for (let j = 0; j < replaces.length; j++) {
+ numerals[i] = numerals[i].replace(...replaces[j]);
+ }
+ const charsAfter = numerals[i].length;
+ savedChars += charsBefore - charsAfter;
+ }
+ return savedChars;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-9-special-pythagorean-triplet.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-9-special-pythagorean-triplet.md
new file mode 100644
index 00000000000..a853dd4415e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-9-special-pythagorean-triplet.md
@@ -0,0 +1,74 @@
+---
+id: 5900f3761000cf542c50fe88
+title: 'Problem 9: Special Pythagorean triplet'
+challengeType: 1
+forumTopicId: 302205
+dashedName: problem-9-special-pythagorean-triplet
+---
+
+# --description--
+
+A Pythagorean triplet is a set of three natural numbers, `a` < `b` < `c`, for which,
+
+a 2 + b 2 = c 2
+
+For example, 32 + 42 = 9 + 16 = 25 = 52 .
+
+There exists exactly one Pythagorean triplet for which `a` + `b` + `c` = 1000. Find the product `abc` such that `a` + `b` + `c` = `n`.
+
+# --hints--
+
+`specialPythagoreanTriplet(24)` should return a number.
+
+```js
+assert(typeof specialPythagoreanTriplet(24) === 'number');
+```
+
+`specialPythagoreanTriplet(24)` should return 480.
+
+```js
+assert.strictEqual(specialPythagoreanTriplet(24), 480);
+```
+
+`specialPythagoreanTriplet(120)` should return 49920, 55080 or 60000.
+
+```js
+assert([49920, 55080, 60000].includes(specialPythagoreanTriplet(120)));
+```
+
+`specialPythagoreanTriplet(1000)` should return 31875000.
+
+```js
+assert.strictEqual(specialPythagoreanTriplet(1000), 31875000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function specialPythagoreanTriplet(n) {
+ let sumOfabc = n;
+
+ return true;
+}
+
+specialPythagoreanTriplet(1000);
+```
+
+# --solutions--
+
+```js
+const specialPythagoreanTriplet = (n)=>{
+ let sumOfabc = n;
+ let a,b,c;
+ for(a = 1; a<=sumOfabc/3; a++){
+ for(b = a+1; b<=sumOfabc/2; b++){
+ c = Math.sqrt(a*a+b*b);
+ if((a+b+c) == sumOfabc){
+ return a*b*c;
+ }
+ }
+ }
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-90-cube-digit-pairs.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-90-cube-digit-pairs.md
new file mode 100644
index 00000000000..3e1206b4c4f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-90-cube-digit-pairs.md
@@ -0,0 +1,65 @@
+---
+id: 5900f3c61000cf542c50fed9
+title: 'Problem 90: Cube digit pairs'
+challengeType: 1
+forumTopicId: 302207
+dashedName: problem-90-cube-digit-pairs
+---
+
+# --description--
+
+Each of the six faces on a cube has a different digit (0 to 9) written on it; the same is done to a second cube. By placing the two cubes side-by-side in different positions we can form a variety of 2-digit numbers.
+
+For example, the square number 64 could be formed:
+
+
+ {1, 2, 3, 4, 5, 6} is equivalent to {3, 6, 4, 1, 2, 5}
+
+But because we are allowing 6 and 9 to be reversed, the two distinct sets in the last example both represent the extended set {1, 2, 3, 4, 5, 6, 9} for the purpose of forming 2-digit numbers.
+
+How many distinct arrangements of the two cubes allow for all of the square numbers to be displayed?
+
+# --hints--
+
+`cubeDigitPairs()` should return a number.
+
+```js
+assert(typeof cubeDigitPairs() === 'number');
+```
+
+`cubeDigitPairs()` should return 1217.
+
+```js
+assert.strictEqual(cubeDigitPairs(), 1217);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cubeDigitPairs() {
+
+ return true;
+}
+
+cubeDigitPairs();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-91-right-triangles-with-integer-coordinates.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-91-right-triangles-with-integer-coordinates.md
new file mode 100644
index 00000000000..7874cbab3fc
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-91-right-triangles-with-integer-coordinates.md
@@ -0,0 +1,119 @@
+---
+id: 5900f3c71000cf542c50feda
+title: 'Problem 91: Right triangles with integer coordinates'
+challengeType: 1
+forumTopicId: 302208
+dashedName: problem-91-right-triangles-with-integer-coordinates
+---
+
+# --description--
+
+The points ${P}(x_1, y_1)$ and ${Q}(x_2, y_2)$ are plotted at integer co-ordinates and are joined to the origin, ${O}(0, 0)$, to form ${\Delta}OPQ$.
+
+
+ 8 = (4 * (1 + 3)) / 2
+
+Note that concatenations of the digits, like 12 + 34, are not allowed.
+
+Using the set, {1, 2, 3, 4}, it is possible to obtain thirty-one different target numbers of which 36 is the maximum, and each of the numbers 1 to 28 can be obtained before encountering the first non-expressible number.
+
+Find the set of four distinct digits, `a` < `b` < `c` < `d`, for which the longest set of consecutive positive integers, 1 to `n`, can be obtained, giving your answer as a string: `abcd`.
+
+# --hints--
+
+`arithmeticExpressions()` should return a number.
+
+```js
+assert(typeof arithmeticExpressions() === 'number');
+```
+
+`arithmeticExpressions()` should return 1258.
+
+```js
+assert.strictEqual(arithmeticExpressions(), 1258);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function arithmeticExpressions() {
+
+ return true;
+}
+
+arithmeticExpressions();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-94-almost-equilateral-triangles.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-94-almost-equilateral-triangles.md
new file mode 100644
index 00000000000..4b3ab85e079
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-94-almost-equilateral-triangles.md
@@ -0,0 +1,84 @@
+---
+id: 5900f3ca1000cf542c50fedd
+title: 'Problem 94: Almost equilateral triangles'
+challengeType: 1
+forumTopicId: 302211
+dashedName: problem-94-almost-equilateral-triangles
+---
+
+# --description--
+
+It is easily proved that no equilateral triangle exists with integral length sides and integral area. However, the almost equilateral triangle 5-5-6 has an area of 12 square units.
+
+We shall define an almost equilateral triangle to be a triangle for which two sides are equal and the third differs by no more than one unit.
+
+Find the sum of the perimeters of all almost equilateral triangles with integral side lengths and area and whose perimeters do not exceed `limit`.
+
+# --hints--
+
+`almostEquilateralTriangles(50)` should return a number.
+
+```js
+assert(typeof almostEquilateralTriangles(50) === 'number');
+```
+
+`almostEquilateralTriangles(50)` should return `66`.
+
+```js
+assert.strictEqual(almostEquilateralTriangles(50), 66);
+```
+
+`almostEquilateralTriangles(10000)` should return `3688`.
+
+```js
+assert.strictEqual(almostEquilateralTriangles(10000), 3688);
+```
+
+`almostEquilateralTriangles(10000000)` should return `9973078`.
+
+```js
+assert.strictEqual(almostEquilateralTriangles(10000000), 9973078);
+```
+
+`almostEquilateralTriangles(1000000000)` should return `518408346`.
+
+```js
+assert.strictEqual(almostEquilateralTriangles(1000000000), 518408346);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function almostEquilateralTriangles(limit) {
+
+ return true;
+}
+
+almostEquilateralTriangles(50);
+```
+
+# --solutions--
+
+```js
+function almostEquilateralTriangles(limit) {
+ // Based on https://blog.dreamshire.com/project-euler-94-solution/
+ let perimetersSum = 0;
+
+ let sidesAB = 1;
+ let sideC = 1;
+ let perimeter = 0;
+ let perimeterOffset = 1;
+
+ while (perimeter <= limit) {
+ [sidesAB, sideC] = [4 * sidesAB - sideC + 2 * perimeterOffset, sidesAB];
+ perimeterOffset = -perimeterOffset;
+
+ perimetersSum += perimeter;
+ perimeter = 3 * sidesAB - perimeterOffset;
+ }
+
+ return perimetersSum;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-95-amicable-chains.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-95-amicable-chains.md
new file mode 100644
index 00000000000..fe2d422a206
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-95-amicable-chains.md
@@ -0,0 +1,124 @@
+---
+id: 5900f3cc1000cf542c50fede
+title: 'Problem 95: Amicable chains'
+challengeType: 1
+forumTopicId: 302212
+dashedName: problem-95-amicable-chains
+---
+
+# --description--
+
+The proper divisors of a number are all the divisors excluding the number itself. For example, the proper divisors of 28 are 1, 2, 4, 7, and 14. As the sum of these divisors is equal to 28, we call it a perfect number.
+
+Interestingly the sum of the proper divisors of 220 is 284 and the sum of the proper divisors of 284 is 220, forming a chain of two numbers. For this reason, 220 and 284 are called an amicable pair.
+
+Perhaps less well known are longer chains. For example, starting with 12496, we form a chain of five numbers:
+
+$$ 12496 → 14288 → 15472 → 14536 → 14264 \\,(→ 12496 → \cdots) $$
+
+Since this chain returns to its starting point, it is called an amicable chain.
+
+Find the smallest member of the longest amicable chain with no element exceeding `limit`.
+
+# --hints--
+
+`amicableChains(300)` should return a number.
+
+```js
+assert(typeof amicableChains(300) === 'number');
+```
+
+`amicableChains(300)` should return `220`.
+
+```js
+assert.strictEqual(amicableChains(300), 220);
+```
+
+`amicableChains(15000)` should return `220`.
+
+```js
+assert.strictEqual(amicableChains(15000), 220);
+```
+
+`amicableChains(100000)` should return `12496`.
+
+```js
+assert.strictEqual(amicableChains(100000), 12496);
+```
+
+`amicableChains(1000000)` should return `14316`.
+
+```js
+assert.strictEqual(amicableChains(1000000), 14316);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function amicableChains(limit) {
+
+ return true;
+}
+
+amicableChains(300);
+```
+
+# --solutions--
+
+```js
+function amicableChains(limit) {
+ function getSmallestMember(chain) {
+ let smallest = chain[0];
+ for (let i = 1; i < chain.length; i++) {
+ if (smallest > chain[i]) {
+ smallest = chain[i];
+ }
+ }
+ return smallest;
+ }
+
+ function getFactorsSums(limit) {
+ const factorsSums = new Array(limit + 1).fill(1);
+ for (let i = 2; i <= limit / 2; i++) {
+ for (let j = 2 * i; j <= limit; j += i) {
+ factorsSums[j] += i;
+ }
+ }
+ return factorsSums;
+ }
+
+ const factorsSums = getFactorsSums(limit);
+ const checkedNumbers = new Set();
+
+ let longestChain = 0;
+ let smallestMember = 0;
+ for (let i = 0; i <= limit; i++) {
+ const curChain = [];
+ let curNumber = i;
+ while (!checkedNumbers.has(curNumber) && factorsSums[curNumber] <= limit) {
+ curNumber = factorsSums[curNumber];
+
+ const chainStart = curChain.indexOf(curNumber);
+ if (chainStart === -1) {
+ curChain.push(curNumber);
+ continue;
+ }
+
+ const chainLength = curChain.length - chainStart;
+ if (chainLength > longestChain) {
+ longestChain = chainLength;
+ smallestMember = getSmallestMember(curChain.slice(chainStart));
+ }
+ break;
+ }
+
+ for (let j = 0; j < curChain.length; j++) {
+ checkedNumbers.add(curChain[j]);
+ }
+ }
+
+ return smallestMember;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-96-su-doku.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-96-su-doku.md
new file mode 100644
index 00000000000..098fdb0d398
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-1-to-100/problem-96-su-doku.md
@@ -0,0 +1,296 @@
+---
+id: 5900f3cc1000cf542c50fedf
+title: 'Problem 96: Su Doku'
+challengeType: 1
+forumTopicId: 302213
+dashedName: problem-96-su-doku
+---
+
+# --description--
+
+Su Doku (Japanese meaning *number place*) is the name given to a popular puzzle concept. Its origin is unclear, but credit must be attributed to Leonhard Euler who invented a similar, and much more difficult, puzzle idea called Latin Squares. The objective of Su Doku puzzles, however, is to replace the blanks (or zeros) in a 9 by 9 grid in such that each row, column, and 3 by 3 box contains each of the digits 1 to 9. Below is an example of a typical starting puzzle grid and its solution grid.
+
+
+
+
+
+
+
+
+
+
+ 0 0 3
+
+ 0 2 0
+
+ 6 0 0
+
+
+
+ 0 0 8
+
+ 1 0 2
+
+ 9 0 0
+
+
+
+ 0 0 2
+
+ 6 0 9
+
+ 5 0 0
+
+
+
+
+
+
+
+
+
+
+
+ 4 8 3
+
+ 9 2 1
+
+ 6 5 7
+
+
+
+ 5 4 8
+
+ 1 3 2
+
+ 9 7 6
+
+
+
+ 3 7 2
+
+ 6 8 9
+
+ 5 1 4
+
+
+
+
+
+
+
+
+
+
+
+ $Unsorted$
+ $Sorted$
+
+
+ $n$
+ $rad(n)$
+ $n$
+ $rad(n)$
+ $k$
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
+
+
+ 2
+ 2
+ 2
+ 2
+ 2
+
+
+ 3
+ 3
+ 4
+ 2
+ 3
+
+
+ 4
+ 2
+ 8
+ 2
+ 4
+
+
+ 5
+ 5
+ 3
+ 3
+ 5
+
+
+ 6
+ 6
+ 9
+ 3
+ 6
+
+
+ 7
+ 7
+ 5
+ 5
+ 7
+
+
+ 8
+ 2
+ 6
+ 6
+ 8
+
+
+ 9
+ 3
+ 7
+ 7
+ 9
+
+
+ 10
+ 10
+ 10
+ 10
+ 10
+
+
+
+
+
+
+
e mod n is calculated.
+
+To decrypt the text, the following procedure is needed: calculate `d` such that `ed=1 mod φ`, then for each encrypted message, `c`, calculate m=cd mod n.
+
+There exist values of `e` and `m` such that me mod n = m. We call messages `m` for which me mod n=m unconcealed messages.
+
+An issue when choosing `e` is that there should not be too many unconcealed messages. For instance, let `p=19` and `q=37`. Then `n=19*37=703` and `φ=18*36=648`. If we choose `e=181`, then, although `gcd(181,648)=1` it turns out that all possible messages m `(0≤m≤n-1)` are unconcealed when calculating me mod n. For any valid choice of `e` there exist some unconcealed messages. It's important that the number of unconcealed messages is at a minimum.
+
+For any given `p` and `q`, find the sum of all values of `e`, `1 < e < φ(p,q)` and `gcd(e,φ)=1`, so that the number of unconcealed messages for this value of `e` is at a minimum.
+
+# --hints--
+
+`RSAEncryption` should be a function.
+
+```js
+assert(typeof RSAEncryption === 'function')
+```
+
+`RSAEncryption` should return a number.
+
+```js
+assert.strictEqual(typeof RSAEncryption(19, 37), 'number');
+```
+
+`RSAEncryption(19, 37)` should return `17766`.
+
+```js
+assert.strictEqual(RSAEncryption(19, 37), 17766);
+```
+
+`RSAEncryption(283, 409)` should return `466196580`.
+
+```js
+assert.strictEqual(RSAEncryption(283, 409), 466196580);
+```
+
+`RSAEncryption(1009, 3643)` should return `399788195976`.
+
+```js
+assert.strictEqual(RSAEncryption(19, 37), 17766);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function RSAEncryption(p, q) {
+
+ return true;
+}
+
+RSAEncryption(19, 37);
+```
+
+# --solutions--
+
+```js
+function gcd(a, b) {
+ if (b)
+ return gcd(b, a % b);
+ else
+ return a;
+}
+
+function RSAEncryption(p, q) {
+ let phi = (p - 1) * (q - 1);
+
+ let best = Number.MAX_SAFE_INTEGER;
+ let sum = 0;
+
+ for (let e = 0; e < phi; ++e) {
+ if (!(gcd(e, phi) == 1))
+ continue;
+
+ let msg = (gcd(p - 1, e - 1) + 1) * (gcd(q - 1, e - 1) + 1);
+
+ if (best == msg) {
+ sum += e;
+ } else if (best > msg) {
+ best = msg;
+ sum = e;
+ }
+ }
+
+ return sum;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-183-maximum-product-of-parts.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-183-maximum-product-of-parts.md
new file mode 100644
index 00000000000..7586be421e3
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-183-maximum-product-of-parts.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4231000cf542c50ff36
+title: 'Problem 183: Maximum product of parts'
+challengeType: 1
+forumTopicId: 301819
+dashedName: problem-183-maximum-product-of-parts
+---
+
+# --description--
+
+Let $N$ be a positive integer and let $N$ be split into $k$ equal parts, $r = \frac{N}{k}$, so that $N = r + r + \cdots + r$.
+
+Let $P$ be the product of these parts, $P = r × r × \cdots × r = r^k$.
+
+For example, if 11 is split into five equal parts, 11 = 2.2 + 2.2 + 2.2 + 2.2 + 2.2, then $P = {2.2}^5 = 51.53632$.
+
+Let $M(N) = P_{max}$ for a given value of $N$.
+
+It turns out that the maximum for $N = 11$ is found by splitting eleven into four equal parts which leads to $P_{max} = {(\frac{11}{4})}^4$; that is, $M(11) = \frac{14641}{256} = 57.19140625$, which is a terminating decimal.
+
+However, for $N = 8$ the maximum is achieved by splitting it into three equal parts, so $M(8) = \frac{512}{27}$, which is a non-terminating decimal.
+
+Let $D(N) = N$ if $M(N)$ is a non-terminating decimal and $D(N) = -N$ if $M(N)$ is a terminating decimal.
+
+For example, $\sum D(N)$ for $5 ≤ N ≤ 100$ is 2438.
+
+Find $\sum D(N)$ for $5 ≤ N ≤ 10000$.
+
+# --hints--
+
+`maximumProductOfParts()` should return `48861552`.
+
+```js
+assert.strictEqual(maximumProductOfParts(), 48861552);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function maximumProductOfParts() {
+
+ return true;
+}
+
+maximumProductOfParts();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-184-triangles-containing-the-origin.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-184-triangles-containing-the-origin.md
new file mode 100644
index 00000000000..8d3eb0bfc9d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-101-to-200/problem-184-triangles-containing-the-origin.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4241000cf542c50ff37
+title: 'Problem 184: Triangles containing the origin'
+challengeType: 1
+forumTopicId: 301820
+dashedName: problem-184-triangles-containing-the-origin
+---
+
+# --description--
+
+Consider the set $I_r$ of points $(x,y)$ with integer coordinates in the interior of the circle with radius $r$, centered at the origin, i.e. $x^2 + y^2 < r^2$.
+
+For a radius of 2, $I_2$ contains the nine points (0,0), (1,0), (1,1), (0,1), (-1,1), (-1,0), (-1,-1), (0,-1) and (1,-1). There are eight triangles having all three vertices in $I_2$ which contain the origin in the interior. Two of them are shown below, the others are obtained from these by rotation.
+
+left most length($A$) bits of $B$, then $A$ is said to be a prefix of $B$.
+
+For example, 00110 is a prefix of 00110 1001, but not of 00111 or 100110.
+
+A prefix-free code of size $n$ is a collection of $n$ distinct bit strings such that no string is a prefix of any other. For example, this is a prefix-free code of size 6:
+
+$$0000, 0001, 001, 01, 10, 11$$
+
+Now suppose that it costs one penny to transmit a '0' bit, but four pence to transmit a '1'. Then the total cost of the prefix-free code shown above is 35 pence, which happens to be the cheapest possible for the skewed pricing scheme in question. In short, we write $Cost(6) = 35$.
+
+What is $Cost(10^9)$?
+
+# --hints--
+
+`skewCostCoding()` should return `64564225042`.
+
+```js
+assert.strictEqual(skewCostCoding(), 64564225042);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function skewCostCoding() {
+
+ return true;
+}
+
+skewCostCoding();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-201-to-300/problem-220-heighway-dragon.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-201-to-300/problem-220-heighway-dragon.md
new file mode 100644
index 00000000000..e58e3c3f3ec
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-201-to-300/problem-220-heighway-dragon.md
@@ -0,0 +1,57 @@
+---
+id: 5900f4481000cf542c50ff5b
+title: 'Problem 220: Heighway Dragon'
+challengeType: 1
+forumTopicId: 301863
+dashedName: problem-220-heighway-dragon
+---
+
+# --description--
+
+Let $D_0$ be the two-letter string "Fa". For $n ≥ 1$, derive $D_n$ from $D_{n - 1}$ by the string-rewriting rules:
+
+- "a" → "aRbFR"
+- "b" → "LFaLb"
+
+Thus, $D_0$ = "Fa", $D_1$ = "FaRbFR", $D_2$ = "FaRbFRRLFaLbFR", and so on.
+
+These strings can be interpreted as instructions to a computer graphics program, with "F" meaning "draw forward one unit", "L" meaning "turn left 90 degrees", "R" meaning "turn right 90 degrees", and "a" and "b" being ignored. The initial position of the computer cursor is (0,0), pointing up towards (0,1).
+
+Then $D_n$ is an exotic drawing known as the Heighway Dragon of order $n$. For example, $D_{10}$ is shown below; counting each "F" as one step, the highlighted spot at (18,16) is the position reached after 500 steps.
+
+X
+
+
+
+A(-4, 3), B(5, 0), C(4, -3)
+
+
+
+
+The sum of their perimeters, rounded to four decimal places, is 291.0089.
+
+Find all such triangles with a $\text{perimeter} ≤ {10}^5$. Enter as your answer the sum of their perimeters rounded to four decimal places.
+
+# --hints--
+
+`triangleCentres()` should return `2816417.1055`.
+
+```js
+assert.strictEqual(triangleCentres(), 2816417.1055);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function triangleCentres() {
+
+ return true;
+}
+
+triangleCentres();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-201-to-300/problem-265-binary-circles.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-201-to-300/problem-265-binary-circles.md
new file mode 100644
index 00000000000..4262d97c798
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-201-to-300/problem-265-binary-circles.md
@@ -0,0 +1,53 @@
+---
+id: 5900f4761000cf542c50ff88
+title: 'Problem 265: Binary Circles'
+challengeType: 1
+forumTopicId: 301914
+dashedName: problem-265-binary-circles
+---
+
+# --description--
+
+$2^N$ binary digits can be placed in a circle so that all the $N$-digit clockwise subsequences are distinct.
+
+For $N = 3$, two such circular arrangements are possible, ignoring rotations:
+
+not counted as distinct. For example, the 18 balanced sculptures of order 6 are shown below; note that each pair of mirror images (about the $y$-axis) is counted as one sculpture:
+
+0 0 0 0 0 0 two dimensions .
+
+The figure below shows two possible ways that our example protein could be folded (H-H contact points are shown with red dots).
+
+cost equal to the number asked and we get one of three possible answers:
+
+- "Your guess is lower than the hidden number", or
+- "Yes, that's it!", or
+- "Your guess is higher than the hidden number".
+
+Given the value of $n$, an optimal strategy minimizes the total cost (i.e. the sum of all the questions asked) for the worst possible case . E.g.
+
+If $n = 3$, the best we can do is obviously to ask the number "2 ". The answer will immediately lead us to find the hidden number (at a total cost = 2).
+
+If $n = 8$, we might decide to use a "binary search" type of strategy: Our first question would be "4 " and if the hidden number is higher than 4 we will need one or two additional questions. Let our second question be "6 ". If the hidden number is still higher than 6, we will need a third question in order to discriminate between 7 and 8. Thus, our third question will be "7 " and the total cost for this worst-case scenario will be $4 + 6 + 7 = \mathbf{\color{red}{17}}$.
+
+We can improve considerably the worst-case cost for $n = 8$, by asking "5 " as our first question. If we are told that the hidden number is higher than 5, our second question will be "7 ", then we'll know for certain what the hidden number is (for a total cost of $5 + 7 = \mathbf{\color{blue}{12}}$). If we are told that the hidden number is lower than 5, our second question will be "3 " and if the hidden number is lower than 3 our third question will be "1 ", giving a total cost of $5 + 3 + 1 = \mathbf{\color{blue}{9}}$. Since $\mathbf{\color{blue}{12 > 9}}$, the worst-case cost for this strategy is 12 not included in $T(r)$.
+
+Let $A(r)$ be the area of the smallest spherical triangle in $T(r)$.
+
+For example $A(14)$ is 3.294040 rounded to six decimal places.
+
+Find $\displaystyle \sum_{r = 1}^{50} A(r)$. Give your answer rounded to six decimal places.
+
+# --hints--
+
+`sphericalTriangles()` should return `2717.751525`.
+
+```js
+assert.strictEqual(sphericalTriangles(), 2717.751525);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sphericalTriangles() {
+
+ return true;
+}
+
+sphericalTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-333-special-partitions.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-333-special-partitions.md
new file mode 100644
index 00000000000..27cad095741
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-333-special-partitions.md
@@ -0,0 +1,53 @@
+---
+id: 5900f4b91000cf542c50ffcc
+title: 'Problem 333: Special partitions'
+challengeType: 1
+forumTopicId: 301991
+dashedName: problem-333-special-partitions
+---
+
+# --description--
+
+All positive integers can be partitioned in such a way that each and every term of the partition can be expressed as $2^i \times 3^j$, where $i, j ≥ 0$.
+
+Let's consider only those such partitions where none of the terms can divide any of the other terms. For example, the partition of $17 = 2 + 6 + 9 = (2^1 \times 3^0 + 2^1 \times 3^1 + 2^0 \times 3^2)$ would not be valid since 2 can divide 6. Neither would the partition $17 = 16 + 1 = (2^4 \times 3^0 + 2^0 \times 3^0)$ since 1 can divide 16. The only valid partition of 17 would be $8 + 9 = (2^3 \times 3^0 + 2^0 \times 3^2)$.
+
+Many integers have more than one valid partition, the first being 11 having the following two partitions.
+
+$$\begin{align} & 11 = 2 + 9 = (2^1 \times 3^0 + 2^0 \times 3^2) \\\\
+ & 11 = 8 + 3 = (2^3 \times 3^0 + 2^0 \times 3^1) \end{align}$$
+
+Let's define $P(n)$ as the number of valid partitions of $n$. For example, $P(11) = 2$.
+
+Let's consider only the prime integers $q$ which would have a single valid partition such as $P(17)$.
+
+The sum of the primes $q <100$ such that $P(q) = 1$ equals 233.
+
+Find the sum of the primes $q < 1\\,000\\,000$ such that $P(q) = 1$.
+
+# --hints--
+
+`specialPartitions()` should return `3053105`.
+
+```js
+assert.strictEqual(specialPartitions(), 3053105);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function specialPartitions() {
+
+ return true;
+}
+
+specialPartitions();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-334-spilling-the-beans.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-334-spilling-the-beans.md
new file mode 100644
index 00000000000..b301ac71594
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-334-spilling-the-beans.md
@@ -0,0 +1,53 @@
+---
+id: 5900f4ba1000cf542c50ffcd
+title: 'Problem 334: Spilling the beans'
+challengeType: 1
+forumTopicId: 301992
+dashedName: problem-334-spilling-the-beans
+---
+
+# --description--
+
+In Plato's heaven, there exist an infinite number of bowls in a straight line. Each bowl either contains some or none of a finite number of beans. A child plays a game, which allows only one kind of move: removing two beans from any bowl, and putting one in each of the two adjacent bowls. The game ends when each bowl contains either one or no beans.
+
+For example, consider two adjacent bowls containing 2 and 3 beans respectively, all other bowls being empty. The following eight moves will finish the game:
+
+4.155452 tests!
+
+Using the optimal strategy, let $T(s, p)$ represent the average number of tests needed to screen a flock of $s$ sheep for a virus having probability $p$ to be present in any individual. Thus, rounded to six decimal places, $T(25, 0.02) = 4.155452$ and $T(25, 0.10) = 12.702124$.
+
+Find $\sum T(10\\,000, p)$ for $p = 0.01, 0.02, 0.03, \ldots 0.50$. Give your answer rounded to six decimal places.
+
+# --hints--
+
+`bloodTests()` should return `378563.260589`.
+
+```js
+assert.strictEqual(bloodTests(), 378563.260589);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function bloodTests() {
+
+ return true;
+}
+
+bloodTests();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-353-risky-moon.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-353-risky-moon.md
new file mode 100644
index 00000000000..83cb0d40c9e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-353-risky-moon.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4cd1000cf542c50ffe0
+title: 'Problem 353: Risky moon'
+challengeType: 1
+forumTopicId: 302013
+dashedName: problem-353-risky-moon
+---
+
+# --description--
+
+A moon could be described by the sphere $C(r)$ with centre (0, 0, 0) and radius $r$.
+
+There are stations on the moon at the points on the surface of $C(r)$ with integer coordinates. The station at (0, 0, $r$) is called North Pole station, the station at (0, 0, $-r$) is called South Pole station.
+
+All stations are connected with each other via the shortest road on the great arc through the stations. A journey between two stations is risky. If $d$ is the length of the road between two stations, $\{\left(\frac{d}{πr}\right)}^2$ is a measure for the risk of the journey (let us call it the risk of the road). If the journey includes more than two stations, the risk of the journey is the sum of risks of the used roads.
+
+A direct journey from the North Pole station to the South Pole station has the length $πr$ and risk 1. The journey from the North Pole station to the South Pole station via (0, $r$, 0) has the same length, but a smaller risk:
+
+$${\left(\frac{\frac{1}{2}πr}{πr}\right)}^2+{\left(\frac{\frac{1}{2}πr}{πr}\right)}^2 = 0.5$$
+
+The minimal risk of a journey from the North Pole station to the South Pole station on $C(r)$ is $M(r)$.
+
+You are given that $M(7) = 0.178\\,494\\,399\\,8$ rounded to 10 digits behind the decimal point.
+
+Find $\displaystyle\sum_{n = 1}^{15} M(2^n - 1)$.
+
+Give your answer rounded to 10 digits behind the decimal point in the form a.bcdefghijk.
+
+# --hints--
+
+`riskyMoon()` should return `1.2759860331`.
+
+```js
+assert.strictEqual(riskyMoon(), 1.2759860331);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function riskyMoon() {
+
+ return true;
+}
+
+riskyMoon();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-354-distances-in-a-bees-honeycomb.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-354-distances-in-a-bees-honeycomb.md
new file mode 100644
index 00000000000..f7d023146ca
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-354-distances-in-a-bees-honeycomb.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4cf1000cf542c50ffe1
+title: 'Problem 354: Distances in a bee''s honeycomb'
+challengeType: 1
+forumTopicId: 302014
+dashedName: problem-354-distances-in-a-bees-honeycomb
+---
+
+# --description--
+
+Consider a honey bee's honeycomb where each cell is a perfect regular hexagon with side length 1.
+
+1 of the largest-area ellipse inside $T$ are $(\sqrt{13}, 0)$ and $(-\sqrt{13}, 0)$.
+
+Let $A(n)$ be the sum of the areas of all such triangles.
+
+For example, if $n = 8$, there are two such triangles. Their vertices are (-4,-3), (-4,3), (8,0) and (4,3), (4,-3), (-8,0), and the area of each triangle is 36. Thus $A(8) = 36 + 36 = 72$.
+
+It can be verified that $A(10) = 252$, $A(100) = 34\\,632$ and $A(1000) = 3\\,529\\,008$.
+
+Find $A(1\\,000\\,000\\,000)$.
+
+1 The foci (plural of focus) of an ellipse are two points $A$ and $B$ such that for every point $P$ on the boundary of the ellipse, $AP + PB$ is constant.
+
+# --hints--
+
+`ellipsesInsideTriangles()` should return `3776957309612154000`.
+
+```js
+assert.strictEqual(ellipsesInsideTriangles(), 3776957309612154000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function ellipsesInsideTriangles() {
+
+ return true;
+}
+
+ellipsesInsideTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-386-maximum-length-of-an-antichain.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-386-maximum-length-of-an-antichain.md
new file mode 100644
index 00000000000..de0614e4651
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-386-maximum-length-of-an-antichain.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4ef1000cf542c510001
+title: 'Problem 386: Maximum length of an antichain'
+challengeType: 1
+forumTopicId: 302050
+dashedName: problem-386-maximum-length-of-an-antichain
+---
+
+# --description--
+
+Let $n$ be an integer and $S(n)$ be the set of factors of $n$.
+
+A subset $A$ of $S(n)$ is called an antichain of $S(n)$ if $A$ contains only one element or if none of the elements of $A$ divides any of the other elements of $A$.
+
+For example: $S(30) = \\{1, 2, 3, 5, 6, 10, 15, 30\\}$
+
+$\\{2, 5, 6\\}$ is not an antichain of $S(30)$.
+
+$\\{2, 3, 5\\}$ is an antichain of $S(30)$.
+
+Let $N(n)$ be the maximum length of an antichain of $S(n)$.
+
+Find $\sum N(n)$ for $1 ≤ n ≤ {10}^8$
+
+# --hints--
+
+`maximumLengthOfAntichain()` should return `528755790`.
+
+```js
+assert.strictEqual(maximumLengthOfAntichain(), 528755790);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function maximumLengthOfAntichain() {
+
+ return true;
+}
+
+maximumLengthOfAntichain();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-387-harshad-numbers.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-387-harshad-numbers.md
new file mode 100644
index 00000000000..2b2ccbbaa0e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-387-harshad-numbers.md
@@ -0,0 +1,58 @@
+---
+id: 5900f4f11000cf542c510003
+title: 'Problem 387: Harshad Numbers'
+challengeType: 1
+forumTopicId: 302051
+dashedName: problem-387-harshad-numbers
+---
+
+# --description--
+
+A Harshad or Niven number is a number that is divisible by the sum of its digits.
+
+201 is a Harshad number because it is divisible by 3 (the sum of its digits.)
+
+When we truncate the last digit from 201, we get 20, which is a Harshad number.
+
+When we truncate the last digit from 20, we get 2, which is also a Harshad number.
+
+Let's call a Harshad number that, while recursively truncating the last digit, always results in a Harshad number a right truncatable Harshad number.
+
+Also:
+
+$\frac{201}{3} = 67$ which is prime.
+
+Let's call a Harshad number that, when divided by the sum of its digits, results in a prime a strong Harshad number.
+
+Now take the number 2011 which is prime. When we truncate the last digit from it we get 201, a strong Harshad number that is also right truncatable. Let's call such primes strong, right truncatable Harshad primes.
+
+You are given that the sum of the strong, right truncatable Harshad primes less than 10000 is 90619.
+
+Find the sum of the strong, right truncatable Harshad primes less than ${10}^{14}$.
+
+# --hints--
+
+`harshadNumbers()` should return `696067597313468`.
+
+```js
+assert.strictEqual(harshadNumbers(), 696067597313468);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function harshadNumbers() {
+
+ return true;
+}
+
+harshadNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-388-distinct-lines.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-388-distinct-lines.md
new file mode 100644
index 00000000000..4ff7f140070
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-388-distinct-lines.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4f11000cf542c510002
+title: 'Problem 388: Distinct Lines'
+challengeType: 1
+forumTopicId: 302052
+dashedName: problem-388-distinct-lines
+---
+
+# --description--
+
+Consider all lattice points ($a$, $b$, $c$) with $0 ≤ a, b, c ≤ N$.
+
+From the origin $O(0, 0, 0)$ all lines are drawn to the other lattice points. Let $D(N)$ be the number of distinct such lines.
+
+You are given that $D(1\\,000\\,000) = 831\\,909\\,254\\,469\\,114\\,121$.
+
+Find $D({10}^{10})$. Give as your answer the first nine digits followed by the last nine digits.
+
+# --hints--
+
+`distinctLines()` should return `831907372805130000`.
+
+```js
+assert.strictEqual(distinctLines(), 831907372805130000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function distinctLines() {
+
+ return true;
+}
+
+distinctLines();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-389-platonic-dice.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-389-platonic-dice.md
new file mode 100644
index 00000000000..081791ffe3b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-389-platonic-dice.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4f21000cf542c510004
+title: 'Problem 389: Platonic Dice'
+challengeType: 1
+forumTopicId: 302053
+dashedName: problem-389-platonic-dice
+---
+
+# --description--
+
+An unbiased single 4-sided die is thrown and its value, $T$, is noted.
+
+$T$ unbiased 6-sided dice are thrown and their scores are added together. The sum, $C$, is noted.
+
+$C$ unbiased 8-sided dice are thrown and their scores are added together. The sum, $O$, is noted.
+
+$O$ unbiased 12-sided dice are thrown and their scores are added together. The sum, $D$, is noted.
+
+$D$ unbiased 20-sided dice are thrown and their scores are added together. The sum, $I$, is noted.
+
+Find the variance of $I$, and give your answer rounded to 4 decimal places.
+
+# --hints--
+
+`platonicDice()` should return `2406376.3623`.
+
+```js
+assert.strictEqual(platonicDice(), 2406376.3623);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function platonicDice() {
+
+ return true;
+}
+
+platonicDice();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-390-triangles-with-non-rational-sides-and-integral-area.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-390-triangles-with-non-rational-sides-and-integral-area.md
new file mode 100644
index 00000000000..fa9e6f08884
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-390-triangles-with-non-rational-sides-and-integral-area.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4f21000cf542c510005
+title: 'Problem 390: Triangles with non rational sides and integral area'
+challengeType: 1
+forumTopicId: 302055
+dashedName: problem-390-triangles-with-non-rational-sides-and-integral-area
+---
+
+# --description--
+
+Consider the triangle with sides $\sqrt{5}$, $\sqrt{65}$ and $\sqrt{68}$. It can be shown that this triangle has area 9.
+
+$S(n)$ is the sum of the areas of all triangles with sides $\sqrt{1 + b^2}$, $\sqrt{1 + c^2}$ and $\sqrt{b^2 + c^2}$ (for positive integers $b$ and $c$) that have an integral area not exceeding $n$.
+
+The example triangle has $b = 2$ and $c = 8$.
+
+$S({10}^6) = 18\\,018\\,206$.
+
+Find $S({10}^{10})$.
+
+# --hints--
+
+`nonRationalSidesAndIntegralArea()` should return `2919133642971`.
+
+```js
+assert.strictEqual(nonRationalSidesAndIntegralArea(), 2919133642971);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nonRationalSidesAndIntegralArea() {
+
+ return true;
+}
+
+nonRationalSidesAndIntegralArea();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-391-hopping-game.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-391-hopping-game.md
new file mode 100644
index 00000000000..e94e14e527b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-391-hopping-game.md
@@ -0,0 +1,59 @@
+---
+id: 5900f4f31000cf542c510006
+title: 'Problem 391: Hopping Game'
+challengeType: 1
+forumTopicId: 302056
+dashedName: problem-391-hopping-game
+---
+
+# --description--
+
+Let $s_k$ be the number of 1’s when writing the numbers from 0 to $k$ in binary.
+
+For example, writing 0 to 5 in binary, we have 0, 1, 10, 11, 100, 101. There are seven 1’s, so $s_5 = 7$.
+
+The sequence $S = \\{s_k : k ≥ 0\\}$ starts $\\{0, 1, 2, 4, 5, 7, 9, 12, \ldots\\}$.
+
+A game is played by two players. Before the game starts, a number $n$ is chosen. A counter $c$ starts at 0. At each turn, the player chooses a number from 1 to $n$ (inclusive) and increases $c$ by that number. The resulting value of $c$ must be a member of $S$. If there are no more valid moves, the player loses.
+
+For example, with $n = 5$ and starting with $c = 0$:
+
+- Player 1 chooses 4, so $c$ becomes $0 + 4 = 4$.
+- Player 2 chooses 5, so $c$ becomes $4 + 5 = 9$.
+- Player 1 chooses 3, so $c$ becomes $9 + 3 = 12$.
+- etc.
+
+Note that $c$ must always belong to $S$, and each player can increase $c$ by at most $n$.
+
+Let $M(n)$ be the highest number the first player can choose at her first turn to force a win, and $M(n) = 0$ if there is no such move. For example, $M(2) = 2$, $M(7) = 1$ and $M(20) = 4$.
+
+It can be verified $\sum M{(n)}^3 = 8150$ for $1 ≤ n ≤ 20$.
+
+Find $\sum M{(n)}^3$ for $1 ≤ n ≤ 1000$.
+
+# --hints--
+
+`hoppingGame()` should return `61029882288`.
+
+```js
+assert.strictEqual(hoppingGame(), 61029882288);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function hoppingGame() {
+
+ return true;
+}
+
+hoppingGame();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-392-enmeshed-unit-circle.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-392-enmeshed-unit-circle.md
new file mode 100644
index 00000000000..7e40a574c29
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-301-to-400/problem-392-enmeshed-unit-circle.md
@@ -0,0 +1,58 @@
+---
+id: 5900f4f41000cf542c510007
+title: 'Problem 392: Enmeshed unit circle'
+challengeType: 1
+forumTopicId: 302057
+dashedName: problem-392-enmeshed-unit-circle
+---
+
+# --description--
+
+A rectilinear grid is an orthogonal grid where the spacing between the gridlines does not have to be equidistant.
+
+An example of such grid is logarithmic graph paper.
+
+Consider rectilinear grids in the Cartesian coordinate system with the following properties:
+
+- The gridlines are parallel to the axes of the Cartesian coordinate system.
+- There are $N + 2$ vertical and $N + 2$ horizontal gridlines. Hence there are $(N + 1) \times (N + 1)$ rectangular cells.
+- The equations of the two outer vertical gridlines are $x = -1$ and $x = 1$.
+- The equations of the two outer horizontal gridlines are $y = -1$ and $y = 1$.
+- The grid cells are colored red if they overlap with the unit circle, black otherwise.
+
+For this problem we would like you to find the positions of the remaining $N$ inner horizontal and $N$ inner vertical gridlines so that the area occupied by the red cells is minimized.
+
+E.g. here is a picture of the solution for $N = 10$:
+
+for the worst possible case .
+
+For example, if $n = 5$, $a = 2$, and $b = 3$, then we may begin by asking "2 " as our first question.
+
+If we are told that 2 is higher than the hidden number (for a cost of $b = 3$), then we are sure that "1 " is the hidden number (for a total cost of 3 4 ".
+
+If we are told that 4 is higher than the hidden number (for a cost of $b = 3$), then we are sure that "3 " is the hidden number (for a total cost of $2 + 3 = \color{blue}{\mathbf{5}}$).
+
+If we are told that 4 is lower than the hidden number (for a cost of $a = 2$), then we are sure that "5 " is the hidden number (for a total cost of $2 + 2 = \color{blue}{\mathbf{4}}$).
+
+Thus, the worst-case cost achieved by this strategy is 5 1
+
+For example, $C(3) = 216$, $C(4) = 1290$, $C(11) = 361\\,912\\,500$ and $C(24) = 4\\,727\\,547\\,363\\,281\\,250\\,000$.
+
+Define $S(L)$ as $\sum C(n)$ for $1 ≤ n ≤ L$.
+
+For example, $S(50)\bmod 1\\,000\\,000\\,007 = 832\\,833\\,871$.
+
+Find $S(50\\,000\\,000)\bmod 1\\,000\\,000\\,007$.
+
+1 $π$ denotes the prime-counting function, i.e. $π(n)$ is the number of primes $≤ n$.
+
+# --hints--
+
+`consecutiveDieThrows()` should return `653972374`.
+
+```js
+assert.strictEqual(consecutiveDieThrows(), 653972374);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function consecutiveDieThrows() {
+
+ return true;
+}
+
+consecutiveDieThrows();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-424-kakuro.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-424-kakuro.md
new file mode 100644
index 00000000000..90b1b38773f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-424-kakuro.md
@@ -0,0 +1,77 @@
+---
+id: 5900f5141000cf542c510026
+title: 'Problem 424: Kakuro'
+challengeType: 1
+forumTopicId: 302094
+dashedName: problem-424-kakuro
+---
+
+# --description--
+
+3 . However, if grain is delivered at a point on the top which has a horizontal distance of $x$ metres from the centre then a cone with a strangely curved and sloping base is formed. He shows Fred a picture.
+
+3
+
+If $a = 2$ mm and $b = 1$ mm, the amount of chocolate required is approximately 60.35475635 mm3 .
+
+Find the amount of chocolate in mm3 required if $a = 3$ mm and $b = 1$ mm. Give your answer as the number rounded to 8 decimal places behind the decimal point.
+
+# --hints--
+
+`chocolateCoveredCandy()` should return `103.37870096`.
+
+```js
+assert.strictEqual(chocolateCoveredCandy(), 103.37870096);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function chocolateCoveredCandy() {
+
+ return true;
+}
+
+chocolateCoveredCandy();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-450-hypocycloid-and-lattice-points.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-450-hypocycloid-and-lattice-points.md
new file mode 100644
index 00000000000..9bfd7f5d15a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-450-hypocycloid-and-lattice-points.md
@@ -0,0 +1,63 @@
+---
+id: 5900f52e1000cf542c510041
+title: 'Problem 450: Hypocycloid and Lattice points'
+challengeType: 1
+forumTopicId: 302123
+dashedName: problem-450-hypocycloid-and-lattice-points
+---
+
+# --description--
+
+A hypocycloid is the curve drawn by a point on a small circle rolling inside a larger circle. The parametric equations of a hypocycloid centered at the origin, and starting at the right most point is given by:
+
+$$x(t) = (R - r) \cos(t) + r \cos(\frac{R - r}{r}t)$$
+
+$$y(t) = (R - r) \sin(t) - r \sin(\frac{R - r}{r} t)$$
+
+Where $R$ is the radius of the large circle and $r$ the radius of the small circle.
+
+Let $C(R, r)$ be the set of distinct points with integer coordinates on the hypocycloid with radius $R$ and $r$ and for which there is a corresponding value of $t$ such that $\sin(t)$ and $\cos(t)$ are rational numbers.
+
+Let $S(R, r) = \sum\_{(x,y) \in C(R, r)} |x| + |y|$ be the sum of the absolute values of the $x$ and $y$ coordinates of the points in $C(R, r)$.
+
+Let $T(N) = \sum_{R = 3}^N \sum_{r=1}^{\left\lfloor \frac{R - 1}{2} \right\rfloor} S(R, r)$ be the sum of $S(R, r)$ for $R$ and $r$ positive integers, $R\leq N$ and $2r < R$.
+
+You are given:
+
+$$\begin{align} C(3, 1) = & \\{(3, 0), (-1, 2), (-1,0), (-1,-2)\\} \\\\
+ C(2500, 1000) = & \\{(2500, 0), (772, 2376), (772, -2376), (516, 1792), (516, -1792), (500, 0), (68, 504), \\\\ &(68, -504),(-1356, 1088), (-1356, -1088), (-1500, 1000), (-1500, -1000)\\} \end{align}$$
+
+**Note:** (-625, 0) is not an element of $C(2500, 1000)$ because $\sin(t)$ is not a rational number for the corresponding values of $t$.
+
+$S(3, 1) = (|3| + |0|) + (|-1| + |2|) + (|-1| + |0|) + (|-1| + |-2|) = 10$
+
+$T(3) = 10$; $T(10) = 524$; $T(100) = 580\\,442$; $T({10}^3) = 583\\,108\\,600$.
+
+Find $T({10}^6)$.
+
+# --hints--
+
+`hypocycloidAndLatticePoints()` should return `583333163984220900`.
+
+```js
+assert.strictEqual(hypocycloidAndLatticePoints(), 583333163984220900);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function hypocycloidAndLatticePoints() {
+
+ return true;
+}
+
+hypocycloidAndLatticePoints();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-451-modular-inverses.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-451-modular-inverses.md
new file mode 100644
index 00000000000..39ebff17846
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-451-modular-inverses.md
@@ -0,0 +1,55 @@
+---
+id: 5900f5311000cf542c510042
+title: 'Problem 451: Modular inverses'
+challengeType: 1
+forumTopicId: 302124
+dashedName: problem-451-modular-inverses
+---
+
+# --description--
+
+Consider the number 15.
+
+There are eight positive numbers less than 15 which are coprime to 15: 1, 2, 4, 7, 8, 11, 13, 14.
+
+The modular inverses of these numbers modulo 15 are: 1, 8, 4, 13, 2, 11, 7, 14 because
+
+$$\begin{align} & 1 \times 1\bmod 15 = 1 \\\\
+ & 2 \times 8 = 16\bmod 15 = 1 \\\\ & 4 \times 4 = 16\bmod 15 = 1 \\\\
+ & 7 \times 13 = 91\bmod 15 = 1 \\\\ & 11 \times 11 = 121\bmod 15 = 1 \\\\
+ & 14 \times 14 = 196\bmod 15 = 1 \end{align}$$
+
+Let $I(n)$ be the largest positive number $m$ smaller than $n - 1$ such that the modular inverse of $m$ modulo $n$ equals $m$ itself.
+
+So $I(15) = 11$.
+
+Also $I(100) = 51$ and $I(7) = 1$.
+
+Find $\sum I(n)$ for $3 ≤ n ≤ 2 \times {10}^7$
+
+# --hints--
+
+`modularInverses()` should return `153651073760956`.
+
+```js
+assert.strictEqual(modularInverses(), 153651073760956);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function modularInverses() {
+
+ return true;
+}
+
+modularInverses();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-452-long-products.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-452-long-products.md
new file mode 100644
index 00000000000..abb043bcebe
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-452-long-products.md
@@ -0,0 +1,44 @@
+---
+id: 5900f5311000cf542c510043
+title: 'Problem 452: Long Products'
+challengeType: 1
+forumTopicId: 302125
+dashedName: problem-452-long-products
+---
+
+# --description--
+
+Define $F(m, n)$ as the number of $n$-tuples of positive integers for which the product of the elements doesn't exceed $m$.
+
+$F(10, 10) = 571$.
+
+$F({10}^6, {10}^6)\bmod 1\\,234\\,567\\,891 = 252\\,903\\,833$.
+
+Find $F({10}^9, {10}^9)\bmod 1\\,234\\,567\\,891$.
+
+# --hints--
+
+`longProducts()` should return `345558983`.
+
+```js
+assert.strictEqual(longProducts(), 345558983);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function longProducts() {
+
+ return true;
+}
+
+longProducts();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-453-lattice-quadrilaterals.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-453-lattice-quadrilaterals.md
new file mode 100644
index 00000000000..f809ebc60a5
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-453-lattice-quadrilaterals.md
@@ -0,0 +1,48 @@
+---
+id: 5900f5311000cf542c510044
+title: 'Problem 453: Lattice Quadrilaterals'
+challengeType: 1
+forumTopicId: 302126
+dashedName: problem-453-lattice-quadrilaterals
+---
+
+# --description--
+
+A simple quadrilateral is a polygon that has four distinct vertices, has no straight angles and does not self-intersect.
+
+Let $Q(m, n)$ be the number of simple quadrilaterals whose vertices are lattice points with coordinates ($x$, $y$) satisfying $0 ≤ x ≤ m$ and $0 ≤ y ≤ n$.
+
+For example, $Q(2, 2) = 94$ as can be seen below:
+
+2 + b2 + c2 + d2 for a, b, c, d that minimize the error: $\lvert f(a,n) + f(b,n) + f(c,n) + f(d,n) - \Pi\rvert$
+
+You are given `almostPi(200)` = 62 + 752 + 892 + 2262 = 64658.
+
+# --hints--
+
+`almostPi` should be a function.
+
+```js
+assert(typeof almostPi === 'function')
+```
+
+`almostPi` should return a number.
+
+```js
+assert.strictEqual(typeof almostPi(10), 'number');
+```
+
+`almostPi(29)` should return `1208`.
+
+```js
+assert.strictEqual(almostPi(29), 1208);
+```
+
+`almostPi(50)` should return `4152`.
+
+```js
+assert.strictEqual(almostPi(50), 4152);
+```
+
+`almostPi(200)` should return `64658`.
+
+```js
+assert.strictEqual(almostPi(200), 64658);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function almostPi(n) {
+
+ return true;
+}
+```
+
+# --solutions--
+
+```js
+function almostPi(n) {
+
+ // Find all possible values where f(k, n) <= PI
+ const f = [];
+ let max = 0;
+ while (1) {
+ let current = Math.exp(max / n) - 1;
+
+ if (current > Math.PI) break;
+
+ f.push(current);
+ ++max;
+ }
+
+ // Get all pairs where f[i] + f[j] <= PI
+ const pairs = [];
+ for (let i = 0; i < max; ++i) {
+ for (let j = 0; j < max; ++j) {
+ if (f[i] + f[j] > Math.PI) break;
+ pairs.push(f[i] + f[j]);
+ }
+ }
+
+ // Sort all values
+ pairs.sort((a, b) => a - b);
+
+ // Optimal Value for (a + b)
+ let left = 0;
+ // Optimal Value for (c + d)
+ let right = 0;
+ // minimum error with Math.abs(a + b - Math.PI)
+ let minError = Math.PI;
+
+ // Binary Search for the best match
+ for (let i = 0; i < pairs.length; ++i) {
+ let current = pairs[i];
+ let need = Math.PI - current;
+
+ if (need < current) break;
+
+ let match;
+ for (let i = 1; i < pairs.length; ++i) {
+ if (pairs[i] > need) {
+ match = i;
+ break;
+ }
+ }
+
+ let error = Math.abs(need - pairs[match]);
+ if (error < minError)
+ {
+ minError = error;
+ left = i;
+ right = match;
+ }
+
+ --match;
+ error = Math.abs(need - pairs[match]);
+ if (error < minError) {
+ minError = error;
+ left = i;
+ right = match;
+ }
+ }
+
+ let a, b, c, d;
+
+ OuterLoop1:
+ for (a = 0; a < max; ++a) {
+ for (b = a; b < max; ++b) {
+ if (pairs[left] == f[a] + f[b]) {
+ break OuterLoop1;
+ }
+ }
+ }
+
+ OuterLoop2:
+ for (c = 0; c < max; ++c) {
+ for (d = c; d < max; ++d) {
+ if (pairs[right] == f[c] + f[d]) {
+ break OuterLoop2;
+ }
+ }
+ }
+ return a*a + b*b + c*c + d*d;
+}
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-462-permutation-of-3-smooth-numbers.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-462-permutation-of-3-smooth-numbers.md
new file mode 100644
index 00000000000..b17dc1befcd
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-462-permutation-of-3-smooth-numbers.md
@@ -0,0 +1,58 @@
+---
+id: 5900f53b1000cf542c51004d
+title: 'Problem 462: Permutation of 3-smooth numbers'
+challengeType: 1
+forumTopicId: 302137
+dashedName: problem-462-permutation-of-3-smooth-numbers
+---
+
+# --description--
+
+A 3-smooth number is an integer which has no prime factor larger than 3. For an integer $N$, we define $S(N)$ as the set of 3-smooth numbers less than or equal to $N$. For example, $S(20) = \\{1, 2, 3, 4, 6, 8, 9, 12, 16, 18\\}$.
+
+We define $F(N)$ as the number of permutations of $S(N)$ in which each element comes after all of its proper divisors.
+
+This is one of the possible permutations for $N = 20$.
+
+- 1, 2, 4, 3, 9, 8, 16, 6, 18, 12.
+
+This is not a valid permutation because 12 comes before its divisor 6.
+
+- 1, 2, 4, 3, 9, 8, 12, 16, 6, 18.
+
+We can verify that $F(6) = 5$, $F(8) = 9$, $F(20) = 450$ and $F(1000) ≈ 8.8521816557e\\,21$.
+
+Find $F({10}^{18})$. Give as your answer as a string in its scientific notation rounded to ten digits after the decimal point. When giving your answer, use a lowercase `e` to separate mantissa and exponent. E.g. if the answer is $112\\,233\\,445\\,566\\,778\\,899$ then the answer format would be `1.1223344557e17`.
+
+# --hints--
+
+`permutationOf3SmoothNumbers()` should return a string.
+
+```js
+assert.strictEqual(typeof permutationOf3SmoothNumbers() === 'string');
+```
+
+`permutationOf3SmoothNumbers()` should return the string `5.5350769703e1512`.
+
+```js
+assert.strictEqual(permutationOf3SmoothNumbers(), '5.5350769703e1512');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function permutationOf3SmoothNumbers() {
+
+ return true;
+}
+
+permutationOf3SmoothNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-463-a-weird-recurrence-relation.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-463-a-weird-recurrence-relation.md
new file mode 100644
index 00000000000..a8e3607195e
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-463-a-weird-recurrence-relation.md
@@ -0,0 +1,48 @@
+---
+id: 5900f53c1000cf542c51004e
+title: 'Problem 463: A weird recurrence relation'
+challengeType: 1
+forumTopicId: 302138
+dashedName: problem-463-a-weird-recurrence-relation
+---
+
+# --description--
+
+The function $f$ is defined for all positive integers as follows:
+
+$$\begin{align} & f(1) = 1 \\\\
+ & f(3) = 3 \\\\ & f(2n) = f(n) \\\\
+ & f(4n + 1) = 2f(2n + 1) - f(n) \\\\ & f(4n + 3) = 3f(2n + 1) - 2f(n) \end{align}$$
+
+The function $S(n)$ is defined as $\sum_{i=1}^{n} f(i)$.
+
+$S(8) = 22$ and $S(100) = 3604$.
+
+Find $S(3^{37})$. Give the last 9 digits of your answer.
+
+# --hints--
+
+`weirdRecurrenceRelation()` should return `808981553`.
+
+```js
+assert.strictEqual(weirdRecurrenceRelation(), 808981553);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function weirdRecurrenceRelation() {
+
+ return true;
+}
+
+weirdRecurrenceRelation();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-464-mbius-function-and-intervals.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-464-mbius-function-and-intervals.md
new file mode 100644
index 00000000000..d293fcda274
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-464-mbius-function-and-intervals.md
@@ -0,0 +1,57 @@
+---
+id: 5900f53d1000cf542c51004f
+title: 'Problem 464: Möbius function and intervals'
+challengeType: 1
+forumTopicId: 302139
+dashedName: problem-464-mbius-function-and-intervals
+---
+
+# --description--
+
+The Möbius function, denoted $μ(n)$, is defined as:
+
+- $μ(n) = (-1)^{ω(n)}$ if $n$ is squarefree (where $ω(n)$ is the number of distinct prime factors of $n$)
+- $μ(n) = 0$ if $n$ is not squarefree.
+
+Let $P(a, b)$ be the number of integers $n$ in the interval $[a, b]$ such that $μ(n) = 1$.
+
+Let $N(a, b)$ be the number of integers $n$ in the interval $[a, b]$ such that $μ(n) = -1$.
+
+For example, $P(2, 10) = 2$ and $N(2, 10) = 4$.
+
+Let $C(n)$ be the number of integer pairs $(a, b)$ such that:
+
+- $1 ≤ a ≤ b ≤ n$,
+- $99 \times N(a, b) ≤ 100 \times P(a, b)$, and
+- $99 \times P(a, b) ≤ 100 \times N(a, b)$.
+
+For example, $C(10) = 13$, $C(500) = 16\\,676$ and $C(10\\,000) = 20\\,155\\,319$.
+
+Find $C(20\\,000\\,000)$.
+
+# --hints--
+
+`mobiusFunctionAndIntervals()` should return `198775297232878`.
+
+```js
+assert.strictEqual(mobiusFunctionAndIntervals(), 198775297232878);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function mobiusFunctionAndIntervals() {
+
+ return true;
+}
+
+mobiusFunctionAndIntervals();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-465-polar-polygons.md b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-465-polar-polygons.md
new file mode 100644
index 00000000000..57ad5b291d6
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/18-project-euler/project-euler-problems-401-to-480/problem-465-polar-polygons.md
@@ -0,0 +1,54 @@
+---
+id: 5900f53d1000cf542c510050
+title: 'Problem 465: Polar polygons'
+challengeType: 1
+forumTopicId: 302140
+dashedName: problem-465-polar-polygons
+---
+
+# --description--
+
+The kernel of a polygon is defined by the set of points from which the entire polygon's boundary is visible. We define a polar polygon as a polygon for which the origin is strictly contained inside its kernel.
+
+For this problem, a polygon can have collinear consecutive vertices. However, a polygon still cannot have self-intersection and cannot have zero area.
+
+For example, only the first of the following is a polar polygon (the kernels of the second, third, and fourth do not strictly contain the origin, and the fifth does not have a kernel at all):
+
+Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
new file mode 100644
index 00000000000..e938bc8c2e3
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
@@ -0,0 +1,146 @@
+---
+id: 63b606f09a14cc1781aea1fb
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Create a `label` element, give it a `for` attribute set to `budget` and the text `Budget`, then create an `input` element with the `id` set to `budget`.
+
+# --hints--
+
+You should create a `label` element in your `form`.
+
+```js
+assert.exists(document.querySelector('form label'));
+```
+
+Your `label` element should have a `for` attribute set to `budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.getAttribute('for'), 'budget');
+```
+
+Your `label` element should have the text `Budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.innerText, 'Budget');
+```
+
+You should create an `input` element within your `form`.
+
+```js
+assert.exists(document.querySelector('form input'));
+```
+
+Your `input` element should come after your `label` element.
+
+```js
+assert.equal(document.querySelector('form input')?.previousElementSibling?.tagName, "LABEL");
+```
+
+Your `input` element should have an `id` set to `budget`.
+
+```js
+assert.equal(document.querySelector('form input')?.id, "budget");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
new file mode 100644
index 00000000000..fcabad47a30
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
@@ -0,0 +1,131 @@
+---
+id: 63b6075a62883218d282504c
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Your `input` element needs some additional attributes. Give it a `type` set to `number` to only allow numeric inputs, a `min` attribute set to `0` to only allow positive numbers, and a `placeholder` set to `Daily calorie budget`.
+
+Finally, mark the `input` element as `required`.
+
+# --hints--
+
+Your `input` element should have a `type` attribute set to `number`.
+
+```js
+assert.equal(document.querySelector('form input').type, 'number');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+assert.equal(document.querySelector('form input').min, '0');
+```
+
+Your `input` element should have a `placeholder` attribute set to `Daily calorie budget`.
+
+```js
+assert.equal(document.querySelector('form input').placeholder, 'Daily calorie budget');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md b/curriculum/challenges/chinese/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/chinese/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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md b/curriculum/challenges/chinese/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/chinese/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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md b/curriculum/challenges/chinese/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/chinese/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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md b/curriculum/challenges/chinese/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/chinese/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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md b/curriculum/challenges/chinese/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/chinese/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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md b/curriculum/challenges/chinese/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/chinese/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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md b/curriculum/challenges/chinese/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/chinese/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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md b/curriculum/challenges/chinese/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/chinese/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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md b/curriculum/challenges/chinese/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/chinese/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
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
new file mode 100644
index 00000000000..17934b0039d
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
@@ -0,0 +1,170 @@
+---
+id: 63b60cfaca25bb27edd40f62
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Finally, you need to link your JavaScript file to your HTML. Create a `script` element to do so.
+
+# --hints--
+
+You should have a `script` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('script')?.length, 1);
+```
+
+Your `script` element should have the `src` set to `./script.js`.
+
+```js
+assert.match(code, /script\s*?src\s*?=\s*?('|")(\.\/)?script\.js\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
new file mode 100644
index 00000000000..de3870b44ad
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
@@ -0,0 +1,176 @@
+---
+id: 63b60d3c5048302906962231
+title: Step 14
+challengeType: 0
+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`.
+
+# --hints--
+
+You should create a variable called `calorieCounter`.
+
+```js
+assert.isDefined(calorieCounter);
+```
+
+You should use `document.getElementById()` to get the `#calorie-counter` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")calorie-counter\1\s*\)/g);
+```
+
+You should store the `#calorie-counter` element in a variable called `calorieCounter`.
+
+```js
+assert.equal(calorieCounter, document.getElementById('calorie-counter'));
+```
+
+# --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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
new file mode 100644
index 00000000000..44e1c274573
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
@@ -0,0 +1,195 @@
+---
+id: 63b613f367584d2a5d041b7d
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Get your `#budget` element and assign it to `budgetNumberInput`, and your `#entry-dropdown` element and assign it to `entryDropdown`.
+
+# --hints--
+
+You should declare a variable called `budgetNumberInput`.
+
+```js
+assert.isDefined(budgetNumberInput);
+```
+
+You should use `document.getElementById()` to get the `#budget` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")budget\1\s*\)/g);
+```
+
+You should store the `#budget` element in a variable called `budgetNumberInput`.
+
+```js
+assert.equal(budgetNumberInput, document.getElementById('budget'));
+```
+
+You should declare a variable called `entryDropdown`.
+
+```js
+assert.isDefined(entryDropdown);
+```
+
+You should use `document.getElementById()` to get the `#entry-dropdown` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")entry-dropdown\1\s*\)/g);
+```
+
+You should store the `#entry-dropdown` element in a variable called `entryDropdown`.
+
+```js
+assert.equal(entryDropdown, document.getElementById('entry-dropdown'));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
new file mode 100644
index 00000000000..6cbbeb5ab4a
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
@@ -0,0 +1,215 @@
+---
+id: 63b61490e633a22b4593e62f
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Following the same pattern, assign your `#add-entry` element to `addEntryButton`, your `#clear` element to `clearButton`, and your `#output` element to `output`.
+
+# --hints--
+
+You should declare a variable called `addEntryButton`.
+
+```js
+assert.isDefined(addEntryButton);
+```
+
+You should use `document.getElementById()` to get the `#add-entry` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")add-entry\1\s*\)/g);
+```
+
+You should assign the `#add-entry` element to `addEntryButton`.
+
+```js
+assert.equal(addEntryButton, document.getElementById('add-entry'));
+```
+
+You should declare a variable called `clearButton`.
+
+```js
+assert.isDefined(clearButton);
+```
+
+You should use `document.getElementById()` to get the `#clear` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")clear\1\s*\)/g);
+```
+
+You should assign the `#clear` element to `clearButton`.
+
+```js
+assert.equal(clearButton, document.getElementById('clear'));
+```
+
+You should declare a variable called `output`.
+
+```js
+assert.isDefined(output);
+```
+
+You should use `document.getElementById()` to get the `#output` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")output\1\s*\)/g);
+```
+
+You should assign the `#output` element to `output`.
+
+```js
+assert.equal(output, document.getElementById("output"));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
new file mode 100644
index 00000000000..99c1985862c
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
@@ -0,0 +1,182 @@
+---
+id: 63b614e6a1f7fe2cef6312dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Declare an `isError` variable and set it to `false`, but use `let` so you can reassign it later.
+
+# --hints--
+
+You should declare an `isError` variable.
+
+```js
+assert.isDefined(isError);
+```
+
+Your `isError` variable should be set to `false`.
+
+```js
+assert.isFalse(isError);
+```
+
+You should use `let` to declare your `isError` variable.
+
+```js
+assert.match(code, /let\s+isError\s*=\s*false/g);
+```
+
+# --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
+--fcc-editable-region--
+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');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
new file mode 100644
index 00000000000..436b65b80d6
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
@@ -0,0 +1,192 @@
+---
+id: 63b6152e6aff882db819fc1e
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Even though you set an `input` element to be a number, JavaScript receives a string value. You need to write a function to clean the string value and ensure you have a number.
+
+Start by declaring a `cleanInputString` function that takes a `str` argument.
+
+# --hints--
+
+You should declare a `cleanInputString` variable.
+
+```js
+assert.isDefined(cleanInputString);
+```
+
+Your `cleanInputString` variable should be a function.
+
+```js
+assert.isFunction(cleanInputString);
+```
+
+Your `cleanInputString` function should take a `str` argument.
+
+```js
+assert.match(cleanInputString?.toString(), /\(str\)/);
+```
+
+`cleanInputString` should be an empty function.
+
+```js
+assert.match(cleanInputString?.toString(), /\{\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;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
new file mode 100644
index 00000000000..b7de4018e24
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
@@ -0,0 +1,182 @@
+---
+id: 63b61584def8fa2ebcc259e0
+title: Step 19
+challengeType: 0
+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.
+
+Declare a `strArray` variable and assign it that split value.
+
+# --hints--
+
+Your `cleanInputString` function should declare a `strArray` variable.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=/);
+```
+
+Your `strArray` variable should be assigned the value of `str.split('')`.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=\s*str\.split\(\s*('|")\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
new file mode 100644
index 00000000000..a0eaf81fd4e
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
@@ -0,0 +1,181 @@
+---
+id: 63bf43be3f969d24d4ed233c
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Declare a `cleanStrArray` variable and assign it an empty array. You will use this to store your valid number characters.
+
+# --hints--
+
+Your `cleanInputString` should declare a variable called `cleanStrArray`.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*/g);
+```
+
+Your `cleanStrArray` variable should be assigned an empty array.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*=\s*\[\s*\]/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
new file mode 100644
index 00000000000..db275c224c1
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
@@ -0,0 +1,195 @@
+---
+id: 63bf446945d34d25e6db6e4f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Use a `for` loop to iterate through each character in your `strArray` array.
+
+# --hints--
+
+Your `cleanInputString` function should have a `for` loop.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(/g);
+```
+
+Your `for` loop should initialize a variable called `i` to `0`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;/g);
+```
+
+Your `for` loop should have a condition that checks if `i` is less than the length of `strArray`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;/g);
+```
+
+Your `for` loop should increment `i` by `1` each time it runs. Use the increment operator for this.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
new file mode 100644
index 00000000000..a432c6687d5
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
@@ -0,0 +1,200 @@
+---
+id: 63bf45ce0dc8d4270760c6d0
+title: Step 22
+challengeType: 0
+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`.
+
+To check your character, see if the array `["+", "-", " "]` includes the character – you can use the `.includes()` method on the array to do this.
+
+# --hints--
+
+Your `for` loop should have an `if` statement.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(/);
+```
+
+Your `for` loop should use `!["+", "-", " "].includes()`.
+
+```js
+// the loop protection injects code so we have to look at the raw code directly
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(/);
+```
+
+Your `for` loop should see if `strArray[i]` is found in `["+", "-", " "]`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{/);
+```
+
+Your `for` loop should `push` `strArray[i]` to `cleanStrArray`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{\s*cleanStrArray\.push\(\s*strArray\[i\]\s*\)\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
new file mode 100644
index 00000000000..f74ff636c5b
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
@@ -0,0 +1,213 @@
+---
+id: 63bf461011fca327d3b60fa8
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+While looping through the string works, creating a new array is inefficient for memory and runtime performance. Instead, you can use Regular Expressions (referred to as "regex") to match specific characters.
+
+Regex in JavaScript is indicated by a pattern wrapped in forward slashes – for example:
+
+```js
+const regex = /hello/;
+```
+
+Remove your existing code within the `cleanInputString` function. Declare a `regex` variable and assign it the value from the example above.
+
+# --hints--
+
+You should remove the `cleanStrArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /cleanStrArray/);
+```
+
+You should remove the `strArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /strArray/);
+```
+
+You should not have a `for` loop.
+
+```js
+assert.notMatch(cleanInputString.toString(), /for/);
+```
+
+You should declare a `regex` variable.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to the regular expression `/hello/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/hello\//);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+ if (!["+", "-", " "].includes(strArray[i])) {
+ cleanStrArray.push(strArray[i])
+ }
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
new file mode 100644
index 00000000000..0f781eb61cf
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
@@ -0,0 +1,176 @@
+---
+id: 63bf47fd40599f29827f484d
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+The pattern you currently have will match the exact text `hello`, which is not what you want to match. You want to look for `+`, `-`, or spaces. Replace the pattern in your `regex` variable with `\+-` to look for plus and minus characters.
+
+Note that you need to use the `\` to escape the `+`, because a `+` has a special meaning in regular expressions.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /hello/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
new file mode 100644
index 00000000000..25d6d2447fb
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
@@ -0,0 +1,174 @@
+---
+id: 63bf492b6dfb292a79f0e675
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+In regex, shorthand character classes allow you to match specific characters without having to write those characters in your pattern. Shorthand character classes are preceded with a backslash (`\`). The character class `\s` will match any whitespace character. Add this to your regex pattern.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-\s/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
new file mode 100644
index 00000000000..3b18f0aac60
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
@@ -0,0 +1,188 @@
+---
+id: 63bf4bfe9de3852be51c8f86
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Your current pattern won't work just yet. `/+-\s/` looks for `+`, `-`, and a space *in order*. This would match `+- hello` but would not match `+hello`.
+
+To tell the pattern to match each of these characters individually, you need to turn them into a character class. This is done by wrapping the characters you want to match in brackets. For example, this pattern will match the characters `h`, `e`, `l`, or `o`:
+
+```js
+const regex = /[helo]/;
+```
+
+Turn your `+-\s` pattern into a character class. Note that you no longer need to escape the `+` character, because you are using a character class.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `[+-\s]`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\\?\+-\\s\]\//)
+```
+
+You should not escape the `+` character in your regular expression.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-\s/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
new file mode 100644
index 00000000000..30baf30ed58
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
@@ -0,0 +1,180 @@
+---
+id: 63bf4d351e06432ce9bf3627
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Regex can also take specific flags to alter the pattern matching behavior. Flags are added after the closing `/`. The `g` flag, which stands for "global", will tell the pattern to continue looking after it has found a match. Here is an example:
+
+```js
+const helloRegex = /hello/g;
+```
+
+Add the `g` flag to your regex pattern.
+
+# --hints--
+
+You should add the `g` flag to your `regex` value.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\s\]\/g/);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
new file mode 100644
index 00000000000..4b35b49f7b9
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
@@ -0,0 +1,199 @@
+---
+id: 63bf511b85b6082e54dc1573
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Strings have a `.replace()` method which allows you to replace characters in the string with another string. `.replace` takes two arguments. The first is the character sequence to replace – this can either be a string or a regex pattern. The second is the string to replace that sequence with. For example, this would replace all instances of `l` with `1`:
+
+```js
+"hello".replace(/l/g, "1");
+```
+
+Use your `regex` to replace all instances of `+`, `-`, and a space in `str` with an empty string. Return this value.
+
+# --hints--
+
+Your `cleanInputString` should call the `replace` method of `str`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(/);
+```
+
+You should pass `regex` as the first argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*/);
+```
+
+You should pass `""` as the second argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*,\s*("|')\1\s*\)/);
+```
+
+Your `cleanInputString` function should directly return the result of your `replace` method.
+
+```js
+assert.match(cleanInputString.toString(), /return\s*str\.replace\(\s*regex\s*,\s*("|')\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
new file mode 100644
index 00000000000..b6eef00a30b
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
@@ -0,0 +1,191 @@
+---
+id: 63bf5230bccd1c2f5c13e1ce
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+In HTML, number inputs allow for exponential notation (such as `1e10`). You need to filter those out.
+
+Start by creating a function called `isInvalidInput` – it should take a single `str` parameter.
+
+# --hints--
+
+You should declare an `isInvalidInput` variable.
+
+```js
+assert.isDefined(isInvalidInput)
+```
+
+`isInvalidInput` should be a function.
+
+```js
+assert.isFunction(isInvalidInput)
+```
+
+`isInvalidInput` should take a single `str` parameter.
+
+```js
+assert.match(isInvalidInput?.toString(), /\(\s*str\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, '');
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
new file mode 100644
index 00000000000..778a809571e
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
@@ -0,0 +1,185 @@
+---
+id: 63bf598a4c807930a13a1a27
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Declare a `regex` variable, and assign it a regex that matches the character `e`.
+
+# --hints--
+
+Your `isInvalidInput` function should have a `regex` variable.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to `/e/`.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
new file mode 100644
index 00000000000..2bf1aa0f9a3
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
@@ -0,0 +1,179 @@
+---
+id: 63bf5a518d54f63181ab639a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `e` in a number input can also be an uppercase `E`. Regex has a flag for this, however – the `i` flag, which stands for "insensitive". This flag makes your pattern case-insensitive. Add the `i` flag to your regex pattern.
+
+# --hints--
+
+Your `regex` value should have the `i` flag.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\/i/);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
new file mode 100644
index 00000000000..19873a84492
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
@@ -0,0 +1,187 @@
+---
+id: 63bf5a92fd148d3264d5322b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Number inputs only allow the `e` to occur between two digits. To match any number, you can use the character class `[0-9]`. This will match any digit between `0` and `9`.
+
+Add this character class before and after `e` in your pattern.
+
+# --hints--
+
+You should add the `[0-9]` character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e/);
+```
+
+You should add the `[0-9]` character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e\[0-9\]\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
new file mode 100644
index 00000000000..75477ddd763
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5adfe2981b332eb007b6
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The `+` modifier in a regex allows you to match a pattern that occurs one or more times. To match your digit pattern one or more times, add a plus after each of the digit character classes. For example: `[0-9]+`.
+
+# --hints--
+
+You should add the `+` modifier to the character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e/);
+```
+
+You should add the `+` modifier to the character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e\[0-9\]\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]e[0-9]/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
new file mode 100644
index 00000000000..95686b3c3a0
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5bcfebff0734593fad19
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+There is a shorthand character class to match any digit: `\d`. Replace your `[0-9]` character classes with this shorthand.
+
+# --hints--
+
+You should replace the `[0-9]` character class before `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e/);
+```
+
+You should replace the `[0-9]` character class after `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e\\d\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]+e[0-9]+/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
new file mode 100644
index 00000000000..f6f61282ce9
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5c438f523a359769106c
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Strings have a `.match()` method, which takes a regex argument. `.match()` will return an array of match results – containing either the first match, or all matches if the global flag is used.
+
+Return the result of calling the `.match()` method on `str` and passing your `regex` variable as the argument. You'll use this match result later on.
+
+# --hints--
+
+Your `isInvalidInput` function should call the `.match()` method on `str`.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(/);
+```
+
+You should pass `regex` as the argument to the `.match()` method.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(\s*regex\s*\)/);
+```
+
+Your `isInvalidInput` function should directly return the result of the `.match()` call.
+
+```js
+assert.match(isInvalidInput.toString(), /return\s+str\.match\(\s*regex\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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
new file mode 100644
index 00000000000..228f3503303
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5cf03b50bf36cfbe94ea
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Your next step is to allow users to add entries to the calorie counter. Declare an empty function `addEntry`. This function should not take any parameters.
+
+# --hints--
+
+You should declare an `addEntry` variable.
+
+```js
+assert.isDefined(addEntry);
+```
+
+Your `addEntry` variable should be a function.
+
+```js
+assert.isFunction(addEntry);
+```
+
+Your `addEntry` function should not take any parameters.
+
+```js
+assert.match(addEntry?.toString(), /\(\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--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
new file mode 100644
index 00000000000..1bc417c8bbb
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
@@ -0,0 +1,198 @@
+---
+id: 63c1dfbd56c71e278800010c
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+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.
+
+# --hints--
+
+Your `addEntry` function should have a `targetId` variable.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=/);
+```
+
+Your `targetId` variable should start with the string `#`.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1/);
+```
+
+You should use concatenation to add `entryDropdown.value` after your `#` string.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1\s*\+\s*entryDropdown\.value/);
+```
+
+# --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() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
new file mode 100644
index 00000000000..413b5f76d84
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e0af28078f2dfad9eb3e
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Now you need to target the `.input-container` element within the element that has your `targetId`. Declare a new `targetInputContainer` variable, and assign it the value of `document.querySelector()`. Use concatenation to separate `targetId` and `'.input-container'` with a space, and pass that string to `querySelector()`.
+
+# --hints--
+
+Your `addEntry` function should have a `targetInputContainer` variable.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=/);
+```
+
+Your `targetInputContainer` variable should be set to `document.querySelector()`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(/);
+```
+
+You should pass `targetId` to your `querySelector()` method.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*/);
+```
+
+You should concatenate `' .input-container'` to `targetId`. Remember to include the space at the beginning of `.input-container`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*\s*\+\s*('|")\s\.input-container\1\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 targetId = '#' + entryDropdown.value;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
new file mode 100644
index 00000000000..06e5ac50cec
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e1965a898d302e0af4e3
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+JavaScript has a feature called template literals , which allow you to interpolate variables directly within a string. Template literals are denoted with backticks ` `` `, as opposed to single or double quotes. Variables can be passed in to a template literal by surrounding the variable with `${}` – the value of the variable will be inserted into the string.
+
+For example:
+
+```js
+const name = "Naomi";
+const templateLiteral = `Hello, my name is ${name}~!`;
+console.log(templateLiteral);
+```
+
+The console will show the string "Hello, my name is Naomi~!".
+
+Replace your concatenated string in the `querySelector` with a template literal – be sure to keep the space between your `targetId` variable and `.input-container`.
+
+# --hints--
+
+You should use a template literal in your `querySelector` method.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`.*`\)/);
+```
+
+Your template literal should have the value `{targetId} .input-container`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`\$\{targetId\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(targetId + ' .input-container');
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
new file mode 100644
index 00000000000..6aeab26c100
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
@@ -0,0 +1,197 @@
+---
+id: 63c1e5b4b3c8a031def3bd65
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Thanks to template literals, you actually don't need the `targetId` variable at all. Remove that variable, and update your template literal to replace `targetId` with `entryDropdown.value` – remember to add `#` before that, in the string.
+
+# --hints--
+
+You should remove the `targetId` variable.
+
+```js
+assert.notMatch(addEntry.toString(), /targetId\s*=/);
+```
+
+You should replace the `targetId` reference in your template literal with `entryDropdown.value`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#?\$\{entryDropdown\.value\}\s\.input-container`\s*\)/);
+```
+
+You should add `#` at the beginning of your template literal.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#\$\{entryDropdown\.value\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(`${targetId} .input-container`);
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md b/curriculum/challenges/chinese/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/chinese/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/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md b/curriculum/challenges/chinese/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/chinese/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
+
+
+
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll();
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
new file mode 100644
index 00000000000..a7c1e1d3e7b
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
@@ -0,0 +1,192 @@
+---
+id: 63c216da562fbb3957b9cb2c
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Now you need to build your dynamic HTML string to add to the webpage. Declare a new `HTMLString` variable, and assign it an empty template literal string.
+
+# --hints--
+
+Your `addEntry` function should have an `HTMLString` variable.
+
+```js
+assert.match(addEntry.toString(), /HTMLString\s*=/)
+```
+
+Your `HTMLString` should be an empty template literal.
+
+```js
+assert.match(code, /HTMLString\s*=\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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
new file mode 100644
index 00000000000..e8ced7f3436
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
@@ -0,0 +1,198 @@
+---
+id: 63c2171c1e5b6e3aa51768d0
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start your `HTMLString` with a new line, then create a `label` element. Give that element the text `Entry # Name`, using your template literal syntax to replace `#` with the value of `entryNumber`.
+
+# --hints--
+
+Your `HTMLString` variable should start with a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n/);
+```
+
+You should add a `label` element on the new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*.*<\/label>/);
+```
+
+Your `label` element should have the text `Entry ${entryNumber} Name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = ``;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
new file mode 100644
index 00000000000..f78a3d0252c
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
@@ -0,0 +1,193 @@
+---
+id: 63c21774193de43bbc6a769f
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give your `label` element a `for` attribute with the value `X-#-name`, where `X` is the `value` of the `entryDropdown` element and `#` is the value of `entryNumber`. Remember that HTML attributes should be wrapped in double quotes.
+
+# --hints--
+
+Your `label` element should have a `for` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*/)
+```
+
+Your `label` element should have the same text as before.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
new file mode 100644
index 00000000000..42ee9b19109
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
@@ -0,0 +1,217 @@
+---
+id: 63c217ccd939053ce4fa16d6
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+After your `label` element, and on a new line in your template string, create an `input` element. Give it a `type` attribute set to `text`, a `placeholder` attribute set to `Name`, and an `id` attribute that matches the `for` attribute of your `label` element.
+
+# --hints--
+
+You should not modify your `label` element.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+You should add an `input` element on a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*/)[0];
+assert.include(inputAttributes, 'placeholder="Name"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(//)[0];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-name"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
new file mode 100644
index 00000000000..cfeec0927c4
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
@@ -0,0 +1,228 @@
+---
+id: 63c21839f56eaf3ef4e027c4
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create another `label` element (on a new line) at the end of your `HTMLString`. This `label` should have the text `Entry # Calories`, using your template literal syntax to replace `#` with the value of `entryNumber`, and the `for` attribute set to `X-#-calories`, where `X` is the `value` of `entryDropdown` and `#` is the value of `entryNumber`.
+
+# --hints--
+
+You should have two `label` elements in your `HTMLString`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.equal(HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, //)
+```
+
+Your new `label` element should have the text `Entry ${entryNumber} Calories`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const label = HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, /Entry\s\$\{entryNumber\}\sCalories<\/label>/);
+```
+
+You should not modify your existing elements.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.match(HTMLstring, /`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*Entry\s\$\{entryNumber\}\sCalories<\/label>/)
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ ]*>/g)[1];
+assert.include(inputAttributes, 'placeholder="Calories"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-calories"');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'min="0"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
new file mode 100644
index 00000000000..36835a69413
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
@@ -0,0 +1,208 @@
+---
+id: 63c218c028c56a411b2a379a
+title: Step 49
+challengeType: 0
+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.
+
+# --hints--
+
+Your `addEntry` function should access the `innerHTML` property of `targetInputContainer`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML/);
+```
+
+You should use the `+=` operator on `targetInputContainer.innerHTML`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=/);
+```
+
+You should add your `HTMLString` to the `innerHTML` of the `targetInputContainer` element.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=\s*HTMLString/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ function reference ) directly.
+
+# --hints--
+
+You should call the `.addEventListener()` method of the `addEntryButton`.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(/);
+```
+
+You should pass `click` as the first argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*/);
+```
+
+You should pass `addEntry` as the second argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*,\s*addEntry\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ truthy or falsy . A value is truthy if it evaluates to `true` when converted to a Boolean. A value is falsy if it evaluates to `false` when converted to a Boolean. `null` is an example of a falsy value.
+
+You need to check if `invalidInputMatch` is truthy – you can do this by passing the variable directly to your `if` condition (without a comparison operator). Here's an example of checking the truthiness of `helloWorld`.
+
+```js
+if (helloWorld) {
+
+}
+```
+
+Add an `if` statement that checks if `invalidInputMatch` is truthy.
+
+# --hints--
+
+You should add an `if` statement to your `getCaloriesFromInputs` function.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(/);
+```
+
+You should check the truthiness of `invalidInputMatch` in your `if` condition.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(\s*invalidInputMatch\s*\)/);
+```
+
+Your `if` statement should be inside your `for` loop.
+
+```js
+assert.isBelow(getCaloriesFromInputs.toString().indexOf("for"), getCaloriesFromInputs.toString().indexOf("if"));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ /);
+```
+
+Your `span` should not have any text.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{remainingCalories\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{Math\.abs\(remainingCalories\)\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${remainingCalories} Calorie ${surplusOrDeficit}
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
new file mode 100644
index 00000000000..d341d5e62bf
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
@@ -0,0 +1,262 @@
+---
+id: 63c9e7d5b21eee2776ecc226
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+After your `span` element, add an `hr` element to create a horizontal line.
+
+To keep your code clean and readable, you should add this on a new line in the template literal.
+
+# --hints--
+
+You should add an `hr` element to your `output.innerHTML` string.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `hr` element should come after your `span` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
new file mode 100644
index 00000000000..ba1da012290
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
@@ -0,0 +1,270 @@
+---
+id: 63c9e84c9fe8ca28c4101189
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Now create a `p` element with the text `budgetCalories Calories Budgeted`, using interpolation to replace `budgetCalories` with the appropriate variable.
+
+This should come after your `hr` element.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `p` element should come after your `hr` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ /g).length, 2);
+```
+
+Your second `p` element should be on a new line.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /\n\s*
\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\n\s*
\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
new file mode 100644
index 00000000000..f57827b6348
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
@@ -0,0 +1,264 @@
+---
+id: 63c9e94e9df7d72aed1c24bd
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Finally, you need to make the `#output` element visible so the user can see your text. Your `output` variable is an Element, which has a `classList` property. This property has a `.remove()` method, which accepts a string representing the class to remove from the element.
+
+Use the `.remove()` method of the `output` variable's `classList` property to remove the `hide` class. Don't forget to place the word `hide` inside quotes.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList/);
+```
+
+You should call the `.remove()` method of the `classList` property.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(/);
+```
+
+You should pass `hide` as the argument to the `.remove()` method.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
new file mode 100644
index 00000000000..18e5f04d27a
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea23dbadbf2c2764e3f5
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+If you click on your `Calculate Remaining Calories` button, you'll see that nothing happens. You still need to mount the event listener.
+
+Add an event listener to your `calorieCounter` element. The event type should be `submit`, and the callback function should be `calculateCalories`.
+
+# --hints--
+
+You should use the `.addEventListener()` method of your `calorieCounter` element.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(/);
+```
+
+You should pass `submit` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*/);
+```
+
+You should pass `calculateCalories` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*,\s*calculateCalories\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
new file mode 100644
index 00000000000..6c09fd6f149
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea9b16430f2d54522464
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Your final feature to add is the ability for a user to clear the form. Start by declaring an empty function called `clearForm` – it should not take any arguments.
+
+# --hints--
+
+You should declare a `clearForm` variable.
+
+```js
+assert.isDefined(clearForm);
+```
+
+Your `clearForm` variable should be a function.
+
+```js
+assert.isFunction(clearForm);
+```
+
+Your `clearForm` function should not take any arguments.
+
+```js
+assert.match(clearForm?.toString(), /\(\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
new file mode 100644
index 00000000000..7810095dcce
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
@@ -0,0 +1,267 @@
+---
+id: 63c9eb09bcfaa72e3da820a1
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+You need to get all of the input containers. Declare an `inputContainers` variable, and assign it to the value of querying the document for all elements with the class `input-container`.
+
+# --hints--
+
+You should declare an `inputContainers` variable in your `clearForm` function.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=/);
+```
+
+You should use the `querySelectorAll` method to get all of the elements with the class `input-container`.
+
+```js
+assert.match(clearForm.toString(), /document\.querySelectorAll\(\s*('|")\.input-container\1\s*\)/);
+```
+
+You should assign the value of the `querySelectorAll` method to the `inputContainers` variable.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=\s*document\.querySelectorAll\(\s*('|")\.input-container\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
new file mode 100644
index 00000000000..73d20bba696
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
@@ -0,0 +1,263 @@
+---
+id: 63c9eb4a5d68f12f32d9b440
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Remember that `document.querySelectorAll` returns a `NodeList`, which is array-like but is not an array. However, the `Array` object has a `.from()` method that accepts an array-like and returns an array. This is helpful when you want access to more robust array methods, which you will learn about in a future project.
+
+Wrap your `inputContainers` query selector in `Array.from()`. Do this on the same line as your declaration.
+
+# --hints--
+
+You should wrap your `querySelectorAll` in `Array.from()`.
+
+```js
+assert.match(clearForm, /Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\s*\)/);
+```
+
+You should assign the result of `Array.from()` to your `inputContainers` variable.
+
+```js
+assert.match(clearForm, /inputContainers\s*=\s*Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = document.querySelectorAll('.input-container');
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
new file mode 100644
index 00000000000..f6655dc9175
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
@@ -0,0 +1,276 @@
+---
+id: 63c9ebb7b12bca3025b0a935
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+It is time for another loop. Use a `for` loop to iterate through the `inputContainers` array.
+
+Inside the loop, set the `innerHTML` property of the element at the current index to an empty string. This will clear all of the contents of that input container.
+
+# --hints--
+
+Your `clearForm` function should have a `for` loop.
+
+```js
+// loop protect injects stuff, so let's look at the raw code again
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(/);
+```
+
+Your `for` loop should iterate through the `inputContainers` array. Remember to use `i` as your iterator.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*inputContainers\.length\s*;\s*i\s*\+\+\s*\)/);
+```
+
+Your `for` loop should set the `innerHTML` property of `inputContainers[i]` to an empty string.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const forLoop = clearForm.split("for")[1];
+assert.match(forLoop, /inputContainers\[\s*i\s*\]\s*\.innerHTML\s*=\s*(`|'|")\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
new file mode 100644
index 00000000000..5ef4abce954
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
@@ -0,0 +1,275 @@
+---
+id: 63c9ec044acedf312c4974ff
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+After your loop completes, you need to clear the `budgetNumberInput`. Set the `value` property of `budgetNumberInput` to an empty string.
+
+# --hints--
+
+Your `clearForm` function should access the `value` property of the `budgetNumberInput` element.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value/);
+```
+
+Your `clearForm` function should set the `value` property of the `budgetNumberInput` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value\s*=\s*('|"|`)\1/);
+```
+
+You should modify the `budgetNumberInput` after your `for` loop.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const afterLoop = clearForm.split("}")[1];
+assert.match(afterLoop, /budgetNumberInput\.value/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
new file mode 100644
index 00000000000..3dab9bed7e5
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
@@ -0,0 +1,276 @@
+---
+id: 63c9f24afbc9cf324dcaa9a4
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+You also need to clear the `output` element's text. You can do this by setting the `innerText` property to an empty string.
+
+The difference between `innerText` and `innerHTML` is that `innerText` will not render HTML elements, but will display the tags and content as raw text.
+
+# --hints--
+
+Your `clearForm` function should access the `innerText` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText/);
+```
+
+Your `clearForm` function should set the `innerText` property of the `output` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText\s*=\s*('|"|`)\1/);
+```
+
+You should modify `output` after modifying `budgetNumberInput`.
+
+```js
+assert.isAbove(clearForm.toString().indexOf('output'), clearForm.toString().indexOf('budgetNumberInput'));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
new file mode 100644
index 00000000000..b2e9d536a15
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
@@ -0,0 +1,277 @@
+---
+id: 63c9f28bda3e3f336e21b6b4
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+To finish off this function, you need to restore the `hide` class to the `output` element. The `classList` property has an `.add()` method which is the opposite of the `.remove()` method. It accepts a string representing the class to add to the element.
+
+Add the `hide` class to your `output`.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList/);
+```
+
+You should call the `.add()` method on the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add/);
+```
+
+You should pass `hide` as the argument to the `.add()` method.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
new file mode 100644
index 00000000000..d29b3f2ac72
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
@@ -0,0 +1,520 @@
+---
+id: 63c9f2bff625af342023512c
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+To complete this project, add an event listener to the `clearButton` button. When the button is clicked, it should call the `clearForm` function.
+
+Congratulations! Your project is complete.
+
+# --hints--
+
+You should add an event listener to the `clearButton` button.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(/);
+```
+
+You should pass `click` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*/);
+```
+
+You should pass `clearForm` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*,\s*clearForm\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener('click', addEntry);
+calorieCounter.addEventListener('submit', calculateCalories);
+clearButton.addEventListener('click', clearForm);
+```
diff --git a/curriculum/challenges/chinese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/chinese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/chinese/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md b/curriculum/challenges/chinese/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/chinese/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md b/curriculum/challenges/chinese/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/chinese/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md b/curriculum/challenges/chinese/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/chinese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/chinese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md
index b9a0e0faf47..dccd0a3e325 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md
@@ -1,6 +1,6 @@
---
id: 56bbb991ad1ed5201cd392ce
-title: Manipulate Arrays With unshift Method
+title: Manipular arreglos con el método unshift
challengeType: 1
videoUrl: 'https://scrimba.com/c/ckNDESv'
forumTopicId: 18239
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
index 340b9db0eb6..66ba0a03cac 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
@@ -8,21 +8,28 @@ dashedName: record-collection
# --description--
-Se te da un objeto literal que representa una parte de tu colección de álbumes musicales. Cada álbum tiene un número de id único como clave y varias otras propiedades. No todos los álbumes tienen una información completa.
+You are creating a function that aids in the maintenance of a musical album collection. The collection is organized as an object that contains multiple albums which are also objects. Each album is represented in the collection with a unique `id` as the property name. Within each album object, there are various properties describing information about the album. Not all albums have complete information.
-Empiezas con una función `updateRecords` la cual toma un objeto literal, `records`, que contiene el álbum musical de la colección, un `id`, `prop` (como `artist` o `tracks`), y `value`. Completa la función usando las reglas siguientes para modificar el objeto pasado a la función.
+The `updateRecords` function takes 4 arguments represented by the following function parameters:
-- Tu función siempre debe devolver el objeto de colección de registros completo.
-- Si `prop` no es `tracks` y `value` no es una cadena vacía, actualiza o establece la propiedad `prop` del album a `value`.
-- Si `prop` es `tracks` pero el álbum no tiene una propiedad `tracks`, crea un arreglo vacío y agrégale `value` a él.
-- Si `prop` es `tracks` y `value` no es una cadena vacía, agrega `value` al final del arreglo de `tracks` existentes del álbum.
-- Si `value` es una cadena vacía, elimina esa propiedad `prop` del álbum.
+- `records` - an object containing several individual albums
+- `id` - a number representing a specific album in the `records` object
+- `prop` - a string representing the name of the album’s property to update
+- `value` - a string containing the information used to update the album’s property
-**Nota:** Se usa una copia del objeto `recordCollection` para las pruebas.
+Complete the function using the rules below to modify the object passed to the function.
+
+- Your function must always return the entire `records` object.
+- If `value` is an empty string, delete the given `prop` property from the album.
+- If `prop` isn’t `"tracks"` and `value` isn't an empty string, assign the `value` to that album’s `prop`.
+- If `prop` is `"tracks"` and `value` isn’t an empty string, add the `value` to the end of the album’s existing `"tracks"` array.
+- If the album doesn’t have a `"tracks"` property, create a new array for the album's `"tracks"` property before adding the `value` to it.
+
+**Note:** A copy of the `recordCollection` object is used for the tests. You should not directly modify the `recordCollection` object.
# --hints--
-Después `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` debe ser la cadena `ABBA`
+After `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` should be the string `ABBA`
```js
assert(
@@ -31,7 +38,7 @@ assert(
);
```
-Después `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` debe de tener la cadena `Take a Chance on Me` como el último y único elemento.
+After `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` should have the string `Take a Chance on Me` as the last and only element.
```js
assert(
@@ -41,14 +48,14 @@ assert(
);
```
-Después de `updateRecords(recordCollection, 2548, "artist", "")`, `artist` no se debe establecido
+After `updateRecords(recordCollection, 2548, "artist", "")`, `artist` should not be set
```js
updateRecords(_recordCollection, 2548, 'artist', '');
assert(!_recordCollection[2548].hasOwnProperty('artist'));
```
-Después de `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` debe tener la cadena `Addicted to Love` como último elemento.
+After `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` should have the string `Addicted to Love` as the last element.
```js
assert(
@@ -58,7 +65,7 @@ assert(
);
```
-Después `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` debe tener la cadena `1999` como el primer elemento.
+After `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` should have the string `1999` as the first element.
```js
assert(
@@ -68,14 +75,14 @@ assert(
);
```
-Después `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` no se debe establecido
+After `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` should not be set
```js
updateRecords(_recordCollection, 2548, 'tracks', '');
assert(!_recordCollection[2548].hasOwnProperty('tracks'));
```
-Después de `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` debe ser la cadena `Riptide`
+After `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` should be the string `Riptide`
```js
assert(
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md
index e2a7b8d3edf..32ecfc39d6f 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md
@@ -15,7 +15,7 @@ Otro tipo de datos es el Booleano . Los booleanos solo pueden ser uno
# --instructions--
-Modify the `welcomeToBooleans` function so that it returns `true` instead of `false`.
+Modifica la función `welcomeToBooleans` para que devuelva `true` en lugar de `false`.
# --hints--
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md
index 4b0e1f96148..929b5c4c378 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md
@@ -11,13 +11,13 @@ dashedName: word-blanks
Se te proporcionan oraciones con algunas palabras faltantes, como sustantivos, verbos, adjetivos y adverbios. Luego, completa las piezas que faltan con palabras de tu elección de una manera que la oración completa tenga sentido.
-Consider this sentence:
+Considera esta frase:
```md
It was really ____, and we ____ ourselves ____.
```
-This sentence has three missing pieces- an adjective, a verb and an adverb, and we can add words of our choice to complete it. We can then assign the completed sentence to a variable as follows:
+A esta frase le faltan tres piezas: un adjetivo, un verbo y un adverbio, y podemos añadir las palabras que queramos para completarla. A continuación, podemos asignar la frase completa a una variable de la siguiente manera:
```js
const sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselves " + "silly" + ".";
@@ -25,21 +25,21 @@ const sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselve
# --instructions--
-In this challenge, we provide you with a noun, a verb, an adjective and an adverb. You need to form a complete sentence using words of your choice, along with the words we provide.
+En este reto, te proporcionamos un sustantivo, un verbo, un adjetivo y un adverbio. Tienes que formar una frase completa utilizando palabras de tu elección, junto con las palabras que te proporcionamos.
-You will need to use the string concatenation operator `+` to build a new string, using the provided variables: `myNoun`, `myAdjective`, `myVerb`, and `myAdverb`. You will then assign the formed string to the `wordBlanks` variable. You should not change the words assigned to the variables.
+Debes utilizar el operador de concatenación de cadenas `+` para construir una nueva cadena, utilizando las variables proporcionadas: `myNoun`, `myAdjective`, `myVerb`, y `myAdverb`. A continuación, asigna la cadena formada a la variable `wordBlanks`. No debes cambiar las palabras asignadas a las variables.
-You will also need to account for spaces in your string, so that the final sentence has spaces between all the words. The result should be a complete sentence.
+También tendrás que tener en cuenta los espacios en tu cadena, de modo que la frase final tenga espacios entre todas las palabras. El resultado debe ser una frase completa.
# --hints--
-`wordBlanks` should be a string.
+`wordBlanks` debe ser una cadena.
```js
assert(typeof wordBlanks === 'string');
```
-You should not change the values assigned to `myNoun`, `myVerb`, `myAdjective` or `myAdverb`.
+No debes cambiar los valores asignados a `myNoun`, `myVerb`, `myAdjective` o `myAdverb`.
```js
assert(
@@ -50,7 +50,7 @@ assert(
);
```
-You should not directly use the values `dog`, `ran`, `big`, or `quickly` to create `wordBlanks`.
+No debes utilizar directamente los valores `dog`, `ran`, `big` o `quickly` para crear `wordBlanks`.
```js
const newCode = removeAssignments(code);
@@ -62,7 +62,7 @@ assert(
);
```
-`wordBlanks` should contain all of the words assigned to the variables `myNoun`, `myVerb`, `myAdjective` and `myAdverb` separated by non-word characters (and any additional words of your choice).
+`wordBlanks` debes contener todas las palabras asignadas a las variables `myNoun`, `myVerb`, `myAdjective` y `myAdverb` separadas por caracteres no-palabra (y cualquier palabra adicional de su elección).
```js
assert(
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md
index 15817bf16e1..4126e81531c 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md
@@ -22,7 +22,7 @@ console.log(howMany("string", null, [1, 2, 3], { }));
La consola mostrará las cadenas `You have passed 3 arguments.` y `You have passed 4 arguments.`.
-The rest parameter eliminates the need to use the `arguments` object and allows us to use array methods on the array of parameters passed to the function `howMany`.
+El parámetro rest elimina la necesidad de utilizar el objeto `arguments` y nos permite utilizar métodos de arreglos en el arreglo de parámetros pasados a la función `howMany`.
# --instructions--
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md
index 55da1d30b98..22f2b81e934 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md
@@ -96,14 +96,14 @@ reRegex.lastIndex = 0;
assert(reRegex.test('10 10 10'));
```
-Your regex should not match the string `42\t42\t42`.
+La expresión regular no debe coincidir con la cadena `42\t42\t42`.
```js
reRegex.lastIndex = 0;
assert(!reRegex.test('42\t42\t42'));
```
-Your regex should not match the string `42 42 42`.
+La expresión regular no debe coincidir con la cadena `42 42 42`.
```js
reRegex.lastIndex = 0;
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
index b4b92a6bdb4..7b25021053d 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-bar-chart
Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo.
-Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas D3, ya que sus posiciones se utilizan para determinar la alineación de los elementos gráficos. Encontrarás información sobre cómo generar ejes en . Required DOM elements are queried on the moment of each test. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
+Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Las pruebas requieren que los ejes se generen utilizando la propiedad de eje D3, que genera automáticamente marcas a lo largo del eje. Estas marcas son necesarias para pasar las pruebas D3, ya que sus posiciones se utilizan para determinar la alineación de los elementos gráficos. Encontrarás información sobre cómo generar ejes en . Los elementos DOM necesarios se consultan en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
**Historia de usuario #1:** Mi gráfica debe tener un título con su correspondiente `id="title"`.
@@ -24,17 +24,17 @@ Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada
**Historia de usuario #5:** Mi gráfica debe tener un elemento `rect` por cada punto de datos con su correspondiente `class="bar"` mostrando los datos.
-**User Story #6:** Each `.bar` should have the properties `data-date` and `data-gdp` containing `date` and `GDP` values.
+**Historia de usuario nº 6:** Cada `.bar` debe tener las propiedades `data-date` y `data-gdp` que contienen los valores `date` y `GDP`.
-**User Story #7:** The `.bar` elements' `data-date` properties should match the order of the provided data.
+**Historia de usuario nº 7:** Las propiedades `.bar` de los elementos `data-date` deben coincidir con el orden de los datos proporcionados.
-**User Story #8:** The `.bar` elements' `data-gdp` properties should match the order of the provided data.
+**Historia de usuario nº 8:** Las propiedades `.bar` de los elementos `data-gdp` deben coincidir con el orden de los datos proporcionados.
-**User Story #9:** Each `.bar` element's height should accurately represent the data's corresponding `GDP`.
+**Historia de usuario nº 9:** La altura de cada elemento `.bar` debe representar con exactitud el `GDP` correspondiente a los datos.
-**User Story #10:** The `data-date` attribute and its corresponding `.bar` element should align with the corresponding value on the x-axis.
+**Historia de usuario nº 10:** El atributo `data-date` y su correspondiente elemento `.bar` deben alinearse con el valor correspondiente en el eje x.
-**User Story #11:** The `data-gdp` attribute and its corresponding `.bar` element should align with the corresponding value on the y-axis.
+**Historia de usuario nº 11:** El atributo `data-gdp` y su correspondiente elemento `.bar` deben alinearse con el valor correspondiente en el eje y.
**Historia de usuario #12:** Puedo pasar el ratón por encima de un área y ver un cuadro emergente con su correspondiente `id="tooltip"` que muestra más información acerca del área.
diff --git a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
index adf1315a14b..26b5215d299 100644
--- a/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
+++ b/curriculum/challenges/espanol/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
@@ -12,7 +12,7 @@ dashedName: visualize-data-with-a-choropleth-map
Completa las historias de usuario a continuación y obtén todas las pruebas para aprobar. Utiliza cualquier librería o API que necesites. Dale tu propio estilo.
-Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Required DOM elements are queried on the moment of each test. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
+Puedes utilizar HTML, JavaScript, CSS y la librería D3 de visualización basada en svg. Los elementos DOM necesarios se consultan en el momento de cada prueba. Si usas un framework frontend (como por ejemplo Vue), los resultados de la prueba pueden ser inexactos para el contenido dinámico. Esperamos poder adaptarlos eventualmente, pero por ahora estos frameworks no son soportados por los proyectos con D3.
**Historia de usuario #1:** Mi coroplético debe tener un título con su correspondiente `id="title"`.
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index cc43d590c47..9776b9b5792 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,25 +26,29 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
Debes agregar el primer `input` después del texto del `label` que es `Enter Your First Name:`, e incluye un espacio después de los dos puntos.
```js
-assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML.trim(), 'Enter Your First Name: Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
new file mode 100644
index 00000000000..e938bc8c2e3
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
@@ -0,0 +1,146 @@
+---
+id: 63b606f09a14cc1781aea1fb
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Create a `label` element, give it a `for` attribute set to `budget` and the text `Budget`, then create an `input` element with the `id` set to `budget`.
+
+# --hints--
+
+You should create a `label` element in your `form`.
+
+```js
+assert.exists(document.querySelector('form label'));
+```
+
+Your `label` element should have a `for` attribute set to `budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.getAttribute('for'), 'budget');
+```
+
+Your `label` element should have the text `Budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.innerText, 'Budget');
+```
+
+You should create an `input` element within your `form`.
+
+```js
+assert.exists(document.querySelector('form input'));
+```
+
+Your `input` element should come after your `label` element.
+
+```js
+assert.equal(document.querySelector('form input')?.previousElementSibling?.tagName, "LABEL");
+```
+
+Your `input` element should have an `id` set to `budget`.
+
+```js
+assert.equal(document.querySelector('form input')?.id, "budget");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
new file mode 100644
index 00000000000..fcabad47a30
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
@@ -0,0 +1,131 @@
+---
+id: 63b6075a62883218d282504c
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Your `input` element needs some additional attributes. Give it a `type` set to `number` to only allow numeric inputs, a `min` attribute set to `0` to only allow positive numbers, and a `placeholder` set to `Daily calorie budget`.
+
+Finally, mark the `input` element as `required`.
+
+# --hints--
+
+Your `input` element should have a `type` attribute set to `number`.
+
+```js
+assert.equal(document.querySelector('form input').type, 'number');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+assert.equal(document.querySelector('form input').min, '0');
+```
+
+Your `input` element should have a `placeholder` attribute set to `Daily calorie budget`.
+
+```js
+assert.equal(document.querySelector('form input').placeholder, 'Daily calorie budget');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md b/curriculum/challenges/espanol/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/espanol/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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md b/curriculum/challenges/espanol/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/espanol/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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md b/curriculum/challenges/espanol/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/espanol/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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md b/curriculum/challenges/espanol/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/espanol/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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md b/curriculum/challenges/espanol/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/espanol/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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md b/curriculum/challenges/espanol/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/espanol/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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md b/curriculum/challenges/espanol/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/espanol/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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md b/curriculum/challenges/espanol/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/espanol/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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md b/curriculum/challenges/espanol/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/espanol/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
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
new file mode 100644
index 00000000000..17934b0039d
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
@@ -0,0 +1,170 @@
+---
+id: 63b60cfaca25bb27edd40f62
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Finally, you need to link your JavaScript file to your HTML. Create a `script` element to do so.
+
+# --hints--
+
+You should have a `script` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('script')?.length, 1);
+```
+
+Your `script` element should have the `src` set to `./script.js`.
+
+```js
+assert.match(code, /script\s*?src\s*?=\s*?('|")(\.\/)?script\.js\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
new file mode 100644
index 00000000000..de3870b44ad
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
@@ -0,0 +1,176 @@
+---
+id: 63b60d3c5048302906962231
+title: Step 14
+challengeType: 0
+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`.
+
+# --hints--
+
+You should create a variable called `calorieCounter`.
+
+```js
+assert.isDefined(calorieCounter);
+```
+
+You should use `document.getElementById()` to get the `#calorie-counter` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")calorie-counter\1\s*\)/g);
+```
+
+You should store the `#calorie-counter` element in a variable called `calorieCounter`.
+
+```js
+assert.equal(calorieCounter, document.getElementById('calorie-counter'));
+```
+
+# --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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
new file mode 100644
index 00000000000..44e1c274573
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
@@ -0,0 +1,195 @@
+---
+id: 63b613f367584d2a5d041b7d
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Get your `#budget` element and assign it to `budgetNumberInput`, and your `#entry-dropdown` element and assign it to `entryDropdown`.
+
+# --hints--
+
+You should declare a variable called `budgetNumberInput`.
+
+```js
+assert.isDefined(budgetNumberInput);
+```
+
+You should use `document.getElementById()` to get the `#budget` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")budget\1\s*\)/g);
+```
+
+You should store the `#budget` element in a variable called `budgetNumberInput`.
+
+```js
+assert.equal(budgetNumberInput, document.getElementById('budget'));
+```
+
+You should declare a variable called `entryDropdown`.
+
+```js
+assert.isDefined(entryDropdown);
+```
+
+You should use `document.getElementById()` to get the `#entry-dropdown` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")entry-dropdown\1\s*\)/g);
+```
+
+You should store the `#entry-dropdown` element in a variable called `entryDropdown`.
+
+```js
+assert.equal(entryDropdown, document.getElementById('entry-dropdown'));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
new file mode 100644
index 00000000000..6cbbeb5ab4a
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
@@ -0,0 +1,215 @@
+---
+id: 63b61490e633a22b4593e62f
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Following the same pattern, assign your `#add-entry` element to `addEntryButton`, your `#clear` element to `clearButton`, and your `#output` element to `output`.
+
+# --hints--
+
+You should declare a variable called `addEntryButton`.
+
+```js
+assert.isDefined(addEntryButton);
+```
+
+You should use `document.getElementById()` to get the `#add-entry` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")add-entry\1\s*\)/g);
+```
+
+You should assign the `#add-entry` element to `addEntryButton`.
+
+```js
+assert.equal(addEntryButton, document.getElementById('add-entry'));
+```
+
+You should declare a variable called `clearButton`.
+
+```js
+assert.isDefined(clearButton);
+```
+
+You should use `document.getElementById()` to get the `#clear` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")clear\1\s*\)/g);
+```
+
+You should assign the `#clear` element to `clearButton`.
+
+```js
+assert.equal(clearButton, document.getElementById('clear'));
+```
+
+You should declare a variable called `output`.
+
+```js
+assert.isDefined(output);
+```
+
+You should use `document.getElementById()` to get the `#output` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")output\1\s*\)/g);
+```
+
+You should assign the `#output` element to `output`.
+
+```js
+assert.equal(output, document.getElementById("output"));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
new file mode 100644
index 00000000000..99c1985862c
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
@@ -0,0 +1,182 @@
+---
+id: 63b614e6a1f7fe2cef6312dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Declare an `isError` variable and set it to `false`, but use `let` so you can reassign it later.
+
+# --hints--
+
+You should declare an `isError` variable.
+
+```js
+assert.isDefined(isError);
+```
+
+Your `isError` variable should be set to `false`.
+
+```js
+assert.isFalse(isError);
+```
+
+You should use `let` to declare your `isError` variable.
+
+```js
+assert.match(code, /let\s+isError\s*=\s*false/g);
+```
+
+# --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
+--fcc-editable-region--
+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');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
new file mode 100644
index 00000000000..436b65b80d6
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
@@ -0,0 +1,192 @@
+---
+id: 63b6152e6aff882db819fc1e
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Even though you set an `input` element to be a number, JavaScript receives a string value. You need to write a function to clean the string value and ensure you have a number.
+
+Start by declaring a `cleanInputString` function that takes a `str` argument.
+
+# --hints--
+
+You should declare a `cleanInputString` variable.
+
+```js
+assert.isDefined(cleanInputString);
+```
+
+Your `cleanInputString` variable should be a function.
+
+```js
+assert.isFunction(cleanInputString);
+```
+
+Your `cleanInputString` function should take a `str` argument.
+
+```js
+assert.match(cleanInputString?.toString(), /\(str\)/);
+```
+
+`cleanInputString` should be an empty function.
+
+```js
+assert.match(cleanInputString?.toString(), /\{\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;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
new file mode 100644
index 00000000000..b7de4018e24
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
@@ -0,0 +1,182 @@
+---
+id: 63b61584def8fa2ebcc259e0
+title: Step 19
+challengeType: 0
+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.
+
+Declare a `strArray` variable and assign it that split value.
+
+# --hints--
+
+Your `cleanInputString` function should declare a `strArray` variable.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=/);
+```
+
+Your `strArray` variable should be assigned the value of `str.split('')`.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=\s*str\.split\(\s*('|")\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
new file mode 100644
index 00000000000..a0eaf81fd4e
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
@@ -0,0 +1,181 @@
+---
+id: 63bf43be3f969d24d4ed233c
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Declare a `cleanStrArray` variable and assign it an empty array. You will use this to store your valid number characters.
+
+# --hints--
+
+Your `cleanInputString` should declare a variable called `cleanStrArray`.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*/g);
+```
+
+Your `cleanStrArray` variable should be assigned an empty array.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*=\s*\[\s*\]/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
new file mode 100644
index 00000000000..db275c224c1
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
@@ -0,0 +1,195 @@
+---
+id: 63bf446945d34d25e6db6e4f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Use a `for` loop to iterate through each character in your `strArray` array.
+
+# --hints--
+
+Your `cleanInputString` function should have a `for` loop.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(/g);
+```
+
+Your `for` loop should initialize a variable called `i` to `0`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;/g);
+```
+
+Your `for` loop should have a condition that checks if `i` is less than the length of `strArray`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;/g);
+```
+
+Your `for` loop should increment `i` by `1` each time it runs. Use the increment operator for this.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
new file mode 100644
index 00000000000..a432c6687d5
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
@@ -0,0 +1,200 @@
+---
+id: 63bf45ce0dc8d4270760c6d0
+title: Step 22
+challengeType: 0
+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`.
+
+To check your character, see if the array `["+", "-", " "]` includes the character – you can use the `.includes()` method on the array to do this.
+
+# --hints--
+
+Your `for` loop should have an `if` statement.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(/);
+```
+
+Your `for` loop should use `!["+", "-", " "].includes()`.
+
+```js
+// the loop protection injects code so we have to look at the raw code directly
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(/);
+```
+
+Your `for` loop should see if `strArray[i]` is found in `["+", "-", " "]`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{/);
+```
+
+Your `for` loop should `push` `strArray[i]` to `cleanStrArray`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{\s*cleanStrArray\.push\(\s*strArray\[i\]\s*\)\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
new file mode 100644
index 00000000000..f74ff636c5b
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
@@ -0,0 +1,213 @@
+---
+id: 63bf461011fca327d3b60fa8
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+While looping through the string works, creating a new array is inefficient for memory and runtime performance. Instead, you can use Regular Expressions (referred to as "regex") to match specific characters.
+
+Regex in JavaScript is indicated by a pattern wrapped in forward slashes – for example:
+
+```js
+const regex = /hello/;
+```
+
+Remove your existing code within the `cleanInputString` function. Declare a `regex` variable and assign it the value from the example above.
+
+# --hints--
+
+You should remove the `cleanStrArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /cleanStrArray/);
+```
+
+You should remove the `strArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /strArray/);
+```
+
+You should not have a `for` loop.
+
+```js
+assert.notMatch(cleanInputString.toString(), /for/);
+```
+
+You should declare a `regex` variable.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to the regular expression `/hello/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/hello\//);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+ if (!["+", "-", " "].includes(strArray[i])) {
+ cleanStrArray.push(strArray[i])
+ }
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
new file mode 100644
index 00000000000..0f781eb61cf
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
@@ -0,0 +1,176 @@
+---
+id: 63bf47fd40599f29827f484d
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+The pattern you currently have will match the exact text `hello`, which is not what you want to match. You want to look for `+`, `-`, or spaces. Replace the pattern in your `regex` variable with `\+-` to look for plus and minus characters.
+
+Note that you need to use the `\` to escape the `+`, because a `+` has a special meaning in regular expressions.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /hello/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
new file mode 100644
index 00000000000..25d6d2447fb
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
@@ -0,0 +1,174 @@
+---
+id: 63bf492b6dfb292a79f0e675
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+In regex, shorthand character classes allow you to match specific characters without having to write those characters in your pattern. Shorthand character classes are preceded with a backslash (`\`). The character class `\s` will match any whitespace character. Add this to your regex pattern.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-\s/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
new file mode 100644
index 00000000000..3b18f0aac60
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
@@ -0,0 +1,188 @@
+---
+id: 63bf4bfe9de3852be51c8f86
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Your current pattern won't work just yet. `/+-\s/` looks for `+`, `-`, and a space *in order*. This would match `+- hello` but would not match `+hello`.
+
+To tell the pattern to match each of these characters individually, you need to turn them into a character class. This is done by wrapping the characters you want to match in brackets. For example, this pattern will match the characters `h`, `e`, `l`, or `o`:
+
+```js
+const regex = /[helo]/;
+```
+
+Turn your `+-\s` pattern into a character class. Note that you no longer need to escape the `+` character, because you are using a character class.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `[+-\s]`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\\?\+-\\s\]\//)
+```
+
+You should not escape the `+` character in your regular expression.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-\s/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
new file mode 100644
index 00000000000..30baf30ed58
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
@@ -0,0 +1,180 @@
+---
+id: 63bf4d351e06432ce9bf3627
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Regex can also take specific flags to alter the pattern matching behavior. Flags are added after the closing `/`. The `g` flag, which stands for "global", will tell the pattern to continue looking after it has found a match. Here is an example:
+
+```js
+const helloRegex = /hello/g;
+```
+
+Add the `g` flag to your regex pattern.
+
+# --hints--
+
+You should add the `g` flag to your `regex` value.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\s\]\/g/);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
new file mode 100644
index 00000000000..4b35b49f7b9
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
@@ -0,0 +1,199 @@
+---
+id: 63bf511b85b6082e54dc1573
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Strings have a `.replace()` method which allows you to replace characters in the string with another string. `.replace` takes two arguments. The first is the character sequence to replace – this can either be a string or a regex pattern. The second is the string to replace that sequence with. For example, this would replace all instances of `l` with `1`:
+
+```js
+"hello".replace(/l/g, "1");
+```
+
+Use your `regex` to replace all instances of `+`, `-`, and a space in `str` with an empty string. Return this value.
+
+# --hints--
+
+Your `cleanInputString` should call the `replace` method of `str`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(/);
+```
+
+You should pass `regex` as the first argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*/);
+```
+
+You should pass `""` as the second argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*,\s*("|')\1\s*\)/);
+```
+
+Your `cleanInputString` function should directly return the result of your `replace` method.
+
+```js
+assert.match(cleanInputString.toString(), /return\s*str\.replace\(\s*regex\s*,\s*("|')\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
new file mode 100644
index 00000000000..b6eef00a30b
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
@@ -0,0 +1,191 @@
+---
+id: 63bf5230bccd1c2f5c13e1ce
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+In HTML, number inputs allow for exponential notation (such as `1e10`). You need to filter those out.
+
+Start by creating a function called `isInvalidInput` – it should take a single `str` parameter.
+
+# --hints--
+
+You should declare an `isInvalidInput` variable.
+
+```js
+assert.isDefined(isInvalidInput)
+```
+
+`isInvalidInput` should be a function.
+
+```js
+assert.isFunction(isInvalidInput)
+```
+
+`isInvalidInput` should take a single `str` parameter.
+
+```js
+assert.match(isInvalidInput?.toString(), /\(\s*str\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, '');
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
new file mode 100644
index 00000000000..778a809571e
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
@@ -0,0 +1,185 @@
+---
+id: 63bf598a4c807930a13a1a27
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Declare a `regex` variable, and assign it a regex that matches the character `e`.
+
+# --hints--
+
+Your `isInvalidInput` function should have a `regex` variable.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to `/e/`.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
new file mode 100644
index 00000000000..2bf1aa0f9a3
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
@@ -0,0 +1,179 @@
+---
+id: 63bf5a518d54f63181ab639a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `e` in a number input can also be an uppercase `E`. Regex has a flag for this, however – the `i` flag, which stands for "insensitive". This flag makes your pattern case-insensitive. Add the `i` flag to your regex pattern.
+
+# --hints--
+
+Your `regex` value should have the `i` flag.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\/i/);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
new file mode 100644
index 00000000000..19873a84492
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
@@ -0,0 +1,187 @@
+---
+id: 63bf5a92fd148d3264d5322b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Number inputs only allow the `e` to occur between two digits. To match any number, you can use the character class `[0-9]`. This will match any digit between `0` and `9`.
+
+Add this character class before and after `e` in your pattern.
+
+# --hints--
+
+You should add the `[0-9]` character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e/);
+```
+
+You should add the `[0-9]` character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e\[0-9\]\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
new file mode 100644
index 00000000000..75477ddd763
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5adfe2981b332eb007b6
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The `+` modifier in a regex allows you to match a pattern that occurs one or more times. To match your digit pattern one or more times, add a plus after each of the digit character classes. For example: `[0-9]+`.
+
+# --hints--
+
+You should add the `+` modifier to the character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e/);
+```
+
+You should add the `+` modifier to the character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e\[0-9\]\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]e[0-9]/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
new file mode 100644
index 00000000000..95686b3c3a0
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5bcfebff0734593fad19
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+There is a shorthand character class to match any digit: `\d`. Replace your `[0-9]` character classes with this shorthand.
+
+# --hints--
+
+You should replace the `[0-9]` character class before `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e/);
+```
+
+You should replace the `[0-9]` character class after `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e\\d\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]+e[0-9]+/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
new file mode 100644
index 00000000000..f6f61282ce9
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5c438f523a359769106c
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Strings have a `.match()` method, which takes a regex argument. `.match()` will return an array of match results – containing either the first match, or all matches if the global flag is used.
+
+Return the result of calling the `.match()` method on `str` and passing your `regex` variable as the argument. You'll use this match result later on.
+
+# --hints--
+
+Your `isInvalidInput` function should call the `.match()` method on `str`.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(/);
+```
+
+You should pass `regex` as the argument to the `.match()` method.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(\s*regex\s*\)/);
+```
+
+Your `isInvalidInput` function should directly return the result of the `.match()` call.
+
+```js
+assert.match(isInvalidInput.toString(), /return\s+str\.match\(\s*regex\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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
new file mode 100644
index 00000000000..228f3503303
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5cf03b50bf36cfbe94ea
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Your next step is to allow users to add entries to the calorie counter. Declare an empty function `addEntry`. This function should not take any parameters.
+
+# --hints--
+
+You should declare an `addEntry` variable.
+
+```js
+assert.isDefined(addEntry);
+```
+
+Your `addEntry` variable should be a function.
+
+```js
+assert.isFunction(addEntry);
+```
+
+Your `addEntry` function should not take any parameters.
+
+```js
+assert.match(addEntry?.toString(), /\(\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--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
new file mode 100644
index 00000000000..1bc417c8bbb
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
@@ -0,0 +1,198 @@
+---
+id: 63c1dfbd56c71e278800010c
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+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.
+
+# --hints--
+
+Your `addEntry` function should have a `targetId` variable.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=/);
+```
+
+Your `targetId` variable should start with the string `#`.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1/);
+```
+
+You should use concatenation to add `entryDropdown.value` after your `#` string.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1\s*\+\s*entryDropdown\.value/);
+```
+
+# --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() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
new file mode 100644
index 00000000000..413b5f76d84
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e0af28078f2dfad9eb3e
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Now you need to target the `.input-container` element within the element that has your `targetId`. Declare a new `targetInputContainer` variable, and assign it the value of `document.querySelector()`. Use concatenation to separate `targetId` and `'.input-container'` with a space, and pass that string to `querySelector()`.
+
+# --hints--
+
+Your `addEntry` function should have a `targetInputContainer` variable.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=/);
+```
+
+Your `targetInputContainer` variable should be set to `document.querySelector()`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(/);
+```
+
+You should pass `targetId` to your `querySelector()` method.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*/);
+```
+
+You should concatenate `' .input-container'` to `targetId`. Remember to include the space at the beginning of `.input-container`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*\s*\+\s*('|")\s\.input-container\1\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 targetId = '#' + entryDropdown.value;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
new file mode 100644
index 00000000000..06e5ac50cec
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e1965a898d302e0af4e3
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+JavaScript has a feature called template literals , which allow you to interpolate variables directly within a string. Template literals are denoted with backticks ` `` `, as opposed to single or double quotes. Variables can be passed in to a template literal by surrounding the variable with `${}` – the value of the variable will be inserted into the string.
+
+For example:
+
+```js
+const name = "Naomi";
+const templateLiteral = `Hello, my name is ${name}~!`;
+console.log(templateLiteral);
+```
+
+The console will show the string "Hello, my name is Naomi~!".
+
+Replace your concatenated string in the `querySelector` with a template literal – be sure to keep the space between your `targetId` variable and `.input-container`.
+
+# --hints--
+
+You should use a template literal in your `querySelector` method.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`.*`\)/);
+```
+
+Your template literal should have the value `{targetId} .input-container`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`\$\{targetId\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(targetId + ' .input-container');
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
new file mode 100644
index 00000000000..6aeab26c100
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
@@ -0,0 +1,197 @@
+---
+id: 63c1e5b4b3c8a031def3bd65
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Thanks to template literals, you actually don't need the `targetId` variable at all. Remove that variable, and update your template literal to replace `targetId` with `entryDropdown.value` – remember to add `#` before that, in the string.
+
+# --hints--
+
+You should remove the `targetId` variable.
+
+```js
+assert.notMatch(addEntry.toString(), /targetId\s*=/);
+```
+
+You should replace the `targetId` reference in your template literal with `entryDropdown.value`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#?\$\{entryDropdown\.value\}\s\.input-container`\s*\)/);
+```
+
+You should add `#` at the beginning of your template literal.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#\$\{entryDropdown\.value\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(`${targetId} .input-container`);
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md b/curriculum/challenges/espanol/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/espanol/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/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md b/curriculum/challenges/espanol/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/espanol/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
+
+
+
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll();
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
new file mode 100644
index 00000000000..a7c1e1d3e7b
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
@@ -0,0 +1,192 @@
+---
+id: 63c216da562fbb3957b9cb2c
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Now you need to build your dynamic HTML string to add to the webpage. Declare a new `HTMLString` variable, and assign it an empty template literal string.
+
+# --hints--
+
+Your `addEntry` function should have an `HTMLString` variable.
+
+```js
+assert.match(addEntry.toString(), /HTMLString\s*=/)
+```
+
+Your `HTMLString` should be an empty template literal.
+
+```js
+assert.match(code, /HTMLString\s*=\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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
new file mode 100644
index 00000000000..e8ced7f3436
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
@@ -0,0 +1,198 @@
+---
+id: 63c2171c1e5b6e3aa51768d0
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start your `HTMLString` with a new line, then create a `label` element. Give that element the text `Entry # Name`, using your template literal syntax to replace `#` with the value of `entryNumber`.
+
+# --hints--
+
+Your `HTMLString` variable should start with a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n/);
+```
+
+You should add a `label` element on the new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*.*<\/label>/);
+```
+
+Your `label` element should have the text `Entry ${entryNumber} Name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = ``;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
new file mode 100644
index 00000000000..f78a3d0252c
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
@@ -0,0 +1,193 @@
+---
+id: 63c21774193de43bbc6a769f
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give your `label` element a `for` attribute with the value `X-#-name`, where `X` is the `value` of the `entryDropdown` element and `#` is the value of `entryNumber`. Remember that HTML attributes should be wrapped in double quotes.
+
+# --hints--
+
+Your `label` element should have a `for` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*/)
+```
+
+Your `label` element should have the same text as before.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
new file mode 100644
index 00000000000..42ee9b19109
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
@@ -0,0 +1,217 @@
+---
+id: 63c217ccd939053ce4fa16d6
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+After your `label` element, and on a new line in your template string, create an `input` element. Give it a `type` attribute set to `text`, a `placeholder` attribute set to `Name`, and an `id` attribute that matches the `for` attribute of your `label` element.
+
+# --hints--
+
+You should not modify your `label` element.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+You should add an `input` element on a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*/)[0];
+assert.include(inputAttributes, 'placeholder="Name"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(//)[0];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-name"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
new file mode 100644
index 00000000000..cfeec0927c4
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
@@ -0,0 +1,228 @@
+---
+id: 63c21839f56eaf3ef4e027c4
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create another `label` element (on a new line) at the end of your `HTMLString`. This `label` should have the text `Entry # Calories`, using your template literal syntax to replace `#` with the value of `entryNumber`, and the `for` attribute set to `X-#-calories`, where `X` is the `value` of `entryDropdown` and `#` is the value of `entryNumber`.
+
+# --hints--
+
+You should have two `label` elements in your `HTMLString`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.equal(HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, //)
+```
+
+Your new `label` element should have the text `Entry ${entryNumber} Calories`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const label = HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, /Entry\s\$\{entryNumber\}\sCalories<\/label>/);
+```
+
+You should not modify your existing elements.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.match(HTMLstring, /`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*Entry\s\$\{entryNumber\}\sCalories<\/label>/)
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ ]*>/g)[1];
+assert.include(inputAttributes, 'placeholder="Calories"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-calories"');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'min="0"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
new file mode 100644
index 00000000000..36835a69413
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
@@ -0,0 +1,208 @@
+---
+id: 63c218c028c56a411b2a379a
+title: Step 49
+challengeType: 0
+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.
+
+# --hints--
+
+Your `addEntry` function should access the `innerHTML` property of `targetInputContainer`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML/);
+```
+
+You should use the `+=` operator on `targetInputContainer.innerHTML`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=/);
+```
+
+You should add your `HTMLString` to the `innerHTML` of the `targetInputContainer` element.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=\s*HTMLString/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ function reference ) directly.
+
+# --hints--
+
+You should call the `.addEventListener()` method of the `addEntryButton`.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(/);
+```
+
+You should pass `click` as the first argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*/);
+```
+
+You should pass `addEntry` as the second argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*,\s*addEntry\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ truthy or falsy . A value is truthy if it evaluates to `true` when converted to a Boolean. A value is falsy if it evaluates to `false` when converted to a Boolean. `null` is an example of a falsy value.
+
+You need to check if `invalidInputMatch` is truthy – you can do this by passing the variable directly to your `if` condition (without a comparison operator). Here's an example of checking the truthiness of `helloWorld`.
+
+```js
+if (helloWorld) {
+
+}
+```
+
+Add an `if` statement that checks if `invalidInputMatch` is truthy.
+
+# --hints--
+
+You should add an `if` statement to your `getCaloriesFromInputs` function.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(/);
+```
+
+You should check the truthiness of `invalidInputMatch` in your `if` condition.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(\s*invalidInputMatch\s*\)/);
+```
+
+Your `if` statement should be inside your `for` loop.
+
+```js
+assert.isBelow(getCaloriesFromInputs.toString().indexOf("for"), getCaloriesFromInputs.toString().indexOf("if"));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ /);
+```
+
+Your `span` should not have any text.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{remainingCalories\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{Math\.abs\(remainingCalories\)\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${remainingCalories} Calorie ${surplusOrDeficit}
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
new file mode 100644
index 00000000000..d341d5e62bf
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
@@ -0,0 +1,262 @@
+---
+id: 63c9e7d5b21eee2776ecc226
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+After your `span` element, add an `hr` element to create a horizontal line.
+
+To keep your code clean and readable, you should add this on a new line in the template literal.
+
+# --hints--
+
+You should add an `hr` element to your `output.innerHTML` string.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `hr` element should come after your `span` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
new file mode 100644
index 00000000000..ba1da012290
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
@@ -0,0 +1,270 @@
+---
+id: 63c9e84c9fe8ca28c4101189
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Now create a `p` element with the text `budgetCalories Calories Budgeted`, using interpolation to replace `budgetCalories` with the appropriate variable.
+
+This should come after your `hr` element.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `p` element should come after your `hr` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ /g).length, 2);
+```
+
+Your second `p` element should be on a new line.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /\n\s*
\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\n\s*
\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
new file mode 100644
index 00000000000..f57827b6348
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
@@ -0,0 +1,264 @@
+---
+id: 63c9e94e9df7d72aed1c24bd
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Finally, you need to make the `#output` element visible so the user can see your text. Your `output` variable is an Element, which has a `classList` property. This property has a `.remove()` method, which accepts a string representing the class to remove from the element.
+
+Use the `.remove()` method of the `output` variable's `classList` property to remove the `hide` class. Don't forget to place the word `hide` inside quotes.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList/);
+```
+
+You should call the `.remove()` method of the `classList` property.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(/);
+```
+
+You should pass `hide` as the argument to the `.remove()` method.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
new file mode 100644
index 00000000000..18e5f04d27a
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea23dbadbf2c2764e3f5
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+If you click on your `Calculate Remaining Calories` button, you'll see that nothing happens. You still need to mount the event listener.
+
+Add an event listener to your `calorieCounter` element. The event type should be `submit`, and the callback function should be `calculateCalories`.
+
+# --hints--
+
+You should use the `.addEventListener()` method of your `calorieCounter` element.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(/);
+```
+
+You should pass `submit` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*/);
+```
+
+You should pass `calculateCalories` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*,\s*calculateCalories\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
new file mode 100644
index 00000000000..6c09fd6f149
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea9b16430f2d54522464
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Your final feature to add is the ability for a user to clear the form. Start by declaring an empty function called `clearForm` – it should not take any arguments.
+
+# --hints--
+
+You should declare a `clearForm` variable.
+
+```js
+assert.isDefined(clearForm);
+```
+
+Your `clearForm` variable should be a function.
+
+```js
+assert.isFunction(clearForm);
+```
+
+Your `clearForm` function should not take any arguments.
+
+```js
+assert.match(clearForm?.toString(), /\(\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
new file mode 100644
index 00000000000..7810095dcce
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
@@ -0,0 +1,267 @@
+---
+id: 63c9eb09bcfaa72e3da820a1
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+You need to get all of the input containers. Declare an `inputContainers` variable, and assign it to the value of querying the document for all elements with the class `input-container`.
+
+# --hints--
+
+You should declare an `inputContainers` variable in your `clearForm` function.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=/);
+```
+
+You should use the `querySelectorAll` method to get all of the elements with the class `input-container`.
+
+```js
+assert.match(clearForm.toString(), /document\.querySelectorAll\(\s*('|")\.input-container\1\s*\)/);
+```
+
+You should assign the value of the `querySelectorAll` method to the `inputContainers` variable.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=\s*document\.querySelectorAll\(\s*('|")\.input-container\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
new file mode 100644
index 00000000000..73d20bba696
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
@@ -0,0 +1,263 @@
+---
+id: 63c9eb4a5d68f12f32d9b440
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Remember that `document.querySelectorAll` returns a `NodeList`, which is array-like but is not an array. However, the `Array` object has a `.from()` method that accepts an array-like and returns an array. This is helpful when you want access to more robust array methods, which you will learn about in a future project.
+
+Wrap your `inputContainers` query selector in `Array.from()`. Do this on the same line as your declaration.
+
+# --hints--
+
+You should wrap your `querySelectorAll` in `Array.from()`.
+
+```js
+assert.match(clearForm, /Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\s*\)/);
+```
+
+You should assign the result of `Array.from()` to your `inputContainers` variable.
+
+```js
+assert.match(clearForm, /inputContainers\s*=\s*Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = document.querySelectorAll('.input-container');
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
new file mode 100644
index 00000000000..f6655dc9175
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
@@ -0,0 +1,276 @@
+---
+id: 63c9ebb7b12bca3025b0a935
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+It is time for another loop. Use a `for` loop to iterate through the `inputContainers` array.
+
+Inside the loop, set the `innerHTML` property of the element at the current index to an empty string. This will clear all of the contents of that input container.
+
+# --hints--
+
+Your `clearForm` function should have a `for` loop.
+
+```js
+// loop protect injects stuff, so let's look at the raw code again
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(/);
+```
+
+Your `for` loop should iterate through the `inputContainers` array. Remember to use `i` as your iterator.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*inputContainers\.length\s*;\s*i\s*\+\+\s*\)/);
+```
+
+Your `for` loop should set the `innerHTML` property of `inputContainers[i]` to an empty string.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const forLoop = clearForm.split("for")[1];
+assert.match(forLoop, /inputContainers\[\s*i\s*\]\s*\.innerHTML\s*=\s*(`|'|")\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
new file mode 100644
index 00000000000..5ef4abce954
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
@@ -0,0 +1,275 @@
+---
+id: 63c9ec044acedf312c4974ff
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+After your loop completes, you need to clear the `budgetNumberInput`. Set the `value` property of `budgetNumberInput` to an empty string.
+
+# --hints--
+
+Your `clearForm` function should access the `value` property of the `budgetNumberInput` element.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value/);
+```
+
+Your `clearForm` function should set the `value` property of the `budgetNumberInput` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value\s*=\s*('|"|`)\1/);
+```
+
+You should modify the `budgetNumberInput` after your `for` loop.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const afterLoop = clearForm.split("}")[1];
+assert.match(afterLoop, /budgetNumberInput\.value/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
new file mode 100644
index 00000000000..3dab9bed7e5
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
@@ -0,0 +1,276 @@
+---
+id: 63c9f24afbc9cf324dcaa9a4
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+You also need to clear the `output` element's text. You can do this by setting the `innerText` property to an empty string.
+
+The difference between `innerText` and `innerHTML` is that `innerText` will not render HTML elements, but will display the tags and content as raw text.
+
+# --hints--
+
+Your `clearForm` function should access the `innerText` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText/);
+```
+
+Your `clearForm` function should set the `innerText` property of the `output` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText\s*=\s*('|"|`)\1/);
+```
+
+You should modify `output` after modifying `budgetNumberInput`.
+
+```js
+assert.isAbove(clearForm.toString().indexOf('output'), clearForm.toString().indexOf('budgetNumberInput'));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
new file mode 100644
index 00000000000..b2e9d536a15
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
@@ -0,0 +1,277 @@
+---
+id: 63c9f28bda3e3f336e21b6b4
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+To finish off this function, you need to restore the `hide` class to the `output` element. The `classList` property has an `.add()` method which is the opposite of the `.remove()` method. It accepts a string representing the class to add to the element.
+
+Add the `hide` class to your `output`.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList/);
+```
+
+You should call the `.add()` method on the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add/);
+```
+
+You should pass `hide` as the argument to the `.add()` method.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
new file mode 100644
index 00000000000..d29b3f2ac72
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
@@ -0,0 +1,520 @@
+---
+id: 63c9f2bff625af342023512c
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+To complete this project, add an event listener to the `clearButton` button. When the button is clicked, it should call the `clearForm` function.
+
+Congratulations! Your project is complete.
+
+# --hints--
+
+You should add an event listener to the `clearButton` button.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(/);
+```
+
+You should pass `click` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*/);
+```
+
+You should pass `clearForm` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*,\s*clearForm\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener('click', addEntry);
+calorieCounter.addEventListener('submit', calculateCalories);
+clearButton.addEventListener('click', clearForm);
+```
diff --git a/curriculum/challenges/espanol/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md b/curriculum/challenges/espanol/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md
index 3565c5b144d..6c7262cb089 100644
--- a/curriculum/challenges/espanol/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md
+++ b/curriculum/challenges/espanol/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md
@@ -17,7 +17,7 @@ El sitio web constará de una página de índice principal que tendrá enlaces a
1. Deberías ver un elemento `h1` que tiene el texto `Creamy Chocolate Fudge`.
1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
1. There should be an `h2` element with the text `Description` under the image.
-1. You should see a couple of paragraphs under `Description` that describe the recipe.
+1. Debes ver algunos párrafos debajo de,`Description` que describan la receta.
1. There should be an `h2` element with the text `Ingredients`
1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
1. Under the list of ingredients add another heading called `Steps`.
diff --git a/curriculum/challenges/espanol/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/espanol/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/espanol/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md b/curriculum/challenges/espanol/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/espanol/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md b/curriculum/challenges/espanol/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/espanol/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md b/curriculum/challenges/espanol/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/espanol/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/espanol/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md
index 4b9716079b3..7b7d3c0585f 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md
@@ -9,7 +9,7 @@ dashedName: access-multi-dimensional-arrays-with-indexes
# --description--
-Man kann sich ein mehrdimensionales Array als ein *Array von Arrays* vorstellen. When you use brackets to access your array, the first set of brackets refers to the entries in the outermost (the first level) array, and each additional pair of brackets refers to the next level of entries inside.
+Man kann sich ein mehrdimensionales Array als ein *Array von Arrays* vorstellen. Wenn du Klammern benutzt, um auf deinen Array zuzugreifen, bezieht sich das erste Klammerpaar auf Einträge im obersten Array (der ersten Ebene) und jedes weitere Paar auf die nächste Eintrag-Ebene.
**Beispiel**
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
index 91a35552758..9fefdb93c18 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
@@ -8,21 +8,28 @@ dashedName: record-collection
# --description--
-Du bekommst ein Objektliteral, das einen Teil deiner Musikalbensammlung darstellt. Jedes Album hat eine eindeutige ID-Nummer als Schlüssel und verschiedene andere Eigenschaften. Nicht alle Alben enthalten vollständige Informationen.
+You are creating a function that aids in the maintenance of a musical album collection. The collection is organized as an object that contains multiple albums which are also objects. Each album is represented in the collection with a unique `id` as the property name. Within each album object, there are various properties describing information about the album. Not all albums have complete information.
-Du beginnst mit einer Funktion `updateRecords`, die ein Objektliteral, `records`, mit der Musikalbensammlung, einer `id`, einer `prop` (wie `artist` oder `tracks`) und einem `value` nimmt. Vervollständige die Funktion mit Hilfe der folgenden Regeln, um das an die Funktion übergebene Objekt zu verändern.
+The `updateRecords` function takes 4 arguments represented by the following function parameters:
-- Deine Funktion muss immer das gesamte Objekt der Datensammlung zurückgeben.
-- Wenn `prop` nicht `tracks` ist und `value` keinen leeren String enthält, aktualisiere oder setze `prop` für dieses Album auf `value`.
-- Wenn `prop` `tracks` ist, das Album aber keine Eigenschaft `tracks` hat, erstelle ein leeres Array und füge `value` hinzu.
-- Wenn `prop` `tracks` ist und `value` keinen leeren String darstellt, füge `value` an das Ende des bestehenden Arrays `tracks` des Albums an.
-- Wenn `value` ein leerer String ist, lösche die angegebene Eigenschaft `prop` aus dem Album.
+- `records` - an object containing several individual albums
+- `id` - a number representing a specific album in the `records` object
+- `prop` - a string representing the name of the album’s property to update
+- `value` - a string containing the information used to update the album’s property
-**Hinweis:** Für die Tests wird eine Kopie des Objekts `recordCollection` verwendet.
+Complete the function using the rules below to modify the object passed to the function.
+
+- Your function must always return the entire `records` object.
+- If `value` is an empty string, delete the given `prop` property from the album.
+- If `prop` isn’t `"tracks"` and `value` isn't an empty string, assign the `value` to that album’s `prop`.
+- If `prop` is `"tracks"` and `value` isn’t an empty string, add the `value` to the end of the album’s existing `"tracks"` array.
+- If the album doesn’t have a `"tracks"` property, create a new array for the album's `"tracks"` property before adding the `value` to it.
+
+**Note:** A copy of the `recordCollection` object is used for the tests. You should not directly modify the `recordCollection` object.
# --hints--
-Nach `updateRecords(recordCollection, 5439, "artist", "ABBA")`, sollte `artist` der String `ABBA` sein
+After `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` should be the string `ABBA`
```js
assert(
@@ -31,7 +38,7 @@ assert(
);
```
-Nach `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, sollte `tracks` den String `Take a Chance on Me` als einziges und letztes Element enthalten.
+After `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` should have the string `Take a Chance on Me` as the last and only element.
```js
assert(
@@ -41,14 +48,14 @@ assert(
);
```
-Nach `updateRecords(recordCollection, 2548, "artist", "")`, sollte `artist` nicht gesetzt werden
+After `updateRecords(recordCollection, 2548, "artist", "")`, `artist` should not be set
```js
updateRecords(_recordCollection, 2548, 'artist', '');
assert(!_recordCollection[2548].hasOwnProperty('artist'));
```
-Nach `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")` sollte `tracks` den String `Addicted to Love` als letztes Element enthalten.
+After `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` should have the string `Addicted to Love` as the last element.
```js
assert(
@@ -58,7 +65,7 @@ assert(
);
```
-Nach `updateRecords(recordCollection, 2468, "tracks", "Free")` sollte `tracks` den String `1999` als erstes Element enthalten.
+After `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` should have the string `1999` as the first element.
```js
assert(
@@ -68,14 +75,14 @@ assert(
);
```
-Nach `updateRecords(recordCollection, 2548, "tracks", "")`, sollte `tracks` nicht gesetzt werden
+After `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` should not be set
```js
updateRecords(_recordCollection, 2548, 'tracks', '');
assert(!_recordCollection[2548].hasOwnProperty('tracks'));
```
-Nach `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, sollte `albumTitle` der String `Riptide` sein
+After `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` should be the string `Riptide`
```js
assert(
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md
index b6a0692f0dd..3866f16e4e4 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md
@@ -11,7 +11,7 @@ dashedName: using-objects-for-lookups
Objekte kann man sich als Schlüssel/Wert-Speicher vorstellen, wie ein Wörterbuch. Wenn du tabellarische Daten hast, kannst du ein Objekt zum Nachschlagen von Werten verwenden, anstatt eine `switch`-Anweisung oder eine `if/else`-Kette. Das ist besonders nützlich, wenn du weißt, dass deine Eingabedaten auf einen bestimmten Bereich beschränkt sind.
-Here is an example of an article object:
+Hier ist ein Beispiel eines Artikelobjekts:
```js
const article = {
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md
index 3de98663249..86549f09be4 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md
@@ -11,13 +11,13 @@ dashedName: word-blanks
Du erhältst Sätze mit einigen fehlenden Wörtern wie Nomen, Verben, Adjektiven und Adverbien. Anschließend ergänzt du die fehlenden Teile mit Wörtern deiner Wahl und so, dass der vollständige Satz einen Sinn ergibt.
-Consider this sentence:
+Betrachte diesen Satz:
```md
It was really ____, and we ____ ourselves ____.
```
-This sentence has three missing pieces- an adjective, a verb and an adverb, and we can add words of our choice to complete it. We can then assign the completed sentence to a variable as follows:
+In diesem Satz fehlen drei Teile - ein Adjektiv, ein Verb und ein Adverb - und wir können Wörter unserer Wahl hinzufügen, um ihn zu vervollständigen. Anschließend können wir den vervollständigten Satz wie folgt einer Variable zuordnen:
```js
const sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselves " + "silly" + ".";
@@ -25,21 +25,21 @@ const sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselve
# --instructions--
-In this challenge, we provide you with a noun, a verb, an adjective and an adverb. You need to form a complete sentence using words of your choice, along with the words we provide.
+Bei dieser Aufgabe stellen wir dir ein Nomen, ein Verb, ein Adjektiv sowie ein Adverb zur Verfügung. Du musst einen vollständigen Satz mit Wörtern deiner Wahl und den von uns vorgegebenen Wörtern bilden.
-You will need to use the string concatenation operator `+` to build a new string, using the provided variables: `myNoun`, `myAdjective`, `myVerb`, and `myAdverb`. You will then assign the formed string to the `wordBlanks` variable. You should not change the words assigned to the variables.
+Du musst den String-Verkettungsoperator `+` verwenden, um einen neuen String zu erstellen, indem du die angegebenen Variablen verwendest: `myNoun`, `myAdjective`, `myVerb` und `myAdverb`. Anschließend musst du den erstellten String der Variable `wordBlanks` zuweisen. Du solltest die Wörter, die den Variablen zugeordnet sind, nicht ändern.
-You will also need to account for spaces in your string, so that the final sentence has spaces between all the words. The result should be a complete sentence.
+You will also need to account for spaces in your string, so that the final sentence has spaces between all the words. Das Ergebnis sollte einen vollständigen Satz darstellen.
# --hints--
-`wordBlanks` should be a string.
+`wordBlanks` sollte ein String sein.
```js
assert(typeof wordBlanks === 'string');
```
-You should not change the values assigned to `myNoun`, `myVerb`, `myAdjective` or `myAdverb`.
+Du solltest die Werte von `myNoun`, `myVerb`, `myAdjective` oder `myAdverb` nicht verändern.
```js
assert(
@@ -50,7 +50,7 @@ assert(
);
```
-You should not directly use the values `dog`, `ran`, `big`, or `quickly` to create `wordBlanks`.
+Du solltest die Werte `dog`, `ran`, `big` oder `quickly` nicht direkt verwenden, um `wordBlanks` zu erstellen.
```js
const newCode = removeAssignments(code);
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md
index 414ac5b85a9..d89652f4d61 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md
@@ -22,7 +22,7 @@ console.log(howMany("string", null, [1, 2, 3], { }));
Die Konsole würde die Strings `You have passed 3 arguments.` und `You have passed 4 arguments.` anzeigen.
-The rest parameter eliminates the need to use the `arguments` object and allows us to use array methods on the array of parameters passed to the function `howMany`.
+Mit dem Rest-Parameter entfällt die Notwendigkeit, das `arguments`-Objekt zu verwenden. Er erlaubt es uns, Array-Methoden beim Array der Parameter zu nutzen, die an die Funktion `howMany` übergeben wurden.
# --instructions--
diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
index 64b97343ea3..f166fb5022d 100644
--- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
+++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
@@ -8,11 +8,11 @@ dashedName: add-attributes-to-the-circle-elements
# --description--
-The last challenge created the `circle` elements for each point in the `dataset`, and appended them to the SVG. Aber D3 braucht noch mehr Informationen über die Position und Größe jedes `circle`, um sie korrekt anzuzeigen.
+Die letzte Aufgabe hat die `circle`-Elemente für jeden Punkt im `dataset` erstellt und diese zur SVG hinzugefügt. Aber D3 braucht noch mehr Informationen über die Position und Größe jedes `circle`, um sie korrekt anzuzeigen.
-Ein `circle` in SVG hat drei Hauptattribute. Die `cx` und `cy` Attribute sind die Koordinaten. They tell D3 where to position the *center* of the shape on the SVG. Der Radius (`r`-Attribute) gibt die Größe des `circle`-Elements an.
+Ein `circle` in SVG hat drei Hauptattribute. Die `cx` und `cy` Attribute sind die Koordinaten. Sie beschreiben D3, wo das *center* der Form auf der SVG platziert werden sollen. Der Radius (`r`-Attribute) gibt die Größe des `circle`-Elements an.
-Just like the `rect` `y` coordinate, the `cy` attribute for a `circle` is measured from the top of the SVG, not from the bottom.
+Genau wie die `rect` `y`-Koordinate wird das `cy`-Attribut eines `circle`-Elements bei der SVG von oben gemessen und nicht von unten.
Alle drei Attribute können mit einer Callback-Funktion ihre Werte dynamisch setzen. Denke daran, dass alle Methoden nach `data(dataset)` einmal pro Element in `dataset` ausgeführt werden. Der `d`-Parameter in der Callback-Funktion bezieht sich auf das aktuelle Element in `dataset`, welches ein Array für jeden Punkt ist. Du verwendest Klammern, wie `d[0]` um auf die Werte in diesem Array zugreifen zu können.
diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
index 1a965da5403..59722b0888b 100644
--- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
+++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
@@ -16,7 +16,7 @@ D3 hat zwei Methoden, `axisLeft()` und `axisBottom()`, um jeweils die y-und x-Ac
const xAxis = d3.axisBottom(xScale);
```
-The next step is to render the axis on the SVG. Dafür kannst du eine allgemeine SVG-Komponente, das `g` Element, verwenden. Das `g` steht für Gruppe. Anders als `rect`, `circle`, und `text`, ist eine Achse nur eine geradlinige Linie, wenn sie gerendert wird. Da sie eine einfache Form ist, funktioniert `g`. The last step is to apply a `transform` attribute to position the axis on the SVG in the right place. Otherwise, the line would render along the border of the SVG and wouldn't be visible. SVG unterstützt verschiedene Arten von `transforms`, aber die Positionierung einer Achse benötigt `translate`. Wenn es auf das `g`-Element angewandt wird, wird die gesamte Gruppe um die angegebenen Beträge nach oben und unten verschoben. Hier ist ein Beispiel:
+Der nächste Schritt besteht darin, die Achse auf dem SVG zu rendern. Dafür kannst du eine allgemeine SVG-Komponente, das `g` Element, verwenden. Das `g` steht für Gruppe. Anders als `rect`, `circle`, und `text`, ist eine Achse nur eine geradlinige Linie, wenn sie gerendert wird. Da sie eine einfache Form ist, funktioniert `g`. Der letzte Schritt besteht darin, ein `transform`-Attribut anzuwenden, um die Achse korrekt auf dem SVG zu positionieren. Andernfalls würde die Linie entlang der SVG-Grenze rendern und wäre nicht sichtbar. SVG unterstützt verschiedene Arten von `transforms`, aber die Positionierung einer Achse benötigt `translate`. Wenn es auf das `g`-Element angewandt wird, wird die gesamte Gruppe um die angegebenen Beträge nach oben und unten verschoben. Hier ist ein Beispiel:
```js
const xAxis = d3.axisBottom(xScale);
@@ -26,7 +26,7 @@ svg.append("g")
.call(xAxis);
```
-The above code places the x-axis at the bottom of the SVG. Dann wird es als Argument an die `call()`-Methode übergeben. Die y-Achse funktioniert ähnlich, außer dass das `translate` Argument in der Form `(x, 0)` ist. Da `translate` ein String in der oben gennanten `attr()`- Methode ist, kannst du die Verkettung verwenden, um variable Werte für die Argumente einzuschließen.
+Der obige Code platziert die x-Achse am unteren Rand des SVG. Dann wird es als Argument an die `call()`-Methode übergeben. Die y-Achse funktioniert ähnlich, außer dass das `translate` Argument in der Form `(x, 0)` ist. Da `translate` ein String in der oben gennanten `attr()`- Methode ist, kannst du die Verkettung verwenden, um variable Werte für die Argumente einzuschließen.
# --instructions--
diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md
index a9536e70c21..d13505ae42f 100644
--- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md
+++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md
@@ -36,7 +36,7 @@ Mit D3 kannst du mithilfe von Punkten mehrere Methoden „verketten“, um versc
# --instructions--
-Verwende die `select`-Methode, um das `body`-Tag im Dokument auszuwählen. Then `append` an `h1` tag to it, and add the text `Learning D3` into the `h1` element.
+Verwende die `select`-Methode, um das `body`-Tag im Dokument auszuwählen. Füge anschließend mithilfe von `append` einen `h1`-Tag hinzu und gebe diesem `h1`-Element den Text `Learning D3`.
# --hints--
diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
index edfa484a537..909daece2d6 100644
--- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
+++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
@@ -10,7 +10,7 @@ dashedName: add-labels-to-d3-elements
D3 lässt dich Grafikelemente, wie z. B. Balken benennen, indem du das SVG `text`-Element verwendest.
-Like the `rect` element, a `text` element needs to have `x` and `y` attributes, to place it on the SVG. Es muss auch auf die Daten zugreifen, um diese Werte anzuzeigen.
+Wie beim `rect`-Element benötigt ein `text`-Element `x`- und `y`-Attribute, um auf dem SVG platziert werden zu können. Es muss auch auf die Daten zugreifen, um diese Werte anzuzeigen.
D3 gibt dir ein hohes Maß an Kontrolle darüber, wie du deine Balken kennzeichnen kannst.
diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md
index 683c68561ab..84e601f67aa 100644
--- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md
+++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md
@@ -12,7 +12,7 @@ Du kannst durch das Hinzufügen von Text, Beschriftungen für die Punkte eines S
Ziel ist es, die kommaseparierten Werte des ersten (`x`)- und zweiten (`y`)-Felds eines jeden Elements im `dataset` darzustellen.
-The `text` nodes need `x` and `y` attributes to position it on the SVG. In dieser Aufgabe kann der `y`-Wert (der die Höhe bestimmt) denselben Wert verwenden, den der `circle`-Wert für sein `cy`-Attribut verwendet. Der `x`-Wert kann etwas größer sein als der `cx`-Wert des `circle`, damit die Bezeichnungen sichtbar ist. Dadurch wird die Beschriftung nach rechts vom dargestellten Punkt verschoben.
+Die `text`-Knotenpunkte benötigen die Attribute `x` und `y`, um auf dem SVG positioniert zu werden. In dieser Aufgabe kann der `y`-Wert (der die Höhe bestimmt) denselben Wert verwenden, den der `circle`-Wert für sein `cy`-Attribut verwendet. Der `x`-Wert kann etwas größer sein als der `cx`-Wert des `circle`, damit die Bezeichnungen sichtbar ist. Dadurch wird die Beschriftung nach rechts vom dargestellten Punkt verschoben.
# --instructions--
diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
index afbaa9125cd..21cd156e874 100644
--- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
+++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
@@ -8,9 +8,9 @@ dashedName: create-a-linear-scale-with-d3
# --description--
-The bar and scatter plot charts both plotted data directly onto the SVG. Wäre jedoch die Höhe eines Balkens oder eines Datenpunkts größer als die SVG-Höhen- oder Breitenwerte, würde er außerhalb des SVG-Bereichs liegen.
+Bei den Balken- und Streu-Diagrammen werden die Daten direkt in das SVG eingezeichnet. Wäre jedoch die Höhe eines Balkens oder eines Datenpunkts größer als die SVG-Höhen- oder Breitenwerte, würde er außerhalb des SVG-Bereichs liegen.
-In D3 gibt es Skalen, die bei der Darstellung von Daten helfen. `scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG.
+In D3 gibt es Skalen, die bei der Darstellung von Daten helfen. `scales` sind Funktionen, die dem Programm mitteilen, wie eine Menge von unbearbeiteten Datenpunkten den SVG-Pixeln zugeordnet werden soll.
For example, say you have a 100x500-sized SVG and you want to plot Gross Domestic Product (GDP) for a number of countries. Die Zahlen wären im Milliarden- oder Billionen-Dollar-Bereich. Du übergibst D3 einen Skalierungstyp, mit welchem du ihm mitteilst, wie die hohen BIP-Werte in dem 100x500 großen Bereich zu platzieren sind.
diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
index 42bacd148b4..44d4e47b9f3 100644
--- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
+++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
@@ -14,7 +14,7 @@ SVG hat ein `circle`-Tag um die Kreisform zu erstellen. Es funktioniert sehr äh
# --instructions--
-Use the `data()`, `enter()`, and `append()` methods to bind `dataset` to new `circle` elements that are appended to the SVG.
+Verwende die `data()`-, `enter()`- und `append()`-Methoden, um `dataset` an neue `circle`-Elemente zu binden, die der SVG hinzugefügt werden.
**Hinweis:** Die Kreise werden nicht sichtbar sein, weil wir ihre Attribute noch nicht gesetzt haben. Wir werden das bei der nächsten Aufgabe machen.
diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
index 658a8f747b3..e1480891986 100644
--- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
+++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
@@ -1,6 +1,6 @@
---
id: 587d7fac367417b2b2512bdb
-title: Set a Domain and a Range on a Scale
+title: Domain und Bereich auf Skala festlegen
challengeType: 6
forumTopicId: 301491
dashedName: set-a-domain-and-a-range-on-a-scale
@@ -14,7 +14,7 @@ Angenommen ein Datensatz hat Werte zwischen 50 und 480. Dies ist die Eingangsinf
You want to map those points along the `x` axis on the SVG, between 10 units and 500 units. This is the output information, also known as the range .
-Die `domain()`- und `range()`-Methoden legen diese Werte für die Skala fest. Both methods take an array of at least two elements as an argument. Hier ist ein Beispiel:
+Die `domain()`- und `range()`-Methoden legen diese Werte für die Skala fest. Beide Methoden nehmen ein Array von mindestens zwei Elementen als Argument. Hier ist ein Beispiel:
```js
scale.domain([50, 480]);
@@ -28,13 +28,13 @@ d3.scaleLinear()
Die folgenden Werte werden, in dieser Reihenfolge, in der Konsole angezeigt: `10`, `500`, `323.37`, and `807.67`.
-Beachte, dass die Skala die lineare Beziehung zwischen Domäne und Bereichswerten verwendet, um herauszufinden, was die Ausgabe für eine gegebene Zahl sein soll. The minimum value in the domain (50) maps to the minimum value (10) in the range.
+Beachte, dass die Skala die lineare Beziehung zwischen Domäne und Bereichswerten verwendet, um herauszufinden, was die Ausgabe für eine gegebene Zahl sein soll. Der minimale Wert in der Domain (50) wird dem minimalen Wert (10) im Bereich zugeordnet.
# --instructions--
Erstelle eine Skala und setze die Domain auf `[250, 500]` und erweitere auf `[10, 150]`.
-**Note:** You can chain the `domain()` and `range()` methods onto the `scale` variable.
+**Hinweis:** Du kannst die `domain()`- und `range()`-Methoden mit der `scale`-Variablen verbinden.
# --hints--
diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md
index a75398f09aa..832a6ba7cac 100644
--- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md
+++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md
@@ -1,6 +1,6 @@
---
id: 587d7fa8367417b2b2512bc9
-title: Update the Height of an Element Dynamically
+title: Die Höhe eines Elements dynamisch aktualisieren
challengeType: 6
forumTopicId: 301493
dashedName: update-the-height-of-an-element-dynamically
@@ -8,7 +8,7 @@ dashedName: update-the-height-of-an-element-dynamically
# --description--
-The previous challenges covered how to display data from an array and how to add CSS classes. Du kannst diese Lektionen kombinieren, um ein einfaches Balkendiagramm zu erstellen. Hierfür gibt es zwei Schritte:
+In den vorherigen Aufgaben ging es um das Darstellen von Array-Daten und um das Hinzufügen von CSS-Klassen. Du kannst diese Lektionen kombinieren, um ein einfaches Balkendiagramm zu erstellen. Hierfür gibt es zwei Schritte:
1) Erstelle einen `div` für jeden Datenpunkt im Array
@@ -22,7 +22,7 @@ selection.style("cssProperty", (d) => d)
# --instructions--
-Add the `style()` method to the code in the editor to set the `height` property for each element. Verwende eine Callback-Funktion, um den Wert des Datenpunkts sowie den darauffolgenden String `px` zurückzugeben.
+Füge die `style()`-Methode dem Code im Editor hinzu, um die `height`-Eigenschaft für jedes Element zu setzen. Verwende eine Callback-Funktion, um den Wert des Datenpunkts sowie den darauffolgenden String `px` zurückzugeben.
# --hints--
diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
index 5e65498c9fd..5b890300831 100644
--- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
+++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
@@ -8,7 +8,7 @@ dashedName: use-a-pre-defined-scale-to-place-elements
# --description--
-Nachdem die Skalen festgelegt wurden, können nun erneut Daten in das Streudiagramm eingetragen werden. The scales are like processing functions that turn the `x` and `y` raw data into values that fit and render correctly on the SVG. Sie halten die Daten innerhalb des Bildschirm-Darstellungsbereichs.
+Nachdem die Skalen festgelegt wurden, können nun erneut Daten in das Streudiagramm eingetragen werden. Skalen gleichen Verarbeitungsfunktionen, die `x`- und `y`-Rohdaten in Werte umwandeln, die in das SVG passen und korrekt dargestellt werden können. Sie halten die Daten innerhalb des Bildschirm-Darstellungsbereichs.
Die Koordinaten-Attributwerte einer SVG-Form setzt du mithilfe der Skalierungsfunktion. Damit sind sowohl `x`- und `y`-Attribute für `rect`- bzw. `text`-Elemente als auch `cx`- und `cy`-Attribute für `circles` gemeint. Hier ein Beispiel:
@@ -17,11 +17,11 @@ shape
.attr("x", (d) => xScale(d[0]))
```
-Scales set shape coordinate attributes to place the data points onto the SVG. Die Anwendung von Skalen ist nicht notwendig, wenn du den eigentlichen Datenwert wiedergibst, wie beispielsweise in den `text()`-Methoden für Kurzinformationen oder Beschriftungen.
+Skalen setzen Formkoordinaten-Attribute fest, um die Datenpunkte auf das SVG zu platzieren. Die Anwendung von Skalen ist nicht notwendig, wenn du den eigentlichen Datenwert wiedergibst, wie beispielsweise in den `text()`-Methoden für Kurzinformationen oder Beschriftungen.
# --instructions--
-Use `xScale` and `yScale` to position both the `circle` and `text` shapes onto the SVG. Wende für `circles`-Skalen zur Festlegung der `cx`- und `cy`-Attribute an. Gib ihnen auch einen Radius von `5` Einheiten.
+Verwende `xScale` und `yScale`, um die `circle`- und `text`-Formen im SVG zu positionieren. Wende für `circles`-Skalen zur Festlegung der `cx`- und `cy`-Attribute an. Gib ihnen auch einen Radius von `5` Einheiten.
Wende für `text`-Elemente Skalen zur Festlegung der `x`- und `y`-Attribute an. Die Beschriftungen sollten rechts neben den Punkten angezeigt werden. Erhöhe den `x`-Datenwert um `10` Einheiten, bevor du diesen an `xScale` übergibst, um das zu erreichen.
diff --git a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
index f426f8e408e..db99769d43c 100644
--- a/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
+++ b/curriculum/challenges/german/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
@@ -10,11 +10,11 @@ dashedName: use-dynamic-scales
Die D3-Methoden `min()` und `max()` erleichtern das Festlegen eines Maßstabs.
-Bei komplexen Datensätzen ist die Festlegung eines passenden Maßstabs wichtig. Mit diesem wird die Visualisierung an die Breite und Höhe des SVG-Containers angepasst. You want all the data plotted inside the SVG so it's visible on the web page.
+Bei komplexen Datensätzen ist die Festlegung eines passenden Maßstabs wichtig. Mit diesem wird die Visualisierung an die Breite und Höhe des SVG-Containers angepasst. Du möchtest, dass alle Daten innerhalb des SVG-Canvas dargestellt werden. So sind diese auf der Webseite sichtbar.
Im folgenden Beispiel wird die Skala der x-Achse für Streudiagrammdaten festgelegt. Die `domain()`-Methode übergibt der Skala Informationen zu den Rohwerten des Diagramms. Die `range()`-Methode gibt wiederum Auskunft über vorhandenen, tatsächlichen Platz für die Visualiserung auf der Webseite.
-In diesem Beispiel wird für die Domain-Methode ein Wert zwischen 0 und dem Maximalwert im Datensatz verwendet. Sie verwendet die `max()`-Methode mit einer Callback-Funktion, die auf den x-Werten in den Arrays basiert. The range uses the SVG's width (`w`), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG.
+In diesem Beispiel wird für die Domain-Methode ein Wert zwischen 0 und dem Maximalwert im Datensatz verwendet. Sie verwendet die `max()`-Methode mit einer Callback-Funktion, die auf den x-Werten in den Arrays basiert. Der Bereich verwendet die SVG-Breite (`w`), berücksichtigt dabei aber auch eine gewisse Padding-Einheit. So wird Platz zwischen den Punkten im Streudiagramm und dem Rand der SVG geschaffen.
```js
const dataset = [
@@ -38,7 +38,7 @@ const xScale = d3.scaleLinear()
.range([padding, w - padding]);
```
-Das Padding kann zunächst verwirrend sein. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG). Durch die in der `range()`-Methode berücksichtigten Abstände wird das Diagramm gezwungen, an jener Linie mit 30 (statt 0) anzufangen und bei 470 (statt 500) zu enden.
+Das Padding kann zunächst verwirrend sein. Stelle dir die x-Achse als horizontale Linie von 0 bis 500 (die Breite der SVG) vor. Durch die in der `range()`-Methode berücksichtigten Abstände wird das Diagramm gezwungen, an jener Linie mit 30 (statt 0) anzufangen und bei 470 (statt 500) zu enden.
# --instructions--
diff --git a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
index ecc0953ed84..41abe4dedc6 100644
--- a/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
+++ b/curriculum/challenges/german/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
@@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
```
-Du kannst Event-Handler implementieren, die innerhalb der `DOMContentLoaded` -Funktion laufen. You can implement an `onclick` event handler which triggers when the user clicks on the `#getMessage` element, by adding the following code:
+Du kannst Event-Handler implementieren, die innerhalb der `DOMContentLoaded` -Funktion laufen. Du kannst einen `onclick`-Event-Handler implementieren, der ausgelöst wird, wenn der Nutzer auf das Element `#getMessage` klickt, indem du den folgenden Code hinzufügst:
```js
document.getElementById('getMessage').onclick = function(){};
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md
index 8ca5acf6e5b..a7517b27c11 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md
@@ -24,7 +24,7 @@ Wenn du fertig bist, stelle sicher, dass eine funktionierende Demo deines Projek
# --instructions--
-**HINT:** You can use the `multer` npm package to handle file uploading.
+**HINWEIS:** Du kannst das `multer`-npm-Paket verwenden, um das Hochladen von Dateien zu verwalten.
# --hints--
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md
index f92efe661bf..e3373dbb80f 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md
@@ -1,6 +1,6 @@
---
id: bd7158d8c443edefaeb5bdff
-title: Request Header Parser Microservice
+title: Request-Header-Parser-Mikroservice
challengeType: 4
forumTopicId: 301507
dashedName: request-header-parser-microservice
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md
index 260f91bc860..ffdeecdcf1e 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md
@@ -1,6 +1,6 @@
---
id: 587d7fb9367417b2b2512c12
-title: Chain Search Query Helpers to Narrow Search Results
+title: Verkettung von Search Query Helpers zur Eingrenzung der Suchergebnisse
challengeType: 2
forumTopicId: 301533
dashedName: chain-search-query-helpers-to-narrow-search-results
@@ -8,7 +8,7 @@ dashedName: chain-search-query-helpers-to-narrow-search-results
# --description--
-Wenn du den Callback nicht als letztes Argument an `Model.find()` (oder an die anderen Suchmethoden) übergibst, wird die Abfrage nicht ausgeführt. Du kannst die Abfrage zur späteren Verwendung in einer Variablen speichern. Diese Art von Objekt ermöglicht es dir, eine Abfrage mit Hilfe einer Verkettungssyntax zu erstellen. Die eigentliche Datenbanksuche wird ausgeführt, wenn du schließlich die Methode `.exec()` verkettest. An diese letzte Methode musst du immer deinen Callback übermitteln. There are many query helpers, here we'll use the most commonly used.
+Wenn du den Callback nicht als letztes Argument an `Model.find()` (oder an die anderen Suchmethoden) übergibst, wird die Abfrage nicht ausgeführt. Du kannst die Abfrage zur späteren Verwendung in einer Variablen speichern. Diese Art von Objekt ermöglicht es dir, eine Abfrage mit Hilfe einer Verkettungssyntax zu erstellen. Die eigentliche Datenbanksuche wird ausgeführt, wenn du schließlich die Methode `.exec()` verkettest. An diese letzte Methode musst du immer deinen Callback übermitteln. Es gibt viele Query Helpers, hier werden wir die Gängigsten verwenden.
# --instructions--
@@ -16,7 +16,7 @@ Modify the `queryChain` function to find people who like the food specified by t
# --hints--
-Chaining query helpers should succeed
+Verkettung von Query Helpers sollte funktionieren
```js
(getUserInput) =>
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-and-save-a-record-of-a-model.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-and-save-a-record-of-a-model.md
index 5f9ffde5914..fd2c3ef1151 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-and-save-a-record-of-a-model.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-and-save-a-record-of-a-model.md
@@ -25,7 +25,7 @@ person.save(function(err, data) {
# --hints--
-Creating and saving a db item should succeed
+Das Erstellen und Speichern eines Datenbankeintrags sollte funktionieren
```js
(getUserInput) =>
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-many-records-with-model.create.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-many-records-with-model.create.md
index ce026c04dd5..725f5d9bd1b 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-many-records-with-model.create.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/create-many-records-with-model.create.md
@@ -1,6 +1,6 @@
---
id: 587d7fb7367417b2b2512c0a
-title: Create Many Records with model.create()
+title: Mehrere Einträge mit model.create() erstellen
challengeType: 2
forumTopicId: 301537
dashedName: create-many-records-with-model-create
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md
index c71e1425092..3f11daaa691 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md
@@ -1,6 +1,6 @@
---
id: 587d7fb8367417b2b2512c11
-title: Delete Many Documents with model.remove()
+title: Mehrere Dokumente mit model.remove() löschen
challengeType: 2
forumTopicId: 301538
dashedName: delete-many-documents-with-model-remove
@@ -18,7 +18,7 @@ dashedName: delete-many-documents-with-model-remove
# --hints--
-Deleting many items at once should succeed
+Das Löschen vieler Objekte auf einmal sollte funktionieren
```js
(getUserInput) =>
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md
index 40f04371e3a..830a13bb682 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md
@@ -1,6 +1,6 @@
---
id: 587d7fb8367417b2b2512c10
-title: Delete One Document Using model.findByIdAndRemove
+title: Ein Dokument mithilfe von model.findByIdAndRemove löschen
challengeType: 2
forumTopicId: 301539
dashedName: delete-one-document-using-model-findbyidandremove
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md
index ab4642dbb1a..e83fc0532cd 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md
@@ -28,11 +28,11 @@ Follow SECRETS tab to add the variable. Do not surround the values with quotes when using the SECRETS tab.
-When you are done, connect to the database by calling the `connect` method within your `myApp.js` file by using the following syntax:
+Sobald du fertig bist, verbinde dich mit der Datenbank durch Aufruf der `connect`-Methode innerhalb deiner `myApp.js`-Datei unter Verwendung der folgenden Syntax:
```js
mongoose.connect(, { useNewUrlParser: true, useUnifiedTopology: true });
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md
index 685bab38510..fe718a5c32d 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md
@@ -18,7 +18,7 @@ In the good old days, this was what you needed to do if you wanted to edit a doc
# --hints--
-Find-edit-update an item should succeed
+Das Suchen-Bearbeiten-Aktualisieren eines Artikels sollte funktionieren
```js
(getUserInput) =>
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md
index 6113b9244bd..2654e4a1e8d 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md
@@ -1,6 +1,6 @@
---
id: 587d7fb8367417b2b2512c0f
-title: Perform New Updates on a Document Using model.findOneAndUpdate()
+title: Neue Aktualisierungen für ein Dokument mit model.findOneAndUpdate() durchführen
challengeType: 2
forumTopicId: 301542
dashedName: perform-new-updates-on-a-document-using-model-findoneandupdate
@@ -18,7 +18,7 @@ Neuere Versionen von Mongoose verfügen über Methoden zur Vereinfachung der Akt
# --hints--
-findOneAndUpdate an item should succeed
+findOneAndUpdate ein Element sollte funktionieren
```js
(getUserInput) =>
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.find-to-search-your-database.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.find-to-search-your-database.md
index f70a63e806a..10ad6288c05 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.find-to-search-your-database.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.find-to-search-your-database.md
@@ -8,7 +8,7 @@ dashedName: use-model-find-to-search-your-database
# --description--
-In seiner einfachsten Form akzeptiert `Model.find()` ein Query-Dokument (ein JSON-Objekt) als erstes Argument, dann einen Callback. It returns an array of matches. Die Funktion unterstützt eine Vielzahl an Suchoptionen. Read more in the docs.
+In seiner einfachsten Form akzeptiert `Model.find()` ein Query-Dokument (ein JSON-Objekt) als erstes Argument, dann einen Callback. Zurückgegeben wird hier ein Array an Treffern. Die Funktion unterstützt eine Vielzahl an Suchoptionen. Mehr dazu in der Dokumentation.
# --instructions--
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md
index a6c94e5fd2f..2a241be20f5 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md
@@ -8,7 +8,7 @@ dashedName: use-model-findbyid-to-search-your-database-by-id
# --description--
-When saving a document, MongoDB automatically adds the field `_id`, and set it to a unique alphanumeric key. Die Suche nach `_id` ist eine extrem häufige Anwendung, daher bietet Mongoose eine eigene Methode dafür an.
+Wenn ein Dokument gespeichert wird, fügt MongoDB automatisch das Feld `_id` hinzu und setzt es auf einen eindeutigen alphanumerischen Schlüssel. Die Suche nach `_id` ist eine extrem häufige Anwendung, daher bietet Mongoose eine eigene Methode dafür an.
# --instructions--
diff --git a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md
index fa1820df95a..09e390c1ac7 100644
--- a/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md
+++ b/curriculum/challenges/german/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md
@@ -8,7 +8,7 @@ dashedName: use-model-findone-to-return-a-single-matching-document-from-your-dat
# --description--
-`Model.findOne()` behaves like `Model.find()`, but it returns only one document (not an array), even if there are multiple items. It is especially useful when searching by properties that you have declared as unique.
+`Model.findOne()` behaves like `Model.find()`, but it returns only one document (not an array), even if there are multiple items. Es ist besonders nützlich bei der Suche nach Eigenschaften, die du als eindeutig deklariert hast.
# --instructions--
diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md
index f5ea6f7ccdd..1859e6d6b33 100644
--- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md
+++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md
@@ -10,9 +10,9 @@ dashedName: how-to-use-passport-strategies
In the `index.pug` file supplied, there is a login form. It is hidden because of the inline JavaScript `if showLogin` with the form indented after it.
-In the `res.render` for that page, add a new variable to the object, `showLogin: true`. When you refresh your page, you should then see the form! This form is set up to **POST** on `/login`. So, this is where you should set up to accept the POST request and authenticate the user.
+In the `res.render` for that page, add a new variable to the object, `showLogin: true`. Wenn du deine Seite aktualisierst, solltest du das Formular sehen! Das Formular übermittelt **POST**-Anfragen an `/login`. Hier solltest du also die POST-Anfrage annehmen und den Nutzer authentifizieren.
-For this challenge, you should add the route `/login` to accept a POST request. To authenticate on this route, you need to add a middleware to do so before then sending a response. This is done by just passing another argument with the middleware before with your response. The middleware to use is `passport.authenticate('local')`.
+In dieser Aufgabe erstellst du die Route `/login`, um eine POST-Anfrage anzunehmen. Um mithilfe dieser Route Nutzer zu authentifizieren, benötigst du eine Middleware, die das vor Beantwortung der Anfrage tut. Dazu wird einfach ein weiteres Argument an die Middleware übergeben, bevor die Antwort kommt. The middleware to use is `passport.authenticate('local')`.
`passport.authenticate` can also take some options as an argument such as `{ failureRedirect: '/' }` which is incredibly useful, so be sure to add that in as well. Add a response after using the middleware (which will only be called if the authentication middleware passes) that redirects the user to `/profile`. Add that route, as well, and make it render the view `profile.pug`.
diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md
index 12cb0622c17..03488cd925b 100644
--- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md
+++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md
@@ -1,6 +1,6 @@
---
id: 589a8eb3f9fc0f352b528e72
-title: Implementation of Social Authentication III
+title: Implementierung der sozialen Authentifizierung III
challengeType: 2
forumTopicId: 301558
dashedName: implementation-of-social-authentication-iii
@@ -8,7 +8,7 @@ dashedName: implementation-of-social-authentication-iii
# --description--
-The final part of the strategy is handling the profile returned from GitHub. We need to load the user's database object if it exists, or create one if it doesn't, and populate the fields from the profile, then return the user's object. GitHub supplies us a unique *id* within each profile which we can use to search with to serialize the user with (already implemented). Below is an example implementation you can use in your project--it goes within the function that is the second argument for the new strategy, right below where `console.log(profile);` currently is:
+Der letzte Teil der Strategie ist der Umgang mit dem von GitHub übermittelten Profil. We need to load the user's database object if it exists, or create one if it doesn't, and populate the fields from the profile, then return the user's object. GitHub supplies us a unique *id* within each profile which we can use to search with to serialize the user with (already implemented). Im Folgenden findest du eine Beispielimplementierung, die du in deinem Projekt verwenden kannst. Sie wird in die Funktion eingefügt, die das zweite Argument für die neue Strategie ist, direkt unter der Stelle, an der sich derzeit `console.log(profile);` befindet:
```js
myDataBase.findOneAndUpdate(
@@ -39,11 +39,11 @@ myDataBase.findOneAndUpdate(
);
```
-`findOneAndUpdate` allows you to search for an object and update it. If the object doesn't exist, it will be inserted and made available to the callback function. In this example, we always set `last_login`, increment the `login_count` by `1`, and only populate the majority of the fields when a new object (new user) is inserted. Notice the use of default values. Sometimes a profile returned won't have all the information filled out or the user will keep it private. In this case, you handle it to prevent an error.
+`findOneAndUpdate` ermöglicht es dir, nach einem Objekt zu suchen und es zu aktualisieren. Wenn das Objekt nicht existiert, wird es eingefügt und der Callback-Funktion zur Verfügung gestellt. In this example, we always set `last_login`, increment the `login_count` by `1`, and only populate the majority of the fields when a new object (new user) is inserted. Notice the use of default values. Manchmal ist ein übermitteltes Profil nicht vollständig ausgefüllt oder der Nutzer hält es privat. In diesem Fall verarbeitest du es, um einen Fehler zu vermeiden.
-You should be able to login to your app now. Try it!
+Du solltest dich jetzt bei deiner App anmelden können. Versuch es!
-Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. If you're running into errors, you can check out the project completed up to this point .
+Reiche deine Seite ein, wenn du davon ausgehst, alles richtig gemacht zu haben. Wenn du auf Fehler stößt, kannst du das bis zu diesem Punkt abgeschlossene Projekt überprüfen .
# --hints--
diff --git a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md
index 36cc775c5c7..5461197a7a4 100644
--- a/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md
+++ b/curriculum/challenges/german/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md
@@ -8,7 +8,7 @@ dashedName: send-and-display-chat-messages
# --description--
-It's time you start allowing clients to send a chat message to the server to emit to all the clients! In your `client.js` file, you should see there is already a block of code handling when the message form is submitted.
+Es ist an der Zeit, dass du den Clients erlaubst, eine Chatnachricht an den Server zu senden, die er wiederum an alle Clients emittiert! In your `client.js` file, you should see there is already a block of code handling when the message form is submitted.
```js
$('form').submit(function() {
diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md
index fd22a255af0..f08730dc01b 100644
--- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md
+++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md
@@ -12,7 +12,7 @@ As a reminder, this project is being built upon the following starter project on
# --instructions--
-Within `tests/1_unit-tests.js` under the test labelled `#11` in the `Arrays` suite, change each `assert` to either `assert.isArray` or `assert.isNotArray` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+Ändere innerhalb `tests/1_unit-tests.js` mit dem gekennzeichneten Test `#11` in der `Arrays`-Suite, jeden `assert` zu `assert.isArray` oder `assert.isNotArray`, um den Test zu bestehen (sollte `true` ausgeben). Do not alter the arguments passed to the asserts.
# --hints--
@@ -30,7 +30,7 @@ All tests should pass.
);
```
-You should choose the correct method for the first assertion - `isArray` vs. `isNotArray`.
+Du solltest die richtige Methode für die erste Behauptung wählen, `isArray` vs. `isNotArray`.
```js
(getUserInput) =>
@@ -48,7 +48,7 @@ You should choose the correct method for the first assertion - `isArray` vs. `is
);
```
-You should choose the correct method for the second assertion - `isArray` vs. `isNotArray`.
+Du solltest die richtige Methode für die zweite Behauptung wählen, `isArray` vs. `isNotArray`.
```js
(getUserInput) =>
diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/american-british-translator.md
index 575bb848837..de6df0f01e0 100644
--- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/american-british-translator.md
+++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/american-british-translator.md
@@ -8,16 +8,16 @@ dashedName: american-british-translator
# --description--
-Build a full stack JavaScript app that is functionally similar to this: https://american-british-translator.freecodecamp.rocks/ . Working on this project will involve you writing your code using one of the following methods:
+Erstelle eine vollständige JavaScript-Anwendung, die eine ähnliche Funktionalität wie https://american-british-translator.freecodecamp.rocks/ aufweist. Working on this project will involve you writing your code using one of the following methods:
- Clone this GitHub repo and complete your project locally.
- Use our Replit starter project to complete your project.
- Verwende einen Site-Builder deiner Wahl, um das Projekt abzuschließen. Achte darauf, alle Dateien von unserem GitHub-Repo zu integrieren.
-If you use Replit, follow these steps to set up the project:
+Wenn du Replit verwendest, dann folge diesen Schritten, um das Projekt einzurichten:
- Start by importing the project on Replit.
-- Next, you will see a `.replit` window.
+- Daraufhin wird ein `.replit`-Fenster angezeigt.
- Select `Use run command` and click the `Done` button.
When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the Solution Link field. Optionally, also submit a link to your project's source code in the GitHub Link field.
@@ -26,12 +26,12 @@ When you are done, make sure a working demo of your project is hosted somewhere
- All logic can go into `/components/translator.js`
- Complete the `/api/translate` route in `/routes/api.js`
-- Create all of the unit/functional tests in `tests/1_unit-tests.js` and `tests/2_functional-tests.js`
-- See the JavaScript files in `/components` for the different spelling and terms your application should translate
+- Erstelle alle Unit/Funktionstests in `tests/1_unit-tests.js` und `tests/2_functional-tests.js`
+- In den JavaScript-Dateien unter `/components` findest du die verschiedenen Schreibweisen und Begriffe, die deine Anwendung übersetzen soll
- To run the tests on Replit, set `NODE_ENV` to `test` without quotes in the `.env` file
-- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell"
+- Um die Tests in der Konsole auszuführen, verwendest du den Befehl `npm run test`. Um die Replit-Konsole zu öffnen, drückst du Strg+Umschalt+P (Cmd auf einem Mac) und gibst "open shell" ein
-Write the following tests in `tests/1_unit-tests.js`:
+Schreibe die folgenden Tests in `tests/1_unit-tests.js`:
- Translate `Mangoes are my favorite fruit.` to British English
- Translate `I ate yogurt for breakfast.` to British English
@@ -109,7 +109,7 @@ async (getUserInput) => {
};
```
-The `/api/translate` route should handle the way time is written in American and British English. For example, ten thirty is written as "10.30" in British English and "10:30" in American English. The `span` element should wrap the entire time string, i.e. `10:30 `.
+Die `/api/translate`-Route sollte die Schreibweise der Zeit im amerikanischen und britischen Englisch berücksichtigen. So wird zum Beispiel "10 thirty" im britischen Englisch als "10.30" und im amerikanischen Englisch als "10:30" geschrieben. The `span` element should wrap the entire time string, i.e. `10:30 `.
```js
async (getUserInput) => {
@@ -136,7 +136,7 @@ async (getUserInput) => {
};
```
-The `/api/translate` route should also handle the way titles/honorifics are abbreviated in American and British English. For example, Doctor Wright is abbreviated as "Dr Wright" in British English and "Dr. Wright" in American English. See `/components/american-to-british-titles.js` for the different titles your application should handle.
+The `/api/translate` route should also handle the way titles/honorifics are abbreviated in American and British English. Zum Beispiel wird Doktor Wright im britischen Englisch als "Dr Wright" und im amerikanischen Englisch als "Dr. Wright" abgekürzt. See `/components/american-to-british-titles.js` for the different titles your application should handle.
```js
async (getUserInput) => {
@@ -163,7 +163,7 @@ async (getUserInput) => {
};
```
-Wrap any translated spelling or terms with `... ` tags so they appear in green.
+Umschließe alle übersetzten Schreibweisen oder Begriffe mit `... `-Tags, damit sie in grüner Farbe erscheinen.
```js
async (getUserInput) => {
@@ -191,7 +191,7 @@ async (getUserInput) => {
};
```
-If one or more of the required fields is missing, return `{ error: 'Required field(s) missing' }`.
+Wenn eines oder mehrere der erforderlichen Felder fehlen, wird `{ error: 'Required field(s) missing' }` zurückgegeben.
```js
async (getUserInput) => {
@@ -212,7 +212,7 @@ async (getUserInput) => {
};
```
-If `text` is empty, return `{ error: 'No text to translate' }`
+Wenn `text` leer ist, gib `{ error: 'No text to translate' }` zurück
```js
async (getUserInput) => {
diff --git a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/sudoku-solver.md b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/sudoku-solver.md
index b67b2cabe7e..67ff56d5841 100644
--- a/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/sudoku-solver.md
+++ b/curriculum/challenges/german/06-quality-assurance/quality-assurance-projects/sudoku-solver.md
@@ -1,6 +1,6 @@
---
id: 5e601bf95ac9d0ecd8b94afd
-title: Sudoku Solver
+title: Sudoku-Löser
challengeType: 4
forumTopicId: 462357
dashedName: sudoku-solver
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
index aa100f9f4a8..5551407c5cf 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -101,7 +101,7 @@ const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?
assert(l(2) === 'True' ? l(3) === 'False' : true);
```
-Du solltest dem ersten `input` ein `value` entsprechend dem `label` Textinhalt geben.
+Du solltest dem ersten `input` eine `value` geben, die mit dem `label`-Textinhalt übereinstimmt.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase());
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index 62a64c5969b..9749f538b3f 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,25 +26,29 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
You should add the first `input` after the `label` text `Enter Your First Name:`, and include a space after the colon.
```js
-assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML.trim(), 'Enter Your First Name: Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
new file mode 100644
index 00000000000..e938bc8c2e3
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
@@ -0,0 +1,146 @@
+---
+id: 63b606f09a14cc1781aea1fb
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Create a `label` element, give it a `for` attribute set to `budget` and the text `Budget`, then create an `input` element with the `id` set to `budget`.
+
+# --hints--
+
+You should create a `label` element in your `form`.
+
+```js
+assert.exists(document.querySelector('form label'));
+```
+
+Your `label` element should have a `for` attribute set to `budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.getAttribute('for'), 'budget');
+```
+
+Your `label` element should have the text `Budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.innerText, 'Budget');
+```
+
+You should create an `input` element within your `form`.
+
+```js
+assert.exists(document.querySelector('form input'));
+```
+
+Your `input` element should come after your `label` element.
+
+```js
+assert.equal(document.querySelector('form input')?.previousElementSibling?.tagName, "LABEL");
+```
+
+Your `input` element should have an `id` set to `budget`.
+
+```js
+assert.equal(document.querySelector('form input')?.id, "budget");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
new file mode 100644
index 00000000000..fcabad47a30
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
@@ -0,0 +1,131 @@
+---
+id: 63b6075a62883218d282504c
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Your `input` element needs some additional attributes. Give it a `type` set to `number` to only allow numeric inputs, a `min` attribute set to `0` to only allow positive numbers, and a `placeholder` set to `Daily calorie budget`.
+
+Finally, mark the `input` element as `required`.
+
+# --hints--
+
+Your `input` element should have a `type` attribute set to `number`.
+
+```js
+assert.equal(document.querySelector('form input').type, 'number');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+assert.equal(document.querySelector('form input').min, '0');
+```
+
+Your `input` element should have a `placeholder` attribute set to `Daily calorie budget`.
+
+```js
+assert.equal(document.querySelector('form input').placeholder, 'Daily calorie budget');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md b/curriculum/challenges/german/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/german/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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md b/curriculum/challenges/german/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/german/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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md b/curriculum/challenges/german/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/german/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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md b/curriculum/challenges/german/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/german/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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md b/curriculum/challenges/german/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/german/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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md b/curriculum/challenges/german/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/german/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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md b/curriculum/challenges/german/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/german/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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md b/curriculum/challenges/german/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/german/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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md b/curriculum/challenges/german/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/german/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
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
new file mode 100644
index 00000000000..17934b0039d
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
@@ -0,0 +1,170 @@
+---
+id: 63b60cfaca25bb27edd40f62
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Finally, you need to link your JavaScript file to your HTML. Create a `script` element to do so.
+
+# --hints--
+
+You should have a `script` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('script')?.length, 1);
+```
+
+Your `script` element should have the `src` set to `./script.js`.
+
+```js
+assert.match(code, /script\s*?src\s*?=\s*?('|")(\.\/)?script\.js\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
new file mode 100644
index 00000000000..de3870b44ad
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
@@ -0,0 +1,176 @@
+---
+id: 63b60d3c5048302906962231
+title: Step 14
+challengeType: 0
+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`.
+
+# --hints--
+
+You should create a variable called `calorieCounter`.
+
+```js
+assert.isDefined(calorieCounter);
+```
+
+You should use `document.getElementById()` to get the `#calorie-counter` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")calorie-counter\1\s*\)/g);
+```
+
+You should store the `#calorie-counter` element in a variable called `calorieCounter`.
+
+```js
+assert.equal(calorieCounter, document.getElementById('calorie-counter'));
+```
+
+# --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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
new file mode 100644
index 00000000000..44e1c274573
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
@@ -0,0 +1,195 @@
+---
+id: 63b613f367584d2a5d041b7d
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Get your `#budget` element and assign it to `budgetNumberInput`, and your `#entry-dropdown` element and assign it to `entryDropdown`.
+
+# --hints--
+
+You should declare a variable called `budgetNumberInput`.
+
+```js
+assert.isDefined(budgetNumberInput);
+```
+
+You should use `document.getElementById()` to get the `#budget` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")budget\1\s*\)/g);
+```
+
+You should store the `#budget` element in a variable called `budgetNumberInput`.
+
+```js
+assert.equal(budgetNumberInput, document.getElementById('budget'));
+```
+
+You should declare a variable called `entryDropdown`.
+
+```js
+assert.isDefined(entryDropdown);
+```
+
+You should use `document.getElementById()` to get the `#entry-dropdown` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")entry-dropdown\1\s*\)/g);
+```
+
+You should store the `#entry-dropdown` element in a variable called `entryDropdown`.
+
+```js
+assert.equal(entryDropdown, document.getElementById('entry-dropdown'));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
new file mode 100644
index 00000000000..6cbbeb5ab4a
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
@@ -0,0 +1,215 @@
+---
+id: 63b61490e633a22b4593e62f
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Following the same pattern, assign your `#add-entry` element to `addEntryButton`, your `#clear` element to `clearButton`, and your `#output` element to `output`.
+
+# --hints--
+
+You should declare a variable called `addEntryButton`.
+
+```js
+assert.isDefined(addEntryButton);
+```
+
+You should use `document.getElementById()` to get the `#add-entry` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")add-entry\1\s*\)/g);
+```
+
+You should assign the `#add-entry` element to `addEntryButton`.
+
+```js
+assert.equal(addEntryButton, document.getElementById('add-entry'));
+```
+
+You should declare a variable called `clearButton`.
+
+```js
+assert.isDefined(clearButton);
+```
+
+You should use `document.getElementById()` to get the `#clear` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")clear\1\s*\)/g);
+```
+
+You should assign the `#clear` element to `clearButton`.
+
+```js
+assert.equal(clearButton, document.getElementById('clear'));
+```
+
+You should declare a variable called `output`.
+
+```js
+assert.isDefined(output);
+```
+
+You should use `document.getElementById()` to get the `#output` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")output\1\s*\)/g);
+```
+
+You should assign the `#output` element to `output`.
+
+```js
+assert.equal(output, document.getElementById("output"));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
new file mode 100644
index 00000000000..99c1985862c
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
@@ -0,0 +1,182 @@
+---
+id: 63b614e6a1f7fe2cef6312dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Declare an `isError` variable and set it to `false`, but use `let` so you can reassign it later.
+
+# --hints--
+
+You should declare an `isError` variable.
+
+```js
+assert.isDefined(isError);
+```
+
+Your `isError` variable should be set to `false`.
+
+```js
+assert.isFalse(isError);
+```
+
+You should use `let` to declare your `isError` variable.
+
+```js
+assert.match(code, /let\s+isError\s*=\s*false/g);
+```
+
+# --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
+--fcc-editable-region--
+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');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
new file mode 100644
index 00000000000..436b65b80d6
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
@@ -0,0 +1,192 @@
+---
+id: 63b6152e6aff882db819fc1e
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Even though you set an `input` element to be a number, JavaScript receives a string value. You need to write a function to clean the string value and ensure you have a number.
+
+Start by declaring a `cleanInputString` function that takes a `str` argument.
+
+# --hints--
+
+You should declare a `cleanInputString` variable.
+
+```js
+assert.isDefined(cleanInputString);
+```
+
+Your `cleanInputString` variable should be a function.
+
+```js
+assert.isFunction(cleanInputString);
+```
+
+Your `cleanInputString` function should take a `str` argument.
+
+```js
+assert.match(cleanInputString?.toString(), /\(str\)/);
+```
+
+`cleanInputString` should be an empty function.
+
+```js
+assert.match(cleanInputString?.toString(), /\{\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;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
new file mode 100644
index 00000000000..b7de4018e24
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
@@ -0,0 +1,182 @@
+---
+id: 63b61584def8fa2ebcc259e0
+title: Step 19
+challengeType: 0
+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.
+
+Declare a `strArray` variable and assign it that split value.
+
+# --hints--
+
+Your `cleanInputString` function should declare a `strArray` variable.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=/);
+```
+
+Your `strArray` variable should be assigned the value of `str.split('')`.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=\s*str\.split\(\s*('|")\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
new file mode 100644
index 00000000000..a0eaf81fd4e
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
@@ -0,0 +1,181 @@
+---
+id: 63bf43be3f969d24d4ed233c
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Declare a `cleanStrArray` variable and assign it an empty array. You will use this to store your valid number characters.
+
+# --hints--
+
+Your `cleanInputString` should declare a variable called `cleanStrArray`.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*/g);
+```
+
+Your `cleanStrArray` variable should be assigned an empty array.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*=\s*\[\s*\]/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
new file mode 100644
index 00000000000..db275c224c1
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
@@ -0,0 +1,195 @@
+---
+id: 63bf446945d34d25e6db6e4f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Use a `for` loop to iterate through each character in your `strArray` array.
+
+# --hints--
+
+Your `cleanInputString` function should have a `for` loop.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(/g);
+```
+
+Your `for` loop should initialize a variable called `i` to `0`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;/g);
+```
+
+Your `for` loop should have a condition that checks if `i` is less than the length of `strArray`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;/g);
+```
+
+Your `for` loop should increment `i` by `1` each time it runs. Use the increment operator for this.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
new file mode 100644
index 00000000000..a432c6687d5
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
@@ -0,0 +1,200 @@
+---
+id: 63bf45ce0dc8d4270760c6d0
+title: Step 22
+challengeType: 0
+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`.
+
+To check your character, see if the array `["+", "-", " "]` includes the character – you can use the `.includes()` method on the array to do this.
+
+# --hints--
+
+Your `for` loop should have an `if` statement.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(/);
+```
+
+Your `for` loop should use `!["+", "-", " "].includes()`.
+
+```js
+// the loop protection injects code so we have to look at the raw code directly
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(/);
+```
+
+Your `for` loop should see if `strArray[i]` is found in `["+", "-", " "]`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{/);
+```
+
+Your `for` loop should `push` `strArray[i]` to `cleanStrArray`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{\s*cleanStrArray\.push\(\s*strArray\[i\]\s*\)\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
new file mode 100644
index 00000000000..f74ff636c5b
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
@@ -0,0 +1,213 @@
+---
+id: 63bf461011fca327d3b60fa8
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+While looping through the string works, creating a new array is inefficient for memory and runtime performance. Instead, you can use Regular Expressions (referred to as "regex") to match specific characters.
+
+Regex in JavaScript is indicated by a pattern wrapped in forward slashes – for example:
+
+```js
+const regex = /hello/;
+```
+
+Remove your existing code within the `cleanInputString` function. Declare a `regex` variable and assign it the value from the example above.
+
+# --hints--
+
+You should remove the `cleanStrArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /cleanStrArray/);
+```
+
+You should remove the `strArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /strArray/);
+```
+
+You should not have a `for` loop.
+
+```js
+assert.notMatch(cleanInputString.toString(), /for/);
+```
+
+You should declare a `regex` variable.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to the regular expression `/hello/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/hello\//);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+ if (!["+", "-", " "].includes(strArray[i])) {
+ cleanStrArray.push(strArray[i])
+ }
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
new file mode 100644
index 00000000000..0f781eb61cf
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
@@ -0,0 +1,176 @@
+---
+id: 63bf47fd40599f29827f484d
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+The pattern you currently have will match the exact text `hello`, which is not what you want to match. You want to look for `+`, `-`, or spaces. Replace the pattern in your `regex` variable with `\+-` to look for plus and minus characters.
+
+Note that you need to use the `\` to escape the `+`, because a `+` has a special meaning in regular expressions.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /hello/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
new file mode 100644
index 00000000000..25d6d2447fb
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
@@ -0,0 +1,174 @@
+---
+id: 63bf492b6dfb292a79f0e675
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+In regex, shorthand character classes allow you to match specific characters without having to write those characters in your pattern. Shorthand character classes are preceded with a backslash (`\`). The character class `\s` will match any whitespace character. Add this to your regex pattern.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-\s/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
new file mode 100644
index 00000000000..3b18f0aac60
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
@@ -0,0 +1,188 @@
+---
+id: 63bf4bfe9de3852be51c8f86
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Your current pattern won't work just yet. `/+-\s/` looks for `+`, `-`, and a space *in order*. This would match `+- hello` but would not match `+hello`.
+
+To tell the pattern to match each of these characters individually, you need to turn them into a character class. This is done by wrapping the characters you want to match in brackets. For example, this pattern will match the characters `h`, `e`, `l`, or `o`:
+
+```js
+const regex = /[helo]/;
+```
+
+Turn your `+-\s` pattern into a character class. Note that you no longer need to escape the `+` character, because you are using a character class.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `[+-\s]`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\\?\+-\\s\]\//)
+```
+
+You should not escape the `+` character in your regular expression.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-\s/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
new file mode 100644
index 00000000000..30baf30ed58
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
@@ -0,0 +1,180 @@
+---
+id: 63bf4d351e06432ce9bf3627
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Regex can also take specific flags to alter the pattern matching behavior. Flags are added after the closing `/`. The `g` flag, which stands for "global", will tell the pattern to continue looking after it has found a match. Here is an example:
+
+```js
+const helloRegex = /hello/g;
+```
+
+Add the `g` flag to your regex pattern.
+
+# --hints--
+
+You should add the `g` flag to your `regex` value.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\s\]\/g/);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
new file mode 100644
index 00000000000..4b35b49f7b9
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
@@ -0,0 +1,199 @@
+---
+id: 63bf511b85b6082e54dc1573
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Strings have a `.replace()` method which allows you to replace characters in the string with another string. `.replace` takes two arguments. The first is the character sequence to replace – this can either be a string or a regex pattern. The second is the string to replace that sequence with. For example, this would replace all instances of `l` with `1`:
+
+```js
+"hello".replace(/l/g, "1");
+```
+
+Use your `regex` to replace all instances of `+`, `-`, and a space in `str` with an empty string. Return this value.
+
+# --hints--
+
+Your `cleanInputString` should call the `replace` method of `str`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(/);
+```
+
+You should pass `regex` as the first argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*/);
+```
+
+You should pass `""` as the second argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*,\s*("|')\1\s*\)/);
+```
+
+Your `cleanInputString` function should directly return the result of your `replace` method.
+
+```js
+assert.match(cleanInputString.toString(), /return\s*str\.replace\(\s*regex\s*,\s*("|')\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
new file mode 100644
index 00000000000..b6eef00a30b
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
@@ -0,0 +1,191 @@
+---
+id: 63bf5230bccd1c2f5c13e1ce
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+In HTML, number inputs allow for exponential notation (such as `1e10`). You need to filter those out.
+
+Start by creating a function called `isInvalidInput` – it should take a single `str` parameter.
+
+# --hints--
+
+You should declare an `isInvalidInput` variable.
+
+```js
+assert.isDefined(isInvalidInput)
+```
+
+`isInvalidInput` should be a function.
+
+```js
+assert.isFunction(isInvalidInput)
+```
+
+`isInvalidInput` should take a single `str` parameter.
+
+```js
+assert.match(isInvalidInput?.toString(), /\(\s*str\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, '');
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
new file mode 100644
index 00000000000..778a809571e
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
@@ -0,0 +1,185 @@
+---
+id: 63bf598a4c807930a13a1a27
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Declare a `regex` variable, and assign it a regex that matches the character `e`.
+
+# --hints--
+
+Your `isInvalidInput` function should have a `regex` variable.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to `/e/`.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
new file mode 100644
index 00000000000..2bf1aa0f9a3
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
@@ -0,0 +1,179 @@
+---
+id: 63bf5a518d54f63181ab639a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `e` in a number input can also be an uppercase `E`. Regex has a flag for this, however – the `i` flag, which stands for "insensitive". This flag makes your pattern case-insensitive. Add the `i` flag to your regex pattern.
+
+# --hints--
+
+Your `regex` value should have the `i` flag.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\/i/);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
new file mode 100644
index 00000000000..19873a84492
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
@@ -0,0 +1,187 @@
+---
+id: 63bf5a92fd148d3264d5322b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Number inputs only allow the `e` to occur between two digits. To match any number, you can use the character class `[0-9]`. This will match any digit between `0` and `9`.
+
+Add this character class before and after `e` in your pattern.
+
+# --hints--
+
+You should add the `[0-9]` character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e/);
+```
+
+You should add the `[0-9]` character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e\[0-9\]\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
new file mode 100644
index 00000000000..75477ddd763
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5adfe2981b332eb007b6
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The `+` modifier in a regex allows you to match a pattern that occurs one or more times. To match your digit pattern one or more times, add a plus after each of the digit character classes. For example: `[0-9]+`.
+
+# --hints--
+
+You should add the `+` modifier to the character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e/);
+```
+
+You should add the `+` modifier to the character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e\[0-9\]\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]e[0-9]/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
new file mode 100644
index 00000000000..95686b3c3a0
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5bcfebff0734593fad19
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+There is a shorthand character class to match any digit: `\d`. Replace your `[0-9]` character classes with this shorthand.
+
+# --hints--
+
+You should replace the `[0-9]` character class before `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e/);
+```
+
+You should replace the `[0-9]` character class after `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e\\d\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]+e[0-9]+/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
new file mode 100644
index 00000000000..f6f61282ce9
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5c438f523a359769106c
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Strings have a `.match()` method, which takes a regex argument. `.match()` will return an array of match results – containing either the first match, or all matches if the global flag is used.
+
+Return the result of calling the `.match()` method on `str` and passing your `regex` variable as the argument. You'll use this match result later on.
+
+# --hints--
+
+Your `isInvalidInput` function should call the `.match()` method on `str`.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(/);
+```
+
+You should pass `regex` as the argument to the `.match()` method.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(\s*regex\s*\)/);
+```
+
+Your `isInvalidInput` function should directly return the result of the `.match()` call.
+
+```js
+assert.match(isInvalidInput.toString(), /return\s+str\.match\(\s*regex\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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
new file mode 100644
index 00000000000..228f3503303
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5cf03b50bf36cfbe94ea
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Your next step is to allow users to add entries to the calorie counter. Declare an empty function `addEntry`. This function should not take any parameters.
+
+# --hints--
+
+You should declare an `addEntry` variable.
+
+```js
+assert.isDefined(addEntry);
+```
+
+Your `addEntry` variable should be a function.
+
+```js
+assert.isFunction(addEntry);
+```
+
+Your `addEntry` function should not take any parameters.
+
+```js
+assert.match(addEntry?.toString(), /\(\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--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
new file mode 100644
index 00000000000..1bc417c8bbb
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
@@ -0,0 +1,198 @@
+---
+id: 63c1dfbd56c71e278800010c
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+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.
+
+# --hints--
+
+Your `addEntry` function should have a `targetId` variable.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=/);
+```
+
+Your `targetId` variable should start with the string `#`.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1/);
+```
+
+You should use concatenation to add `entryDropdown.value` after your `#` string.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1\s*\+\s*entryDropdown\.value/);
+```
+
+# --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() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
new file mode 100644
index 00000000000..413b5f76d84
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e0af28078f2dfad9eb3e
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Now you need to target the `.input-container` element within the element that has your `targetId`. Declare a new `targetInputContainer` variable, and assign it the value of `document.querySelector()`. Use concatenation to separate `targetId` and `'.input-container'` with a space, and pass that string to `querySelector()`.
+
+# --hints--
+
+Your `addEntry` function should have a `targetInputContainer` variable.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=/);
+```
+
+Your `targetInputContainer` variable should be set to `document.querySelector()`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(/);
+```
+
+You should pass `targetId` to your `querySelector()` method.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*/);
+```
+
+You should concatenate `' .input-container'` to `targetId`. Remember to include the space at the beginning of `.input-container`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*\s*\+\s*('|")\s\.input-container\1\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 targetId = '#' + entryDropdown.value;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
new file mode 100644
index 00000000000..06e5ac50cec
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e1965a898d302e0af4e3
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+JavaScript has a feature called template literals , which allow you to interpolate variables directly within a string. Template literals are denoted with backticks ` `` `, as opposed to single or double quotes. Variables can be passed in to a template literal by surrounding the variable with `${}` – the value of the variable will be inserted into the string.
+
+For example:
+
+```js
+const name = "Naomi";
+const templateLiteral = `Hello, my name is ${name}~!`;
+console.log(templateLiteral);
+```
+
+The console will show the string "Hello, my name is Naomi~!".
+
+Replace your concatenated string in the `querySelector` with a template literal – be sure to keep the space between your `targetId` variable and `.input-container`.
+
+# --hints--
+
+You should use a template literal in your `querySelector` method.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`.*`\)/);
+```
+
+Your template literal should have the value `{targetId} .input-container`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`\$\{targetId\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(targetId + ' .input-container');
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
new file mode 100644
index 00000000000..6aeab26c100
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
@@ -0,0 +1,197 @@
+---
+id: 63c1e5b4b3c8a031def3bd65
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Thanks to template literals, you actually don't need the `targetId` variable at all. Remove that variable, and update your template literal to replace `targetId` with `entryDropdown.value` – remember to add `#` before that, in the string.
+
+# --hints--
+
+You should remove the `targetId` variable.
+
+```js
+assert.notMatch(addEntry.toString(), /targetId\s*=/);
+```
+
+You should replace the `targetId` reference in your template literal with `entryDropdown.value`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#?\$\{entryDropdown\.value\}\s\.input-container`\s*\)/);
+```
+
+You should add `#` at the beginning of your template literal.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#\$\{entryDropdown\.value\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(`${targetId} .input-container`);
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md b/curriculum/challenges/german/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/german/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/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md b/curriculum/challenges/german/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/german/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
+
+
+
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll();
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
new file mode 100644
index 00000000000..a7c1e1d3e7b
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
@@ -0,0 +1,192 @@
+---
+id: 63c216da562fbb3957b9cb2c
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Now you need to build your dynamic HTML string to add to the webpage. Declare a new `HTMLString` variable, and assign it an empty template literal string.
+
+# --hints--
+
+Your `addEntry` function should have an `HTMLString` variable.
+
+```js
+assert.match(addEntry.toString(), /HTMLString\s*=/)
+```
+
+Your `HTMLString` should be an empty template literal.
+
+```js
+assert.match(code, /HTMLString\s*=\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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
new file mode 100644
index 00000000000..e8ced7f3436
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
@@ -0,0 +1,198 @@
+---
+id: 63c2171c1e5b6e3aa51768d0
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start your `HTMLString` with a new line, then create a `label` element. Give that element the text `Entry # Name`, using your template literal syntax to replace `#` with the value of `entryNumber`.
+
+# --hints--
+
+Your `HTMLString` variable should start with a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n/);
+```
+
+You should add a `label` element on the new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*.*<\/label>/);
+```
+
+Your `label` element should have the text `Entry ${entryNumber} Name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = ``;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
new file mode 100644
index 00000000000..f78a3d0252c
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
@@ -0,0 +1,193 @@
+---
+id: 63c21774193de43bbc6a769f
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give your `label` element a `for` attribute with the value `X-#-name`, where `X` is the `value` of the `entryDropdown` element and `#` is the value of `entryNumber`. Remember that HTML attributes should be wrapped in double quotes.
+
+# --hints--
+
+Your `label` element should have a `for` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*/)
+```
+
+Your `label` element should have the same text as before.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
new file mode 100644
index 00000000000..42ee9b19109
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
@@ -0,0 +1,217 @@
+---
+id: 63c217ccd939053ce4fa16d6
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+After your `label` element, and on a new line in your template string, create an `input` element. Give it a `type` attribute set to `text`, a `placeholder` attribute set to `Name`, and an `id` attribute that matches the `for` attribute of your `label` element.
+
+# --hints--
+
+You should not modify your `label` element.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+You should add an `input` element on a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*/)[0];
+assert.include(inputAttributes, 'placeholder="Name"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(//)[0];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-name"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
new file mode 100644
index 00000000000..cfeec0927c4
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
@@ -0,0 +1,228 @@
+---
+id: 63c21839f56eaf3ef4e027c4
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create another `label` element (on a new line) at the end of your `HTMLString`. This `label` should have the text `Entry # Calories`, using your template literal syntax to replace `#` with the value of `entryNumber`, and the `for` attribute set to `X-#-calories`, where `X` is the `value` of `entryDropdown` and `#` is the value of `entryNumber`.
+
+# --hints--
+
+You should have two `label` elements in your `HTMLString`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.equal(HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, //)
+```
+
+Your new `label` element should have the text `Entry ${entryNumber} Calories`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const label = HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, /Entry\s\$\{entryNumber\}\sCalories<\/label>/);
+```
+
+You should not modify your existing elements.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.match(HTMLstring, /`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*Entry\s\$\{entryNumber\}\sCalories<\/label>/)
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ ]*>/g)[1];
+assert.include(inputAttributes, 'placeholder="Calories"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-calories"');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'min="0"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
new file mode 100644
index 00000000000..36835a69413
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
@@ -0,0 +1,208 @@
+---
+id: 63c218c028c56a411b2a379a
+title: Step 49
+challengeType: 0
+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.
+
+# --hints--
+
+Your `addEntry` function should access the `innerHTML` property of `targetInputContainer`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML/);
+```
+
+You should use the `+=` operator on `targetInputContainer.innerHTML`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=/);
+```
+
+You should add your `HTMLString` to the `innerHTML` of the `targetInputContainer` element.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=\s*HTMLString/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ function reference ) directly.
+
+# --hints--
+
+You should call the `.addEventListener()` method of the `addEntryButton`.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(/);
+```
+
+You should pass `click` as the first argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*/);
+```
+
+You should pass `addEntry` as the second argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*,\s*addEntry\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ truthy or falsy . A value is truthy if it evaluates to `true` when converted to a Boolean. A value is falsy if it evaluates to `false` when converted to a Boolean. `null` is an example of a falsy value.
+
+You need to check if `invalidInputMatch` is truthy – you can do this by passing the variable directly to your `if` condition (without a comparison operator). Here's an example of checking the truthiness of `helloWorld`.
+
+```js
+if (helloWorld) {
+
+}
+```
+
+Add an `if` statement that checks if `invalidInputMatch` is truthy.
+
+# --hints--
+
+You should add an `if` statement to your `getCaloriesFromInputs` function.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(/);
+```
+
+You should check the truthiness of `invalidInputMatch` in your `if` condition.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(\s*invalidInputMatch\s*\)/);
+```
+
+Your `if` statement should be inside your `for` loop.
+
+```js
+assert.isBelow(getCaloriesFromInputs.toString().indexOf("for"), getCaloriesFromInputs.toString().indexOf("if"));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ /);
+```
+
+Your `span` should not have any text.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{remainingCalories\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{Math\.abs\(remainingCalories\)\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${remainingCalories} Calorie ${surplusOrDeficit}
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
new file mode 100644
index 00000000000..d341d5e62bf
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
@@ -0,0 +1,262 @@
+---
+id: 63c9e7d5b21eee2776ecc226
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+After your `span` element, add an `hr` element to create a horizontal line.
+
+To keep your code clean and readable, you should add this on a new line in the template literal.
+
+# --hints--
+
+You should add an `hr` element to your `output.innerHTML` string.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `hr` element should come after your `span` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
new file mode 100644
index 00000000000..ba1da012290
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
@@ -0,0 +1,270 @@
+---
+id: 63c9e84c9fe8ca28c4101189
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Now create a `p` element with the text `budgetCalories Calories Budgeted`, using interpolation to replace `budgetCalories` with the appropriate variable.
+
+This should come after your `hr` element.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `p` element should come after your `hr` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ /g).length, 2);
+```
+
+Your second `p` element should be on a new line.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /\n\s*
\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\n\s*
\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
new file mode 100644
index 00000000000..f57827b6348
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
@@ -0,0 +1,264 @@
+---
+id: 63c9e94e9df7d72aed1c24bd
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Finally, you need to make the `#output` element visible so the user can see your text. Your `output` variable is an Element, which has a `classList` property. This property has a `.remove()` method, which accepts a string representing the class to remove from the element.
+
+Use the `.remove()` method of the `output` variable's `classList` property to remove the `hide` class. Don't forget to place the word `hide` inside quotes.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList/);
+```
+
+You should call the `.remove()` method of the `classList` property.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(/);
+```
+
+You should pass `hide` as the argument to the `.remove()` method.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
new file mode 100644
index 00000000000..18e5f04d27a
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea23dbadbf2c2764e3f5
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+If you click on your `Calculate Remaining Calories` button, you'll see that nothing happens. You still need to mount the event listener.
+
+Add an event listener to your `calorieCounter` element. The event type should be `submit`, and the callback function should be `calculateCalories`.
+
+# --hints--
+
+You should use the `.addEventListener()` method of your `calorieCounter` element.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(/);
+```
+
+You should pass `submit` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*/);
+```
+
+You should pass `calculateCalories` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*,\s*calculateCalories\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
new file mode 100644
index 00000000000..6c09fd6f149
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea9b16430f2d54522464
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Your final feature to add is the ability for a user to clear the form. Start by declaring an empty function called `clearForm` – it should not take any arguments.
+
+# --hints--
+
+You should declare a `clearForm` variable.
+
+```js
+assert.isDefined(clearForm);
+```
+
+Your `clearForm` variable should be a function.
+
+```js
+assert.isFunction(clearForm);
+```
+
+Your `clearForm` function should not take any arguments.
+
+```js
+assert.match(clearForm?.toString(), /\(\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
new file mode 100644
index 00000000000..7810095dcce
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
@@ -0,0 +1,267 @@
+---
+id: 63c9eb09bcfaa72e3da820a1
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+You need to get all of the input containers. Declare an `inputContainers` variable, and assign it to the value of querying the document for all elements with the class `input-container`.
+
+# --hints--
+
+You should declare an `inputContainers` variable in your `clearForm` function.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=/);
+```
+
+You should use the `querySelectorAll` method to get all of the elements with the class `input-container`.
+
+```js
+assert.match(clearForm.toString(), /document\.querySelectorAll\(\s*('|")\.input-container\1\s*\)/);
+```
+
+You should assign the value of the `querySelectorAll` method to the `inputContainers` variable.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=\s*document\.querySelectorAll\(\s*('|")\.input-container\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
new file mode 100644
index 00000000000..73d20bba696
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
@@ -0,0 +1,263 @@
+---
+id: 63c9eb4a5d68f12f32d9b440
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Remember that `document.querySelectorAll` returns a `NodeList`, which is array-like but is not an array. However, the `Array` object has a `.from()` method that accepts an array-like and returns an array. This is helpful when you want access to more robust array methods, which you will learn about in a future project.
+
+Wrap your `inputContainers` query selector in `Array.from()`. Do this on the same line as your declaration.
+
+# --hints--
+
+You should wrap your `querySelectorAll` in `Array.from()`.
+
+```js
+assert.match(clearForm, /Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\s*\)/);
+```
+
+You should assign the result of `Array.from()` to your `inputContainers` variable.
+
+```js
+assert.match(clearForm, /inputContainers\s*=\s*Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = document.querySelectorAll('.input-container');
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
new file mode 100644
index 00000000000..f6655dc9175
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
@@ -0,0 +1,276 @@
+---
+id: 63c9ebb7b12bca3025b0a935
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+It is time for another loop. Use a `for` loop to iterate through the `inputContainers` array.
+
+Inside the loop, set the `innerHTML` property of the element at the current index to an empty string. This will clear all of the contents of that input container.
+
+# --hints--
+
+Your `clearForm` function should have a `for` loop.
+
+```js
+// loop protect injects stuff, so let's look at the raw code again
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(/);
+```
+
+Your `for` loop should iterate through the `inputContainers` array. Remember to use `i` as your iterator.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*inputContainers\.length\s*;\s*i\s*\+\+\s*\)/);
+```
+
+Your `for` loop should set the `innerHTML` property of `inputContainers[i]` to an empty string.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const forLoop = clearForm.split("for")[1];
+assert.match(forLoop, /inputContainers\[\s*i\s*\]\s*\.innerHTML\s*=\s*(`|'|")\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
new file mode 100644
index 00000000000..5ef4abce954
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
@@ -0,0 +1,275 @@
+---
+id: 63c9ec044acedf312c4974ff
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+After your loop completes, you need to clear the `budgetNumberInput`. Set the `value` property of `budgetNumberInput` to an empty string.
+
+# --hints--
+
+Your `clearForm` function should access the `value` property of the `budgetNumberInput` element.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value/);
+```
+
+Your `clearForm` function should set the `value` property of the `budgetNumberInput` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value\s*=\s*('|"|`)\1/);
+```
+
+You should modify the `budgetNumberInput` after your `for` loop.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const afterLoop = clearForm.split("}")[1];
+assert.match(afterLoop, /budgetNumberInput\.value/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
new file mode 100644
index 00000000000..3dab9bed7e5
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
@@ -0,0 +1,276 @@
+---
+id: 63c9f24afbc9cf324dcaa9a4
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+You also need to clear the `output` element's text. You can do this by setting the `innerText` property to an empty string.
+
+The difference between `innerText` and `innerHTML` is that `innerText` will not render HTML elements, but will display the tags and content as raw text.
+
+# --hints--
+
+Your `clearForm` function should access the `innerText` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText/);
+```
+
+Your `clearForm` function should set the `innerText` property of the `output` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText\s*=\s*('|"|`)\1/);
+```
+
+You should modify `output` after modifying `budgetNumberInput`.
+
+```js
+assert.isAbove(clearForm.toString().indexOf('output'), clearForm.toString().indexOf('budgetNumberInput'));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
new file mode 100644
index 00000000000..b2e9d536a15
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
@@ -0,0 +1,277 @@
+---
+id: 63c9f28bda3e3f336e21b6b4
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+To finish off this function, you need to restore the `hide` class to the `output` element. The `classList` property has an `.add()` method which is the opposite of the `.remove()` method. It accepts a string representing the class to add to the element.
+
+Add the `hide` class to your `output`.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList/);
+```
+
+You should call the `.add()` method on the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add/);
+```
+
+You should pass `hide` as the argument to the `.add()` method.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
new file mode 100644
index 00000000000..d29b3f2ac72
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
@@ -0,0 +1,520 @@
+---
+id: 63c9f2bff625af342023512c
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+To complete this project, add an event listener to the `clearButton` button. When the button is clicked, it should call the `clearForm` function.
+
+Congratulations! Your project is complete.
+
+# --hints--
+
+You should add an event listener to the `clearButton` button.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(/);
+```
+
+You should pass `click` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*/);
+```
+
+You should pass `clearForm` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*,\s*clearForm\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener('click', addEntry);
+calorieCounter.addEventListener('submit', calculateCalories);
+clearButton.addEventListener('click', clearForm);
+```
diff --git a/curriculum/challenges/german/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/german/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/german/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md b/curriculum/challenges/german/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/german/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md b/curriculum/challenges/german/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/german/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md b/curriculum/challenges/german/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/german/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/german/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
index 2ffbe2c4d80..808b7cfec91 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
@@ -8,21 +8,28 @@ dashedName: record-collection
# --description--
-Ti viene dato un oggetto letterale che rappresenta una parte della tua collezione di album musicali. Ogni album ha un id numerico unico come chiave, e diverse altre proprietà. Non tutti gli album hanno informazioni complete.
+You are creating a function that aids in the maintenance of a musical album collection. The collection is organized as an object that contains multiple albums which are also objects. Each album is represented in the collection with a unique `id` as the property name. Within each album object, there are various properties describing information about the album. Not all albums have complete information.
-Partirai con una funzione `updateRecords` che prende un oggetto letterale, `records`, contenente la collezione di album musicali, un `id`, una proprietà `prop` (come `artist` o `tracks`), e un valore `value`. Completa la funzione usando le regole sottostanti per modificare l'oggetto passato alla funzione.
+The `updateRecords` function takes 4 arguments represented by the following function parameters:
-- La tua funzione deve sempre restituire l'intero oggetto della raccolta di dischi.
-- Se `prop` non è `tracks` e `value` non è una stringa vuota, aggiorna o imposta la `prop` di quell'album a `value`.
-- Se `prop` è `tracks` ma l'album non ha una proprietà `tracks`, crea un array vuoto e aggiungi `value` ad esso.
-- Se `prop` è `tracks` e `value` non è una stringa vuota, aggiungi `value` alla fine dell'array `tracks` già esistente.
-- Se il valore `value` è una stringa vuota, elimina la proprietà `prop` dall'album.
+- `records` - an object containing several individual albums
+- `id` - a number representing a specific album in the `records` object
+- `prop` - a string representing the name of the album’s property to update
+- `value` - a string containing the information used to update the album’s property
-**Nota:** Una copia dell'oggetto `recordCollection` viene utilizzata per i test.
+Complete the function using the rules below to modify the object passed to the function.
+
+- Your function must always return the entire `records` object.
+- If `value` is an empty string, delete the given `prop` property from the album.
+- If `prop` isn’t `"tracks"` and `value` isn't an empty string, assign the `value` to that album’s `prop`.
+- If `prop` is `"tracks"` and `value` isn’t an empty string, add the `value` to the end of the album’s existing `"tracks"` array.
+- If the album doesn’t have a `"tracks"` property, create a new array for the album's `"tracks"` property before adding the `value` to it.
+
+**Note:** A copy of the `recordCollection` object is used for the tests. You should not directly modify the `recordCollection` object.
# --hints--
-Dopo aver eseguito `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` dovrebbe essere la stringa `ABBA`
+After `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` should be the string `ABBA`
```js
assert(
@@ -31,7 +38,7 @@ assert(
);
```
-Dopo `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` dovrebbe avere la stringa `Take a Chance on Me` come solo e ultimo elemento.
+After `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` should have the string `Take a Chance on Me` as the last and only element.
```js
assert(
@@ -41,14 +48,14 @@ assert(
);
```
-Dopo `updateRecords(recordCollection, 2548, "artist", "")`, `artist` non dovrebbe essere impostato
+After `updateRecords(recordCollection, 2548, "artist", "")`, `artist` should not be set
```js
updateRecords(_recordCollection, 2548, 'artist', '');
assert(!_recordCollection[2548].hasOwnProperty('artist'));
```
-Dopo `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` dovrebbero avere la stringa `Addicted to Love` come ultimo elemento.
+After `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` should have the string `Addicted to Love` as the last element.
```js
assert(
@@ -58,7 +65,7 @@ assert(
);
```
-Dopo `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` dovrebbero avere la stringa `1999` come primo elemento.
+After `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` should have the string `1999` as the first element.
```js
assert(
@@ -68,14 +75,14 @@ assert(
);
```
-Dopo `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` non dovrebbe essere impostato
+After `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` should not be set
```js
updateRecords(_recordCollection, 2548, 'tracks', '');
assert(!_recordCollection[2548].hasOwnProperty('tracks'));
```
-Dopo `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` dovrebbe essere la stringa `Riptide`
+After `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` should be the string `Riptide`
```js
assert(
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index beba08f68a7..7f559583945 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,25 +26,29 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
Dovresti aggiungere il primo `input` dopo il testo `Enter Your First Name:` dell'elemento `label` e includere uno spazio dopo i due punti.
```js
-assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML.trim(), 'Enter Your First Name: Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
new file mode 100644
index 00000000000..e938bc8c2e3
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
@@ -0,0 +1,146 @@
+---
+id: 63b606f09a14cc1781aea1fb
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Create a `label` element, give it a `for` attribute set to `budget` and the text `Budget`, then create an `input` element with the `id` set to `budget`.
+
+# --hints--
+
+You should create a `label` element in your `form`.
+
+```js
+assert.exists(document.querySelector('form label'));
+```
+
+Your `label` element should have a `for` attribute set to `budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.getAttribute('for'), 'budget');
+```
+
+Your `label` element should have the text `Budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.innerText, 'Budget');
+```
+
+You should create an `input` element within your `form`.
+
+```js
+assert.exists(document.querySelector('form input'));
+```
+
+Your `input` element should come after your `label` element.
+
+```js
+assert.equal(document.querySelector('form input')?.previousElementSibling?.tagName, "LABEL");
+```
+
+Your `input` element should have an `id` set to `budget`.
+
+```js
+assert.equal(document.querySelector('form input')?.id, "budget");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
new file mode 100644
index 00000000000..fcabad47a30
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
@@ -0,0 +1,131 @@
+---
+id: 63b6075a62883218d282504c
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Your `input` element needs some additional attributes. Give it a `type` set to `number` to only allow numeric inputs, a `min` attribute set to `0` to only allow positive numbers, and a `placeholder` set to `Daily calorie budget`.
+
+Finally, mark the `input` element as `required`.
+
+# --hints--
+
+Your `input` element should have a `type` attribute set to `number`.
+
+```js
+assert.equal(document.querySelector('form input').type, 'number');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+assert.equal(document.querySelector('form input').min, '0');
+```
+
+Your `input` element should have a `placeholder` attribute set to `Daily calorie budget`.
+
+```js
+assert.equal(document.querySelector('form input').placeholder, 'Daily calorie budget');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md b/curriculum/challenges/italian/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/italian/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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md b/curriculum/challenges/italian/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/italian/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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md b/curriculum/challenges/italian/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/italian/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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md b/curriculum/challenges/italian/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/italian/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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md b/curriculum/challenges/italian/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/italian/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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md b/curriculum/challenges/italian/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/italian/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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md b/curriculum/challenges/italian/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/italian/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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md b/curriculum/challenges/italian/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/italian/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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md b/curriculum/challenges/italian/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/italian/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
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
new file mode 100644
index 00000000000..17934b0039d
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
@@ -0,0 +1,170 @@
+---
+id: 63b60cfaca25bb27edd40f62
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Finally, you need to link your JavaScript file to your HTML. Create a `script` element to do so.
+
+# --hints--
+
+You should have a `script` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('script')?.length, 1);
+```
+
+Your `script` element should have the `src` set to `./script.js`.
+
+```js
+assert.match(code, /script\s*?src\s*?=\s*?('|")(\.\/)?script\.js\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
new file mode 100644
index 00000000000..de3870b44ad
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
@@ -0,0 +1,176 @@
+---
+id: 63b60d3c5048302906962231
+title: Step 14
+challengeType: 0
+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`.
+
+# --hints--
+
+You should create a variable called `calorieCounter`.
+
+```js
+assert.isDefined(calorieCounter);
+```
+
+You should use `document.getElementById()` to get the `#calorie-counter` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")calorie-counter\1\s*\)/g);
+```
+
+You should store the `#calorie-counter` element in a variable called `calorieCounter`.
+
+```js
+assert.equal(calorieCounter, document.getElementById('calorie-counter'));
+```
+
+# --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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
new file mode 100644
index 00000000000..44e1c274573
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
@@ -0,0 +1,195 @@
+---
+id: 63b613f367584d2a5d041b7d
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Get your `#budget` element and assign it to `budgetNumberInput`, and your `#entry-dropdown` element and assign it to `entryDropdown`.
+
+# --hints--
+
+You should declare a variable called `budgetNumberInput`.
+
+```js
+assert.isDefined(budgetNumberInput);
+```
+
+You should use `document.getElementById()` to get the `#budget` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")budget\1\s*\)/g);
+```
+
+You should store the `#budget` element in a variable called `budgetNumberInput`.
+
+```js
+assert.equal(budgetNumberInput, document.getElementById('budget'));
+```
+
+You should declare a variable called `entryDropdown`.
+
+```js
+assert.isDefined(entryDropdown);
+```
+
+You should use `document.getElementById()` to get the `#entry-dropdown` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")entry-dropdown\1\s*\)/g);
+```
+
+You should store the `#entry-dropdown` element in a variable called `entryDropdown`.
+
+```js
+assert.equal(entryDropdown, document.getElementById('entry-dropdown'));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
new file mode 100644
index 00000000000..6cbbeb5ab4a
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
@@ -0,0 +1,215 @@
+---
+id: 63b61490e633a22b4593e62f
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Following the same pattern, assign your `#add-entry` element to `addEntryButton`, your `#clear` element to `clearButton`, and your `#output` element to `output`.
+
+# --hints--
+
+You should declare a variable called `addEntryButton`.
+
+```js
+assert.isDefined(addEntryButton);
+```
+
+You should use `document.getElementById()` to get the `#add-entry` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")add-entry\1\s*\)/g);
+```
+
+You should assign the `#add-entry` element to `addEntryButton`.
+
+```js
+assert.equal(addEntryButton, document.getElementById('add-entry'));
+```
+
+You should declare a variable called `clearButton`.
+
+```js
+assert.isDefined(clearButton);
+```
+
+You should use `document.getElementById()` to get the `#clear` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")clear\1\s*\)/g);
+```
+
+You should assign the `#clear` element to `clearButton`.
+
+```js
+assert.equal(clearButton, document.getElementById('clear'));
+```
+
+You should declare a variable called `output`.
+
+```js
+assert.isDefined(output);
+```
+
+You should use `document.getElementById()` to get the `#output` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")output\1\s*\)/g);
+```
+
+You should assign the `#output` element to `output`.
+
+```js
+assert.equal(output, document.getElementById("output"));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
new file mode 100644
index 00000000000..99c1985862c
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
@@ -0,0 +1,182 @@
+---
+id: 63b614e6a1f7fe2cef6312dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Declare an `isError` variable and set it to `false`, but use `let` so you can reassign it later.
+
+# --hints--
+
+You should declare an `isError` variable.
+
+```js
+assert.isDefined(isError);
+```
+
+Your `isError` variable should be set to `false`.
+
+```js
+assert.isFalse(isError);
+```
+
+You should use `let` to declare your `isError` variable.
+
+```js
+assert.match(code, /let\s+isError\s*=\s*false/g);
+```
+
+# --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
+--fcc-editable-region--
+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');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
new file mode 100644
index 00000000000..436b65b80d6
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
@@ -0,0 +1,192 @@
+---
+id: 63b6152e6aff882db819fc1e
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Even though you set an `input` element to be a number, JavaScript receives a string value. You need to write a function to clean the string value and ensure you have a number.
+
+Start by declaring a `cleanInputString` function that takes a `str` argument.
+
+# --hints--
+
+You should declare a `cleanInputString` variable.
+
+```js
+assert.isDefined(cleanInputString);
+```
+
+Your `cleanInputString` variable should be a function.
+
+```js
+assert.isFunction(cleanInputString);
+```
+
+Your `cleanInputString` function should take a `str` argument.
+
+```js
+assert.match(cleanInputString?.toString(), /\(str\)/);
+```
+
+`cleanInputString` should be an empty function.
+
+```js
+assert.match(cleanInputString?.toString(), /\{\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;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
new file mode 100644
index 00000000000..b7de4018e24
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
@@ -0,0 +1,182 @@
+---
+id: 63b61584def8fa2ebcc259e0
+title: Step 19
+challengeType: 0
+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.
+
+Declare a `strArray` variable and assign it that split value.
+
+# --hints--
+
+Your `cleanInputString` function should declare a `strArray` variable.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=/);
+```
+
+Your `strArray` variable should be assigned the value of `str.split('')`.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=\s*str\.split\(\s*('|")\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
new file mode 100644
index 00000000000..a0eaf81fd4e
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
@@ -0,0 +1,181 @@
+---
+id: 63bf43be3f969d24d4ed233c
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Declare a `cleanStrArray` variable and assign it an empty array. You will use this to store your valid number characters.
+
+# --hints--
+
+Your `cleanInputString` should declare a variable called `cleanStrArray`.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*/g);
+```
+
+Your `cleanStrArray` variable should be assigned an empty array.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*=\s*\[\s*\]/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
new file mode 100644
index 00000000000..db275c224c1
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
@@ -0,0 +1,195 @@
+---
+id: 63bf446945d34d25e6db6e4f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Use a `for` loop to iterate through each character in your `strArray` array.
+
+# --hints--
+
+Your `cleanInputString` function should have a `for` loop.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(/g);
+```
+
+Your `for` loop should initialize a variable called `i` to `0`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;/g);
+```
+
+Your `for` loop should have a condition that checks if `i` is less than the length of `strArray`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;/g);
+```
+
+Your `for` loop should increment `i` by `1` each time it runs. Use the increment operator for this.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
new file mode 100644
index 00000000000..a432c6687d5
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
@@ -0,0 +1,200 @@
+---
+id: 63bf45ce0dc8d4270760c6d0
+title: Step 22
+challengeType: 0
+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`.
+
+To check your character, see if the array `["+", "-", " "]` includes the character – you can use the `.includes()` method on the array to do this.
+
+# --hints--
+
+Your `for` loop should have an `if` statement.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(/);
+```
+
+Your `for` loop should use `!["+", "-", " "].includes()`.
+
+```js
+// the loop protection injects code so we have to look at the raw code directly
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(/);
+```
+
+Your `for` loop should see if `strArray[i]` is found in `["+", "-", " "]`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{/);
+```
+
+Your `for` loop should `push` `strArray[i]` to `cleanStrArray`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{\s*cleanStrArray\.push\(\s*strArray\[i\]\s*\)\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
new file mode 100644
index 00000000000..f74ff636c5b
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
@@ -0,0 +1,213 @@
+---
+id: 63bf461011fca327d3b60fa8
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+While looping through the string works, creating a new array is inefficient for memory and runtime performance. Instead, you can use Regular Expressions (referred to as "regex") to match specific characters.
+
+Regex in JavaScript is indicated by a pattern wrapped in forward slashes – for example:
+
+```js
+const regex = /hello/;
+```
+
+Remove your existing code within the `cleanInputString` function. Declare a `regex` variable and assign it the value from the example above.
+
+# --hints--
+
+You should remove the `cleanStrArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /cleanStrArray/);
+```
+
+You should remove the `strArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /strArray/);
+```
+
+You should not have a `for` loop.
+
+```js
+assert.notMatch(cleanInputString.toString(), /for/);
+```
+
+You should declare a `regex` variable.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to the regular expression `/hello/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/hello\//);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+ if (!["+", "-", " "].includes(strArray[i])) {
+ cleanStrArray.push(strArray[i])
+ }
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
new file mode 100644
index 00000000000..0f781eb61cf
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
@@ -0,0 +1,176 @@
+---
+id: 63bf47fd40599f29827f484d
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+The pattern you currently have will match the exact text `hello`, which is not what you want to match. You want to look for `+`, `-`, or spaces. Replace the pattern in your `regex` variable with `\+-` to look for plus and minus characters.
+
+Note that you need to use the `\` to escape the `+`, because a `+` has a special meaning in regular expressions.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /hello/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
new file mode 100644
index 00000000000..25d6d2447fb
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
@@ -0,0 +1,174 @@
+---
+id: 63bf492b6dfb292a79f0e675
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+In regex, shorthand character classes allow you to match specific characters without having to write those characters in your pattern. Shorthand character classes are preceded with a backslash (`\`). The character class `\s` will match any whitespace character. Add this to your regex pattern.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-\s/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
new file mode 100644
index 00000000000..3b18f0aac60
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
@@ -0,0 +1,188 @@
+---
+id: 63bf4bfe9de3852be51c8f86
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Your current pattern won't work just yet. `/+-\s/` looks for `+`, `-`, and a space *in order*. This would match `+- hello` but would not match `+hello`.
+
+To tell the pattern to match each of these characters individually, you need to turn them into a character class. This is done by wrapping the characters you want to match in brackets. For example, this pattern will match the characters `h`, `e`, `l`, or `o`:
+
+```js
+const regex = /[helo]/;
+```
+
+Turn your `+-\s` pattern into a character class. Note that you no longer need to escape the `+` character, because you are using a character class.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `[+-\s]`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\\?\+-\\s\]\//)
+```
+
+You should not escape the `+` character in your regular expression.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-\s/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
new file mode 100644
index 00000000000..30baf30ed58
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
@@ -0,0 +1,180 @@
+---
+id: 63bf4d351e06432ce9bf3627
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Regex can also take specific flags to alter the pattern matching behavior. Flags are added after the closing `/`. The `g` flag, which stands for "global", will tell the pattern to continue looking after it has found a match. Here is an example:
+
+```js
+const helloRegex = /hello/g;
+```
+
+Add the `g` flag to your regex pattern.
+
+# --hints--
+
+You should add the `g` flag to your `regex` value.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\s\]\/g/);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
new file mode 100644
index 00000000000..4b35b49f7b9
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
@@ -0,0 +1,199 @@
+---
+id: 63bf511b85b6082e54dc1573
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Strings have a `.replace()` method which allows you to replace characters in the string with another string. `.replace` takes two arguments. The first is the character sequence to replace – this can either be a string or a regex pattern. The second is the string to replace that sequence with. For example, this would replace all instances of `l` with `1`:
+
+```js
+"hello".replace(/l/g, "1");
+```
+
+Use your `regex` to replace all instances of `+`, `-`, and a space in `str` with an empty string. Return this value.
+
+# --hints--
+
+Your `cleanInputString` should call the `replace` method of `str`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(/);
+```
+
+You should pass `regex` as the first argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*/);
+```
+
+You should pass `""` as the second argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*,\s*("|')\1\s*\)/);
+```
+
+Your `cleanInputString` function should directly return the result of your `replace` method.
+
+```js
+assert.match(cleanInputString.toString(), /return\s*str\.replace\(\s*regex\s*,\s*("|')\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
new file mode 100644
index 00000000000..b6eef00a30b
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
@@ -0,0 +1,191 @@
+---
+id: 63bf5230bccd1c2f5c13e1ce
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+In HTML, number inputs allow for exponential notation (such as `1e10`). You need to filter those out.
+
+Start by creating a function called `isInvalidInput` – it should take a single `str` parameter.
+
+# --hints--
+
+You should declare an `isInvalidInput` variable.
+
+```js
+assert.isDefined(isInvalidInput)
+```
+
+`isInvalidInput` should be a function.
+
+```js
+assert.isFunction(isInvalidInput)
+```
+
+`isInvalidInput` should take a single `str` parameter.
+
+```js
+assert.match(isInvalidInput?.toString(), /\(\s*str\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, '');
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
new file mode 100644
index 00000000000..778a809571e
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
@@ -0,0 +1,185 @@
+---
+id: 63bf598a4c807930a13a1a27
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Declare a `regex` variable, and assign it a regex that matches the character `e`.
+
+# --hints--
+
+Your `isInvalidInput` function should have a `regex` variable.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to `/e/`.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
new file mode 100644
index 00000000000..2bf1aa0f9a3
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
@@ -0,0 +1,179 @@
+---
+id: 63bf5a518d54f63181ab639a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `e` in a number input can also be an uppercase `E`. Regex has a flag for this, however – the `i` flag, which stands for "insensitive". This flag makes your pattern case-insensitive. Add the `i` flag to your regex pattern.
+
+# --hints--
+
+Your `regex` value should have the `i` flag.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\/i/);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
new file mode 100644
index 00000000000..19873a84492
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
@@ -0,0 +1,187 @@
+---
+id: 63bf5a92fd148d3264d5322b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Number inputs only allow the `e` to occur between two digits. To match any number, you can use the character class `[0-9]`. This will match any digit between `0` and `9`.
+
+Add this character class before and after `e` in your pattern.
+
+# --hints--
+
+You should add the `[0-9]` character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e/);
+```
+
+You should add the `[0-9]` character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e\[0-9\]\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
new file mode 100644
index 00000000000..75477ddd763
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5adfe2981b332eb007b6
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The `+` modifier in a regex allows you to match a pattern that occurs one or more times. To match your digit pattern one or more times, add a plus after each of the digit character classes. For example: `[0-9]+`.
+
+# --hints--
+
+You should add the `+` modifier to the character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e/);
+```
+
+You should add the `+` modifier to the character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e\[0-9\]\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]e[0-9]/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
new file mode 100644
index 00000000000..95686b3c3a0
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5bcfebff0734593fad19
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+There is a shorthand character class to match any digit: `\d`. Replace your `[0-9]` character classes with this shorthand.
+
+# --hints--
+
+You should replace the `[0-9]` character class before `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e/);
+```
+
+You should replace the `[0-9]` character class after `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e\\d\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]+e[0-9]+/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
new file mode 100644
index 00000000000..f6f61282ce9
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5c438f523a359769106c
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Strings have a `.match()` method, which takes a regex argument. `.match()` will return an array of match results – containing either the first match, or all matches if the global flag is used.
+
+Return the result of calling the `.match()` method on `str` and passing your `regex` variable as the argument. You'll use this match result later on.
+
+# --hints--
+
+Your `isInvalidInput` function should call the `.match()` method on `str`.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(/);
+```
+
+You should pass `regex` as the argument to the `.match()` method.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(\s*regex\s*\)/);
+```
+
+Your `isInvalidInput` function should directly return the result of the `.match()` call.
+
+```js
+assert.match(isInvalidInput.toString(), /return\s+str\.match\(\s*regex\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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
new file mode 100644
index 00000000000..228f3503303
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5cf03b50bf36cfbe94ea
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Your next step is to allow users to add entries to the calorie counter. Declare an empty function `addEntry`. This function should not take any parameters.
+
+# --hints--
+
+You should declare an `addEntry` variable.
+
+```js
+assert.isDefined(addEntry);
+```
+
+Your `addEntry` variable should be a function.
+
+```js
+assert.isFunction(addEntry);
+```
+
+Your `addEntry` function should not take any parameters.
+
+```js
+assert.match(addEntry?.toString(), /\(\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--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
new file mode 100644
index 00000000000..1bc417c8bbb
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
@@ -0,0 +1,198 @@
+---
+id: 63c1dfbd56c71e278800010c
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+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.
+
+# --hints--
+
+Your `addEntry` function should have a `targetId` variable.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=/);
+```
+
+Your `targetId` variable should start with the string `#`.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1/);
+```
+
+You should use concatenation to add `entryDropdown.value` after your `#` string.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1\s*\+\s*entryDropdown\.value/);
+```
+
+# --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() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
new file mode 100644
index 00000000000..413b5f76d84
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e0af28078f2dfad9eb3e
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Now you need to target the `.input-container` element within the element that has your `targetId`. Declare a new `targetInputContainer` variable, and assign it the value of `document.querySelector()`. Use concatenation to separate `targetId` and `'.input-container'` with a space, and pass that string to `querySelector()`.
+
+# --hints--
+
+Your `addEntry` function should have a `targetInputContainer` variable.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=/);
+```
+
+Your `targetInputContainer` variable should be set to `document.querySelector()`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(/);
+```
+
+You should pass `targetId` to your `querySelector()` method.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*/);
+```
+
+You should concatenate `' .input-container'` to `targetId`. Remember to include the space at the beginning of `.input-container`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*\s*\+\s*('|")\s\.input-container\1\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 targetId = '#' + entryDropdown.value;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
new file mode 100644
index 00000000000..06e5ac50cec
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e1965a898d302e0af4e3
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+JavaScript has a feature called template literals , which allow you to interpolate variables directly within a string. Template literals are denoted with backticks ` `` `, as opposed to single or double quotes. Variables can be passed in to a template literal by surrounding the variable with `${}` – the value of the variable will be inserted into the string.
+
+For example:
+
+```js
+const name = "Naomi";
+const templateLiteral = `Hello, my name is ${name}~!`;
+console.log(templateLiteral);
+```
+
+The console will show the string "Hello, my name is Naomi~!".
+
+Replace your concatenated string in the `querySelector` with a template literal – be sure to keep the space between your `targetId` variable and `.input-container`.
+
+# --hints--
+
+You should use a template literal in your `querySelector` method.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`.*`\)/);
+```
+
+Your template literal should have the value `{targetId} .input-container`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`\$\{targetId\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(targetId + ' .input-container');
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
new file mode 100644
index 00000000000..6aeab26c100
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
@@ -0,0 +1,197 @@
+---
+id: 63c1e5b4b3c8a031def3bd65
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Thanks to template literals, you actually don't need the `targetId` variable at all. Remove that variable, and update your template literal to replace `targetId` with `entryDropdown.value` – remember to add `#` before that, in the string.
+
+# --hints--
+
+You should remove the `targetId` variable.
+
+```js
+assert.notMatch(addEntry.toString(), /targetId\s*=/);
+```
+
+You should replace the `targetId` reference in your template literal with `entryDropdown.value`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#?\$\{entryDropdown\.value\}\s\.input-container`\s*\)/);
+```
+
+You should add `#` at the beginning of your template literal.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#\$\{entryDropdown\.value\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(`${targetId} .input-container`);
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md b/curriculum/challenges/italian/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/italian/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/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md b/curriculum/challenges/italian/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/italian/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
+
+
+
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll();
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
new file mode 100644
index 00000000000..a7c1e1d3e7b
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
@@ -0,0 +1,192 @@
+---
+id: 63c216da562fbb3957b9cb2c
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Now you need to build your dynamic HTML string to add to the webpage. Declare a new `HTMLString` variable, and assign it an empty template literal string.
+
+# --hints--
+
+Your `addEntry` function should have an `HTMLString` variable.
+
+```js
+assert.match(addEntry.toString(), /HTMLString\s*=/)
+```
+
+Your `HTMLString` should be an empty template literal.
+
+```js
+assert.match(code, /HTMLString\s*=\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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
new file mode 100644
index 00000000000..e8ced7f3436
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
@@ -0,0 +1,198 @@
+---
+id: 63c2171c1e5b6e3aa51768d0
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start your `HTMLString` with a new line, then create a `label` element. Give that element the text `Entry # Name`, using your template literal syntax to replace `#` with the value of `entryNumber`.
+
+# --hints--
+
+Your `HTMLString` variable should start with a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n/);
+```
+
+You should add a `label` element on the new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*.*<\/label>/);
+```
+
+Your `label` element should have the text `Entry ${entryNumber} Name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = ``;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
new file mode 100644
index 00000000000..f78a3d0252c
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
@@ -0,0 +1,193 @@
+---
+id: 63c21774193de43bbc6a769f
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give your `label` element a `for` attribute with the value `X-#-name`, where `X` is the `value` of the `entryDropdown` element and `#` is the value of `entryNumber`. Remember that HTML attributes should be wrapped in double quotes.
+
+# --hints--
+
+Your `label` element should have a `for` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*/)
+```
+
+Your `label` element should have the same text as before.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
new file mode 100644
index 00000000000..42ee9b19109
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
@@ -0,0 +1,217 @@
+---
+id: 63c217ccd939053ce4fa16d6
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+After your `label` element, and on a new line in your template string, create an `input` element. Give it a `type` attribute set to `text`, a `placeholder` attribute set to `Name`, and an `id` attribute that matches the `for` attribute of your `label` element.
+
+# --hints--
+
+You should not modify your `label` element.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+You should add an `input` element on a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*/)[0];
+assert.include(inputAttributes, 'placeholder="Name"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(//)[0];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-name"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
new file mode 100644
index 00000000000..cfeec0927c4
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
@@ -0,0 +1,228 @@
+---
+id: 63c21839f56eaf3ef4e027c4
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create another `label` element (on a new line) at the end of your `HTMLString`. This `label` should have the text `Entry # Calories`, using your template literal syntax to replace `#` with the value of `entryNumber`, and the `for` attribute set to `X-#-calories`, where `X` is the `value` of `entryDropdown` and `#` is the value of `entryNumber`.
+
+# --hints--
+
+You should have two `label` elements in your `HTMLString`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.equal(HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, //)
+```
+
+Your new `label` element should have the text `Entry ${entryNumber} Calories`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const label = HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, /Entry\s\$\{entryNumber\}\sCalories<\/label>/);
+```
+
+You should not modify your existing elements.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.match(HTMLstring, /`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*Entry\s\$\{entryNumber\}\sCalories<\/label>/)
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ ]*>/g)[1];
+assert.include(inputAttributes, 'placeholder="Calories"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-calories"');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'min="0"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
new file mode 100644
index 00000000000..36835a69413
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
@@ -0,0 +1,208 @@
+---
+id: 63c218c028c56a411b2a379a
+title: Step 49
+challengeType: 0
+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.
+
+# --hints--
+
+Your `addEntry` function should access the `innerHTML` property of `targetInputContainer`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML/);
+```
+
+You should use the `+=` operator on `targetInputContainer.innerHTML`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=/);
+```
+
+You should add your `HTMLString` to the `innerHTML` of the `targetInputContainer` element.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=\s*HTMLString/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ function reference ) directly.
+
+# --hints--
+
+You should call the `.addEventListener()` method of the `addEntryButton`.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(/);
+```
+
+You should pass `click` as the first argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*/);
+```
+
+You should pass `addEntry` as the second argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*,\s*addEntry\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ truthy or falsy . A value is truthy if it evaluates to `true` when converted to a Boolean. A value is falsy if it evaluates to `false` when converted to a Boolean. `null` is an example of a falsy value.
+
+You need to check if `invalidInputMatch` is truthy – you can do this by passing the variable directly to your `if` condition (without a comparison operator). Here's an example of checking the truthiness of `helloWorld`.
+
+```js
+if (helloWorld) {
+
+}
+```
+
+Add an `if` statement that checks if `invalidInputMatch` is truthy.
+
+# --hints--
+
+You should add an `if` statement to your `getCaloriesFromInputs` function.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(/);
+```
+
+You should check the truthiness of `invalidInputMatch` in your `if` condition.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(\s*invalidInputMatch\s*\)/);
+```
+
+Your `if` statement should be inside your `for` loop.
+
+```js
+assert.isBelow(getCaloriesFromInputs.toString().indexOf("for"), getCaloriesFromInputs.toString().indexOf("if"));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ /);
+```
+
+Your `span` should not have any text.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{remainingCalories\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{Math\.abs\(remainingCalories\)\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${remainingCalories} Calorie ${surplusOrDeficit}
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
new file mode 100644
index 00000000000..d341d5e62bf
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
@@ -0,0 +1,262 @@
+---
+id: 63c9e7d5b21eee2776ecc226
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+After your `span` element, add an `hr` element to create a horizontal line.
+
+To keep your code clean and readable, you should add this on a new line in the template literal.
+
+# --hints--
+
+You should add an `hr` element to your `output.innerHTML` string.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `hr` element should come after your `span` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
new file mode 100644
index 00000000000..ba1da012290
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
@@ -0,0 +1,270 @@
+---
+id: 63c9e84c9fe8ca28c4101189
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Now create a `p` element with the text `budgetCalories Calories Budgeted`, using interpolation to replace `budgetCalories` with the appropriate variable.
+
+This should come after your `hr` element.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `p` element should come after your `hr` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ /g).length, 2);
+```
+
+Your second `p` element should be on a new line.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /\n\s*
\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\n\s*
\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
new file mode 100644
index 00000000000..f57827b6348
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
@@ -0,0 +1,264 @@
+---
+id: 63c9e94e9df7d72aed1c24bd
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Finally, you need to make the `#output` element visible so the user can see your text. Your `output` variable is an Element, which has a `classList` property. This property has a `.remove()` method, which accepts a string representing the class to remove from the element.
+
+Use the `.remove()` method of the `output` variable's `classList` property to remove the `hide` class. Don't forget to place the word `hide` inside quotes.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList/);
+```
+
+You should call the `.remove()` method of the `classList` property.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(/);
+```
+
+You should pass `hide` as the argument to the `.remove()` method.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
new file mode 100644
index 00000000000..18e5f04d27a
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea23dbadbf2c2764e3f5
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+If you click on your `Calculate Remaining Calories` button, you'll see that nothing happens. You still need to mount the event listener.
+
+Add an event listener to your `calorieCounter` element. The event type should be `submit`, and the callback function should be `calculateCalories`.
+
+# --hints--
+
+You should use the `.addEventListener()` method of your `calorieCounter` element.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(/);
+```
+
+You should pass `submit` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*/);
+```
+
+You should pass `calculateCalories` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*,\s*calculateCalories\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
new file mode 100644
index 00000000000..6c09fd6f149
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea9b16430f2d54522464
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Your final feature to add is the ability for a user to clear the form. Start by declaring an empty function called `clearForm` – it should not take any arguments.
+
+# --hints--
+
+You should declare a `clearForm` variable.
+
+```js
+assert.isDefined(clearForm);
+```
+
+Your `clearForm` variable should be a function.
+
+```js
+assert.isFunction(clearForm);
+```
+
+Your `clearForm` function should not take any arguments.
+
+```js
+assert.match(clearForm?.toString(), /\(\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
new file mode 100644
index 00000000000..7810095dcce
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
@@ -0,0 +1,267 @@
+---
+id: 63c9eb09bcfaa72e3da820a1
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+You need to get all of the input containers. Declare an `inputContainers` variable, and assign it to the value of querying the document for all elements with the class `input-container`.
+
+# --hints--
+
+You should declare an `inputContainers` variable in your `clearForm` function.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=/);
+```
+
+You should use the `querySelectorAll` method to get all of the elements with the class `input-container`.
+
+```js
+assert.match(clearForm.toString(), /document\.querySelectorAll\(\s*('|")\.input-container\1\s*\)/);
+```
+
+You should assign the value of the `querySelectorAll` method to the `inputContainers` variable.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=\s*document\.querySelectorAll\(\s*('|")\.input-container\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
new file mode 100644
index 00000000000..73d20bba696
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
@@ -0,0 +1,263 @@
+---
+id: 63c9eb4a5d68f12f32d9b440
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Remember that `document.querySelectorAll` returns a `NodeList`, which is array-like but is not an array. However, the `Array` object has a `.from()` method that accepts an array-like and returns an array. This is helpful when you want access to more robust array methods, which you will learn about in a future project.
+
+Wrap your `inputContainers` query selector in `Array.from()`. Do this on the same line as your declaration.
+
+# --hints--
+
+You should wrap your `querySelectorAll` in `Array.from()`.
+
+```js
+assert.match(clearForm, /Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\s*\)/);
+```
+
+You should assign the result of `Array.from()` to your `inputContainers` variable.
+
+```js
+assert.match(clearForm, /inputContainers\s*=\s*Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = document.querySelectorAll('.input-container');
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
new file mode 100644
index 00000000000..f6655dc9175
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
@@ -0,0 +1,276 @@
+---
+id: 63c9ebb7b12bca3025b0a935
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+It is time for another loop. Use a `for` loop to iterate through the `inputContainers` array.
+
+Inside the loop, set the `innerHTML` property of the element at the current index to an empty string. This will clear all of the contents of that input container.
+
+# --hints--
+
+Your `clearForm` function should have a `for` loop.
+
+```js
+// loop protect injects stuff, so let's look at the raw code again
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(/);
+```
+
+Your `for` loop should iterate through the `inputContainers` array. Remember to use `i` as your iterator.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*inputContainers\.length\s*;\s*i\s*\+\+\s*\)/);
+```
+
+Your `for` loop should set the `innerHTML` property of `inputContainers[i]` to an empty string.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const forLoop = clearForm.split("for")[1];
+assert.match(forLoop, /inputContainers\[\s*i\s*\]\s*\.innerHTML\s*=\s*(`|'|")\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
new file mode 100644
index 00000000000..5ef4abce954
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
@@ -0,0 +1,275 @@
+---
+id: 63c9ec044acedf312c4974ff
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+After your loop completes, you need to clear the `budgetNumberInput`. Set the `value` property of `budgetNumberInput` to an empty string.
+
+# --hints--
+
+Your `clearForm` function should access the `value` property of the `budgetNumberInput` element.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value/);
+```
+
+Your `clearForm` function should set the `value` property of the `budgetNumberInput` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value\s*=\s*('|"|`)\1/);
+```
+
+You should modify the `budgetNumberInput` after your `for` loop.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const afterLoop = clearForm.split("}")[1];
+assert.match(afterLoop, /budgetNumberInput\.value/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
new file mode 100644
index 00000000000..3dab9bed7e5
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
@@ -0,0 +1,276 @@
+---
+id: 63c9f24afbc9cf324dcaa9a4
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+You also need to clear the `output` element's text. You can do this by setting the `innerText` property to an empty string.
+
+The difference between `innerText` and `innerHTML` is that `innerText` will not render HTML elements, but will display the tags and content as raw text.
+
+# --hints--
+
+Your `clearForm` function should access the `innerText` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText/);
+```
+
+Your `clearForm` function should set the `innerText` property of the `output` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText\s*=\s*('|"|`)\1/);
+```
+
+You should modify `output` after modifying `budgetNumberInput`.
+
+```js
+assert.isAbove(clearForm.toString().indexOf('output'), clearForm.toString().indexOf('budgetNumberInput'));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
new file mode 100644
index 00000000000..b2e9d536a15
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
@@ -0,0 +1,277 @@
+---
+id: 63c9f28bda3e3f336e21b6b4
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+To finish off this function, you need to restore the `hide` class to the `output` element. The `classList` property has an `.add()` method which is the opposite of the `.remove()` method. It accepts a string representing the class to add to the element.
+
+Add the `hide` class to your `output`.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList/);
+```
+
+You should call the `.add()` method on the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add/);
+```
+
+You should pass `hide` as the argument to the `.add()` method.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
new file mode 100644
index 00000000000..d29b3f2ac72
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
@@ -0,0 +1,520 @@
+---
+id: 63c9f2bff625af342023512c
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+To complete this project, add an event listener to the `clearButton` button. When the button is clicked, it should call the `clearForm` function.
+
+Congratulations! Your project is complete.
+
+# --hints--
+
+You should add an event listener to the `clearButton` button.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(/);
+```
+
+You should pass `click` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*/);
+```
+
+You should pass `clearForm` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*,\s*clearForm\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener('click', addEntry);
+calorieCounter.addEventListener('submit', calculateCalories);
+clearButton.addEventListener('click', clearForm);
+```
diff --git a/curriculum/challenges/italian/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/italian/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/italian/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md b/curriculum/challenges/italian/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/italian/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md b/curriculum/challenges/italian/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/italian/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md b/curriculum/challenges/italian/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/italian/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/italian/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
index d8f5435258f..fe8fbfdaf28 100644
--- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
+++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
@@ -8,21 +8,28 @@ dashedName: record-collection
# --description--
-音楽アルバムのコレクションの一部を表すオブジェクトリテラルが用意されています。 各アルバムには、キーとして一意の ID 番号と、その他のいくつかのプロパティが含まれています。 情報が完全ではないアルバムもあります。
+You are creating a function that aids in the maintenance of a musical album collection. The collection is organized as an object that contains multiple albums which are also objects. Each album is represented in the collection with a unique `id` as the property name. Within each album object, there are various properties describing information about the album. Not all albums have complete information.
-まず `updateRecords` 関数から記述を始めてください。この関数はオブジェクトリテラル `records` を受け取ります。これには、音楽アルバムのコレクション、`id`、`prop` (`artist` や `tracks` など)、および `value` が含まれています。 次に示すルールに従って関数を完成させ、関数に渡すオブジェクトを変更してください。
+The `updateRecords` function takes 4 arguments represented by the following function parameters:
-- 関数は常にレコードコレクションオブジェクト全体を返す必要があります。
-- `prop` が `tracks` ではなく、`value` が空文字列ではない場合は、アルバムの `prop` を `value` に更新または設定します。
-- `prop` が `tracks` であるものの、アルバムに `tracks` プロパティがない場合は、空の配列を作成してそこに `value` を追加します。
-- `prop` が `tracks` であり、`value` が空文字列ではない場合は、`value` をアルバムの既存の `tracks` 配列の末尾に追加します。
-- `value` が空文字列の場合は、指定された `prop` プロパティをアルバムから削除します。
+- `records` - an object containing several individual albums
+- `id` - a number representing a specific album in the `records` object
+- `prop` - a string representing the name of the album’s property to update
+- `value` - a string containing the information used to update the album’s property
-**注:** テストには `recordCollection` オブジェクトのコピーが使用されます。
+Complete the function using the rules below to modify the object passed to the function.
+
+- Your function must always return the entire `records` object.
+- If `value` is an empty string, delete the given `prop` property from the album.
+- If `prop` isn’t `"tracks"` and `value` isn't an empty string, assign the `value` to that album’s `prop`.
+- If `prop` is `"tracks"` and `value` isn’t an empty string, add the `value` to the end of the album’s existing `"tracks"` array.
+- If the album doesn’t have a `"tracks"` property, create a new array for the album's `"tracks"` property before adding the `value` to it.
+
+**Note:** A copy of the `recordCollection` object is used for the tests. You should not directly modify the `recordCollection` object.
# --hints--
-`updateRecords(recordCollection, 5439, "artist", "ABBA")` の実行後、`artist` は文字列 `ABBA` になる必要があります。
+After `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` should be the string `ABBA`
```js
assert(
@@ -31,7 +38,7 @@ assert(
);
```
-`updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")` の実行後、`tracks` 配列は、文字列 `Take a Chance on Me` が末尾かつ唯一の要素になる必要があります。
+After `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` should have the string `Take a Chance on Me` as the last and only element.
```js
assert(
@@ -41,14 +48,14 @@ assert(
);
```
-`updateRecords(recordCollection, 2548, "artist", "")` の実行後、`artist` は未設定であるべきです。
+After `updateRecords(recordCollection, 2548, "artist", "")`, `artist` should not be set
```js
updateRecords(_recordCollection, 2548, 'artist', '');
assert(!_recordCollection[2548].hasOwnProperty('artist'));
```
-`updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")` の実行後、`tracks` の末尾の要素は文字列 `Addicted to Love` になる必要があります。
+After `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` should have the string `Addicted to Love` as the last element.
```js
assert(
@@ -58,7 +65,7 @@ assert(
);
```
-`updateRecords(recordCollection, 2468, "tracks", "Free")` の実行後、`tracks` の先頭の要素は文字列 `1999` であるべきです。
+After `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` should have the string `1999` as the first element.
```js
assert(
@@ -68,14 +75,14 @@ assert(
);
```
-`updateRecords(recordCollection, 2548, "tracks", "")` の実行後、`tracks` は未設定であるべきです。
+After `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` should not be set
```js
updateRecords(_recordCollection, 2548, 'tracks', '');
assert(!_recordCollection[2548].hasOwnProperty('tracks'));
```
-`updateRecords(recordCollection, 1245, "albumTitle", "Riptide")` の実行後、`albumTitle` は文字列 `Riptide` になる必要があります。
+After `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` should be the string `Riptide`
```js
assert(
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index 4124f433fce..5224a6205a9 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,25 +26,29 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
`label` のテキスト `Enter Your First Name:` の後に 1 つ目の `input` を追加し、コロンの後にはスペースを入れてください。
```js
-assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML.trim(), 'Enter Your First Name: Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
new file mode 100644
index 00000000000..e938bc8c2e3
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
@@ -0,0 +1,146 @@
+---
+id: 63b606f09a14cc1781aea1fb
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Create a `label` element, give it a `for` attribute set to `budget` and the text `Budget`, then create an `input` element with the `id` set to `budget`.
+
+# --hints--
+
+You should create a `label` element in your `form`.
+
+```js
+assert.exists(document.querySelector('form label'));
+```
+
+Your `label` element should have a `for` attribute set to `budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.getAttribute('for'), 'budget');
+```
+
+Your `label` element should have the text `Budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.innerText, 'Budget');
+```
+
+You should create an `input` element within your `form`.
+
+```js
+assert.exists(document.querySelector('form input'));
+```
+
+Your `input` element should come after your `label` element.
+
+```js
+assert.equal(document.querySelector('form input')?.previousElementSibling?.tagName, "LABEL");
+```
+
+Your `input` element should have an `id` set to `budget`.
+
+```js
+assert.equal(document.querySelector('form input')?.id, "budget");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
new file mode 100644
index 00000000000..fcabad47a30
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
@@ -0,0 +1,131 @@
+---
+id: 63b6075a62883218d282504c
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Your `input` element needs some additional attributes. Give it a `type` set to `number` to only allow numeric inputs, a `min` attribute set to `0` to only allow positive numbers, and a `placeholder` set to `Daily calorie budget`.
+
+Finally, mark the `input` element as `required`.
+
+# --hints--
+
+Your `input` element should have a `type` attribute set to `number`.
+
+```js
+assert.equal(document.querySelector('form input').type, 'number');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+assert.equal(document.querySelector('form input').min, '0');
+```
+
+Your `input` element should have a `placeholder` attribute set to `Daily calorie budget`.
+
+```js
+assert.equal(document.querySelector('form input').placeholder, 'Daily calorie budget');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md b/curriculum/challenges/japanese/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/japanese/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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md b/curriculum/challenges/japanese/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/japanese/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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md b/curriculum/challenges/japanese/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/japanese/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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md b/curriculum/challenges/japanese/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/japanese/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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md b/curriculum/challenges/japanese/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/japanese/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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md b/curriculum/challenges/japanese/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/japanese/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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md b/curriculum/challenges/japanese/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/japanese/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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md b/curriculum/challenges/japanese/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/japanese/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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md b/curriculum/challenges/japanese/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/japanese/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
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
new file mode 100644
index 00000000000..17934b0039d
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
@@ -0,0 +1,170 @@
+---
+id: 63b60cfaca25bb27edd40f62
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Finally, you need to link your JavaScript file to your HTML. Create a `script` element to do so.
+
+# --hints--
+
+You should have a `script` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('script')?.length, 1);
+```
+
+Your `script` element should have the `src` set to `./script.js`.
+
+```js
+assert.match(code, /script\s*?src\s*?=\s*?('|")(\.\/)?script\.js\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
new file mode 100644
index 00000000000..de3870b44ad
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
@@ -0,0 +1,176 @@
+---
+id: 63b60d3c5048302906962231
+title: Step 14
+challengeType: 0
+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`.
+
+# --hints--
+
+You should create a variable called `calorieCounter`.
+
+```js
+assert.isDefined(calorieCounter);
+```
+
+You should use `document.getElementById()` to get the `#calorie-counter` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")calorie-counter\1\s*\)/g);
+```
+
+You should store the `#calorie-counter` element in a variable called `calorieCounter`.
+
+```js
+assert.equal(calorieCounter, document.getElementById('calorie-counter'));
+```
+
+# --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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
new file mode 100644
index 00000000000..44e1c274573
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
@@ -0,0 +1,195 @@
+---
+id: 63b613f367584d2a5d041b7d
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Get your `#budget` element and assign it to `budgetNumberInput`, and your `#entry-dropdown` element and assign it to `entryDropdown`.
+
+# --hints--
+
+You should declare a variable called `budgetNumberInput`.
+
+```js
+assert.isDefined(budgetNumberInput);
+```
+
+You should use `document.getElementById()` to get the `#budget` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")budget\1\s*\)/g);
+```
+
+You should store the `#budget` element in a variable called `budgetNumberInput`.
+
+```js
+assert.equal(budgetNumberInput, document.getElementById('budget'));
+```
+
+You should declare a variable called `entryDropdown`.
+
+```js
+assert.isDefined(entryDropdown);
+```
+
+You should use `document.getElementById()` to get the `#entry-dropdown` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")entry-dropdown\1\s*\)/g);
+```
+
+You should store the `#entry-dropdown` element in a variable called `entryDropdown`.
+
+```js
+assert.equal(entryDropdown, document.getElementById('entry-dropdown'));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
new file mode 100644
index 00000000000..6cbbeb5ab4a
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
@@ -0,0 +1,215 @@
+---
+id: 63b61490e633a22b4593e62f
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Following the same pattern, assign your `#add-entry` element to `addEntryButton`, your `#clear` element to `clearButton`, and your `#output` element to `output`.
+
+# --hints--
+
+You should declare a variable called `addEntryButton`.
+
+```js
+assert.isDefined(addEntryButton);
+```
+
+You should use `document.getElementById()` to get the `#add-entry` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")add-entry\1\s*\)/g);
+```
+
+You should assign the `#add-entry` element to `addEntryButton`.
+
+```js
+assert.equal(addEntryButton, document.getElementById('add-entry'));
+```
+
+You should declare a variable called `clearButton`.
+
+```js
+assert.isDefined(clearButton);
+```
+
+You should use `document.getElementById()` to get the `#clear` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")clear\1\s*\)/g);
+```
+
+You should assign the `#clear` element to `clearButton`.
+
+```js
+assert.equal(clearButton, document.getElementById('clear'));
+```
+
+You should declare a variable called `output`.
+
+```js
+assert.isDefined(output);
+```
+
+You should use `document.getElementById()` to get the `#output` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")output\1\s*\)/g);
+```
+
+You should assign the `#output` element to `output`.
+
+```js
+assert.equal(output, document.getElementById("output"));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
new file mode 100644
index 00000000000..99c1985862c
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
@@ -0,0 +1,182 @@
+---
+id: 63b614e6a1f7fe2cef6312dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Declare an `isError` variable and set it to `false`, but use `let` so you can reassign it later.
+
+# --hints--
+
+You should declare an `isError` variable.
+
+```js
+assert.isDefined(isError);
+```
+
+Your `isError` variable should be set to `false`.
+
+```js
+assert.isFalse(isError);
+```
+
+You should use `let` to declare your `isError` variable.
+
+```js
+assert.match(code, /let\s+isError\s*=\s*false/g);
+```
+
+# --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
+--fcc-editable-region--
+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');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
new file mode 100644
index 00000000000..436b65b80d6
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
@@ -0,0 +1,192 @@
+---
+id: 63b6152e6aff882db819fc1e
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Even though you set an `input` element to be a number, JavaScript receives a string value. You need to write a function to clean the string value and ensure you have a number.
+
+Start by declaring a `cleanInputString` function that takes a `str` argument.
+
+# --hints--
+
+You should declare a `cleanInputString` variable.
+
+```js
+assert.isDefined(cleanInputString);
+```
+
+Your `cleanInputString` variable should be a function.
+
+```js
+assert.isFunction(cleanInputString);
+```
+
+Your `cleanInputString` function should take a `str` argument.
+
+```js
+assert.match(cleanInputString?.toString(), /\(str\)/);
+```
+
+`cleanInputString` should be an empty function.
+
+```js
+assert.match(cleanInputString?.toString(), /\{\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;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
new file mode 100644
index 00000000000..b7de4018e24
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
@@ -0,0 +1,182 @@
+---
+id: 63b61584def8fa2ebcc259e0
+title: Step 19
+challengeType: 0
+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.
+
+Declare a `strArray` variable and assign it that split value.
+
+# --hints--
+
+Your `cleanInputString` function should declare a `strArray` variable.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=/);
+```
+
+Your `strArray` variable should be assigned the value of `str.split('')`.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=\s*str\.split\(\s*('|")\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
new file mode 100644
index 00000000000..a0eaf81fd4e
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
@@ -0,0 +1,181 @@
+---
+id: 63bf43be3f969d24d4ed233c
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Declare a `cleanStrArray` variable and assign it an empty array. You will use this to store your valid number characters.
+
+# --hints--
+
+Your `cleanInputString` should declare a variable called `cleanStrArray`.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*/g);
+```
+
+Your `cleanStrArray` variable should be assigned an empty array.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*=\s*\[\s*\]/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
new file mode 100644
index 00000000000..db275c224c1
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
@@ -0,0 +1,195 @@
+---
+id: 63bf446945d34d25e6db6e4f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Use a `for` loop to iterate through each character in your `strArray` array.
+
+# --hints--
+
+Your `cleanInputString` function should have a `for` loop.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(/g);
+```
+
+Your `for` loop should initialize a variable called `i` to `0`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;/g);
+```
+
+Your `for` loop should have a condition that checks if `i` is less than the length of `strArray`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;/g);
+```
+
+Your `for` loop should increment `i` by `1` each time it runs. Use the increment operator for this.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
new file mode 100644
index 00000000000..a432c6687d5
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
@@ -0,0 +1,200 @@
+---
+id: 63bf45ce0dc8d4270760c6d0
+title: Step 22
+challengeType: 0
+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`.
+
+To check your character, see if the array `["+", "-", " "]` includes the character – you can use the `.includes()` method on the array to do this.
+
+# --hints--
+
+Your `for` loop should have an `if` statement.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(/);
+```
+
+Your `for` loop should use `!["+", "-", " "].includes()`.
+
+```js
+// the loop protection injects code so we have to look at the raw code directly
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(/);
+```
+
+Your `for` loop should see if `strArray[i]` is found in `["+", "-", " "]`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{/);
+```
+
+Your `for` loop should `push` `strArray[i]` to `cleanStrArray`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{\s*cleanStrArray\.push\(\s*strArray\[i\]\s*\)\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
new file mode 100644
index 00000000000..f74ff636c5b
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
@@ -0,0 +1,213 @@
+---
+id: 63bf461011fca327d3b60fa8
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+While looping through the string works, creating a new array is inefficient for memory and runtime performance. Instead, you can use Regular Expressions (referred to as "regex") to match specific characters.
+
+Regex in JavaScript is indicated by a pattern wrapped in forward slashes – for example:
+
+```js
+const regex = /hello/;
+```
+
+Remove your existing code within the `cleanInputString` function. Declare a `regex` variable and assign it the value from the example above.
+
+# --hints--
+
+You should remove the `cleanStrArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /cleanStrArray/);
+```
+
+You should remove the `strArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /strArray/);
+```
+
+You should not have a `for` loop.
+
+```js
+assert.notMatch(cleanInputString.toString(), /for/);
+```
+
+You should declare a `regex` variable.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to the regular expression `/hello/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/hello\//);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+ if (!["+", "-", " "].includes(strArray[i])) {
+ cleanStrArray.push(strArray[i])
+ }
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
new file mode 100644
index 00000000000..0f781eb61cf
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
@@ -0,0 +1,176 @@
+---
+id: 63bf47fd40599f29827f484d
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+The pattern you currently have will match the exact text `hello`, which is not what you want to match. You want to look for `+`, `-`, or spaces. Replace the pattern in your `regex` variable with `\+-` to look for plus and minus characters.
+
+Note that you need to use the `\` to escape the `+`, because a `+` has a special meaning in regular expressions.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /hello/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
new file mode 100644
index 00000000000..25d6d2447fb
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
@@ -0,0 +1,174 @@
+---
+id: 63bf492b6dfb292a79f0e675
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+In regex, shorthand character classes allow you to match specific characters without having to write those characters in your pattern. Shorthand character classes are preceded with a backslash (`\`). The character class `\s` will match any whitespace character. Add this to your regex pattern.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-\s/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
new file mode 100644
index 00000000000..3b18f0aac60
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
@@ -0,0 +1,188 @@
+---
+id: 63bf4bfe9de3852be51c8f86
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Your current pattern won't work just yet. `/+-\s/` looks for `+`, `-`, and a space *in order*. This would match `+- hello` but would not match `+hello`.
+
+To tell the pattern to match each of these characters individually, you need to turn them into a character class. This is done by wrapping the characters you want to match in brackets. For example, this pattern will match the characters `h`, `e`, `l`, or `o`:
+
+```js
+const regex = /[helo]/;
+```
+
+Turn your `+-\s` pattern into a character class. Note that you no longer need to escape the `+` character, because you are using a character class.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `[+-\s]`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\\?\+-\\s\]\//)
+```
+
+You should not escape the `+` character in your regular expression.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-\s/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
new file mode 100644
index 00000000000..30baf30ed58
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
@@ -0,0 +1,180 @@
+---
+id: 63bf4d351e06432ce9bf3627
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Regex can also take specific flags to alter the pattern matching behavior. Flags are added after the closing `/`. The `g` flag, which stands for "global", will tell the pattern to continue looking after it has found a match. Here is an example:
+
+```js
+const helloRegex = /hello/g;
+```
+
+Add the `g` flag to your regex pattern.
+
+# --hints--
+
+You should add the `g` flag to your `regex` value.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\s\]\/g/);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
new file mode 100644
index 00000000000..4b35b49f7b9
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
@@ -0,0 +1,199 @@
+---
+id: 63bf511b85b6082e54dc1573
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Strings have a `.replace()` method which allows you to replace characters in the string with another string. `.replace` takes two arguments. The first is the character sequence to replace – this can either be a string or a regex pattern. The second is the string to replace that sequence with. For example, this would replace all instances of `l` with `1`:
+
+```js
+"hello".replace(/l/g, "1");
+```
+
+Use your `regex` to replace all instances of `+`, `-`, and a space in `str` with an empty string. Return this value.
+
+# --hints--
+
+Your `cleanInputString` should call the `replace` method of `str`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(/);
+```
+
+You should pass `regex` as the first argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*/);
+```
+
+You should pass `""` as the second argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*,\s*("|')\1\s*\)/);
+```
+
+Your `cleanInputString` function should directly return the result of your `replace` method.
+
+```js
+assert.match(cleanInputString.toString(), /return\s*str\.replace\(\s*regex\s*,\s*("|')\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
new file mode 100644
index 00000000000..b6eef00a30b
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
@@ -0,0 +1,191 @@
+---
+id: 63bf5230bccd1c2f5c13e1ce
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+In HTML, number inputs allow for exponential notation (such as `1e10`). You need to filter those out.
+
+Start by creating a function called `isInvalidInput` – it should take a single `str` parameter.
+
+# --hints--
+
+You should declare an `isInvalidInput` variable.
+
+```js
+assert.isDefined(isInvalidInput)
+```
+
+`isInvalidInput` should be a function.
+
+```js
+assert.isFunction(isInvalidInput)
+```
+
+`isInvalidInput` should take a single `str` parameter.
+
+```js
+assert.match(isInvalidInput?.toString(), /\(\s*str\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, '');
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
new file mode 100644
index 00000000000..778a809571e
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
@@ -0,0 +1,185 @@
+---
+id: 63bf598a4c807930a13a1a27
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Declare a `regex` variable, and assign it a regex that matches the character `e`.
+
+# --hints--
+
+Your `isInvalidInput` function should have a `regex` variable.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to `/e/`.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
new file mode 100644
index 00000000000..2bf1aa0f9a3
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
@@ -0,0 +1,179 @@
+---
+id: 63bf5a518d54f63181ab639a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `e` in a number input can also be an uppercase `E`. Regex has a flag for this, however – the `i` flag, which stands for "insensitive". This flag makes your pattern case-insensitive. Add the `i` flag to your regex pattern.
+
+# --hints--
+
+Your `regex` value should have the `i` flag.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\/i/);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
new file mode 100644
index 00000000000..19873a84492
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
@@ -0,0 +1,187 @@
+---
+id: 63bf5a92fd148d3264d5322b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Number inputs only allow the `e` to occur between two digits. To match any number, you can use the character class `[0-9]`. This will match any digit between `0` and `9`.
+
+Add this character class before and after `e` in your pattern.
+
+# --hints--
+
+You should add the `[0-9]` character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e/);
+```
+
+You should add the `[0-9]` character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e\[0-9\]\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
new file mode 100644
index 00000000000..75477ddd763
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5adfe2981b332eb007b6
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The `+` modifier in a regex allows you to match a pattern that occurs one or more times. To match your digit pattern one or more times, add a plus after each of the digit character classes. For example: `[0-9]+`.
+
+# --hints--
+
+You should add the `+` modifier to the character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e/);
+```
+
+You should add the `+` modifier to the character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e\[0-9\]\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]e[0-9]/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
new file mode 100644
index 00000000000..95686b3c3a0
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5bcfebff0734593fad19
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+There is a shorthand character class to match any digit: `\d`. Replace your `[0-9]` character classes with this shorthand.
+
+# --hints--
+
+You should replace the `[0-9]` character class before `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e/);
+```
+
+You should replace the `[0-9]` character class after `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e\\d\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]+e[0-9]+/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
new file mode 100644
index 00000000000..f6f61282ce9
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5c438f523a359769106c
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Strings have a `.match()` method, which takes a regex argument. `.match()` will return an array of match results – containing either the first match, or all matches if the global flag is used.
+
+Return the result of calling the `.match()` method on `str` and passing your `regex` variable as the argument. You'll use this match result later on.
+
+# --hints--
+
+Your `isInvalidInput` function should call the `.match()` method on `str`.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(/);
+```
+
+You should pass `regex` as the argument to the `.match()` method.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(\s*regex\s*\)/);
+```
+
+Your `isInvalidInput` function should directly return the result of the `.match()` call.
+
+```js
+assert.match(isInvalidInput.toString(), /return\s+str\.match\(\s*regex\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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
new file mode 100644
index 00000000000..228f3503303
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5cf03b50bf36cfbe94ea
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Your next step is to allow users to add entries to the calorie counter. Declare an empty function `addEntry`. This function should not take any parameters.
+
+# --hints--
+
+You should declare an `addEntry` variable.
+
+```js
+assert.isDefined(addEntry);
+```
+
+Your `addEntry` variable should be a function.
+
+```js
+assert.isFunction(addEntry);
+```
+
+Your `addEntry` function should not take any parameters.
+
+```js
+assert.match(addEntry?.toString(), /\(\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--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
new file mode 100644
index 00000000000..1bc417c8bbb
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
@@ -0,0 +1,198 @@
+---
+id: 63c1dfbd56c71e278800010c
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+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.
+
+# --hints--
+
+Your `addEntry` function should have a `targetId` variable.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=/);
+```
+
+Your `targetId` variable should start with the string `#`.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1/);
+```
+
+You should use concatenation to add `entryDropdown.value` after your `#` string.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1\s*\+\s*entryDropdown\.value/);
+```
+
+# --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() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
new file mode 100644
index 00000000000..413b5f76d84
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e0af28078f2dfad9eb3e
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Now you need to target the `.input-container` element within the element that has your `targetId`. Declare a new `targetInputContainer` variable, and assign it the value of `document.querySelector()`. Use concatenation to separate `targetId` and `'.input-container'` with a space, and pass that string to `querySelector()`.
+
+# --hints--
+
+Your `addEntry` function should have a `targetInputContainer` variable.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=/);
+```
+
+Your `targetInputContainer` variable should be set to `document.querySelector()`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(/);
+```
+
+You should pass `targetId` to your `querySelector()` method.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*/);
+```
+
+You should concatenate `' .input-container'` to `targetId`. Remember to include the space at the beginning of `.input-container`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*\s*\+\s*('|")\s\.input-container\1\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 targetId = '#' + entryDropdown.value;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
new file mode 100644
index 00000000000..06e5ac50cec
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e1965a898d302e0af4e3
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+JavaScript has a feature called template literals , which allow you to interpolate variables directly within a string. Template literals are denoted with backticks ` `` `, as opposed to single or double quotes. Variables can be passed in to a template literal by surrounding the variable with `${}` – the value of the variable will be inserted into the string.
+
+For example:
+
+```js
+const name = "Naomi";
+const templateLiteral = `Hello, my name is ${name}~!`;
+console.log(templateLiteral);
+```
+
+The console will show the string "Hello, my name is Naomi~!".
+
+Replace your concatenated string in the `querySelector` with a template literal – be sure to keep the space between your `targetId` variable and `.input-container`.
+
+# --hints--
+
+You should use a template literal in your `querySelector` method.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`.*`\)/);
+```
+
+Your template literal should have the value `{targetId} .input-container`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`\$\{targetId\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(targetId + ' .input-container');
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
new file mode 100644
index 00000000000..6aeab26c100
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
@@ -0,0 +1,197 @@
+---
+id: 63c1e5b4b3c8a031def3bd65
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Thanks to template literals, you actually don't need the `targetId` variable at all. Remove that variable, and update your template literal to replace `targetId` with `entryDropdown.value` – remember to add `#` before that, in the string.
+
+# --hints--
+
+You should remove the `targetId` variable.
+
+```js
+assert.notMatch(addEntry.toString(), /targetId\s*=/);
+```
+
+You should replace the `targetId` reference in your template literal with `entryDropdown.value`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#?\$\{entryDropdown\.value\}\s\.input-container`\s*\)/);
+```
+
+You should add `#` at the beginning of your template literal.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#\$\{entryDropdown\.value\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(`${targetId} .input-container`);
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md b/curriculum/challenges/japanese/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/japanese/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/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md b/curriculum/challenges/japanese/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/japanese/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
+
+
+
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll();
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
new file mode 100644
index 00000000000..a7c1e1d3e7b
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
@@ -0,0 +1,192 @@
+---
+id: 63c216da562fbb3957b9cb2c
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Now you need to build your dynamic HTML string to add to the webpage. Declare a new `HTMLString` variable, and assign it an empty template literal string.
+
+# --hints--
+
+Your `addEntry` function should have an `HTMLString` variable.
+
+```js
+assert.match(addEntry.toString(), /HTMLString\s*=/)
+```
+
+Your `HTMLString` should be an empty template literal.
+
+```js
+assert.match(code, /HTMLString\s*=\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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
new file mode 100644
index 00000000000..e8ced7f3436
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
@@ -0,0 +1,198 @@
+---
+id: 63c2171c1e5b6e3aa51768d0
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start your `HTMLString` with a new line, then create a `label` element. Give that element the text `Entry # Name`, using your template literal syntax to replace `#` with the value of `entryNumber`.
+
+# --hints--
+
+Your `HTMLString` variable should start with a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n/);
+```
+
+You should add a `label` element on the new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*.*<\/label>/);
+```
+
+Your `label` element should have the text `Entry ${entryNumber} Name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = ``;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
new file mode 100644
index 00000000000..f78a3d0252c
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
@@ -0,0 +1,193 @@
+---
+id: 63c21774193de43bbc6a769f
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give your `label` element a `for` attribute with the value `X-#-name`, where `X` is the `value` of the `entryDropdown` element and `#` is the value of `entryNumber`. Remember that HTML attributes should be wrapped in double quotes.
+
+# --hints--
+
+Your `label` element should have a `for` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*/)
+```
+
+Your `label` element should have the same text as before.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
new file mode 100644
index 00000000000..42ee9b19109
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
@@ -0,0 +1,217 @@
+---
+id: 63c217ccd939053ce4fa16d6
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+After your `label` element, and on a new line in your template string, create an `input` element. Give it a `type` attribute set to `text`, a `placeholder` attribute set to `Name`, and an `id` attribute that matches the `for` attribute of your `label` element.
+
+# --hints--
+
+You should not modify your `label` element.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+You should add an `input` element on a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*/)[0];
+assert.include(inputAttributes, 'placeholder="Name"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(//)[0];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-name"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
new file mode 100644
index 00000000000..cfeec0927c4
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
@@ -0,0 +1,228 @@
+---
+id: 63c21839f56eaf3ef4e027c4
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create another `label` element (on a new line) at the end of your `HTMLString`. This `label` should have the text `Entry # Calories`, using your template literal syntax to replace `#` with the value of `entryNumber`, and the `for` attribute set to `X-#-calories`, where `X` is the `value` of `entryDropdown` and `#` is the value of `entryNumber`.
+
+# --hints--
+
+You should have two `label` elements in your `HTMLString`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.equal(HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, //)
+```
+
+Your new `label` element should have the text `Entry ${entryNumber} Calories`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const label = HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, /Entry\s\$\{entryNumber\}\sCalories<\/label>/);
+```
+
+You should not modify your existing elements.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.match(HTMLstring, /`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*Entry\s\$\{entryNumber\}\sCalories<\/label>/)
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ ]*>/g)[1];
+assert.include(inputAttributes, 'placeholder="Calories"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-calories"');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'min="0"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
new file mode 100644
index 00000000000..36835a69413
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
@@ -0,0 +1,208 @@
+---
+id: 63c218c028c56a411b2a379a
+title: Step 49
+challengeType: 0
+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.
+
+# --hints--
+
+Your `addEntry` function should access the `innerHTML` property of `targetInputContainer`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML/);
+```
+
+You should use the `+=` operator on `targetInputContainer.innerHTML`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=/);
+```
+
+You should add your `HTMLString` to the `innerHTML` of the `targetInputContainer` element.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=\s*HTMLString/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ function reference ) directly.
+
+# --hints--
+
+You should call the `.addEventListener()` method of the `addEntryButton`.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(/);
+```
+
+You should pass `click` as the first argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*/);
+```
+
+You should pass `addEntry` as the second argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*,\s*addEntry\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ truthy or falsy . A value is truthy if it evaluates to `true` when converted to a Boolean. A value is falsy if it evaluates to `false` when converted to a Boolean. `null` is an example of a falsy value.
+
+You need to check if `invalidInputMatch` is truthy – you can do this by passing the variable directly to your `if` condition (without a comparison operator). Here's an example of checking the truthiness of `helloWorld`.
+
+```js
+if (helloWorld) {
+
+}
+```
+
+Add an `if` statement that checks if `invalidInputMatch` is truthy.
+
+# --hints--
+
+You should add an `if` statement to your `getCaloriesFromInputs` function.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(/);
+```
+
+You should check the truthiness of `invalidInputMatch` in your `if` condition.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(\s*invalidInputMatch\s*\)/);
+```
+
+Your `if` statement should be inside your `for` loop.
+
+```js
+assert.isBelow(getCaloriesFromInputs.toString().indexOf("for"), getCaloriesFromInputs.toString().indexOf("if"));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ /);
+```
+
+Your `span` should not have any text.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{remainingCalories\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{Math\.abs\(remainingCalories\)\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${remainingCalories} Calorie ${surplusOrDeficit}
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
new file mode 100644
index 00000000000..d341d5e62bf
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
@@ -0,0 +1,262 @@
+---
+id: 63c9e7d5b21eee2776ecc226
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+After your `span` element, add an `hr` element to create a horizontal line.
+
+To keep your code clean and readable, you should add this on a new line in the template literal.
+
+# --hints--
+
+You should add an `hr` element to your `output.innerHTML` string.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `hr` element should come after your `span` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
new file mode 100644
index 00000000000..ba1da012290
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
@@ -0,0 +1,270 @@
+---
+id: 63c9e84c9fe8ca28c4101189
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Now create a `p` element with the text `budgetCalories Calories Budgeted`, using interpolation to replace `budgetCalories` with the appropriate variable.
+
+This should come after your `hr` element.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `p` element should come after your `hr` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ /g).length, 2);
+```
+
+Your second `p` element should be on a new line.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /\n\s*
\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\n\s*
\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
new file mode 100644
index 00000000000..f57827b6348
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
@@ -0,0 +1,264 @@
+---
+id: 63c9e94e9df7d72aed1c24bd
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Finally, you need to make the `#output` element visible so the user can see your text. Your `output` variable is an Element, which has a `classList` property. This property has a `.remove()` method, which accepts a string representing the class to remove from the element.
+
+Use the `.remove()` method of the `output` variable's `classList` property to remove the `hide` class. Don't forget to place the word `hide` inside quotes.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList/);
+```
+
+You should call the `.remove()` method of the `classList` property.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(/);
+```
+
+You should pass `hide` as the argument to the `.remove()` method.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
new file mode 100644
index 00000000000..18e5f04d27a
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea23dbadbf2c2764e3f5
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+If you click on your `Calculate Remaining Calories` button, you'll see that nothing happens. You still need to mount the event listener.
+
+Add an event listener to your `calorieCounter` element. The event type should be `submit`, and the callback function should be `calculateCalories`.
+
+# --hints--
+
+You should use the `.addEventListener()` method of your `calorieCounter` element.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(/);
+```
+
+You should pass `submit` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*/);
+```
+
+You should pass `calculateCalories` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*,\s*calculateCalories\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
new file mode 100644
index 00000000000..6c09fd6f149
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea9b16430f2d54522464
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Your final feature to add is the ability for a user to clear the form. Start by declaring an empty function called `clearForm` – it should not take any arguments.
+
+# --hints--
+
+You should declare a `clearForm` variable.
+
+```js
+assert.isDefined(clearForm);
+```
+
+Your `clearForm` variable should be a function.
+
+```js
+assert.isFunction(clearForm);
+```
+
+Your `clearForm` function should not take any arguments.
+
+```js
+assert.match(clearForm?.toString(), /\(\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
new file mode 100644
index 00000000000..7810095dcce
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
@@ -0,0 +1,267 @@
+---
+id: 63c9eb09bcfaa72e3da820a1
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+You need to get all of the input containers. Declare an `inputContainers` variable, and assign it to the value of querying the document for all elements with the class `input-container`.
+
+# --hints--
+
+You should declare an `inputContainers` variable in your `clearForm` function.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=/);
+```
+
+You should use the `querySelectorAll` method to get all of the elements with the class `input-container`.
+
+```js
+assert.match(clearForm.toString(), /document\.querySelectorAll\(\s*('|")\.input-container\1\s*\)/);
+```
+
+You should assign the value of the `querySelectorAll` method to the `inputContainers` variable.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=\s*document\.querySelectorAll\(\s*('|")\.input-container\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
new file mode 100644
index 00000000000..73d20bba696
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
@@ -0,0 +1,263 @@
+---
+id: 63c9eb4a5d68f12f32d9b440
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Remember that `document.querySelectorAll` returns a `NodeList`, which is array-like but is not an array. However, the `Array` object has a `.from()` method that accepts an array-like and returns an array. This is helpful when you want access to more robust array methods, which you will learn about in a future project.
+
+Wrap your `inputContainers` query selector in `Array.from()`. Do this on the same line as your declaration.
+
+# --hints--
+
+You should wrap your `querySelectorAll` in `Array.from()`.
+
+```js
+assert.match(clearForm, /Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\s*\)/);
+```
+
+You should assign the result of `Array.from()` to your `inputContainers` variable.
+
+```js
+assert.match(clearForm, /inputContainers\s*=\s*Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = document.querySelectorAll('.input-container');
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
new file mode 100644
index 00000000000..f6655dc9175
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
@@ -0,0 +1,276 @@
+---
+id: 63c9ebb7b12bca3025b0a935
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+It is time for another loop. Use a `for` loop to iterate through the `inputContainers` array.
+
+Inside the loop, set the `innerHTML` property of the element at the current index to an empty string. This will clear all of the contents of that input container.
+
+# --hints--
+
+Your `clearForm` function should have a `for` loop.
+
+```js
+// loop protect injects stuff, so let's look at the raw code again
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(/);
+```
+
+Your `for` loop should iterate through the `inputContainers` array. Remember to use `i` as your iterator.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*inputContainers\.length\s*;\s*i\s*\+\+\s*\)/);
+```
+
+Your `for` loop should set the `innerHTML` property of `inputContainers[i]` to an empty string.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const forLoop = clearForm.split("for")[1];
+assert.match(forLoop, /inputContainers\[\s*i\s*\]\s*\.innerHTML\s*=\s*(`|'|")\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
new file mode 100644
index 00000000000..5ef4abce954
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
@@ -0,0 +1,275 @@
+---
+id: 63c9ec044acedf312c4974ff
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+After your loop completes, you need to clear the `budgetNumberInput`. Set the `value` property of `budgetNumberInput` to an empty string.
+
+# --hints--
+
+Your `clearForm` function should access the `value` property of the `budgetNumberInput` element.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value/);
+```
+
+Your `clearForm` function should set the `value` property of the `budgetNumberInput` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value\s*=\s*('|"|`)\1/);
+```
+
+You should modify the `budgetNumberInput` after your `for` loop.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const afterLoop = clearForm.split("}")[1];
+assert.match(afterLoop, /budgetNumberInput\.value/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
new file mode 100644
index 00000000000..3dab9bed7e5
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
@@ -0,0 +1,276 @@
+---
+id: 63c9f24afbc9cf324dcaa9a4
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+You also need to clear the `output` element's text. You can do this by setting the `innerText` property to an empty string.
+
+The difference between `innerText` and `innerHTML` is that `innerText` will not render HTML elements, but will display the tags and content as raw text.
+
+# --hints--
+
+Your `clearForm` function should access the `innerText` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText/);
+```
+
+Your `clearForm` function should set the `innerText` property of the `output` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText\s*=\s*('|"|`)\1/);
+```
+
+You should modify `output` after modifying `budgetNumberInput`.
+
+```js
+assert.isAbove(clearForm.toString().indexOf('output'), clearForm.toString().indexOf('budgetNumberInput'));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
new file mode 100644
index 00000000000..b2e9d536a15
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
@@ -0,0 +1,277 @@
+---
+id: 63c9f28bda3e3f336e21b6b4
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+To finish off this function, you need to restore the `hide` class to the `output` element. The `classList` property has an `.add()` method which is the opposite of the `.remove()` method. It accepts a string representing the class to add to the element.
+
+Add the `hide` class to your `output`.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList/);
+```
+
+You should call the `.add()` method on the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add/);
+```
+
+You should pass `hide` as the argument to the `.add()` method.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
new file mode 100644
index 00000000000..d29b3f2ac72
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
@@ -0,0 +1,520 @@
+---
+id: 63c9f2bff625af342023512c
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+To complete this project, add an event listener to the `clearButton` button. When the button is clicked, it should call the `clearForm` function.
+
+Congratulations! Your project is complete.
+
+# --hints--
+
+You should add an event listener to the `clearButton` button.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(/);
+```
+
+You should pass `click` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*/);
+```
+
+You should pass `clearForm` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*,\s*clearForm\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener('click', addEntry);
+calorieCounter.addEventListener('submit', calculateCalories);
+clearButton.addEventListener('click', clearForm);
+```
diff --git a/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md b/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md b/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md b/curriculum/challenges/japanese/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/japanese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/japanese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
index cd781c29124..47e1f0f251d 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
@@ -8,21 +8,28 @@ dashedName: record-collection
# --description--
-Você recebeu um objeto literal representando uma parte da sua coleção de álbuns musicais. Cada álbum possui um número de id único como sua chave e diversas outras propriedades. Nem todos os álbuns possuem informações completas.
+You are creating a function that aids in the maintenance of a musical album collection. The collection is organized as an object that contains multiple albums which are also objects. Each album is represented in the collection with a unique `id` as the property name. Within each album object, there are various properties describing information about the album. Not all albums have complete information.
-Você começa com uma função `updateRecords` que recebe um objeto literal, `records`, contendo a coleção de álbuns musicais, um `id`, uma `prop`(like `artist` ou `tracks`) e um `value`. Complete a função usando as regras abaixo para modificar o objeto passado para a função.
+The `updateRecords` function takes 4 arguments represented by the following function parameters:
-- A função precisa sempre retornar o objeto de coleção de discos completo.
-- Se `prop` não for `tracks` e `value` não for uma string vazia, atualize ou defina aquela `prop` do álbum como `value`.
-- Se `prop` for `tracks` mas o álbum não tiver uma propriedade `tracks`, crie um array vazio e adicione o `value` nesse array.
-- Se `prop` for `tracks` e `value` não for uma string vazia, adicione `value` ao final do array existente de `tracks` do álbum.
-- Se `value` for uma string vazia, remova a propriedade `prop` recebida do álbum.
+- `records` - an object containing several individual albums
+- `id` - a number representing a specific album in the `records` object
+- `prop` - a string representing the name of the album’s property to update
+- `value` - a string containing the information used to update the album’s property
-**Observação:** uma cópia do objeto `recordCollection` é usada para testes.
+Complete the function using the rules below to modify the object passed to the function.
+
+- Your function must always return the entire `records` object.
+- If `value` is an empty string, delete the given `prop` property from the album.
+- If `prop` isn’t `"tracks"` and `value` isn't an empty string, assign the `value` to that album’s `prop`.
+- If `prop` is `"tracks"` and `value` isn’t an empty string, add the `value` to the end of the album’s existing `"tracks"` array.
+- If the album doesn’t have a `"tracks"` property, create a new array for the album's `"tracks"` property before adding the `value` to it.
+
+**Note:** A copy of the `recordCollection` object is used for the tests. You should not directly modify the `recordCollection` object.
# --hints--
-Após `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` deve ser a string `ABBA`
+After `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` should be the string `ABBA`
```js
assert(
@@ -31,7 +38,7 @@ assert(
);
```
-Após `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` deve ter a string `Take a Chance on Me` como o último e único elemento.
+After `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` should have the string `Take a Chance on Me` as the last and only element.
```js
assert(
@@ -41,14 +48,14 @@ assert(
);
```
-Após `updateRecords(recordCollection, 2548, "artist", "")`, `artist` não deve ser definido
+After `updateRecords(recordCollection, 2548, "artist", "")`, `artist` should not be set
```js
updateRecords(_recordCollection, 2548, 'artist', '');
assert(!_recordCollection[2548].hasOwnProperty('artist'));
```
-Após `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` deve ter a string `Addicted to Love` como o último elemento.
+After `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` should have the string `Addicted to Love` as the last element.
```js
assert(
@@ -58,7 +65,7 @@ assert(
);
```
-Após `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` deve ter a string `1999` como o último elemento. Após.
+After `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` should have the string `1999` as the first element.
```js
assert(
@@ -68,14 +75,14 @@ assert(
);
```
-Após `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` não deve ser definido
+After `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` should not be set
```js
updateRecords(_recordCollection, 2548, 'tracks', '');
assert(!_recordCollection[2548].hasOwnProperty('tracks'));
```
-Após `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` deve ser a string `Riptide`
+After `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` should be the string `Riptide`
```js
assert(
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index 655533518c7..316a90bf5f1 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,25 +26,29 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
Você deve adicionar o primeiro `input` após o texto `Enter Your First Name:` do elemento `label` e incluir um espaço depois dos dois-pontos.
```js
-assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML.trim(), 'Enter Your First Name: Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
new file mode 100644
index 00000000000..e938bc8c2e3
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
@@ -0,0 +1,146 @@
+---
+id: 63b606f09a14cc1781aea1fb
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Create a `label` element, give it a `for` attribute set to `budget` and the text `Budget`, then create an `input` element with the `id` set to `budget`.
+
+# --hints--
+
+You should create a `label` element in your `form`.
+
+```js
+assert.exists(document.querySelector('form label'));
+```
+
+Your `label` element should have a `for` attribute set to `budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.getAttribute('for'), 'budget');
+```
+
+Your `label` element should have the text `Budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.innerText, 'Budget');
+```
+
+You should create an `input` element within your `form`.
+
+```js
+assert.exists(document.querySelector('form input'));
+```
+
+Your `input` element should come after your `label` element.
+
+```js
+assert.equal(document.querySelector('form input')?.previousElementSibling?.tagName, "LABEL");
+```
+
+Your `input` element should have an `id` set to `budget`.
+
+```js
+assert.equal(document.querySelector('form input')?.id, "budget");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
new file mode 100644
index 00000000000..fcabad47a30
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
@@ -0,0 +1,131 @@
+---
+id: 63b6075a62883218d282504c
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Your `input` element needs some additional attributes. Give it a `type` set to `number` to only allow numeric inputs, a `min` attribute set to `0` to only allow positive numbers, and a `placeholder` set to `Daily calorie budget`.
+
+Finally, mark the `input` element as `required`.
+
+# --hints--
+
+Your `input` element should have a `type` attribute set to `number`.
+
+```js
+assert.equal(document.querySelector('form input').type, 'number');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+assert.equal(document.querySelector('form input').min, '0');
+```
+
+Your `input` element should have a `placeholder` attribute set to `Daily calorie budget`.
+
+```js
+assert.equal(document.querySelector('form input').placeholder, 'Daily calorie budget');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md b/curriculum/challenges/portuguese/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/portuguese/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
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
new file mode 100644
index 00000000000..17934b0039d
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
@@ -0,0 +1,170 @@
+---
+id: 63b60cfaca25bb27edd40f62
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Finally, you need to link your JavaScript file to your HTML. Create a `script` element to do so.
+
+# --hints--
+
+You should have a `script` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('script')?.length, 1);
+```
+
+Your `script` element should have the `src` set to `./script.js`.
+
+```js
+assert.match(code, /script\s*?src\s*?=\s*?('|")(\.\/)?script\.js\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
new file mode 100644
index 00000000000..de3870b44ad
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
@@ -0,0 +1,176 @@
+---
+id: 63b60d3c5048302906962231
+title: Step 14
+challengeType: 0
+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`.
+
+# --hints--
+
+You should create a variable called `calorieCounter`.
+
+```js
+assert.isDefined(calorieCounter);
+```
+
+You should use `document.getElementById()` to get the `#calorie-counter` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")calorie-counter\1\s*\)/g);
+```
+
+You should store the `#calorie-counter` element in a variable called `calorieCounter`.
+
+```js
+assert.equal(calorieCounter, document.getElementById('calorie-counter'));
+```
+
+# --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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
new file mode 100644
index 00000000000..44e1c274573
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
@@ -0,0 +1,195 @@
+---
+id: 63b613f367584d2a5d041b7d
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Get your `#budget` element and assign it to `budgetNumberInput`, and your `#entry-dropdown` element and assign it to `entryDropdown`.
+
+# --hints--
+
+You should declare a variable called `budgetNumberInput`.
+
+```js
+assert.isDefined(budgetNumberInput);
+```
+
+You should use `document.getElementById()` to get the `#budget` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")budget\1\s*\)/g);
+```
+
+You should store the `#budget` element in a variable called `budgetNumberInput`.
+
+```js
+assert.equal(budgetNumberInput, document.getElementById('budget'));
+```
+
+You should declare a variable called `entryDropdown`.
+
+```js
+assert.isDefined(entryDropdown);
+```
+
+You should use `document.getElementById()` to get the `#entry-dropdown` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")entry-dropdown\1\s*\)/g);
+```
+
+You should store the `#entry-dropdown` element in a variable called `entryDropdown`.
+
+```js
+assert.equal(entryDropdown, document.getElementById('entry-dropdown'));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
new file mode 100644
index 00000000000..6cbbeb5ab4a
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
@@ -0,0 +1,215 @@
+---
+id: 63b61490e633a22b4593e62f
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Following the same pattern, assign your `#add-entry` element to `addEntryButton`, your `#clear` element to `clearButton`, and your `#output` element to `output`.
+
+# --hints--
+
+You should declare a variable called `addEntryButton`.
+
+```js
+assert.isDefined(addEntryButton);
+```
+
+You should use `document.getElementById()` to get the `#add-entry` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")add-entry\1\s*\)/g);
+```
+
+You should assign the `#add-entry` element to `addEntryButton`.
+
+```js
+assert.equal(addEntryButton, document.getElementById('add-entry'));
+```
+
+You should declare a variable called `clearButton`.
+
+```js
+assert.isDefined(clearButton);
+```
+
+You should use `document.getElementById()` to get the `#clear` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")clear\1\s*\)/g);
+```
+
+You should assign the `#clear` element to `clearButton`.
+
+```js
+assert.equal(clearButton, document.getElementById('clear'));
+```
+
+You should declare a variable called `output`.
+
+```js
+assert.isDefined(output);
+```
+
+You should use `document.getElementById()` to get the `#output` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")output\1\s*\)/g);
+```
+
+You should assign the `#output` element to `output`.
+
+```js
+assert.equal(output, document.getElementById("output"));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
new file mode 100644
index 00000000000..99c1985862c
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
@@ -0,0 +1,182 @@
+---
+id: 63b614e6a1f7fe2cef6312dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Declare an `isError` variable and set it to `false`, but use `let` so you can reassign it later.
+
+# --hints--
+
+You should declare an `isError` variable.
+
+```js
+assert.isDefined(isError);
+```
+
+Your `isError` variable should be set to `false`.
+
+```js
+assert.isFalse(isError);
+```
+
+You should use `let` to declare your `isError` variable.
+
+```js
+assert.match(code, /let\s+isError\s*=\s*false/g);
+```
+
+# --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
+--fcc-editable-region--
+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');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
new file mode 100644
index 00000000000..436b65b80d6
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
@@ -0,0 +1,192 @@
+---
+id: 63b6152e6aff882db819fc1e
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Even though you set an `input` element to be a number, JavaScript receives a string value. You need to write a function to clean the string value and ensure you have a number.
+
+Start by declaring a `cleanInputString` function that takes a `str` argument.
+
+# --hints--
+
+You should declare a `cleanInputString` variable.
+
+```js
+assert.isDefined(cleanInputString);
+```
+
+Your `cleanInputString` variable should be a function.
+
+```js
+assert.isFunction(cleanInputString);
+```
+
+Your `cleanInputString` function should take a `str` argument.
+
+```js
+assert.match(cleanInputString?.toString(), /\(str\)/);
+```
+
+`cleanInputString` should be an empty function.
+
+```js
+assert.match(cleanInputString?.toString(), /\{\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;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
new file mode 100644
index 00000000000..b7de4018e24
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
@@ -0,0 +1,182 @@
+---
+id: 63b61584def8fa2ebcc259e0
+title: Step 19
+challengeType: 0
+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.
+
+Declare a `strArray` variable and assign it that split value.
+
+# --hints--
+
+Your `cleanInputString` function should declare a `strArray` variable.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=/);
+```
+
+Your `strArray` variable should be assigned the value of `str.split('')`.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=\s*str\.split\(\s*('|")\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
new file mode 100644
index 00000000000..a0eaf81fd4e
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
@@ -0,0 +1,181 @@
+---
+id: 63bf43be3f969d24d4ed233c
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Declare a `cleanStrArray` variable and assign it an empty array. You will use this to store your valid number characters.
+
+# --hints--
+
+Your `cleanInputString` should declare a variable called `cleanStrArray`.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*/g);
+```
+
+Your `cleanStrArray` variable should be assigned an empty array.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*=\s*\[\s*\]/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
new file mode 100644
index 00000000000..db275c224c1
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
@@ -0,0 +1,195 @@
+---
+id: 63bf446945d34d25e6db6e4f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Use a `for` loop to iterate through each character in your `strArray` array.
+
+# --hints--
+
+Your `cleanInputString` function should have a `for` loop.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(/g);
+```
+
+Your `for` loop should initialize a variable called `i` to `0`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;/g);
+```
+
+Your `for` loop should have a condition that checks if `i` is less than the length of `strArray`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;/g);
+```
+
+Your `for` loop should increment `i` by `1` each time it runs. Use the increment operator for this.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
new file mode 100644
index 00000000000..a432c6687d5
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
@@ -0,0 +1,200 @@
+---
+id: 63bf45ce0dc8d4270760c6d0
+title: Step 22
+challengeType: 0
+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`.
+
+To check your character, see if the array `["+", "-", " "]` includes the character – you can use the `.includes()` method on the array to do this.
+
+# --hints--
+
+Your `for` loop should have an `if` statement.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(/);
+```
+
+Your `for` loop should use `!["+", "-", " "].includes()`.
+
+```js
+// the loop protection injects code so we have to look at the raw code directly
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(/);
+```
+
+Your `for` loop should see if `strArray[i]` is found in `["+", "-", " "]`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{/);
+```
+
+Your `for` loop should `push` `strArray[i]` to `cleanStrArray`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{\s*cleanStrArray\.push\(\s*strArray\[i\]\s*\)\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
new file mode 100644
index 00000000000..f74ff636c5b
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
@@ -0,0 +1,213 @@
+---
+id: 63bf461011fca327d3b60fa8
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+While looping through the string works, creating a new array is inefficient for memory and runtime performance. Instead, you can use Regular Expressions (referred to as "regex") to match specific characters.
+
+Regex in JavaScript is indicated by a pattern wrapped in forward slashes – for example:
+
+```js
+const regex = /hello/;
+```
+
+Remove your existing code within the `cleanInputString` function. Declare a `regex` variable and assign it the value from the example above.
+
+# --hints--
+
+You should remove the `cleanStrArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /cleanStrArray/);
+```
+
+You should remove the `strArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /strArray/);
+```
+
+You should not have a `for` loop.
+
+```js
+assert.notMatch(cleanInputString.toString(), /for/);
+```
+
+You should declare a `regex` variable.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to the regular expression `/hello/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/hello\//);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+ if (!["+", "-", " "].includes(strArray[i])) {
+ cleanStrArray.push(strArray[i])
+ }
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
new file mode 100644
index 00000000000..0f781eb61cf
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
@@ -0,0 +1,176 @@
+---
+id: 63bf47fd40599f29827f484d
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+The pattern you currently have will match the exact text `hello`, which is not what you want to match. You want to look for `+`, `-`, or spaces. Replace the pattern in your `regex` variable with `\+-` to look for plus and minus characters.
+
+Note that you need to use the `\` to escape the `+`, because a `+` has a special meaning in regular expressions.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /hello/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
new file mode 100644
index 00000000000..25d6d2447fb
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
@@ -0,0 +1,174 @@
+---
+id: 63bf492b6dfb292a79f0e675
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+In regex, shorthand character classes allow you to match specific characters without having to write those characters in your pattern. Shorthand character classes are preceded with a backslash (`\`). The character class `\s` will match any whitespace character. Add this to your regex pattern.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-\s/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
new file mode 100644
index 00000000000..3b18f0aac60
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
@@ -0,0 +1,188 @@
+---
+id: 63bf4bfe9de3852be51c8f86
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Your current pattern won't work just yet. `/+-\s/` looks for `+`, `-`, and a space *in order*. This would match `+- hello` but would not match `+hello`.
+
+To tell the pattern to match each of these characters individually, you need to turn them into a character class. This is done by wrapping the characters you want to match in brackets. For example, this pattern will match the characters `h`, `e`, `l`, or `o`:
+
+```js
+const regex = /[helo]/;
+```
+
+Turn your `+-\s` pattern into a character class. Note that you no longer need to escape the `+` character, because you are using a character class.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `[+-\s]`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\\?\+-\\s\]\//)
+```
+
+You should not escape the `+` character in your regular expression.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-\s/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
new file mode 100644
index 00000000000..30baf30ed58
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
@@ -0,0 +1,180 @@
+---
+id: 63bf4d351e06432ce9bf3627
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Regex can also take specific flags to alter the pattern matching behavior. Flags are added after the closing `/`. The `g` flag, which stands for "global", will tell the pattern to continue looking after it has found a match. Here is an example:
+
+```js
+const helloRegex = /hello/g;
+```
+
+Add the `g` flag to your regex pattern.
+
+# --hints--
+
+You should add the `g` flag to your `regex` value.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\s\]\/g/);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
new file mode 100644
index 00000000000..4b35b49f7b9
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
@@ -0,0 +1,199 @@
+---
+id: 63bf511b85b6082e54dc1573
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Strings have a `.replace()` method which allows you to replace characters in the string with another string. `.replace` takes two arguments. The first is the character sequence to replace – this can either be a string or a regex pattern. The second is the string to replace that sequence with. For example, this would replace all instances of `l` with `1`:
+
+```js
+"hello".replace(/l/g, "1");
+```
+
+Use your `regex` to replace all instances of `+`, `-`, and a space in `str` with an empty string. Return this value.
+
+# --hints--
+
+Your `cleanInputString` should call the `replace` method of `str`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(/);
+```
+
+You should pass `regex` as the first argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*/);
+```
+
+You should pass `""` as the second argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*,\s*("|')\1\s*\)/);
+```
+
+Your `cleanInputString` function should directly return the result of your `replace` method.
+
+```js
+assert.match(cleanInputString.toString(), /return\s*str\.replace\(\s*regex\s*,\s*("|')\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
new file mode 100644
index 00000000000..b6eef00a30b
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
@@ -0,0 +1,191 @@
+---
+id: 63bf5230bccd1c2f5c13e1ce
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+In HTML, number inputs allow for exponential notation (such as `1e10`). You need to filter those out.
+
+Start by creating a function called `isInvalidInput` – it should take a single `str` parameter.
+
+# --hints--
+
+You should declare an `isInvalidInput` variable.
+
+```js
+assert.isDefined(isInvalidInput)
+```
+
+`isInvalidInput` should be a function.
+
+```js
+assert.isFunction(isInvalidInput)
+```
+
+`isInvalidInput` should take a single `str` parameter.
+
+```js
+assert.match(isInvalidInput?.toString(), /\(\s*str\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, '');
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
new file mode 100644
index 00000000000..778a809571e
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
@@ -0,0 +1,185 @@
+---
+id: 63bf598a4c807930a13a1a27
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Declare a `regex` variable, and assign it a regex that matches the character `e`.
+
+# --hints--
+
+Your `isInvalidInput` function should have a `regex` variable.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to `/e/`.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
new file mode 100644
index 00000000000..2bf1aa0f9a3
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
@@ -0,0 +1,179 @@
+---
+id: 63bf5a518d54f63181ab639a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `e` in a number input can also be an uppercase `E`. Regex has a flag for this, however – the `i` flag, which stands for "insensitive". This flag makes your pattern case-insensitive. Add the `i` flag to your regex pattern.
+
+# --hints--
+
+Your `regex` value should have the `i` flag.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\/i/);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
new file mode 100644
index 00000000000..19873a84492
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
@@ -0,0 +1,187 @@
+---
+id: 63bf5a92fd148d3264d5322b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Number inputs only allow the `e` to occur between two digits. To match any number, you can use the character class `[0-9]`. This will match any digit between `0` and `9`.
+
+Add this character class before and after `e` in your pattern.
+
+# --hints--
+
+You should add the `[0-9]` character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e/);
+```
+
+You should add the `[0-9]` character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e\[0-9\]\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
new file mode 100644
index 00000000000..75477ddd763
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5adfe2981b332eb007b6
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The `+` modifier in a regex allows you to match a pattern that occurs one or more times. To match your digit pattern one or more times, add a plus after each of the digit character classes. For example: `[0-9]+`.
+
+# --hints--
+
+You should add the `+` modifier to the character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e/);
+```
+
+You should add the `+` modifier to the character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e\[0-9\]\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]e[0-9]/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
new file mode 100644
index 00000000000..95686b3c3a0
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5bcfebff0734593fad19
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+There is a shorthand character class to match any digit: `\d`. Replace your `[0-9]` character classes with this shorthand.
+
+# --hints--
+
+You should replace the `[0-9]` character class before `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e/);
+```
+
+You should replace the `[0-9]` character class after `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e\\d\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]+e[0-9]+/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
new file mode 100644
index 00000000000..f6f61282ce9
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5c438f523a359769106c
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Strings have a `.match()` method, which takes a regex argument. `.match()` will return an array of match results – containing either the first match, or all matches if the global flag is used.
+
+Return the result of calling the `.match()` method on `str` and passing your `regex` variable as the argument. You'll use this match result later on.
+
+# --hints--
+
+Your `isInvalidInput` function should call the `.match()` method on `str`.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(/);
+```
+
+You should pass `regex` as the argument to the `.match()` method.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(\s*regex\s*\)/);
+```
+
+Your `isInvalidInput` function should directly return the result of the `.match()` call.
+
+```js
+assert.match(isInvalidInput.toString(), /return\s+str\.match\(\s*regex\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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
new file mode 100644
index 00000000000..228f3503303
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5cf03b50bf36cfbe94ea
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Your next step is to allow users to add entries to the calorie counter. Declare an empty function `addEntry`. This function should not take any parameters.
+
+# --hints--
+
+You should declare an `addEntry` variable.
+
+```js
+assert.isDefined(addEntry);
+```
+
+Your `addEntry` variable should be a function.
+
+```js
+assert.isFunction(addEntry);
+```
+
+Your `addEntry` function should not take any parameters.
+
+```js
+assert.match(addEntry?.toString(), /\(\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--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
new file mode 100644
index 00000000000..1bc417c8bbb
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
@@ -0,0 +1,198 @@
+---
+id: 63c1dfbd56c71e278800010c
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+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.
+
+# --hints--
+
+Your `addEntry` function should have a `targetId` variable.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=/);
+```
+
+Your `targetId` variable should start with the string `#`.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1/);
+```
+
+You should use concatenation to add `entryDropdown.value` after your `#` string.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1\s*\+\s*entryDropdown\.value/);
+```
+
+# --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() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
new file mode 100644
index 00000000000..413b5f76d84
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e0af28078f2dfad9eb3e
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Now you need to target the `.input-container` element within the element that has your `targetId`. Declare a new `targetInputContainer` variable, and assign it the value of `document.querySelector()`. Use concatenation to separate `targetId` and `'.input-container'` with a space, and pass that string to `querySelector()`.
+
+# --hints--
+
+Your `addEntry` function should have a `targetInputContainer` variable.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=/);
+```
+
+Your `targetInputContainer` variable should be set to `document.querySelector()`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(/);
+```
+
+You should pass `targetId` to your `querySelector()` method.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*/);
+```
+
+You should concatenate `' .input-container'` to `targetId`. Remember to include the space at the beginning of `.input-container`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*\s*\+\s*('|")\s\.input-container\1\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 targetId = '#' + entryDropdown.value;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
new file mode 100644
index 00000000000..06e5ac50cec
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e1965a898d302e0af4e3
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+JavaScript has a feature called template literals , which allow you to interpolate variables directly within a string. Template literals are denoted with backticks ` `` `, as opposed to single or double quotes. Variables can be passed in to a template literal by surrounding the variable with `${}` – the value of the variable will be inserted into the string.
+
+For example:
+
+```js
+const name = "Naomi";
+const templateLiteral = `Hello, my name is ${name}~!`;
+console.log(templateLiteral);
+```
+
+The console will show the string "Hello, my name is Naomi~!".
+
+Replace your concatenated string in the `querySelector` with a template literal – be sure to keep the space between your `targetId` variable and `.input-container`.
+
+# --hints--
+
+You should use a template literal in your `querySelector` method.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`.*`\)/);
+```
+
+Your template literal should have the value `{targetId} .input-container`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`\$\{targetId\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(targetId + ' .input-container');
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
new file mode 100644
index 00000000000..6aeab26c100
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
@@ -0,0 +1,197 @@
+---
+id: 63c1e5b4b3c8a031def3bd65
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Thanks to template literals, you actually don't need the `targetId` variable at all. Remove that variable, and update your template literal to replace `targetId` with `entryDropdown.value` – remember to add `#` before that, in the string.
+
+# --hints--
+
+You should remove the `targetId` variable.
+
+```js
+assert.notMatch(addEntry.toString(), /targetId\s*=/);
+```
+
+You should replace the `targetId` reference in your template literal with `entryDropdown.value`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#?\$\{entryDropdown\.value\}\s\.input-container`\s*\)/);
+```
+
+You should add `#` at the beginning of your template literal.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#\$\{entryDropdown\.value\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(`${targetId} .input-container`);
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md b/curriculum/challenges/portuguese/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/portuguese/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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md b/curriculum/challenges/portuguese/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/portuguese/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
+
+
+
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll();
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
new file mode 100644
index 00000000000..a7c1e1d3e7b
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
@@ -0,0 +1,192 @@
+---
+id: 63c216da562fbb3957b9cb2c
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Now you need to build your dynamic HTML string to add to the webpage. Declare a new `HTMLString` variable, and assign it an empty template literal string.
+
+# --hints--
+
+Your `addEntry` function should have an `HTMLString` variable.
+
+```js
+assert.match(addEntry.toString(), /HTMLString\s*=/)
+```
+
+Your `HTMLString` should be an empty template literal.
+
+```js
+assert.match(code, /HTMLString\s*=\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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
new file mode 100644
index 00000000000..e8ced7f3436
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
@@ -0,0 +1,198 @@
+---
+id: 63c2171c1e5b6e3aa51768d0
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start your `HTMLString` with a new line, then create a `label` element. Give that element the text `Entry # Name`, using your template literal syntax to replace `#` with the value of `entryNumber`.
+
+# --hints--
+
+Your `HTMLString` variable should start with a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n/);
+```
+
+You should add a `label` element on the new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*.*<\/label>/);
+```
+
+Your `label` element should have the text `Entry ${entryNumber} Name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = ``;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
new file mode 100644
index 00000000000..f78a3d0252c
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
@@ -0,0 +1,193 @@
+---
+id: 63c21774193de43bbc6a769f
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give your `label` element a `for` attribute with the value `X-#-name`, where `X` is the `value` of the `entryDropdown` element and `#` is the value of `entryNumber`. Remember that HTML attributes should be wrapped in double quotes.
+
+# --hints--
+
+Your `label` element should have a `for` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*/)
+```
+
+Your `label` element should have the same text as before.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
new file mode 100644
index 00000000000..42ee9b19109
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
@@ -0,0 +1,217 @@
+---
+id: 63c217ccd939053ce4fa16d6
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+After your `label` element, and on a new line in your template string, create an `input` element. Give it a `type` attribute set to `text`, a `placeholder` attribute set to `Name`, and an `id` attribute that matches the `for` attribute of your `label` element.
+
+# --hints--
+
+You should not modify your `label` element.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+You should add an `input` element on a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*/)[0];
+assert.include(inputAttributes, 'placeholder="Name"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(//)[0];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-name"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
new file mode 100644
index 00000000000..cfeec0927c4
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
@@ -0,0 +1,228 @@
+---
+id: 63c21839f56eaf3ef4e027c4
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create another `label` element (on a new line) at the end of your `HTMLString`. This `label` should have the text `Entry # Calories`, using your template literal syntax to replace `#` with the value of `entryNumber`, and the `for` attribute set to `X-#-calories`, where `X` is the `value` of `entryDropdown` and `#` is the value of `entryNumber`.
+
+# --hints--
+
+You should have two `label` elements in your `HTMLString`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.equal(HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, //)
+```
+
+Your new `label` element should have the text `Entry ${entryNumber} Calories`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const label = HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, /Entry\s\$\{entryNumber\}\sCalories<\/label>/);
+```
+
+You should not modify your existing elements.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.match(HTMLstring, /`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*Entry\s\$\{entryNumber\}\sCalories<\/label>/)
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ ]*>/g)[1];
+assert.include(inputAttributes, 'placeholder="Calories"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-calories"');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'min="0"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
new file mode 100644
index 00000000000..36835a69413
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
@@ -0,0 +1,208 @@
+---
+id: 63c218c028c56a411b2a379a
+title: Step 49
+challengeType: 0
+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.
+
+# --hints--
+
+Your `addEntry` function should access the `innerHTML` property of `targetInputContainer`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML/);
+```
+
+You should use the `+=` operator on `targetInputContainer.innerHTML`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=/);
+```
+
+You should add your `HTMLString` to the `innerHTML` of the `targetInputContainer` element.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=\s*HTMLString/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ function reference ) directly.
+
+# --hints--
+
+You should call the `.addEventListener()` method of the `addEntryButton`.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(/);
+```
+
+You should pass `click` as the first argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*/);
+```
+
+You should pass `addEntry` as the second argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*,\s*addEntry\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ truthy or falsy . A value is truthy if it evaluates to `true` when converted to a Boolean. A value is falsy if it evaluates to `false` when converted to a Boolean. `null` is an example of a falsy value.
+
+You need to check if `invalidInputMatch` is truthy – you can do this by passing the variable directly to your `if` condition (without a comparison operator). Here's an example of checking the truthiness of `helloWorld`.
+
+```js
+if (helloWorld) {
+
+}
+```
+
+Add an `if` statement that checks if `invalidInputMatch` is truthy.
+
+# --hints--
+
+You should add an `if` statement to your `getCaloriesFromInputs` function.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(/);
+```
+
+You should check the truthiness of `invalidInputMatch` in your `if` condition.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(\s*invalidInputMatch\s*\)/);
+```
+
+Your `if` statement should be inside your `for` loop.
+
+```js
+assert.isBelow(getCaloriesFromInputs.toString().indexOf("for"), getCaloriesFromInputs.toString().indexOf("if"));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ /);
+```
+
+Your `span` should not have any text.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{remainingCalories\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{Math\.abs\(remainingCalories\)\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${remainingCalories} Calorie ${surplusOrDeficit}
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
new file mode 100644
index 00000000000..d341d5e62bf
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
@@ -0,0 +1,262 @@
+---
+id: 63c9e7d5b21eee2776ecc226
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+After your `span` element, add an `hr` element to create a horizontal line.
+
+To keep your code clean and readable, you should add this on a new line in the template literal.
+
+# --hints--
+
+You should add an `hr` element to your `output.innerHTML` string.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `hr` element should come after your `span` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
new file mode 100644
index 00000000000..ba1da012290
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
@@ -0,0 +1,270 @@
+---
+id: 63c9e84c9fe8ca28c4101189
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Now create a `p` element with the text `budgetCalories Calories Budgeted`, using interpolation to replace `budgetCalories` with the appropriate variable.
+
+This should come after your `hr` element.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `p` element should come after your `hr` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ /g).length, 2);
+```
+
+Your second `p` element should be on a new line.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /\n\s*
\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\n\s*
\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
new file mode 100644
index 00000000000..f57827b6348
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
@@ -0,0 +1,264 @@
+---
+id: 63c9e94e9df7d72aed1c24bd
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Finally, you need to make the `#output` element visible so the user can see your text. Your `output` variable is an Element, which has a `classList` property. This property has a `.remove()` method, which accepts a string representing the class to remove from the element.
+
+Use the `.remove()` method of the `output` variable's `classList` property to remove the `hide` class. Don't forget to place the word `hide` inside quotes.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList/);
+```
+
+You should call the `.remove()` method of the `classList` property.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(/);
+```
+
+You should pass `hide` as the argument to the `.remove()` method.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
new file mode 100644
index 00000000000..18e5f04d27a
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea23dbadbf2c2764e3f5
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+If you click on your `Calculate Remaining Calories` button, you'll see that nothing happens. You still need to mount the event listener.
+
+Add an event listener to your `calorieCounter` element. The event type should be `submit`, and the callback function should be `calculateCalories`.
+
+# --hints--
+
+You should use the `.addEventListener()` method of your `calorieCounter` element.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(/);
+```
+
+You should pass `submit` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*/);
+```
+
+You should pass `calculateCalories` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*,\s*calculateCalories\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
new file mode 100644
index 00000000000..6c09fd6f149
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea9b16430f2d54522464
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Your final feature to add is the ability for a user to clear the form. Start by declaring an empty function called `clearForm` – it should not take any arguments.
+
+# --hints--
+
+You should declare a `clearForm` variable.
+
+```js
+assert.isDefined(clearForm);
+```
+
+Your `clearForm` variable should be a function.
+
+```js
+assert.isFunction(clearForm);
+```
+
+Your `clearForm` function should not take any arguments.
+
+```js
+assert.match(clearForm?.toString(), /\(\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
new file mode 100644
index 00000000000..7810095dcce
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
@@ -0,0 +1,267 @@
+---
+id: 63c9eb09bcfaa72e3da820a1
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+You need to get all of the input containers. Declare an `inputContainers` variable, and assign it to the value of querying the document for all elements with the class `input-container`.
+
+# --hints--
+
+You should declare an `inputContainers` variable in your `clearForm` function.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=/);
+```
+
+You should use the `querySelectorAll` method to get all of the elements with the class `input-container`.
+
+```js
+assert.match(clearForm.toString(), /document\.querySelectorAll\(\s*('|")\.input-container\1\s*\)/);
+```
+
+You should assign the value of the `querySelectorAll` method to the `inputContainers` variable.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=\s*document\.querySelectorAll\(\s*('|")\.input-container\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
new file mode 100644
index 00000000000..73d20bba696
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
@@ -0,0 +1,263 @@
+---
+id: 63c9eb4a5d68f12f32d9b440
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Remember that `document.querySelectorAll` returns a `NodeList`, which is array-like but is not an array. However, the `Array` object has a `.from()` method that accepts an array-like and returns an array. This is helpful when you want access to more robust array methods, which you will learn about in a future project.
+
+Wrap your `inputContainers` query selector in `Array.from()`. Do this on the same line as your declaration.
+
+# --hints--
+
+You should wrap your `querySelectorAll` in `Array.from()`.
+
+```js
+assert.match(clearForm, /Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\s*\)/);
+```
+
+You should assign the result of `Array.from()` to your `inputContainers` variable.
+
+```js
+assert.match(clearForm, /inputContainers\s*=\s*Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = document.querySelectorAll('.input-container');
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
new file mode 100644
index 00000000000..f6655dc9175
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
@@ -0,0 +1,276 @@
+---
+id: 63c9ebb7b12bca3025b0a935
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+It is time for another loop. Use a `for` loop to iterate through the `inputContainers` array.
+
+Inside the loop, set the `innerHTML` property of the element at the current index to an empty string. This will clear all of the contents of that input container.
+
+# --hints--
+
+Your `clearForm` function should have a `for` loop.
+
+```js
+// loop protect injects stuff, so let's look at the raw code again
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(/);
+```
+
+Your `for` loop should iterate through the `inputContainers` array. Remember to use `i` as your iterator.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*inputContainers\.length\s*;\s*i\s*\+\+\s*\)/);
+```
+
+Your `for` loop should set the `innerHTML` property of `inputContainers[i]` to an empty string.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const forLoop = clearForm.split("for")[1];
+assert.match(forLoop, /inputContainers\[\s*i\s*\]\s*\.innerHTML\s*=\s*(`|'|")\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
new file mode 100644
index 00000000000..5ef4abce954
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
@@ -0,0 +1,275 @@
+---
+id: 63c9ec044acedf312c4974ff
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+After your loop completes, you need to clear the `budgetNumberInput`. Set the `value` property of `budgetNumberInput` to an empty string.
+
+# --hints--
+
+Your `clearForm` function should access the `value` property of the `budgetNumberInput` element.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value/);
+```
+
+Your `clearForm` function should set the `value` property of the `budgetNumberInput` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value\s*=\s*('|"|`)\1/);
+```
+
+You should modify the `budgetNumberInput` after your `for` loop.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const afterLoop = clearForm.split("}")[1];
+assert.match(afterLoop, /budgetNumberInput\.value/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
new file mode 100644
index 00000000000..3dab9bed7e5
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
@@ -0,0 +1,276 @@
+---
+id: 63c9f24afbc9cf324dcaa9a4
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+You also need to clear the `output` element's text. You can do this by setting the `innerText` property to an empty string.
+
+The difference between `innerText` and `innerHTML` is that `innerText` will not render HTML elements, but will display the tags and content as raw text.
+
+# --hints--
+
+Your `clearForm` function should access the `innerText` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText/);
+```
+
+Your `clearForm` function should set the `innerText` property of the `output` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText\s*=\s*('|"|`)\1/);
+```
+
+You should modify `output` after modifying `budgetNumberInput`.
+
+```js
+assert.isAbove(clearForm.toString().indexOf('output'), clearForm.toString().indexOf('budgetNumberInput'));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
new file mode 100644
index 00000000000..b2e9d536a15
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
@@ -0,0 +1,277 @@
+---
+id: 63c9f28bda3e3f336e21b6b4
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+To finish off this function, you need to restore the `hide` class to the `output` element. The `classList` property has an `.add()` method which is the opposite of the `.remove()` method. It accepts a string representing the class to add to the element.
+
+Add the `hide` class to your `output`.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList/);
+```
+
+You should call the `.add()` method on the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add/);
+```
+
+You should pass `hide` as the argument to the `.add()` method.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
new file mode 100644
index 00000000000..d29b3f2ac72
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
@@ -0,0 +1,520 @@
+---
+id: 63c9f2bff625af342023512c
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+To complete this project, add an event listener to the `clearButton` button. When the button is clicked, it should call the `clearForm` function.
+
+Congratulations! Your project is complete.
+
+# --hints--
+
+You should add an event listener to the `clearButton` button.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(/);
+```
+
+You should pass `click` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*/);
+```
+
+You should pass `clearForm` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*,\s*clearForm\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener('click', addEntry);
+calorieCounter.addEventListener('submit', calculateCalories);
+clearButton.addEventListener('click', clearForm);
+```
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-applications-of-linear-systems/word-problems.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-applications-of-linear-systems/word-problems.md
index 0a15305c01e..2909963e24f 100644
--- a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-applications-of-linear-systems/word-problems.md
+++ b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-applications-of-linear-systems/word-problems.md
@@ -12,39 +12,39 @@ This first video will look at key words that tell you what math operation to use
**Here are links to the textbooks you will need to complete the assignments for this video:**
-\- Business Math, a Step-by-Step Handbook (2021) by Jean-Paul Oliver
+\- Business Math, a Step-by-Step Handbook (2021), de Jean-Paul Oliver
-\- Algebra and Trigonometry by Jay Abramson
+\- Algebra and Trigonometry, de Jay Abramson
# --question--
## --assignment--
-Complete the problems on pages 63, 75, 85, and 118 from "Business Math, a Step-by-Step Handbook (2021)".
+Resolva os problemas das páginas 63, 75, 85 e 118 do livro "Business Math, a Step-by-Step Handbook (2021)".
---
-Complete the problems on pages 304, 308, and 321 from "Algebra and Trigonometry".
+Resolva os problemas das páginas 304, 308 e 321 do livro "Algebra and Trigonometry".
## --text--
-Which of the following key words indicate subtraction?
+Quais das seguintes palavras-chave indicam subtração?
## --answers--
-plus, more, increase, up
+soma, mais, aumento, para cima
---
-difference, less, decrease, down
+diferença, menos, diminuir, para baixo
---
-of, by, factor, area, times
+de, por, fator, área, vezes
---
-out of, per, divided, quotient
+retirado de, por, dividido, quociente
## --video-solution--
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-exponents-and-logarithms/exponents-and-logarithms.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-exponents-and-logarithms/exponents-and-logarithms.md
index 24a80693af2..b60644809e5 100644
--- a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-exponents-and-logarithms/exponents-and-logarithms.md
+++ b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-exponents-and-logarithms/exponents-and-logarithms.md
@@ -1,6 +1,6 @@
---
id: 6363d2769078df117ce4c406
-title: "Exponents and Logarithms"
+title: "Expoentes e logaritmos"
challengeType: 15
videoId: LhzmzugFFu8
dashedName: exponents-and-logarithms
@@ -8,13 +8,13 @@ dashedName: exponents-and-logarithms
# --description--
-Here is the Colab notebook to go along with this video.
+Aqui está o notebook do Colaboratory que acompanha este vídeo.
# --question--
## --text--
-What is log5 (25)?
+Qual é o log5 (25)?
## --answers--
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-functions-and-graphing/graphing.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-functions-and-graphing/graphing.md
index d8718e3ba22..b67a84fb66b 100644
--- a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-functions-and-graphing/graphing.md
+++ b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-functions-and-graphing/graphing.md
@@ -1,6 +1,6 @@
---
id: 6331d26fb51aeedd1a2bd64c
-title: "Graphing"
+title: "Gráficos"
challengeType: 15
videoId: vUefCkh8-wc
dashedName: graphing
@@ -8,23 +8,23 @@ dashedName: graphing
# --description--
-This next video will show you the connection between functions and graphing. Notice how the graph is a way to represent the inputs and outputs of a function. Then the video will show you how to graph a function with Python.
+Este próximo vídeo vai mostrar para você a conexão entre funções e gráfico. Observe como o gráfico é uma maneira de representar as entradas e saídas de uma função. Então, o vídeo mostrará como criar o gráfico de uma função com Python.
-Here is the Colab notebook to go with the last two videos so you can start making your own graphs.
+Aqui está o notebook do Colaboratory que acompanha os dois últimos vídeos para que você possa começar a criar seus próprios gráficos.
# --question--
## --assignemnts--
-Add code to your algebra Colab notebook for functions and graphing.
+Adicione código ao seu notebook do Colaboratory de álgebra para funções e gráficos.
---
-Run the following notebook to see more ways to create graphs using algebra and Python.
+Execute o notebook a sefguir para ver mais maneiras de criar gráficos usando álgebra e Python.
## --text--
-Which of the following would put a blue line on a graph?
+Qual das seguintes opções colocaria uma linha azul em um gráfico?
## --answers--
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-how-to-solve-for-x/how-to-solve-for-x-extra.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-how-to-solve-for-x/how-to-solve-for-x-extra.md
index 5d9ca07f933..d3e45afbc8c 100644
--- a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-how-to-solve-for-x/how-to-solve-for-x-extra.md
+++ b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-how-to-solve-for-x/how-to-solve-for-x-extra.md
@@ -1,6 +1,6 @@
---
id: 6331d233b51aeedd1a2bd645
-title: "How to Solve for X: Extra"
+title: "Como resolver para X: extra"
challengeType: 15
videoId: lFTCVUCbNoM
dashedName: how-to-solve-for-x-extra
@@ -8,23 +8,23 @@ dashedName: how-to-solve-for-x-extra
# --description--
-This video will go deeper, with more examples of how to use SymPy solve. It will also explain how the practice functions generate the random problems.
+Este vídeo entrará em mais detalhes, dando exemplos de como usar a solução do SymPy. Ele também explicará como as funções da prática geram problemas aleatórios.
-Here is the Colab notebook to go along with this video. Use it to add more to the algebra Colab notebook that you are building.
+Aqui está o notebook do Colaboratory que acompanha este vídeo. Adicione-o ao notebook do Colaboratory de álgebra que você está criando.
# --question--
## --assignment--
-Add the code for more ways to solve for x from the video to your algebra Colab notebook.
+Adicione o código para outras formas de resolver para x do vídeo ao seu notebook do Colaboratory de álgebra.
---
-Open the following Colab notebook, run the cell, and practice solving one and two-step algebra problems. As a bonus, look at the code that generates the practice problems.
+Abra o notebook do Colaboratory a seguir, execute a célula e pratique a resolução de problemas de álgebra de uma e de duas etapas. Como bônus, veja o código que gera os problemas da prática.
## --text--
-If you import sympy and define x as a variable, what would be the output from the following code?
+Se você importar o SymPy e definir x como uma variável, qual seria a saída do seguinte código?
```py
example = 3*x - 12
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-how-to-solve-for-x/solving-for-x.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-how-to-solve-for-x/solving-for-x.md
index cf99c6cfbd1..89d5eeb86c6 100644
--- a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-how-to-solve-for-x/solving-for-x.md
+++ b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-how-to-solve-for-x/solving-for-x.md
@@ -1,6 +1,6 @@
---
id: 6331d23eb51aeedd1a2bd646
-title: "Solving for X"
+title: "Resolvendo para X"
challengeType: 15
videoId: _U9PEFKjyb8
dashedName: solving-for-x
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-parent-graphs-and-polynomials/parent-graphs.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-parent-graphs-and-polynomials/parent-graphs.md
index 1fa248fc7f2..d78414671ac 100644
--- a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-parent-graphs-and-polynomials/parent-graphs.md
+++ b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-parent-graphs-and-polynomials/parent-graphs.md
@@ -1,6 +1,6 @@
---
id: 6363d2529078df117ce4c402
-title: "Parent Graphs"
+title: "Gráficos pais"
challengeType: 15
videoId: 6S2QhY8rIcw
dashedName: parent-graphs
@@ -8,15 +8,15 @@ dashedName: parent-graphs
# --description--
-In this video, you will see what these parent graphs look like, how to modify them, and how to do this all with Python code.
+Neste vídeo, você verá como são esses gráficos pais, como modificá-los e como fazer tudo isso com código em Python.
-Here is the Colab notebook to go along with this video.
+Aqui está o notebook do Colaboratory que acompanha este vídeo.
# --question--
## --text--
-In numpy, what is the cube root of x?
+No numpy, qual é a raiz cúbica de x?
## --answers--
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-ratios-and-proportions/ratios-and-proportions-extra.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-ratios-and-proportions/ratios-and-proportions-extra.md
index 663f0cc63e5..f12713575bf 100644
--- a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-ratios-and-proportions/ratios-and-proportions-extra.md
+++ b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-ratios-and-proportions/ratios-and-proportions-extra.md
@@ -1,6 +1,6 @@
---
id: 6331d298b51aeedd1a2bd652
-title: "Ratios and Proportions: Extra"
+title: "Razões e proporções: extra"
challengeType: 15
videoId: 6o0SsdyUf2U
dashedName: ratios-and-proportions-extra
@@ -8,25 +8,25 @@ dashedName: ratios-and-proportions-extra
# --description--
-The last video in this section will show you how to use proportions in other applications, such as currency exchange rates and unit conversion. It will also show you more about setting up your notebook and working through the practice assignment.
+O último vídeo nesta seção vai mostrar para você como usar proporções em outras aplicações, como taxas de câmbio e conversão de unidades. Ele também mostrará mais sobre a configuração de seu notebook e sobre como realizar as tarefas práticas.
# --question--
## --assignment--
-Open the following Colab notebook, run the cell, and practice solving one-step algebra problems. As a bonus, look at the code that generates the practice problems.
+Abra o notebook do Colaboratory a seguir, execute a célula e pratique a resolução de problemas de álgebra de uma etapa. Como bônus, veja o código que gera os problemas da prática.
## --text--
-What is another way to write 0.9999... (repeating 9)?
+Que outra maneira temos de escrever 0.9999... (9s repetidos)?
## --answers--
-99 percent
+99 por cento
---
-You can't get an exact answer
+Não é possível obter uma resposta exata
---
@@ -34,7 +34,7 @@ You can't get an exact answer
---
-Almost 1
+Quase 1
## --video-solution--
diff --git a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-simple-and-compound-interest/simple-and-compound-interest.md b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-simple-and-compound-interest/simple-and-compound-interest.md
index 7cce6981cca..74aafca3b9e 100644
--- a/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-simple-and-compound-interest/simple-and-compound-interest.md
+++ b/curriculum/challenges/portuguese/17-college-algebra-with-python/learn-simple-and-compound-interest/simple-and-compound-interest.md
@@ -1,6 +1,6 @@
---
id: 6363d26c9078df117ce4c405
-title: "Simple and Compound Interest"
+title: "Juros simples e compostos"
challengeType: 15
videoId: iMPFK7wXNPg
dashedName: simple-and-compound-interest
@@ -8,33 +8,33 @@ dashedName: simple-and-compound-interest
# --description--
-This video will help you understand the equations of simple and compound interest, and what it all means.
+Este vídeo vai ajudá-lo a entender as equações dos juros simples e compostos e o que tudo isso significa.
-Here is the Colab notebook to go along with this video.
+Aqui está o notebook do Colaboratory que acompanha este vídeo.
-Here is an additional Colab notebook that shows you one way to put many of these interest and payment forumlas into Python functions. Also you will see an example of using some formulas to output results, notice a trend, and follow up with other formulas to analyze patterns.
+Aqui temos um notebook adicional do Colaboratory que mostra uma maneira de colocar muitas dessas fórmulas de juros e de pagamento em funções em Python. Você também verá um exemplo de uso de algumas fórmulas para exibir os resultados, observar uma tendência e seguir outras fórmulas para analisar padrões.
# --question--
## --text--
-In percent increase formulas, what does the "principle" refer to?
+Em fórmulas de aumento de percentual, a que se refere o "princípio"?
## --answers--
-the main amount
+o valor principal
---
-the ending amount
+o valor final
---
-the starting amount
+o valor inicial
---
-the (1 + rate) multiplier
+o multiplicador de (1 + taxa)
## --video-solution--
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
index 39ab831dad7..849cd1538ef 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-10-summation-of-primes.md
@@ -1,6 +1,6 @@
---
id: 5900f3761000cf542c50fe89
-title: 'Problem 10: Summation of primes'
+title: 'Problema 10: Soma dos números primos'
challengeType: 1
forumTopicId: 301723
dashedName: problem-10-summation-of-primes
@@ -8,37 +8,37 @@ dashedName: problem-10-summation-of-primes
# --description--
-The sum of the primes below 10 is 2 + 3 + 5 + 7 = 17.
+A soma dos números primos abaixo de 10 é 2 + 3 + 5 + 7 = 17.
-Find the sum of all the primes below `n`.
+Encontre a soma de todos os números primos abaixo de `n`.
# --hints--
-`primeSummation(17)` should return a number.
+`primeSummation(17)` deve retornar um número.
```js
assert(typeof primeSummation(17) === 'number');
```
-`primeSummation(17)` should return 41.
+`primeSummation(17)` deve retornar 41.
```js
assert.strictEqual(primeSummation(17), 41);
```
-`primeSummation(2001)` should return 277050.
+`primeSummation(2001)` deve retornar 277050.
```js
assert.strictEqual(primeSummation(2001), 277050);
```
-`primeSummation(140759)` should return 873608362.
+`primeSummation(140759)` deve retornar 873608362.
```js
assert.strictEqual(primeSummation(140759), 873608362);
```
-`primeSummation(2000000)` should return 142913828922.
+`primeSummation(2000000)` deve retornar 142913828922.
```js
assert.strictEqual(primeSummation(2000000), 142913828922);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-11-largest-product-in-a-grid.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-11-largest-product-in-a-grid.md
index 507d9a56ea8..7578117a3b9 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-11-largest-product-in-a-grid.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-11-largest-product-in-a-grid.md
@@ -1,6 +1,6 @@
---
id: 5900f3781000cf542c50fe8a
-title: 'Problem 11: Largest product in a grid'
+title: 'Problema 11: Maior produto em uma grade'
challengeType: 1
forumTopicId: 301734
dashedName: problem-11-largest-product-in-a-grid
@@ -8,7 +8,7 @@ dashedName: problem-11-largest-product-in-a-grid
# --description--
-In the 20×20 grid below, four numbers along a diagonal line have been marked in red.
+Na grade 20×20 abaixo, quatro números ao longo de uma linha diagonal foram marcados em vermelho.
08 02 22 97 38 15 00 40 00 75 04 05 07 78 52 12 50 77 91 08
-The product of these numbers is 26 × 63 × 78 × 14 = 1788696.
+O produto desses números é 26 × 63 × 78 × 14 = 1788696.
-What is the greatest product of four adjacent numbers in the same direction (up, down, left, right, or diagonally) in a given `arr` grid?
+Qual é o maior produto de quatro números adjacentes (próximos) na mesma direção (cima, baixo, esquerda, direita ou diagonal) na grade fornecida através do parâmetro `arr`?
# --hints--
-`largestGridProduct(testGrid)` should return a number.
+`largestGridProduct(testGrid)` deve retornar um número.
```js
assert(typeof largestGridProduct(testGrid) === 'number');
```
-`largestGridProduct(testGrid)` should return 14169081.
+`largestGridProduct(testGrid)` deve retornar 14169081.
```js
assert.strictEqual(largestGridProduct(testGrid), 14169081);
```
-`largestGridProduct(grid)` should return 70600674.
+`largestGridProduct(grid)` deve retornar 70600674.
```js
assert.strictEqual(largestGridProduct(grid), 70600674);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-12-highly-divisible-triangular-number.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-12-highly-divisible-triangular-number.md
index 2fa68e80276..577756007ed 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-12-highly-divisible-triangular-number.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-12-highly-divisible-triangular-number.md
@@ -1,6 +1,6 @@
---
id: 5900f3781000cf542c50fe8b
-title: 'Problem 12: Highly divisible triangular number'
+title: 'Problema 12: Maior número triangular divisível'
challengeType: 1
forumTopicId: 301746
dashedName: problem-12-highly-divisible-triangular-number
@@ -8,57 +8,57 @@ dashedName: problem-12-highly-divisible-triangular-number
# --description--
-The sequence of triangle numbers is generated by adding the natural numbers. So the 7th triangle number would be 1 + 2 + 3 + 4 + 5 + 6 + 7 = 28. The first ten terms would be:
+A sequência de números de triângulos é gerada pela adição de números naturais. Portanto, o número do 7º triângulo é 1 + 2 + 3 + 4 + 5 + 6 + 7 = 28. Os primeiros dez termos seriam:
1, 3, 6, 10, 15, 21, 28, 36, 45, 55, ...
-Let us list the factors of the first seven triangle numbers:
+Abaixo está a lista dos 7 primeiros números do triângulo:
1: 1
3: 1, 3
6: 1, 2, 3, 6
10: 1, 2, 5, 10
15: 1, 3, 5, 15
-21: 1, 3, 7, 21
+71: 1, 3, 7, 21
28: 1, 2, 4, 7, 14, 28
-We can see that 28 is the first triangle number to have over five divisors.
+Podemos ver que 28 é o primeiro triângulo a ter mais de cinco divisores.
-What is the value of the first triangle number to have over `n` divisors?
+Qual é o valor do primeiro triângulo a ter mais de `n` divisores?
# --hints--
-`divisibleTriangleNumber(5)` should return a number.
+`divisibleTriangleNumber(5)` deve retornar um número.
```js
assert(typeof divisibleTriangleNumber(5) === 'number');
```
-`divisibleTriangleNumber(5)` should return 28.
+`divisibleTriangleNumber(5)` deve retornar 28.
```js
assert.strictEqual(divisibleTriangleNumber(5), 28);
```
-`divisibleTriangleNumber(23)` should return 630.
+`divisibleTriangleNumber(23)` deve retornar 630.
```js
assert.strictEqual(divisibleTriangleNumber(23), 630);
```
-`divisibleTriangleNumber(167)` should return 1385280.
+`divisibleTriangleNumber(167)` deve retornar 1385280.
```js
assert.strictEqual(divisibleTriangleNumber(167), 1385280);
```
-`divisibleTriangleNumber(374)` should return 17907120.
+`divisibleTriangleNumber(374)` deve retornar 17907120.
```js
assert.strictEqual(divisibleTriangleNumber(374), 17907120);
```
-`divisibleTriangleNumber(500)` should return 76576500.
+`divisibleTriangleNumber(500)` deve retornar 76576500.
```js
assert.strictEqual(divisibleTriangleNumber(500), 76576500);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-13-large-sum.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-13-large-sum.md
index 7e4db74fcb7..924461732fc 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-13-large-sum.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-13-large-sum.md
@@ -1,6 +1,6 @@
---
id: 5900f37a1000cf542c50fe8c
-title: 'Problem 13: Large sum'
+title: 'Problema 13: Soma grande'
challengeType: 1
forumTopicId: 301757
dashedName: problem-13-large-sum
@@ -8,7 +8,7 @@ dashedName: problem-13-large-sum
# --description--
-Work out the first ten digits of the sum of the following one-hundred 50-digit numbers.
+Descubra os 10 primeiros algarismos da soma dos 100 números de 50 algarismos a seguir.
37107287533902102798797998220837590246510135740250
@@ -115,19 +115,19 @@ Work out the first ten digits of the sum of the following one-hundred 50-digit n
# --hints--
-`largeSum(testNums)` should return a number.
+`largeSum(testNums)` deve retornar um número.
```js
assert(typeof largeSum(testNums) === 'number');
```
-`largeSum(testNums)` should return 8348422521.
+`largeSum(testNums)` deve retornar 8348422521.
```js
assert.strictEqual(largeSum(testNums), 8348422521);
```
-`largeSum(fiftyDigitNums)` should return 5537376230.
+`largeSum(fiftyDigitNums)` deve retornar 5537376230.
```js
assert.strictEqual(largeSum(fiftyDigitNums), 5537376230);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-14-longest-collatz-sequence.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-14-longest-collatz-sequence.md
index cac70d3bb29..add22b290c3 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-14-longest-collatz-sequence.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-14-longest-collatz-sequence.md
@@ -1,6 +1,6 @@
---
id: 5900f37a1000cf542c50fe8d
-title: 'Problem 14: Longest Collatz sequence'
+title: 'Problema 14: Maior conjectura de Collatz'
challengeType: 1
forumTopicId: 301768
dashedName: problem-14-longest-collatz-sequence
@@ -8,61 +8,61 @@ dashedName: problem-14-longest-collatz-sequence
# --description--
-The following iterative sequence is defined for the set of positive integers:
+A seguinte sequência iterativa é definida para o conjunto dos números inteiros positivos:
-
n → n /2 (n is even)
+
n → n /2 (use quando n for par)
-
n → 3n + 1 (n is odd)
+
n → 3n + 1 (use quando n for ímpar)
-Using the rule above and starting with 13, we generate the following sequence:
+Usando a regra acima e começando com 13, geramos a seguinte sequência:
13 → 40 → 20 → 10 → 5 → 16 → 8 → 4 → 2 → 1
-It can be seen that this sequence (starting at 13 and finishing at 1) contains 10 terms. Although it has not been proved yet (Collatz Problem), it is thought that all starting numbers finish at 1.
+Podemos ver que essa sequência (começando em 13 e terminando em 1) contém 10 termos. Embora ainda não tenha sido provado (conjectura de Collatz), acredita-se que qualquer número inicial termine em 1.
-Which starting number, under the given `limit`, produces the longest chain?
+Qual número inicial, sob o `limit` (limite) definido, produz a sequência mais longa?
-**Note:** Once the chain starts the terms are allowed to go above `limit`.
+**Observação:** uma vez iniciada, os termos na sequência podem passar acima do `limit`.
# --hints--
-`longestCollatzSequence(14)` should return a number.
+`longestCollatzSequence(14)` deve retornar um número.
```js
assert(typeof longestCollatzSequence(14) === 'number');
```
-`longestCollatzSequence(14)` should return 9.
+`longestCollatzSequence(14)` deve retornar 9.
```js
assert.strictEqual(longestCollatzSequence(14), 9);
```
-`longestCollatzSequence(5847)` should return 3711.
+`longestCollatzSequence(5847)` deve retornar 3711.
```js
assert.strictEqual(longestCollatzSequence(5847), 3711);
```
-`longestCollatzSequence(46500)` should return 35655.
+`longestCollatzSequence(46500)` deve retornar 35655.
```js
assert.strictEqual(longestCollatzSequence(46500), 35655);
```
-`longestCollatzSequence(54512)` should return 52527.
+`longestCollatzSequence(54512)` deve retornar 52527.
```js
assert.strictEqual(longestCollatzSequence(54512), 52527);
```
-`longestCollatzSequence(100000)` should return 77031.
+`longestCollatzSequence(100000)` deve retornar 77031.
```js
assert.strictEqual(longestCollatzSequence(100000), 77031);
```
-`longestCollatzSequence(1000000)` should return 837799.
+`longestCollatzSequence(1000000)` deve retornar 837799.
```js
assert.strictEqual(longestCollatzSequence(1000000), 837799);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-15-lattice-paths.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-15-lattice-paths.md
index 225eddd68e7..7490847b37d 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-15-lattice-paths.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-15-lattice-paths.md
@@ -1,6 +1,6 @@
---
id: 5900f37b1000cf542c50fe8e
-title: 'Problem 15: Lattice paths'
+title: 'Problema 15: Caminhos em uma grade'
challengeType: 1
forumTopicId: 301780
dashedName: problem-15-lattice-paths
@@ -8,33 +8,33 @@ dashedName: problem-15-lattice-paths
# --description--
-Starting in the top left corner of a 2×2 grid, and only being able to move to the right and down, there are exactly 6 routes to the bottom right corner.
+Começando no canto superior esquerdo de uma grade 2×2, e sendo capaz de se mover para a direita e para baixo, existem exatamente 6 caminhos até o canto inferior direito.
-
+
-How many such routes are there through a given `gridSize`?
+Quantas rotas existem que cruzam uma grade de tamanho `gridSize`?
# --hints--
-`latticePaths(4)` should return a number.
+`latticePaths(4)` deve retornar um número.
```js
assert(typeof latticePaths(4) === 'number');
```
-`latticePaths(4)` should return 70.
+`latticePaths(4)` deve retornar 70.
```js
assert.strictEqual(latticePaths(4), 70);
```
-`latticePaths(9)` should return 48620.
+`latticePaths(9)` deve retornar 48620.
```js
assert.strictEqual(latticePaths(9), 48620);
```
-`latticePaths(20)` should return 137846528820.
+`latticePaths(20)` deve retornar 137846528820.
```js
assert.strictEqual(latticePaths(20), 137846528820);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-2-even-fibonacci-numbers.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-2-even-fibonacci-numbers.md
index 4376672786b..11fed41bcf8 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-2-even-fibonacci-numbers.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-2-even-fibonacci-numbers.md
@@ -1,6 +1,6 @@
---
id: 5900f36e1000cf542c50fe81
-title: 'Problem 2: Even Fibonacci Numbers'
+title: 'Problema 2: Apenas números pares da sequência de Fibonacci'
challengeType: 1
forumTopicId: 301838
dashedName: problem-2-even-fibonacci-numbers
@@ -8,63 +8,63 @@ dashedName: problem-2-even-fibonacci-numbers
# --description--
-Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:
+Cada novo número na sequência de Fibonacci é gerado pela soma dos dois números anteriores. Ao começar com 1 e 2, os primeiros 10 números serão:
1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...
-By considering the terms in the Fibonacci sequence whose values do not exceed `n`, find the sum of the even-valued terms.
+Considerando os números na sequência de Fibonacci cujos valores não excedem `n`, encontre a soma dos números pares.
# --hints--
-`fiboEvenSum(10)` should return a number.
+`fiboEvenSum(10)` deve retornar um número.
```js
assert(typeof fiboEvenSum(10) === 'number');
```
-Your function should return an even value.
+A função deve retornar um valor par (even).
```js
assert.equal(fiboEvenSum(10) % 2 === 0, true);
```
-Your function should sum the even-valued Fibonacci numbers: `fiboEvenSum(8)` should return 10.
+A função deve somar os números pares de Fibonacci: `fiboEvenSum(8)` deve retornar 10.
```js
assert.strictEqual(fiboEvenSum(8), 10);
```
-`fiboEvenSum(10)` should return 10.
+`fiboEvenSum(10)` deve retornar 10.
```js
assert.strictEqual(fiboEvenSum(10), 10);
```
-`fiboEvenSum(34)` should return 44.
+`fiboEvenSum(34)` deve retornar 44.
```js
assert.strictEqual(fiboEvenSum(34), 44);
```
-`fiboEvenSum(60)` should return 44.
+`fiboEvenSum(60)` deve retornar 44.
```js
assert.strictEqual(fiboEvenSum(60), 44);
```
-`fiboEvenSum(1000)` should return 798.
+`fiboEvenSum(1000)` deve retornar 798.
```js
assert.strictEqual(fiboEvenSum(1000), 798);
```
-`fiboEvenSum(100000)` should return 60696.
+`fiboEvenSum(100000)` deve retornar 60696.
```js
assert.strictEqual(fiboEvenSum(100000), 60696);
```
-`fiboEvenSum(4000000)` should return 4613732.
+`fiboEvenSum(4000000)` deve retornar 4613732.
```js
assert.strictEqual(fiboEvenSum(4000000), 4613732);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-3-largest-prime-factor.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-3-largest-prime-factor.md
index 2961ac6b9c0..424ca34aa26 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-3-largest-prime-factor.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-3-largest-prime-factor.md
@@ -1,6 +1,6 @@
---
id: 5900f36f1000cf542c50fe82
-title: 'Problem 3: Largest prime factor'
+title: 'Problema 3: Maior fator primo'
challengeType: 1
forumTopicId: 301952
dashedName: problem-3-largest-prime-factor
@@ -8,55 +8,55 @@ dashedName: problem-3-largest-prime-factor
# --description--
-The prime factors of 13195 are 5, 7, 13 and 29.
+Os fatores primos de 13195 são 5, 7, 13 e 29.
-What is the largest prime factor of the given `number`?
+Qual é o maior fator primo do parâmetro `number`?
# --hints--
-`largestPrimeFactor(2)` should return a number.
+`largestPrimeFactor(2)` deve retornar um número.
```js
assert(typeof largestPrimeFactor(2) === 'number');
```
-`largestPrimeFactor(2)` should return 2.
+`largestPrimeFactor(2)` deve retornar 2.
```js
assert.strictEqual(largestPrimeFactor(2), 2);
```
-`largestPrimeFactor(3)` should return 3.
+`largestPrimeFactor(3)` deve retornar 3.
```js
assert.strictEqual(largestPrimeFactor(3), 3);
```
-`largestPrimeFactor(5)` should return 5.
+`largestPrimeFactor(5)` deve retornar 5.
```js
assert.strictEqual(largestPrimeFactor(5), 5);
```
-`largestPrimeFactor(7)` should return 7.
+`largestPrimeFactor(7)` deve retornar 7.
```js
assert.strictEqual(largestPrimeFactor(7), 7);
```
-`largestPrimeFactor(8)` should return 2.
+`largestPrimeFactor(8)` deve retornar 2.
```js
assert.strictEqual(largestPrimeFactor(8), 2);
```
-`largestPrimeFactor(13195)` should return 29.
+`largestPrimeFactor(13195)` deve retornar 29.
```js
assert.strictEqual(largestPrimeFactor(13195), 29);
```
-`largestPrimeFactor(600851475143)` should return 6857.
+`largestPrimeFactor(600851475143)` deve retornar 6857.
```js
assert.strictEqual(largestPrimeFactor(600851475143), 6857);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-4-largest-palindrome-product.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-4-largest-palindrome-product.md
index 9e436255531..e85b4aee09c 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-4-largest-palindrome-product.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-4-largest-palindrome-product.md
@@ -1,6 +1,6 @@
---
id: 5900f3701000cf542c50fe83
-title: 'Problem 4: Largest palindrome product'
+title: 'Problema 4: Maior palíndromo de um produto'
challengeType: 1
forumTopicId: 302065
dashedName: problem-4-largest-palindrome-product
@@ -8,25 +8,25 @@ dashedName: problem-4-largest-palindrome-product
# --description--
-A palindromic number reads the same both ways. The largest palindrome made from the product of two 2-digit numbers is 9009 = 91 × 99.
+Um número palíndromo é aquele que pode ser lido da esquerda para a direita e vice-versa. O maior palíndromo feito a partir do produto de dois algarismos é 9009 = 91 × 99.
-Find the largest palindrome made from the product of two `n`-digit numbers.
+Encontre o maior palíndromo feito a partir do produto de dois números de `n` algarismos.
# --hints--
-`largestPalindromeProduct(2)` should return a number.
+`largestPalindromeProduct(2)` deve retornar um número.
```js
assert(typeof largestPalindromeProduct(2) === 'number');
```
-`largestPalindromeProduct(2)` should return 9009.
+`largestPalindromeProduct(2)` deve retornar 9009.
```js
assert.strictEqual(largestPalindromeProduct(2), 9009);
```
-`largestPalindromeProduct(3)` should return 906609.
+`largestPalindromeProduct(3)` deve retornar 906609.
```js
assert.strictEqual(largestPalindromeProduct(3), 906609);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-5-smallest-multiple.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-5-smallest-multiple.md
index 2f20bceaadf..a98dc958095 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-5-smallest-multiple.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-5-smallest-multiple.md
@@ -1,6 +1,6 @@
---
id: 5900f3711000cf542c50fe84
-title: 'Problem 5: Smallest multiple'
+title: 'Problema 5: Menor múltiplo'
challengeType: 1
forumTopicId: 302160
dashedName: problem-5-smallest-multiple
@@ -8,43 +8,43 @@ dashedName: problem-5-smallest-multiple
# --description--
-2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any remainder.
+2520 é o menor número que pode ser dividido por cada um dos números entre 1 e 10, sem nenhum resto.
-What is the smallest positive number that is evenly divisible by all of the numbers from 1 to `n`?
+Qual é o menor número positivo que é igualmente divisível por todos os números de 1 a `n`?
# --hints--
-`smallestMult(5)` should return a number.
+`smallestMult(5)` deve retornar um número.
```js
assert(typeof smallestMult(5) === 'number');
```
-`smallestMult(5)` should return 60.
+`smallestMult(5)` deve retornar 60.
```js
assert.strictEqual(smallestMult(5), 60);
```
-`smallestMult(7)` should return 420.
+`smallestMult(7)` deve retornar 420.
```js
assert.strictEqual(smallestMult(7), 420);
```
-`smallestMult(10)` should return 2520.
+`smallestMult(10)` deve retornar 2520.
```js
assert.strictEqual(smallestMult(10), 2520);
```
-`smallestMult(13)` should return 360360.
+`smallestMult(13)` deve retornar 360360.
```js
assert.strictEqual(smallestMult(13), 360360);
```
-`smallestMult(20)` should return 232792560.
+`smallestMult(20)` deve retornar 232792560.
```js
assert.strictEqual(smallestMult(20), 232792560);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-6-sum-square-difference.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-6-sum-square-difference.md
index 65a460bd803..f82fded9a45 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-6-sum-square-difference.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-6-sum-square-difference.md
@@ -1,6 +1,6 @@
---
id: 5900f3721000cf542c50fe85
-title: 'Problem 6: Sum square difference'
+title: 'Problema 6: Diferença da soma dos quadrados'
challengeType: 1
forumTopicId: 302171
dashedName: problem-6-sum-square-difference
@@ -8,39 +8,39 @@ dashedName: problem-6-sum-square-difference
# --description--
-The sum of the squares of the first ten natural numbers is,
+A soma dos quadrados dos primeiros dez números naturais é,
12 + 22 + ... + 102 = 385
-The square of the sum of the first ten natural numbers is,
+O quadrado da soma dos primeiros dez números naturais é,
(1 + 2 + ... + 10)2 = 552 = 3025
-Hence the difference between the sum of the squares of the first ten natural numbers and the square of the sum is 3025 − 385 = 2640.
+Por isso, a diferença entre a soma dos quadrados dos primeiros dez números naturais e o quadrado da soma é 3025 – 385 = 2640.
-Find the difference between the sum of the squares of the first `n` natural numbers and the square of the sum.
+Calcule a diferença entre a soma dos quadrados dos primeiros `n` números naturais e o quadrado da soma.
# --hints--
-`sumSquareDifference(10)` should return a number.
+`sumSquareDifference(10)` deve retornar um número.
```js
assert(typeof sumSquareDifference(10) === 'number');
```
-`sumSquareDifference(10)` should return 2640.
+`sumSquareDifference(10)` deve retornar 2640.
```js
assert.strictEqual(sumSquareDifference(10), 2640);
```
-`sumSquareDifference(20)` should return 41230.
+`sumSquareDifference(20)` deve retornar 41230.
```js
assert.strictEqual(sumSquareDifference(20), 41230);
```
-`sumSquareDifference(100)` should return 25164150.
+`sumSquareDifference(100)` deve retornar 25164150.
```js
assert.strictEqual(sumSquareDifference(100), 25164150);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-7-10001st-prime.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-7-10001st-prime.md
index 6780c8fa2d1..e7a79856e45 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-7-10001st-prime.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-7-10001st-prime.md
@@ -1,6 +1,6 @@
---
id: 5900f3731000cf542c50fe86
-title: 'Problem 7: 10001st prime'
+title: 'Problema 7: 10001º número primo'
challengeType: 1
forumTopicId: 302182
dashedName: problem-7-10001st-prime
@@ -8,43 +8,43 @@ dashedName: problem-7-10001st-prime
# --description--
-By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13, we can see that the 6th prime is 13.
+Ao listar os primeiros seis números primos: 2, 3, 5, 7, 11 e 13, podemos ver que o sexto número primo é 13.
-What is the `n`th prime number?
+Qual é o `n`-ésimo número primo?
# --hints--
-`nthPrime(6)` should return a number.
+`nthPrime(6)` deve retornar um número.
```js
assert(typeof nthPrime(6) === 'number');
```
-`nthPrime(6)` should return 13.
+`nthPrime(6)` deve retornar 13.
```js
assert.strictEqual(nthPrime(6), 13);
```
-`nthPrime(10)` should return 29.
+`nthPrime(10)` deve retornar 29.
```js
assert.strictEqual(nthPrime(10), 29);
```
-`nthPrime(100)` should return 541.
+`nthPrime(100)` deve retornar 541.
```js
assert.strictEqual(nthPrime(100), 541);
```
-`nthPrime(1000)` should return 7919.
+`nthPrime(1000)` deve retornar 7919.
```js
assert.strictEqual(nthPrime(1000), 7919);
```
-`nthPrime(10001)` should return 104743.
+`nthPrime(10001)` deve retornar 104743.
```js
assert.strictEqual(nthPrime(10001), 104743);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-8-largest-product-in-a-series.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-8-largest-product-in-a-series.md
index c84d410e207..8d8a048facf 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-8-largest-product-in-a-series.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-8-largest-product-in-a-series.md
@@ -1,6 +1,6 @@
---
id: 5900f3741000cf542c50fe87
-title: 'Problem 8: Largest product in a series'
+title: 'Problema 8: Maior produto em uma série'
challengeType: 1
forumTopicId: 302193
dashedName: problem-8-largest-product-in-a-series
@@ -8,7 +8,7 @@ dashedName: problem-8-largest-product-in-a-series
# --description--
-The four adjacent digits in the 1000-digit number that have the greatest product are 9 × 9 × 8 × 9 = 5832.
+O número abaixo possui 1000 algarismos. Se você pegar, em ordem, 4 algarismos quaisquer, o maior produto que você vai encontrar é 9 × 9 × 8 × 9 = 5832.
73167176531330624919225119674426574742355349194934
96983520312774506326239578318016984801869478851843
@@ -31,23 +31,23 @@ The four adjacent digits in the 1000-digit number that have the greatest product
05886116467109405077541002256983155200055935729725
71636269561882670428252483600823257530420752963450
-Find the `n` adjacent digits in the 1000-digit number that have the greatest product. What is the value of this product?
+Encontre os `n` algarismos adjacentes no número de 1000 algarismos que têm o maior produto. Qual é o valor do produto?
# --hints--
-`largestProductinaSeries(4)` should return a number.
+`largestProductinaSeries(4)` deve retornar um número.
```js
assert(typeof largestProductinaSeries(4) === 'number');
```
-`largestProductinaSeries(4)` should return 5832.
+`largestProductinaSeries(4)` deve retornar 5832.
```js
assert.strictEqual(largestProductinaSeries(4), 5832);
```
-`largestProductinaSeries(13)` should return 23514624000.
+`largestProductinaSeries(13)` deve retornar 23514624000.
```js
assert.strictEqual(largestProductinaSeries(13), 23514624000);
diff --git a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-9-special-pythagorean-triplet.md b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-9-special-pythagorean-triplet.md
index a853dd4415e..5b5c1f2f7d2 100644
--- a/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-9-special-pythagorean-triplet.md
+++ b/curriculum/challenges/portuguese/18-project-euler/project-euler-problems-1-to-100/problem-9-special-pythagorean-triplet.md
@@ -1,6 +1,6 @@
---
id: 5900f3761000cf542c50fe88
-title: 'Problem 9: Special Pythagorean triplet'
+title: 'Problema 9: Terno pitagórico especial'
challengeType: 1
forumTopicId: 302205
dashedName: problem-9-special-pythagorean-triplet
@@ -8,35 +8,35 @@ dashedName: problem-9-special-pythagorean-triplet
# --description--
-A Pythagorean triplet is a set of three natural numbers, `a` < `b` < `c`, for which,
+Um terno pitagórico é um conjunto de três números naturais, `a` < `b` < `c` tal que
a 2 + b 2 = c 2
-For example, 3
2 + 4
2 = 9 + 16 = 25 = 5
2 .
+Por exemplo, 3
2 + 4
2 = 9 + 16 = 25 = 5
2 .
-There exists exactly one Pythagorean triplet for which `a` + `b` + `c` = 1000. Find the product `abc` such that `a` + `b` + `c` = `n`.
+Há exatamente um terno pitagórico para o qual `a` + `b` + `c` = 1000. Encontre o produto `abc` tal que `a` + `b` + `c` = `n`.
# --hints--
-`specialPythagoreanTriplet(24)` should return a number.
+`specialPythagoreanTriplet(24)` deve retornar um número.
```js
assert(typeof specialPythagoreanTriplet(24) === 'number');
```
-`specialPythagoreanTriplet(24)` should return 480.
+`specialPythagoreanTriplet(24)` deve retornar 480.
```js
assert.strictEqual(specialPythagoreanTriplet(24), 480);
```
-`specialPythagoreanTriplet(120)` should return 49920, 55080 or 60000.
+`specialPythagoreanTriplet(120)` deve retornar 49920, 55080 ou 60000.
```js
assert([49920, 55080, 60000].includes(specialPythagoreanTriplet(120)));
```
-`specialPythagoreanTriplet(1000)` should return 31875000.
+`specialPythagoreanTriplet(1000)` deve retornar 31875000.
```js
assert.strictEqual(specialPythagoreanTriplet(1000), 31875000);
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
index 6e872c248a9..eccc4361481 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
@@ -8,21 +8,28 @@ dashedName: record-collection
# --description--
-Вам надано літерал об'єкта, який представляє вашу колекцію музичних альбомів. Кожен альбом має унікальний id як свій ключ та декілька інших властивостей. Не всі альбоми мають повну інформацію.
+You are creating a function that aids in the maintenance of a musical album collection. The collection is organized as an object that contains multiple albums which are also objects. Each album is represented in the collection with a unique `id` as the property name. Within each album object, there are various properties describing information about the album. Not all albums have complete information.
-Ви починаєте з функції `updateRecords`, що приймає літерал об'єкта `records`, який містить колекцію музичних альбомів, `id`, `prop` (типу `artist` чи `tracks`) та `value`. Завершіть функцію, використовуючи правила нижче, щоб змінити об'єкт, переданий до функції.
+The `updateRecords` function takes 4 arguments represented by the following function parameters:
-- Ваша функція завжди повинна повертати весь об'єкт-колекцію.
-- Якщо `prop` не є `tracks`, а `value` не є пустим рядком, то оновіть або встановіть `prop` альбому на `value`.
-- Якщо `prop` є `tracks`, але альбом не має властивості `tracks`, то створіть пустий масив та додайте `value` до нього.
-- Якщо `prop` є `tracks` та `value` не є пустим рядком, то додайте `value` в кінець наявного масиву `tracks` в альбомі.
-- Якщо `value` є пустим рядком, видаліть дану властивість `prop` з альбому.
+- `records` - an object containing several individual albums
+- `id` - a number representing a specific album in the `records` object
+- `prop` - a string representing the name of the album’s property to update
+- `value` - a string containing the information used to update the album’s property
-**Примітка:** копія об'єкту `recordCollection` використовується для тестів.
+Complete the function using the rules below to modify the object passed to the function.
+
+- Your function must always return the entire `records` object.
+- If `value` is an empty string, delete the given `prop` property from the album.
+- If `prop` isn’t `"tracks"` and `value` isn't an empty string, assign the `value` to that album’s `prop`.
+- If `prop` is `"tracks"` and `value` isn’t an empty string, add the `value` to the end of the album’s existing `"tracks"` array.
+- If the album doesn’t have a `"tracks"` property, create a new array for the album's `"tracks"` property before adding the `value` to it.
+
+**Note:** A copy of the `recordCollection` object is used for the tests. You should not directly modify the `recordCollection` object.
# --hints--
-Після `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` повинен стати рядком `ABBA`
+After `updateRecords(recordCollection, 5439, "artist", "ABBA")`, `artist` should be the string `ABBA`
```js
assert(
@@ -31,7 +38,7 @@ assert(
);
```
-Після `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` повинен мати рядок `Take a Chance on Me` як останній та єдиний елемент.
+After `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, `tracks` should have the string `Take a Chance on Me` as the last and only element.
```js
assert(
@@ -41,14 +48,14 @@ assert(
);
```
-Після `updateRecords(recordCollection, 2548, "artist", "")` не потрібно налаштовувати `artist`
+After `updateRecords(recordCollection, 2548, "artist", "")`, `artist` should not be set
```js
updateRecords(_recordCollection, 2548, 'artist', '');
assert(!_recordCollection[2548].hasOwnProperty('artist'));
```
-Після `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` повинен мати рядок `Addicted to Love` як останній елемент.
+After `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, `tracks` should have the string `Addicted to Love` as the last element.
```js
assert(
@@ -58,7 +65,7 @@ assert(
);
```
-Після `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` повинен мати рядок `1999` як перший елемент.
+After `updateRecords(recordCollection, 2468, "tracks", "Free")`, `tracks` should have the string `1999` as the first element.
```js
assert(
@@ -68,14 +75,14 @@ assert(
);
```
-Після `updateRecords(recordCollection, 2548, "tracks", "")` не потрібно налаштовувати `tracks`
+After `updateRecords(recordCollection, 2548, "tracks", "")`, `tracks` should not be set
```js
updateRecords(_recordCollection, 2548, 'tracks', '');
assert(!_recordCollection[2548].hasOwnProperty('tracks'));
```
-Після `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` повинен стати рядком `Riptide`
+After `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, `albumTitle` should be the string `Riptide`
```js
assert(
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md
index b8c833ce28e..f77dd482469 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md
@@ -27,7 +27,7 @@ console.log(i);
У такому разі консоль показуватиме значення `[0, 1, 2]` та `3`.
-Якщо ключовим словом є `var`, то `i` оголошується глобально. Тому коли виконується `i++`, оновлюється глобальна змінна. Цей код схожий до наступного:
+Якщо ключовим словом є `var`, то `i` оголошується глобально. Тому коли виконується `i++`, оновлюється глобальна змінна. Такий код схожий до наступного:
```js
var numArray = [];
@@ -80,11 +80,11 @@ console.log(i);
Виправте код так, щоб `i`, оголошена в інструкції `if`, була окремою змінною від `i`, оголошеною у першому рядку функції. Не використовуйте у своєму коді ключове слово `var`.
-Це завдання створене для того, щоб показати відмінність між тим, як ключові слова `var` і `let` присвоюють область видимості оголошеній змінній. При програмуванні схожої функції краще використовувати різні назви для змінних, щоб уникнути плутанини.
+Це завдання створене для того, щоб показати відмінність між тим, як ключові слова `var` та `let` присвоюють область видимості оголошеній змінній. При програмуванні схожої функції краще використовувати різні назви для змінних, щоб уникнути плутанини.
# --hints--
-`var` повинне бути відсутнім у коді.
+`var` має бути відсутнім у коді.
```js
assert(!code.match(/var/g));
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md
index 9c8af4f2a2e..c473faf647c 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md
@@ -24,7 +24,7 @@ export default function(x, y) {
}
```
-Першою є іменована функція, а другою – анонімна.
+Першою є іменована функція, а другою — анонімна.
Оскільки `export default` використовується для оголошення резервного значення для модуля або файлу, лише одне значення може бути експортоване за замовчуванням у кожному модулі або файлі. Крім того, ви не можете використати `export default` з `var`, `let` чи `const`
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md
index b2470e8f490..935affe7ae5 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md
@@ -8,7 +8,7 @@ dashedName: handle-a-rejected-promise-with-catch
# --description--
-`catch` – це метод, який використовують тоді, коли проміс було відхилено. Він виконується одразу після виклику методу `reject`. Ось синтаксис:
+`catch` — це метод, який використовують тоді, коли проміс було відхилено. Він виконується одразу після виклику методу `reject`. Ось синтаксис:
```js
myPromise.catch(error => {
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md
index e2ca50a5610..36718b205dc 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md
@@ -14,7 +14,7 @@ dashedName: mutate-an-array-declared-with-const
Деякі розробники надають перевагу присвоєнню усіх змінних за допомогою `const`, якщо їм не потрібно повторно присвоїти значення. Тоді вони використовують `let`.
-Однак варто розуміти, що об'єкти (включно з масивами та функціями), присвоєні змінній за допомогою `const`, всеодно можна змінити. Оголошення `const` всього лиш запобігає повторному присвоєнню ідентифікатора змінної.
+Однак варто розуміти, що об’єкти (включно з масивами та функціями), присвоєні змінній за допомогою `const`, всеодно можна змінити. Оголошення `const` всього лиш запобігає повторному присвоєнню ідентифікатора змінної.
```js
const s = [5, 6, 7];
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/apply-functional-programming-to-convert-strings-to-url-slugs.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/apply-functional-programming-to-convert-strings-to-url-slugs.md
index 3fe0d2ec857..e8307d4f092 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/apply-functional-programming-to-convert-strings-to-url-slugs.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/apply-functional-programming-to-convert-strings-to-url-slugs.md
@@ -12,7 +12,7 @@ dashedName: apply-functional-programming-to-convert-strings-to-url-slugs
Об’єднаємо вивчене, щоб розв’язати практичне завдання.
-Багато сайтів керування вмістом (CMS) додають заголовки дописів до частини URL в цілях соціальних закладок. Наприклад, якщо ви напишете середній допис під назвою `Stop Using Reduce`, ймовірно, URL міститиме заголовок (`.../stop-using-reduce`). Можливо, ви вже помітили це на сайті freeCodeCamp.
+Багато сайтів керування вмістом (CMS) додають заголовки дописів до частини URL в цілях закладок. Наприклад, якщо ви напишете середній допис під назвою `Stop Using Reduce`, ймовірно, URL міститиме заголовок (`.../stop-using-reduce`). Можливо, ви вже помітили це на сайті freeCodeCamp.
# --instructions--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md
index f0175127c03..d997163879d 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md
@@ -12,13 +12,13 @@ dashedName: avoid-mutations-and-side-effects-using-functional-programming
Це малий приклад набагато більшого шаблону: ви викликаєте функцію на змінній, масиві чи об’єкті, а функція змінює змінну чи щось в об’єкті.
-Один з основних принципів функційного програмування – нічого не змінювати. Зміни призводять до помилок. Легше уникнути помилок, знаючи, що ваші функції нічого не змінюють, включно з аргументами функцій чи будь-якою глобальною змінною.
+Один з основних принципів функційного програмування — нічого не змінювати. Зміни призводять до помилок. Легше уникнути помилок, знаючи, що ваші функції нічого не змінюють, включно з аргументами функцій чи будь-якою глобальною змінною.
У попередньому прикладі не було складних операцій, але метод `splice` змінив вихідний масив і видав помилку.
Пригадаємо, що у функційному програмуванні зміну називають
мутацією , а наслідок називають
побічним ефектом . В ідеалі функція повинна бути
чистою , тобто не спричиняти жодних побічних ефектів.
-Спробуємо опанувати цю дисципліну і не будемо змінювати будь-які змінні чи об'єкти в нашому коді.
+Спробуємо опанувати цю дисципліну і не будемо змінювати будь-які змінні чи об’єкти в нашому коді.
# --instructions--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/combine-an-array-into-a-string-using-the-join-method.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/combine-an-array-into-a-string-using-the-join-method.md
index 9e0712a112e..74cc8ba19cb 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/combine-an-array-into-a-string-using-the-join-method.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/combine-an-array-into-a-string-using-the-join-method.md
@@ -8,7 +8,7 @@ dashedName: combine-an-array-into-a-string-using-the-join-method
# --description--
-Метод `join` використовують, щоб об'єднати елементи масиву та створити з них рядок. Він приймає потрібний аргумент для розділювача, який використовується для відокремлення елементів масиву у рядку.
+Метод `join` використовують, щоб об’єднати елементи масиву та створити з них рядок. Він приймає потрібний аргумент для розділювача, який використовується для відокремлення елементів масиву у рядку.
Ось приклад:
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/combine-two-arrays-using-the-concat-method.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/combine-two-arrays-using-the-concat-method.md
index f95ff13e915..2a507e20cb6 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/combine-two-arrays-using-the-concat-method.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/combine-two-arrays-using-the-concat-method.md
@@ -8,7 +8,7 @@ dashedName: combine-two-arrays-using-the-concat-method
# --description--
-
Конкатенація – це склеювання елементів. JavaScript пропонує метод `concat` для рядків та масивів, який працює однаково для обох. Щодо масивів: метод викликається на масиві, потім інший масив надається як аргумент до `concat` та додається до кінця першого масиву. Він повертає новий масив та не змінює жодного з вихідних масивів. Ось приклад:
+
Конкатенація — це склеювання елементів. JavaScript пропонує метод `concat` для рядків та масивів, який працює однаково для обох. Щодо масивів: метод викликається на масиві, потім інший масив надається як аргумент до `concat` та додається до кінця першого масиву. Він повертає новий масив та не змінює жодного з вихідних масивів. Ось приклад:
```js
[1, 2, 3].concat([4, 5, 6]);
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md
index be2d7eaabee..02edc50bf2b 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md
@@ -10,7 +10,7 @@ dashedName: implement-map-on-a-prototype
Як ви бачили з використання `Array.prototype.map()`, або просто `map()`, метод `map` повертає масив тієї ж довжини, що і той, на якому був викликаний. Він також не змінює вихідний масив, оскільки функція зворотного виклику цього не робить.
-Іншими словами, `map` – це чиста функція, де вихідні дані залежать від вхідних. Крім того, вона приймає іншу функцію як аргумент.
+Іншими словами, `map` — це чиста функція, де вихідні дані залежать від вхідних. Крім того, вона приймає іншу функцію як аргумент.
Ви можете багато дізнатись про метод `map`, якщо реалізуєте власну версію. Рекомендовано використовувати цикл `for` або `Array.prototype.forEach()`.
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application.md
index bce316f0a56..72aa9627d61 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application.md
@@ -8,7 +8,7 @@ dashedName: introduction-to-currying-and-partial-application
# --description--
-
Арність функції – це кількість необхідних аргументів.
Каррінгом функції називають перетворення функції з n-ною арністю у n-ну кількість функцій з арністю 1.
+
Арність функції — це кількість необхідних аргументів.
Каррінгом функції називають перетворення функції з n-ною арністю у n-ну кількість функцій з арністю 1.
Іншими словами, структура функції змінюється так, що вона приймає один аргумент, потім повертається інша функція, яка приймає наступний аргумент і так далі.
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md
index b88ffe0ef5c..c4e06aa6563 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md
@@ -8,7 +8,7 @@ dashedName: learn-about-functional-programming
# --description--
-Функційне програмування – це стиль програмування, у якому рішення є простими ізольованими функціями без будь-яких побічних ефектів, які виходять за межі області дії функції: `INPUT -> PROCESS -> OUTPUT`
+Функційне програмування — це стиль програмування, у якому рішення є простими ізольованими функціями без будь-яких побічних ефектів, які виходять за межі області дії функції: `INPUT -> PROCESS -> OUTPUT`
Функційне програмування передбачає:
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md
index 12c6b1143d9..81f3088891a 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md
@@ -12,7 +12,7 @@ dashedName: pass-arguments-to-avoid-external-dependence-in-a-function
Ми не змінили значення глобальної змінної, але функція `incrementer` не буде працювати без глобальної змінної `fixedValue`.
-Інший принцип функційного програмування – завжди оголошувати свої залежності відкрито. Це означає, що якщо функція залежить від змінної чи об’єкта, тоді ця змінна чи об’єкт передаються прямо до функції як аргумент.
+Інший принцип функційного програмування — завжди оголошувати свої залежності відкрито. Це означає, що якщо функція залежить від змінної чи об’єкта, тоді ця змінна чи об’єкт передаються прямо до функції як аргумент.
З цього принципу випливає декілька хороших наслідків. Цю функцію легше протестувати, ви знаєте її вхідні дані і вона ні від чого не залежить у вашій програмі.
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md
index 174ada67969..6bd58293ff3 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md
@@ -10,9 +10,9 @@ dashedName: refactor-global-variables-out-of-functions
Наразі ми розглянули два окремих принципи функційного програмування:
-1) Не змінюйте змінну чи об’єкт – створюйте нові змінні та об’єкти і, якщо потрібно, повертайте їх з функції. Підказка: якщо використати щось схоже до `const newArr = arrVar` (де `arrVar` є масивом), ви просто створите посилання на наявну змінну, а не копію. Тому, змінивши значення в `newArr`, зміниться значення в `arrVar`.
+1) Не змінюйте змінну чи об’єкт — створюйте нові змінні та об’єкти і, якщо потрібно, повертайте їх з функції. Підказка: якщо використати щось схоже до `const newArr = arrVar` (де `arrVar` є масивом), ви просто створите посилання на наявну змінну, а не копію. Тому, змінивши значення в `newArr`, зміниться значення в `arrVar`.
-2) Оголошення параметрів функції – будь-яке обчислення всередині функції залежить лише від аргументів, переданих до функції, а не від глобального об’єкта чи змінної.
+2) Оголошення параметрів функції — будь-яке обчислення всередині функції залежить лише від аргументів, переданих до функції, а не від глобального об’єкта чи змінної.
Додавання одиниці до числа не дуже цікаве, але ми можемо застосувати ці принципи при роботі з масивами або складнішими об’єктами.
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md
index 49fe05c5394..2af4898596d 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md
@@ -8,7 +8,7 @@ dashedName: remove-elements-from-an-array-using-slice-instead-of-splice
# --description--
-Часто при роботі з масивами потрібно видалити деякі елементи, а решту масиву зберегти. JavaScript пропонує метод `splice`, який приймає аргументи для індексу (де саме почати видаляти елементи), а тоді – їх кількість. Якщо другий аргумент не надано, то елементи видаляються до кінця за замовчуванням. Однак метод `splice` змінює вихідний масив, у якому викликається. Ось приклад:
+Часто при роботі з масивами потрібно видалити деякі елементи, а решту масиву зберегти. JavaScript пропонує метод `splice`, який приймає аргументи для індексу (де саме почати видаляти елементи), а тоді — їх кількість. Якщо другий аргумент не надано, то елементи видаляються до кінця за замовчуванням. Однак метод `splice` змінює вихідний масив, у якому викликається. Ось приклад:
```js
const cities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"];
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md
index c58092a93ca..323c371220c 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md
@@ -8,11 +8,11 @@ dashedName: return-a-sorted-array-without-changing-the-original-array
# --description--
-Побічним ефектом методу `sort` є те, що він змінює порядок елементів у вихідному масиві. Іншими словами, він змінює масив. Один зі способів уникнути цього – спочатку об’єднати порожній масив із масивом, який потрібно відсортувати (пам’ятайте, що `slice` та `concat` повертають новий масив), а потім запустити метод `sort`.
+Побічним ефектом методу `sort` є те, що він змінює порядок елементів у вихідному масиві. Іншими словами, він змінює масив. Один зі способів уникнути цього — спочатку об’єднати порожній масив із масивом, який потрібно відсортувати (пам’ятайте, що `slice` та `concat` повертають новий масив), а потім запустити метод `sort`.
# --instructions--
-Використайте метод `sort` у функції `nonMutatingSort`, щоб відсортувати елементи масиву у висхідному порядку. Функція повинна повернути новий масив і не змінювати змінну `globalArray`.
+Використайте метод `sort` у функції `nonMutatingSort`, щоб відсортувати елементи масиву у порядку зростання. Функція повинна повернути новий масив і не змінювати змінну `globalArray`.
# --hints--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method.md
index 80d4fd5332e..4366b823b73 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method.md
@@ -36,7 +36,7 @@ reverseAlpha(['l', 'h', 'z', 'b', 's']);
Поверненим значенням буде `['z', 's', 'l', 'h', 'b']`.
-Метод сортування JavaScript за замовчуванням – це значення Unicode, що може надати несподівані результати. Тому краще надавати функцію зворотного виклику, щоб визначити порядок сортування об’єктів масиву. Коли надається така функція зворотного виклику (зазвичай називається `compareFunction`), елементи масиву впорядковуються відповідно до її поверненого значення. Якщо `compareFunction(a,b)` повертає значення двох елементів (`a` та `b`) менше за 0, то `a` йтиме перед `b`. Якщо `compareFunction(a,b)` повертає значення двох елементів (`a` та `b`) більше за 0, то `b` йтиме перед `a`. Якщо `compareFunction(a,b)` повертає значення двох елементів (`a` та `b`) рівне 0, то `a` та `b` залишаться без змін.
+Типовий метод сортування JavaScript полягає в сортуванні рядкових точок Unicode, що може видавати неочікувані результати. Тому краще надавати функцію зворотного виклику, щоб визначити порядок сортування об’єктів масиву. Коли надається така функція зворотного виклику (зазвичай називається `compareFunction`), елементи масиву впорядковуються відповідно до її поверненого значення. Якщо `compareFunction(a,b)` повертає значення двох елементів (`a` та `b`) менше за 0, то `a` йтиме перед `b`. Якщо `compareFunction(a,b)` повертає значення двох елементів (`a` та `b`) більше за 0, то `b` йтиме перед `a`. Якщо `compareFunction(a,b)` повертає значення двох елементів (`a` та `b`) рівне 0, то `a` та `b` залишаться без змін.
# --instructions--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/split-a-string-into-an-array-using-the-split-method.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/split-a-string-into-an-array-using-the-split-method.md
index 40025768e1c..5ebe85c1886 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/split-a-string-into-an-array-using-the-split-method.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/split-a-string-into-an-array-using-the-split-method.md
@@ -10,7 +10,7 @@ dashedName: split-a-string-into-an-array-using-the-split-method
Метод `split` розділяє рядок на масив рядків. Він приймає потрібний аргумент для розділювача, який може бути символом для розбиття рядка чи регулярного виразу. Наприклад, якщо розділювач є пробілом, ви отримаєте масив слів, а якщо розділювачем є пустий рядок, ви отримаєте масив окремих рядків із символом.
-Ось два приклади, які розділяють один рядок пробілами, а інший – цифрами, використовуючи регулярний вираз:
+Ось два приклади, які розділяють один рядок пробілами, а інший — цифрами, використовуючи регулярний вираз:
```js
const str = "Hello World";
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/understand-functional-programming-terminology.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/understand-functional-programming-terminology.md
index 409ff7a093c..fa3f628efdf 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/understand-functional-programming-terminology.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/understand-functional-programming-terminology.md
@@ -14,7 +14,7 @@ dashedName: understand-functional-programming-terminology
Але спочатку розглянемо трішки функційної термінології:
-
Функція зворотного виклику (callback) – це функції, які передаються іншим функціям, щоб вирішити, коли та як їх викликати. Можливо, ви бачили, як деякі передаються іншим методам. Наприклад, у `filter` функція зворотного виклику повідомляє JavaScript критерії для фільтрації масиву.
+
Функції зворотного виклику (callback) — це функції, які передаються іншим функціям, щоб вирішити, коли та як їх викликати. Можливо, ви бачили, як деякі передаються іншим методам. Наприклад, у `filter` функція зворотного виклику повідомляє JavaScript критерії для фільтрації масиву.
Функції, які можна присвоїти до змінної, передати до іншої функції або навпаки повернути з іншої функції, як інше звичайне значення, називають функціями
першого класу . У JavaScript всі функції є функціями першого класу.
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data.md
index 9414ca6c064..5f7382f8910 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data.md
@@ -8,11 +8,11 @@ dashedName: use-the-reduce-method-to-analyze-data
# --description--
-`Array.prototype.reduce()`, або просто `reduce()` – найпоширеніша операція із масивами у JavaScript. Ви можете вирішити практично будь-яку проблему обробки масиву, використовуючи метод `reduce`.
+`Array.prototype.reduce()`, або просто `reduce()` — найпоширеніша операція із масивами у JavaScript. Ви можете вирішити практично будь-яку проблему обробки масиву, використовуючи метод `reduce`.
Метод `reduce` дозволяє використовувати загальні форми обробки масивів і можна сказати, що `filter` та `map` є похідними від `reduce`. Метод `reduce` перебирає кожен елемент у масиві та повертає єдине значення (тобто рядок, число, об’єкт, масив). Це досягається за допомогою функції зворотного виклику, яка відбувається на кожній ітерації.
-Функція зворотного виклику приймає чотири аргументи. Перший аргумент відомий як акумулятор, якому призначається повернене значення функції зворотного виклику з попередньої ітерації. Другим є елемент, який наразі опрацьовується. Третім є індекс цього елемента. Четвертий – це масив, на якому було викликано `reduce`.
+Функція зворотного виклику приймає чотири аргументи. Перший аргумент відомий як акумулятор, якому призначається повернене значення функції зворотного виклику з попередньої ітерації. Другим є елемент, який наразі опрацьовується. Третім є індекс цього елемента. Четвертий — це масив, на якому було викликано `reduce`.
Крім того, `reduce` має додатковий параметр, який приймає початкове значення акумулятора. Якщо цей другий параметр не використовується, то перша ітерація пропускається, а друга передається першому елементу масиву як акумулятор.
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md
index 28f0bd1e1e9..1d51650668a 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md
@@ -14,7 +14,7 @@ dashedName: dna-pairing
Наприклад, при введенні `GCG` поверніть `[["G", "C"], ["C","G"], ["G", "C"]]`
-Символ та його пара об'єднуються в масив, і всі масиви згруповані в один інкапсульований масив.
+Символ та його пара об’єднуються в масив, і всі масиви згруповані в один інкапсульований масив.
# --hints--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md
index 3500452fbaf..9904bab22a4 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md
@@ -10,11 +10,11 @@ dashedName: everything-be-true
Перевірте, чи предикат (другий аргумент) є
істинним для усіх елементів колекції (перший аргумент).
-Іншими словами, вам дано колекцію масивів об'єктів. Предикат `pre` буде властивістю об'єкта і вам потрібно повернути `true`, якщо його значення `truthy` (істинне). В іншому випадку поверніть `false`.
+Іншими словами, вам надано колекцію масивів об’єктів. Предикат `pre` буде властивістю об’єкта і вам потрібно повернути `true`, якщо його значення `truthy` (істинне). В іншому випадку поверніть `false`.
-Значення `truthy` у JavaScript – це значення, які перетворюються на `true` при оцінці в булевому контексті.
+Значення `truthy` у JavaScript — це значення, які перетворюються на `true` при оцінці в булевому контексті.
-Пам'ятайте, ви можете отримати доступ до властивостей об'єкта, використовуючи точкову нотацію або дужкову нотацію (`[]`).
+Пам’ятайте, ви можете отримати доступ до властивостей об’єкта, використовуючи точкову нотацію або дужкову нотацію (`[]`).
# --hints--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md
index 739a89a4f85..9a893236d46 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md
@@ -19,7 +19,7 @@ setLastName(last)
setFullName(firstAndLast)
```
-Запустіть тести, щоб побачити очікуваний вивід для кожного методу. Методи, що приймають аргумент, повинні приймати лише один аргумент і це повинен бути рядок. Ці методи повинні бути єдиними доступними засобами для взаємодії з об'єктом.
+Запустіть тести, щоб побачити очікуваний вивід для кожного методу. Методи, що приймають аргумент, повинні приймати лише один аргумент і це повинен бути рядок. Ці методи повинні бути єдиними доступними засобами для взаємодії з об’єктом.
# --hints--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/map-the-debris.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/map-the-debris.md
index dae99fd1b9e..ddeaff550ef 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/map-the-debris.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/map-the-debris.md
@@ -12,18 +12,18 @@ dashedName: map-the-debris
$$ T = 2 \pi \sqrt{\frac{a^{3}}{\mu}} $$
-- $a$ – велика піввісь орбіти
-- $μ = GM$ – стандартний гравітаційний параметр
-- $G$ – гравітаційна стала,
-- $M$ – маса масивнішого тіла.
+- $a$ — велика піввісь орбіти
+- $μ = GM$ — стандартний гравітаційний параметр
+- $G$ — гравітаційна стала,
+- $M$ — маса масивнішого тіла.
Поверніть новий масив, який трансформує середню висоту елементів у їхні орбітальні періоди (у секундах).
-Масив міститиме об'єкти у форматі `{name: 'name', avgAlt: avgAlt}`.
+Масив міститиме об’єкти у форматі `{name: 'name', avgAlt: avgAlt}`.
-Значення потрібно округлити до найближчого цілого числа. Тіло, навколо якого потрібно обертатися, – Земля.
+Значення потрібно округлити до найближчого цілого числа. Тіло, навколо якого потрібно обертатися, — Земля.
-Радіус Землі становить 6367.4447 кілометрів, а значення GM Землі – 398600.4418 км
3 с
-2 .
+Радіус Землі становить 6367.4447 кілометрів, а значення GM Землі — 398600.4418 км
3 с
-2 .
# --hints--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin.md
index aa9c0a22fd5..18cce1b01fe 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin.md
@@ -8,7 +8,7 @@ dashedName: pig-latin
# --description--
-Поросяча латина – це спосіб шифрування англійських слів. Правила такі:
+Поросяча латина — це спосіб шифрування англійських слів. Правила такі:
\- Якщо слово починається з приголосного звуку, то перший приголосний або сполучення приголосних переміщуються в кінець слова і додається `ay`.
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md
index 1f3e3034d29..41db2b8773e 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md
@@ -10,7 +10,7 @@ dashedName: seek-and-destroy
Вам буде надано початковий масив (перший аргумент у функції `destroyer`), який супроводжується одним або більше аргументами. Видаліть всі елементи з початкового масиву, які мають таке ж значення, як ці аргументи.
-**Примітка:** потрібно використати об'єкт `arguments`.
+**Примітка:** потрібно використати об’єкт `arguments`.
# --hints--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/smallest-common-multiple.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/smallest-common-multiple.md
index 7efe4bc65a5..3793e8af609 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/smallest-common-multiple.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/smallest-common-multiple.md
@@ -10,7 +10,7 @@ dashedName: smallest-common-multiple
Знайдіть найменше спільне кратне заданих параметрів, яке можна поділити на обидва з них, а також на всі послідовні числа в діапазоні між цими параметрами.
-Діапазоном буде масив з двох чисел, які необов'язково будуть у числовому порядку.
+Діапазоном буде масив з двох чисел, які необов’язково будуть у числовому порядку.
Наприклад, якщо дано 1 і 3, знайдіть найменше спільне кратне обох чисел (1 і 3), яке рівно ділиться на всі числа *між* 1 і 3. Тут відповіддю буде 6.
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md
index 4bfa33ebf00..8993c7cfc0f 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md
@@ -12,7 +12,7 @@ dashedName: sum-all-odd-fibonacci-numbers
Першими двома числами в послідовності Фібоначчі є 0 та 1. Кожне додаткове число у послідовності є сумою двох попередніх чисел. Першими сімома числами в послідовності Фібоначчі є 1, 1, 2, 3, 5 і 8.
-Наприклад, `sumFibs(10)` має повертати `10`, оскільки всі непарні числа Фібоначчі, які менші або дорівнюють `10` – це 1, 1, 3 і 5.
+Наприклад, `sumFibs(10)` має повертати `10`, оскільки всі непарні числа Фібоначчі, які менші або дорівнюють `10` — це 1, 1, 3 і 5.
# --hints--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
index 9340b275c59..244b52ab450 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
@@ -8,7 +8,7 @@ dashedName: sum-all-primes
# --description--
-
Просте число – це ціле число, яке більше за 1 та має два дільники: 1 і саме число. Наприклад, 2 є простим числом, оскільки воно ділиться лише на 1 і 2. І навпаки, 4 не є простим числом, оскільки воно ділиться на 1, 2 і 4.
+
Просте число — це ціле число, яке більше за 1 та має два дільники: 1 і саме число. Наприклад, 2 є простим числом, оскільки воно ділиться лише на 1 і 2. І навпаки, 4 не є простим числом, оскільки воно ділиться на 1, 2 і 4.
Перепишіть `sumPrimes` таким чином, щоб поверталася сума всіх простих чисел, які менші або дорівнюють num.
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md
index 17f32cae5b6..1204a366101 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md
@@ -8,9 +8,9 @@ dashedName: wherefore-art-thou
# --description--
-Напишіть функцію, яка проглядає масив об'єктів (перший аргумент) і повертає масив усіх об'єктів, які мають однакові пари імен та значень (другий аргумент). Кожна пара імен та значень вихідного об'єкта повинна бути в об'єкті з колекції, якщо він необхідний у повернутому масиві.
+Напишіть функцію, яка проглядає масив об’єктів (перший аргумент) і повертає масив усіх об’єктів, які мають однакові пари імен та значень (другий аргумент). Кожна пара імен та значень вихідного об'єкта повинна бути в об’єкті з колекції, якщо він необхідний у повернутому масиві.
-Наприклад, якщо першим аргументом є `[{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]` та другим аргументом є `{ last: "Capulet" }`, тоді потрібно повернути третій об'єкт з масиву (перший аргумент), оскільки він містить ім'я та його значення, яке було передане до другого аргументу.
+Наприклад, якщо першим аргументом є `[{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]` та другим аргументом є `{ last: "Capulet" }`, тоді потрібно повернути третій об’єкт з масиву (перший аргумент), оскільки він містить ім’я та його значення, яке було передане до другого аргументу.
# --hints--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md
index 410cbb82015..fa040db227a 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md
@@ -10,13 +10,13 @@ dashedName: cash-register
Розробіть функцію касового апарату `checkCashRegister()`, яка приймає ціну покупки як перший аргумент (`price`), оплату як другий аргумент (`cash`) та суму готівки в касі як третій аргумент (`cid`).
-`cid` – це 2D масив, який містить список доступного обігу.
+`cid` — це 2D масив, який містить список доступного обігу.
Функція `checkCashRegister()` завжди повинна повертати об’єкт з ключем `status` та ключем `change`.
Поверніть `{status: "INSUFFICIENT_FUNDS", change: []}`, якщо сума готівки в касі менша за здачу, або ви не можете віддати здачу.
-Поверніть `{status: "CLOSED", change: [...]}` з сумою в касі як значення ключа `change`, якщо вона дорівнює здачі.
+Поверніть `{status: "CLOSED", change: [...]}` з сумою в касі як значення ключа `change`, якщо воно дорівнює здачі.
В іншому випадку, поверніть `{status: "OPEN", change: [...]}` зі здачею в монетах і банкнотах, в порядку від найбільшої до найменшої, як значення ключа `change`.
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md
index 25bde46ddba..bff90cb10c5 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md
@@ -10,7 +10,7 @@ dashedName: palindrome-checker
Поверніть `true`, якщо заданий рядок є паліндромом. В іншому випадку, поверніть `false`.
-
Паліндром – це слово чи речення, що однаково пишеться в обох напрямках (зліва направо та справа наліво), незважаючи на розділові знаки, регістр чи пробіли.
+
Паліндром — це слово чи речення, що однаково пишеться в обох напрямках (зліва направо та справа наліво), незважаючи на розділові знаки, велику/малу літеру чи пробіли.
**Примітка:** вам потрібно прибрати **всі неалфавітні символи** (розділові знаки, пробіли та символи) і написати весь текст одинаково (великими або малими літерами) для перевірки паліндромів.
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md
index 068b22019e4..add4ce8c44f 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md
@@ -14,7 +14,7 @@ dashedName: telephone-number-validator
555-555-5555
-У цьому завданні вам буде надано рядок (наприклад, `800-692-7753` або `8oo-six427676;laskdjf`). Ваше завдання – підтвердити або відхилити мобільний номер США на основі будь-якої комбінації форматів, наданих вище. Код зони нумерації є обов’язковим. Якщо надано телефонний код країни, то ви повинні підтвердити, що телефонним кодом країни є `1`. Поверніть `true`, якщо рядок є дійсним мобільним номером США; в іншому випадку поверніть `false`.
+У цьому завданні вам буде надано рядок (наприклад, `800-692-7753` або `8oo-six427676;laskdjf`). Ваше завдання — підтвердити або відхилити мобільний номер США на основі будь-якої комбінації форматів, наданих вище. Код зони нумерації є обов’язковим. Якщо надано телефонний код країни, то ви повинні підтвердити, що телефонним кодом країни є `1`. Поверніть `true`, якщо рядок є дійсним мобільним номером США; в іншому випадку поверніть `false`.
# --hints--
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md
index 8f6b8abb3c7..3d9f31b96c6 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md
@@ -18,7 +18,7 @@ dashedName: data-visualization-page-rank
## --answers--
-Він визначає, які сторінки найбільш пов'язані.
+Він визначає, які сторінки найбільш пов’язані.
---
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md
index 3102e51480c..d473f9825bb 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md
@@ -22,7 +22,7 @@ dashedName: introduction-hardware-architecture
---
-Пам'ять.
+Пам’ять.
---
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md
index ff448f1682e..7479f47bbc9 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md
@@ -25,15 +25,15 @@ for line in fhand:
## --answers--
-Лише зміст "romeo.txt".
+Лише зміст «romeo.txt».
---
-Верхній колонтитул і зміст "romeo.txt".
+Верхній колонтитул і зміст «romeo.txt».
---
-Верхній та нижній колонтитули, зміст "romeo.txt".
+Верхній та нижній колонтитули, зміст «romeo.txt».
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md
index ad447d801aa..36f0671de57 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md
@@ -38,7 +38,7 @@ mysock.close()
---
-Простий e-mail клієнт.
+Простий клієнт пошти.
---
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md
index 2cba78ae199..cee3a24d797 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md
@@ -1,6 +1,6 @@
---
id: 5e7b9f170b6c005b0e76f087
-title: Життєвий цикл об'єкта
+title: Життєвий цикл об’єкта
challengeType: 11
videoId: p1r3h_AMMIM
bilibiliIds:
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md
index db70a195a18..58d03c7cdb0 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md
@@ -1,6 +1,6 @@
---
id: 5e7b9f160b6c005b0e76f086
-title: 'Об''єкти: приклад класу'
+title: 'Об’єкти: приклад класу'
challengeType: 11
videoId: FiABKEuaSJ8
bilibiliIds:
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md
index fb86a476217..7219646054b 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md
@@ -1,6 +1,6 @@
---
id: 5e7b9f170b6c005b0e76f088
-title: 'Об''єкти: успадкування'
+title: 'Об’єкти: успадкування'
challengeType: 11
videoId: FBL3alYrxRM
bilibiliIds:
@@ -14,7 +14,7 @@ dashedName: objects-inheritance
## --text--
-Що таке успадкування в об'єктно-орієнтованому програмуванні?
+Що таке успадкування в об’єктноорієнтованому програмуванні?
## --answers--
@@ -30,7 +30,7 @@ dashedName: objects-inheritance
---
-Метод, який викликається в момент, коли клас використано для побудови об'єкту.
+Метод, який викликається в момент, коли клас використано для побудови об’єкту.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md
index 57af6b72568..05ddbb5707e 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md
@@ -1,6 +1,6 @@
---
id: 5e7b9f090b6c005b0e76f067
-title: Словники Python
+title: Словники в Python
challengeType: 11
videoId: dnzvfimrRMg
bilibiliIds:
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-objects.md
index e38aa46e6c9..a19dfe0f17d 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-objects.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/python-objects.md
@@ -1,6 +1,6 @@
---
id: 5e7b9f160b6c005b0e76f085
-title: Об'єкти в Python
+title: Об’єкти в Python
challengeType: 11
videoId: uJxGeTYy0us
bilibiliIds:
@@ -14,23 +14,23 @@ dashedName: python-objects
## --text--
-Яке з наведених тверджень НЕ є правильним для об'єктів у Python?
+Яке з наведених тверджень НЕ є правильним для об’єктів у Python?
## --answers--
-Об'єкти створюються та використовуються.
+Об’єкти створюються та використовуються.
---
-Об'єкти – це біти коду та дані.
+Об’єкти — це біти коду та дані.
---
-Об'єкти приховують деталі.
+Об’єкти приховують деталі.
---
-Об'єкти – це один з п'яти стандартних типів даних.
+Об‘єкти — це один з п’яти стандартних типів даних.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md
index b24a7f39e43..84b0aab6855 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md
@@ -1,6 +1,6 @@
---
id: 5e7b9f180b6c005b0e76f08c
-title: Проектування реляційних баз даних
+title: Проєктування реляційних баз даних
challengeType: 11
videoId: AqdfbrpkbHk
bilibiliIds:
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md
index 31c15f599e0..d4c944a4d51 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md
@@ -26,7 +26,7 @@ dashedName: relational-databases-join-operation
---
-Воно вказує на те, як саме таблиці мають бути об'єднані.
+Воно вказує на те, як саме таблиці мають бути об’єднані.
## --video-solution--
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md
index 3ff23a3280a..209164c626e 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md
@@ -14,7 +14,7 @@ dashedName: representing-relationships-in-a-relational-database
## --text--
-Що таке foreign key?
+Що таке іноземний ключ?
## --answers--
@@ -26,7 +26,7 @@ dashedName: representing-relationships-in-a-relational-database
---
-Число, яке вказує на первинний ключ від пов'язаного рядка в іншій таблиці.
+Число, яке вказує на первинний ключ від пов’язаного рядка в іншій таблиці.
---
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md
index b4a6bea4941..4f6b668046d 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md
@@ -30,7 +30,7 @@ dashedName: visualizing-data-with-python
---
-запам'ятовані
+запам’ятовані
---
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md
index 0630ca85ceb..c18e74b1e65 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md
@@ -30,7 +30,7 @@ dashedName: web-services-api-rate-limiting-and-security
## --answers--
-ім'я користувача
+ім’я користувача
---
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md
index 248542f491c..a3c6c233c06 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md
@@ -18,7 +18,7 @@ dashedName: web-services-service-oriented-approach
## --answers--
-Розповсюджені між багатьма комп'ютерними системами, які поєднані між собою через інтернет або внутрішню мережу.
+Розповсюджені між багатьма комп’ютерними системами, які поєднані між собою через інтернет або внутрішню мережу.
---
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md
index 6301e20bbe6..4d61c096ec9 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md
@@ -17,15 +17,15 @@ dashedName: budget-app
# --instructions--
-Завершіть клас `Category` у `budget.py`. Він повинен опрацьовувати об'єкти, базуючись на різних категоріях, наприклад *їжа*, *одяг* та *розваги*. Коли об'єкти створені, вони передаються в назву категорії. Клас повинен мати поле класу під назвою `ledger`, яке є списком. Клас також повинен містити наступні методи:
+Завершіть клас `Category` у `budget.py`. Він повинен опрацьовувати об’єкти, базуючись на різних категоріях (наприклад, *їжа*, *одяг* та *розваги*). Коли об’єкти створені, вони передаються до назви категорії. Клас повинен мати поле класу під назвою `ledger`, яке є списком. Клас також повинен містити наступні методи:
-- Метод `deposit`, що приймає суму та опис. Якщо жодного опису не дано, то він автоматично стає порожнім рядком. Цей метод повинен додавати об'єкти до списку ledger у вигляді `{"amount": amount, "description": description}`.
-- Метод `withdraw` схожий до методу `deposit`, але сума, яку він передає, повинна зберігатися у списку як від'ємне число. Якщо недостатньо коштів, то нічого додавати не потрібно. Цей метод повинен повертати `True`, якщо зняття дійсне, а в іншому випадку повертати `False`.
+- Метод `deposit`, що приймає суму та опис. Якщо жодного опису не дано, то він автоматично стає порожнім рядком. Цей метод повинен додавати об’єкти до списку ledger у вигляді `{"amount": amount, "description": description}`.
+- Метод `withdraw` схожий до методу `deposit`, але сума, яку він передає, повинна зберігатися у списку як від’ємне число. Якщо недостатньо коштів, то нічого додавати не потрібно. Цей метод повинен повертати `True`, якщо зняття дійсне, а в іншому випадку повертати `False`.
- Метод `get_balance`, що повертає поточний баланс категорії бюджету на основі депозитів і зняття.
-- Метод `transfer`, що приймає суму або іншу бюджетну категорію як аргументи. Цей метод повинен додавати виведення суми та опис "Transfer to [Destination Budget Category]" (перенести до [категорія]). Потім він повинен додати депозит до іншої категорії, що містить суму та опис "Transfer from [Source Budget Category]" (передача з [категорія]). Якщо недостатньо коштів, то нічого додавати не потрібно. Цей метод повинен повертати `True`, якщо переказ дійсний, а в іншому випадку повертати `False`.
+- Метод `transfer`, що приймає суму або іншу бюджетну категорію як аргументи. Цей метод повинен додавати виведення суми та опис «Transfer to [Destination Budget Category]» (перенести до [категорія]). Потім він повинен додати депозит до іншої категорії, що містить суму та опис «Transfer from [Source Budget Category]» (перенести з [категорія]). Якщо недостатньо коштів, то нічого додавати не потрібно. Цей метод повинен повертати `True`, якщо переказ дійсний, а в іншому випадку повертати `False`.
- Метод `check_funds`, що приймає суму як аргумент. Він повертає `False`, якщо сума більша за баланс бюджетної категорії, а в іншому випадку повертає `True`. Цей метод варто використовувати обом методам `withdraw` та `transfer`.
-Якщо бюджетний об'єкт надрукований, він повинен відображатися:
+Якщо бюджет надрукований, то повинні відображатися:
- Рядок заголовка із 30 символів, де назва категорії знаходиться у центрі рядка символів `*`.
- Список елементів у записі. Кожен рядок повинен показувати опис і суму. Повинні зображатися перші 23 символи опису, а потім сума. Сума повинна бути вирівняною за правим краєм, містити два десяткові знаки та відображати максимум 7 символів.
@@ -44,7 +44,7 @@ Total: 923.96
Окрім класу `Category` створіть функцію під назвою `create_spend_chart` (за межами класу), яка приймає список категорій як аргумент. Вона повинна повертати рядок зі стовпчиковою діаграмою.
-Діаграма повинна показувати відсотки, витрачені в кожній категорії, переданій до функції. Відсоток витраченого повинен бути розрахований лише за рахунок зняття, але не з депозитів. Внизу лівої частини графіку повинні бути мітки 0 - 100. Стовпчики у стовпчиковій діаграмі повинні бути створені із символу «o». Висота кожного стовпчика повинна бути округлена до найближчого 10. Горизонтальна лінія під стовпчиками повинна розташовуватись в двох пробілах від кінцевого стовпчика. Назва кожної категорії повинна бути написана вертикально під стовпчиком. Вгорі повинен бути заголовок "Percentage spent by category" (відсоток, витрачений у категорії).
+Діаграма повинна показувати відсотки, витрачені в кожній категорії, переданій до функції. Відсоток витраченого повинен бути розрахований лише за рахунок зняття, але не з депозитів. Внизу лівої частини графіку повинні бути мітки 0 - 100. Стовпчики у стовпчиковій діаграмі повинні бути створені із символу «o». Висота кожного стовпчика повинна бути округлена до найближчого 10. Горизонтальна лінія під стовпчиками повинна розташовуватись в двох пробілах від кінцевого стовпчика. Назва кожної категорії повинна бути написана вертикально під стовпчиком. Вгорі повинен бути заголовок «Percentage spent by category» (відсоток, витрачений у категорії).
Ця функція буде тестуватися чотирма категоріями.
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md
index 3e292385064..38ab47edf00 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md
@@ -17,25 +17,25 @@ dashedName: polygon-area-calculator
# --instructions--
-У цьому проєкті ви будете використовувати об'єктно-орієнтоване програмування, щоб створити класи Rectangle (прямокутник) та Square (квадрат). Клас Square повинен бути підкласом до Rectangle і наслідувати його методи та атрибути.
+У цьому проєкті ви будете використовувати об’єктноорієнтоване програмування, щоб створити класи Rectangle (прямокутник) та Square (квадрат). Клас Square повинен бути підкласом до Rectangle і наслідувати його методи та атрибути.
## Клас Rectangle
-При створенні об'єкту Rectangle ви повинні ініціалізувати його, використовуючи атрибути `width` та `height`. Клас також повинен містити наступні методи:
+При створенні об’єкту Rectangle ви повинні ініціалізувати його, використовуючи атрибути `width` та `height`. Клас також повинен містити наступні методи:
- `set_width`
- `set_height`
- `get_area`: повертає площу (`width * height`)
- `get_perimeter`: повертає периметр (`2 * width + 2 * height`)
- `get_diagonal`: повертає діагональ (`(width ** 2 + height ** 2) ** .5`)
-- `get_picture`: повертає рядок, який представляє фігуру лініями "\*". Кількість ліній повинна дорівнювати висоті, а кількість "\*" у кожному рядку повинна дорівнювати ширині. Наприкінці кожного рядка має бути новий рядок (`\n`). Якщо ширина або висота більші за 50, то повинен повернутись рядок "Too big for picture." (завеликий для зображення).
+- `get_picture`: повертає рядок, який представляє фігуру лініями «\*». Кількість ліній повинна дорівнювати висоті, а кількість «\*» у кожному рядку повинна дорівнювати ширині. Наприкінці кожного рядка має бути новий рядок (`\n`). Якщо ширина або висота більші за 50, то повинен повернутись рядок «Too big for picture.» (завеликий для зображення).
- `get_amount_inside`: приймає іншу фігуру (квадрат чи трикутник) як аргумент. Повертає ту кількість разів, скільки передана фігура може поміститися у фігурі (без обертання). Наприклад, прямокутник з шириною 4 і висотою 8 може вмістити два квадрати зі сторонами 4.
Додатково, якщо екземпляр Rectangle представлений як рядок, він має виглядати так: `Rectangle(width=5, height=10)`
## Клас Square
-Клас Square має бути підкласом Rectangle. Коли ви створюєте об'єкт Square, передається довжина однієї сторони. Метод `__init__` має зберігати довжину сторони в атрибутах `width` та `height` з класу Rectangle.
+Клас Square має бути підкласом Rectangle. Коли ви створюєте об’єкт Square, передається довжина однієї сторони. Метод `__init__` має зберігати довжину сторони в атрибутах `width` та `height` з класу Rectangle.
Клас Square повинен мати доступ до методів класу Rectange, але також повинен містити метод `set_side`. Якщо екземпляр Square представлений у вигляді рядка, то це має виглядати так: `Square(side=9)`
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
index 99d244845b9..47b4b04f8fe 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
@@ -17,11 +17,11 @@ dashedName: probability-calculator
# --instructions--
-Уявімо, що у капелюсі лежить 5 синіх, 4 червоні та 2 зелені кульки. Яка ймовірність того, що з 4 кульок, які ви витягнете, принаймні 1 буде червоною та 2 зеленими? І хоча можливо прорахувати вірогідність за допомогою вищої математики, легше буде написати програму для виконання великої кількості експериментів для оцінки приблизної вірогідності.
+Уявімо, що у капелюсі лежить 5 синіх, 4 червоні та 2 зелені кульки. Яка вірогідність того, що з 4 кульок, які ви витягнете, принаймні 1 буде червоною та 2 зеленими? І хоча можливо прорахувати вірогідність за допомогою вищої математики, легше буде написати програму для виконання великої кількості експериментів для оцінки приблизної вірогідності.
У цьому проєкті напишіть програму, яка визначатиме вірогідність випадкового діставання певних кульок із капелюха.
-Спершу створіть клас `Hat` в `prob_calculator.py`. Клас має взяти змінну кількість аргументів, яка вточнюватиме кількість кульок усіх кольорів із капелюха. Наприклад, об'єкт класу можна створити такими способами:
+Спершу створіть клас `Hat` в `prob_calculator.py`. Клас має взяти змінну кількість аргументів, яка вточнюватиме кількість кульок усіх кольорів із капелюха. Наприклад, об’єкт класу можна створити такими способами:
```py
hat1 = Hat(yellow=3, blue=2, green=6)
@@ -29,20 +29,20 @@ hat2 = Hat(red=5, orange=4)
hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
```
-Капелюх завжди створюється з принаймні однією кулькою. Аргументи, які передаються в об'єкт-капелюх, під час створення мають конвертуватися в поле класу `contents`. `contents` має бути списком рядків, де один елемент дорівнює кожній кульці у капелюсі. Кожний елемент списку має бути назвою кольору, яка позначає кульку певного кольору. Наприклад, якщо ваш капелюх `{"red": 2, "blue": 1}`, то `contents` має бути `["red", "red", "blue"]`.
+Капелюх завжди створюється з принаймні однією кулькою. Аргументи, які передаються в об’єкт-капелюх, під час створення мають конвертуватися в поле класу `contents`. `contents` має бути списком рядків, де один елемент дорівнює кожній кульці у капелюсі. Кожний елемент списку має бути назвою кольору, яка позначає кульку певного кольору. Наприклад, якщо ваш капелюх `{"red": 2, "blue": 1}`, то `contents` має бути `["red", "red", "blue"]`.
Клас `Hat` повинен мати метод `draw`, який приймає аргумент з позначенням кількості кульок, які можна витягти з капелюха. Цей метод має випадково витягати кульки з `contents` та повертати ці кульки списком рядків. Кульки не повинні повертатися до капелюха після того, як їх витягли (як в експерименті з урною без заміни). Якщо кількість кульок, яку треба витягти, перевищує доступну кількість, поверніть усі кульки.
Потім створіть функцію `experiment` в `prob_calculator.py` (не в класі `Hat`). Ця функція повинна приймати наступні аргументи:
-- `hat`: об'єкт-капелюх з кульками, який має бути скопійований у функцію.
-- `expected_balls`: об'єкт, який вказує на точну кількість кульок, котру треба вийняти з капелюха для експерименту. Наприклад, щоб визначити вірогідність того, що ви витягнете 2 сині та 1 червону кульки з капелюха, встановіть `expected_balls` на `{"blue":2, "red":1}`.
+- `hat`: об’єкт-капелюх з кульками, що потрібно скопіювати у функцію.
+- `expected_balls`: об’єкт, який вказує на точну кількість кульок, які треба вийняти з капелюха для експерименту. Наприклад, щоб визначити вірогідність того, що ви витягнете 2 сині та 1 червону кульки з капелюха, встановіть `expected_balls` на `{"blue":2, "red":1}`.
- `num_balls_drawn`: кількість кульок, які треба витягти з капелюха в кожному експерименті.
- `num_experiments`: кількість експериментів, які треба провести. (Чим більше експериментів було проведено, тим точнішою буде вірогідність.)
Функція `experiment` повинна повертати вірогідність.
-Допустимо, якщо ви хочете визначити вірогідність витягти щонайменше 2 червоні кульки та одну зелену, коли витягаєте п'ять кульок з капелюха, де лежить шість чорних, чотири червоні та три зелені кульки. Для цього вам треба виконати `N` експериментів, порахувати скільки `M` разів ви можете витягти принаймні дві червоні кульки та одну зелену кульку та вирахувати вірогідність як `M/N`. Кожен експеримент складається з капелюха (з певними кульками), витягування декількох кульок та перевірки, чи ви витягли необхідні кульки.
+Допустимо, якщо ви хочете визначити вірогідність витягти щонайменше 2 червоні кульки та одну зелену, коли витягаєте п’ять кульок з капелюха, де лежить шість чорних, чотири червоні та три зелені кульки. Для цього вам треба виконати `N` експериментів, порахувати скільки `M` разів ви можете витягти принаймні дві червоні кульки та одну зелену кульку та вирахувати вірогідність як `M/N`. Кожен експеримент складається з капелюха (з певними кульками), витягування декількох кульок та перевірки, чи ви витягли необхідні кульки.
Ось так ви можете викликати функцію `experiment`, базуючись на прикладі зверху з 2000 експериментами:
@@ -74,7 +74,7 @@ probability = experiment(hat=hat,
# --hints--
-Проєкт повинен правильно вираховувати ймовірність та пройти всі тести.
+Проєкт повинен правильно вираховувати вірогідність та пройти всі тести.
```js
diff --git a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md
index c41a55b5059..aefb5afaeab 100644
--- a/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md
+++ b/curriculum/challenges/ukrainian/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md
@@ -16,15 +16,15 @@ dashedName: time-calculator
# --instructions--
-Напишіть функцію під назвою `add_time`, яка приймає два обов'язкових параметри та один необов'язковий параметр:
+Напишіть функцію під назвою `add_time`, яка приймає два обов’язкових параметри та один необов’язковий параметр:
- початковий час в 12-годинному форматі (закінчується на AM чи PM)
- проміжок часу, який позначає кількість годин та хвилин
-- (необов'язково) перший день тижня, байдуже на регістр
+- (необов’язково) перший день тижня, байдуже на регістр
Функція повинна додати проміжок часу до початкового часу та повернути результат.
-Якщо результатом буде наступний день, то повинне бути `(next day)` після часу. Якщо результат буде за декілька днів, то повинне бути `(n days later)` після часу, де n – це кількість днів.
+Якщо результатом буде наступний день, то повинне бути `(next day)` після часу. Якщо результат буде за декілька днів, то повинне бути `(n days later)` після часу, де n — це кількість днів.
Якщо функції задано довільний параметр першого дня тижня, то вивід має показувати день тижня у результаті. День тижня у виводі повинен бути після часу та перед кількістю днів.
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
index efe73dc54a1..e8b489a81b6 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -26,25 +26,29 @@ assert.equal(document.querySelectorAll('label input')?.length, 4);
Ви повинні додати перший `input` після тексту `label` `Enter Your First Name:` та додати пробіл після двокрапки.
```js
-assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML.trim(), 'Enter Your First Name:
');
+const query = /^Enter Your First Name:\s+
/
+assert.match(document.querySelectorAll('label')?.[0]?.innerHTML.trim(), query);
```
Ви повинні додати другий `input` після тексту `label` `Enter Your Last Name:` та додати пробіл після двокрапки.
```js
-assert.equal(document.querySelectorAll('label')?.[1]?.innerHTML.trim(), 'Enter Your Last Name:
');
+const query = /^Enter Your Last Name:\s+
/
+assert.match(document.querySelectorAll('label')?.[1]?.innerHTML.trim(), query);
```
Ви повинні додати третій `input` після тексту `label` `Enter Your Email:` та додати пробіл після двокрапки.
```js
-assert.equal(document.querySelectorAll('label')?.[2]?.innerHTML.trim(), 'Enter Your Email:
');
+const query = /^Enter Your Email:\s+
/
+assert.match(document.querySelectorAll('label')?.[2]?.innerHTML.trim(), query);
```
Ви повинні додати четвертий `input` після тексту `label` `Create a New Password:` та додати пробіл після двокрапки.
```js
-assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML.trim(), 'Create a New Password:
');
+const query = /^Create a New Password:\s+
/
+assert.match(document.querySelectorAll('label')?.[3]?.innerHTML.trim(), query);
```
# --seed--
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/5ddb965c65d27e1512d44d9a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/5ddb965c65d27e1512d44d9a.md
new file mode 100644
index 00000000000..c3def32154d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/5ddb965c65d27e1512d44d9a.md
@@ -0,0 +1,122 @@
+---
+id: 5ddb965c65d27e1512d44d9a
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+You have been provided with boilerplate CSS and HTML. However, you need to build your calorie counter form.
+
+Feel free to explore the HTML and CSS, then add a `form` element and give it an `id` set to `calorie-counter`.
+
+# --hints--
+
+You should have a `form` element.
+
+```js
+assert.exists(document.querySelector('form'));
+```
+
+Your `form` element should have an `id` attribute set to `calorie-counter`.
+
+```js
+assert.equal(document.querySelector('form')?.id, 'calorie-counter');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
new file mode 100644
index 00000000000..e938bc8c2e3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b606f09a14cc1781aea1fb.md
@@ -0,0 +1,146 @@
+---
+id: 63b606f09a14cc1781aea1fb
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Create a `label` element, give it a `for` attribute set to `budget` and the text `Budget`, then create an `input` element with the `id` set to `budget`.
+
+# --hints--
+
+You should create a `label` element in your `form`.
+
+```js
+assert.exists(document.querySelector('form label'));
+```
+
+Your `label` element should have a `for` attribute set to `budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.getAttribute('for'), 'budget');
+```
+
+Your `label` element should have the text `Budget`.
+
+```js
+assert.equal(document.querySelector('form label')?.innerText, 'Budget');
+```
+
+You should create an `input` element within your `form`.
+
+```js
+assert.exists(document.querySelector('form input'));
+```
+
+Your `input` element should come after your `label` element.
+
+```js
+assert.equal(document.querySelector('form input')?.previousElementSibling?.tagName, "LABEL");
+```
+
+Your `input` element should have an `id` set to `budget`.
+
+```js
+assert.equal(document.querySelector('form input')?.id, "budget");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
new file mode 100644
index 00000000000..fcabad47a30
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6075a62883218d282504c.md
@@ -0,0 +1,131 @@
+---
+id: 63b6075a62883218d282504c
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Your `input` element needs some additional attributes. Give it a `type` set to `number` to only allow numeric inputs, a `min` attribute set to `0` to only allow positive numbers, and a `placeholder` set to `Daily calorie budget`.
+
+Finally, mark the `input` element as `required`.
+
+# --hints--
+
+Your `input` element should have a `type` attribute set to `number`.
+
+```js
+assert.equal(document.querySelector('form input').type, 'number');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+assert.equal(document.querySelector('form input').min, '0');
+```
+
+Your `input` element should have a `placeholder` attribute set to `Daily calorie budget`.
+
+```js
+assert.equal(document.querySelector('form input').placeholder, 'Daily calorie budget');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
Calorie Counter
+
+
+
+ Calorie Counter
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b607af6fcdb119aae9b16a.md b/curriculum/challenges/ukrainian/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/ukrainian/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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60821c855d01b1eda3c0b.md b/curriculum/challenges/ukrainian/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/ukrainian/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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6088bb56e2d1cac364043.md b/curriculum/challenges/ukrainian/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/ukrainian/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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b608ebf40c871d960fc004.md b/curriculum/challenges/ukrainian/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/ukrainian/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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60a140bf5a321d50a7315.md b/curriculum/challenges/ukrainian/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/ukrainian/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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60aaaa65f8922bfce6b7e.md b/curriculum/challenges/ukrainian/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/ukrainian/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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60af1a0b9f7238a9dd294.md b/curriculum/challenges/ukrainian/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/ukrainian/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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60c09c5039f25a3b2dda9.md b/curriculum/challenges/ukrainian/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/ukrainian/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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60ca38c897f2721b27959.md b/curriculum/challenges/ukrainian/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/ukrainian/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
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
new file mode 100644
index 00000000000..17934b0039d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
@@ -0,0 +1,170 @@
+---
+id: 63b60cfaca25bb27edd40f62
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Finally, you need to link your JavaScript file to your HTML. Create a `script` element to do so.
+
+# --hints--
+
+You should have a `script` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('script')?.length, 1);
+```
+
+Your `script` element should have the `src` set to `./script.js`.
+
+```js
+assert.match(code, /script\s*?src\s*?=\s*?('|")(\.\/)?script\.js\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+
Calorie Counter
+
+
+
+ Calorie Counter
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
new file mode 100644
index 00000000000..de3870b44ad
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60d3c5048302906962231.md
@@ -0,0 +1,176 @@
+---
+id: 63b60d3c5048302906962231
+title: Step 14
+challengeType: 0
+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`.
+
+# --hints--
+
+You should create a variable called `calorieCounter`.
+
+```js
+assert.isDefined(calorieCounter);
+```
+
+You should use `document.getElementById()` to get the `#calorie-counter` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")calorie-counter\1\s*\)/g);
+```
+
+You should store the `#calorie-counter` element in a variable called `calorieCounter`.
+
+```js
+assert.equal(calorieCounter, document.getElementById('calorie-counter'));
+```
+
+# --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
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
new file mode 100644
index 00000000000..44e1c274573
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b613f367584d2a5d041b7d.md
@@ -0,0 +1,195 @@
+---
+id: 63b613f367584d2a5d041b7d
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Get your `#budget` element and assign it to `budgetNumberInput`, and your `#entry-dropdown` element and assign it to `entryDropdown`.
+
+# --hints--
+
+You should declare a variable called `budgetNumberInput`.
+
+```js
+assert.isDefined(budgetNumberInput);
+```
+
+You should use `document.getElementById()` to get the `#budget` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")budget\1\s*\)/g);
+```
+
+You should store the `#budget` element in a variable called `budgetNumberInput`.
+
+```js
+assert.equal(budgetNumberInput, document.getElementById('budget'));
+```
+
+You should declare a variable called `entryDropdown`.
+
+```js
+assert.isDefined(entryDropdown);
+```
+
+You should use `document.getElementById()` to get the `#entry-dropdown` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")entry-dropdown\1\s*\)/g);
+```
+
+You should store the `#entry-dropdown` element in a variable called `entryDropdown`.
+
+```js
+assert.equal(entryDropdown, document.getElementById('entry-dropdown'));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
new file mode 100644
index 00000000000..6cbbeb5ab4a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
@@ -0,0 +1,215 @@
+---
+id: 63b61490e633a22b4593e62f
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Following the same pattern, assign your `#add-entry` element to `addEntryButton`, your `#clear` element to `clearButton`, and your `#output` element to `output`.
+
+# --hints--
+
+You should declare a variable called `addEntryButton`.
+
+```js
+assert.isDefined(addEntryButton);
+```
+
+You should use `document.getElementById()` to get the `#add-entry` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")add-entry\1\s*\)/g);
+```
+
+You should assign the `#add-entry` element to `addEntryButton`.
+
+```js
+assert.equal(addEntryButton, document.getElementById('add-entry'));
+```
+
+You should declare a variable called `clearButton`.
+
+```js
+assert.isDefined(clearButton);
+```
+
+You should use `document.getElementById()` to get the `#clear` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")clear\1\s*\)/g);
+```
+
+You should assign the `#clear` element to `clearButton`.
+
+```js
+assert.equal(clearButton, document.getElementById('clear'));
+```
+
+You should declare a variable called `output`.
+
+```js
+assert.isDefined(output);
+```
+
+You should use `document.getElementById()` to get the `#output` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|")output\1\s*\)/g);
+```
+
+You should assign the `#output` element to `output`.
+
+```js
+assert.equal(output, document.getElementById("output"));
+```
+
+# --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
+--fcc-editable-region--
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
new file mode 100644
index 00000000000..99c1985862c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b614e6a1f7fe2cef6312dc.md
@@ -0,0 +1,182 @@
+---
+id: 63b614e6a1f7fe2cef6312dc
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Declare an `isError` variable and set it to `false`, but use `let` so you can reassign it later.
+
+# --hints--
+
+You should declare an `isError` variable.
+
+```js
+assert.isDefined(isError);
+```
+
+Your `isError` variable should be set to `false`.
+
+```js
+assert.isFalse(isError);
+```
+
+You should use `let` to declare your `isError` variable.
+
+```js
+assert.match(code, /let\s+isError\s*=\s*false/g);
+```
+
+# --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
+--fcc-editable-region--
+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');
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
new file mode 100644
index 00000000000..436b65b80d6
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b6152e6aff882db819fc1e.md
@@ -0,0 +1,192 @@
+---
+id: 63b6152e6aff882db819fc1e
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Even though you set an `input` element to be a number, JavaScript receives a string value. You need to write a function to clean the string value and ensure you have a number.
+
+Start by declaring a `cleanInputString` function that takes a `str` argument.
+
+# --hints--
+
+You should declare a `cleanInputString` variable.
+
+```js
+assert.isDefined(cleanInputString);
+```
+
+Your `cleanInputString` variable should be a function.
+
+```js
+assert.isFunction(cleanInputString);
+```
+
+Your `cleanInputString` function should take a `str` argument.
+
+```js
+assert.match(cleanInputString?.toString(), /\(str\)/);
+```
+
+`cleanInputString` should be an empty function.
+
+```js
+assert.match(cleanInputString?.toString(), /\{\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;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
new file mode 100644
index 00000000000..b7de4018e24
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61584def8fa2ebcc259e0.md
@@ -0,0 +1,182 @@
+---
+id: 63b61584def8fa2ebcc259e0
+title: Step 19
+challengeType: 0
+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.
+
+Declare a `strArray` variable and assign it that split value.
+
+# --hints--
+
+Your `cleanInputString` function should declare a `strArray` variable.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=/);
+```
+
+Your `strArray` variable should be assigned the value of `str.split('')`.
+
+```js
+assert.match(cleanInputString.toString(), /strArray\s*=\s*str\.split\(\s*('|")\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
new file mode 100644
index 00000000000..a0eaf81fd4e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf43be3f969d24d4ed233c.md
@@ -0,0 +1,181 @@
+---
+id: 63bf43be3f969d24d4ed233c
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Declare a `cleanStrArray` variable and assign it an empty array. You will use this to store your valid number characters.
+
+# --hints--
+
+Your `cleanInputString` should declare a variable called `cleanStrArray`.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*/g);
+```
+
+Your `cleanStrArray` variable should be assigned an empty array.
+
+```js
+assert.match(cleanInputString.toString(), /cleanStrArray\s*=\s*\[\s*\]/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
new file mode 100644
index 00000000000..db275c224c1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf446945d34d25e6db6e4f.md
@@ -0,0 +1,195 @@
+---
+id: 63bf446945d34d25e6db6e4f
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Use a `for` loop to iterate through each character in your `strArray` array.
+
+# --hints--
+
+Your `cleanInputString` function should have a `for` loop.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(/g);
+```
+
+Your `for` loop should initialize a variable called `i` to `0`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;/g);
+```
+
+Your `for` loop should have a condition that checks if `i` is less than the length of `strArray`.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;/g);
+```
+
+Your `for` loop should increment `i` by `1` each time it runs. Use the increment operator for this.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)/g);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
new file mode 100644
index 00000000000..a432c6687d5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf45ce0dc8d4270760c6d0.md
@@ -0,0 +1,200 @@
+---
+id: 63bf45ce0dc8d4270760c6d0
+title: Step 22
+challengeType: 0
+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`.
+
+To check your character, see if the array `["+", "-", " "]` includes the character – you can use the `.includes()` method on the array to do this.
+
+# --hints--
+
+Your `for` loop should have an `if` statement.
+
+```js
+assert.match(cleanInputString.toString(), /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(/);
+```
+
+Your `for` loop should use `!["+", "-", " "].includes()`.
+
+```js
+// the loop protection injects code so we have to look at the raw code directly
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(/);
+```
+
+Your `for` loop should see if `strArray[i]` is found in `["+", "-", " "]`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{/);
+```
+
+Your `for` loop should `push` `strArray[i]` to `cleanStrArray`.
+
+```js
+assert.match(code, /for\s*\(\s*(let|var)\s+i\s*=\s*0\s*;\s*i\s*<\s*strArray\.length\s*;\s*i\s*\+\+\s*\)\s*\{\s*if\s*\(!\[("|')\+\2\s*,\s*("|')-\3\s*,\s*("|')\s\4\s*\]\.includes\(\s*strArray\[i\]\s*\)\)\s*\{\s*cleanStrArray\.push\(\s*strArray\[i\]\s*\)\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
new file mode 100644
index 00000000000..f74ff636c5b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
@@ -0,0 +1,213 @@
+---
+id: 63bf461011fca327d3b60fa8
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+While looping through the string works, creating a new array is inefficient for memory and runtime performance. Instead, you can use Regular Expressions (referred to as "regex") to match specific characters.
+
+Regex in JavaScript is indicated by a pattern wrapped in forward slashes – for example:
+
+```js
+const regex = /hello/;
+```
+
+Remove your existing code within the `cleanInputString` function. Declare a `regex` variable and assign it the value from the example above.
+
+# --hints--
+
+You should remove the `cleanStrArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /cleanStrArray/);
+```
+
+You should remove the `strArray` variable.
+
+```js
+assert.notMatch(cleanInputString.toString(), /strArray/);
+```
+
+You should not have a `for` loop.
+
+```js
+assert.notMatch(cleanInputString.toString(), /for/);
+```
+
+You should declare a `regex` variable.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to the regular expression `/hello/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/hello\//);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const strArray = str.split('');
+ const cleanStrArray = [];
+
+ for (let i = 0; i < strArray.length; i++) {
+ if (!["+", "-", " "].includes(strArray[i])) {
+ cleanStrArray.push(strArray[i])
+ }
+ }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
new file mode 100644
index 00000000000..0f781eb61cf
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
@@ -0,0 +1,176 @@
+---
+id: 63bf47fd40599f29827f484d
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+The pattern you currently have will match the exact text `hello`, which is not what you want to match. You want to look for `+`, `-`, or spaces. Replace the pattern in your `regex` variable with `\+-` to look for plus and minus characters.
+
+Note that you need to use the `\` to
escape the `+`, because a `+` has a special meaning in regular expressions.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /hello/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
new file mode 100644
index 00000000000..25d6d2447fb
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf492b6dfb292a79f0e675.md
@@ -0,0 +1,174 @@
+---
+id: 63bf492b6dfb292a79f0e675
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+In regex, shorthand character classes allow you to match specific characters without having to write those characters in your pattern. Shorthand character classes are preceded with a backslash (`\`). The character class `\s` will match any whitespace character. Add this to your regex pattern.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `/\+-\s/`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\\\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
new file mode 100644
index 00000000000..3b18f0aac60
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4bfe9de3852be51c8f86.md
@@ -0,0 +1,188 @@
+---
+id: 63bf4bfe9de3852be51c8f86
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+Your current pattern won't work just yet. `/+-\s/` looks for `+`, `-`, and a space *in order*. This would match `+- hello` but would not match `+hello`.
+
+To tell the pattern to match each of these characters individually, you need to turn them into a character class. This is done by wrapping the characters you want to match in brackets. For example, this pattern will match the characters `h`, `e`, `l`, or `o`:
+
+```js
+const regex = /[helo]/;
+```
+
+Turn your `+-\s` pattern into a character class. Note that you no longer need to escape the `+` character, because you are using a character class.
+
+# --hints--
+
+Your `regex` variable should be set to the regular expression `[+-\s]`.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\\?\+-\\s\]\//)
+```
+
+You should not escape the `+` character in your regular expression.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /\+-\s/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
new file mode 100644
index 00000000000..30baf30ed58
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf4d351e06432ce9bf3627.md
@@ -0,0 +1,180 @@
+---
+id: 63bf4d351e06432ce9bf3627
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+Regex can also take specific flags to alter the pattern matching behavior. Flags are added after the closing `/`. The `g` flag, which stands for "global", will tell the pattern to continue looking after it has found a match. Here is an example:
+
+```js
+const helloRegex = /hello/g;
+```
+
+Add the `g` flag to your regex pattern.
+
+# --hints--
+
+You should add the `g` flag to your `regex` value.
+
+```js
+assert.match(cleanInputString.toString(), /regex\s*=\s*\/\[\+-\\s\]\/g/);
+```
+
+# --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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
new file mode 100644
index 00000000000..4b35b49f7b9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf511b85b6082e54dc1573.md
@@ -0,0 +1,199 @@
+---
+id: 63bf511b85b6082e54dc1573
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Strings have a `.replace()` method which allows you to replace characters in the string with another string. `.replace` takes two arguments. The first is the character sequence to replace – this can either be a string or a regex pattern. The second is the string to replace that sequence with. For example, this would replace all instances of `l` with `1`:
+
+```js
+"hello".replace(/l/g, "1");
+```
+
+Use your `regex` to replace all instances of `+`, `-`, and a space in `str` with an empty string. Return this value.
+
+# --hints--
+
+Your `cleanInputString` should call the `replace` method of `str`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(/);
+```
+
+You should pass `regex` as the first argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*/);
+```
+
+You should pass `""` as the second argument to `replace`.
+
+```js
+assert.match(cleanInputString.toString(), /str\.replace\(\s*regex\s*,\s*("|')\1\s*\)/);
+```
+
+Your `cleanInputString` function should directly return the result of your `replace` method.
+
+```js
+assert.match(cleanInputString.toString(), /return\s*str\.replace\(\s*regex\s*,\s*("|')\1\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;
+
+--fcc-editable-region--
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
new file mode 100644
index 00000000000..b6eef00a30b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5230bccd1c2f5c13e1ce.md
@@ -0,0 +1,191 @@
+---
+id: 63bf5230bccd1c2f5c13e1ce
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+In HTML, number inputs allow for exponential notation (such as `1e10`). You need to filter those out.
+
+Start by creating a function called `isInvalidInput` – it should take a single `str` parameter.
+
+# --hints--
+
+You should declare an `isInvalidInput` variable.
+
+```js
+assert.isDefined(isInvalidInput)
+```
+
+`isInvalidInput` should be a function.
+
+```js
+assert.isFunction(isInvalidInput)
+```
+
+`isInvalidInput` should take a single `str` parameter.
+
+```js
+assert.match(isInvalidInput?.toString(), /\(\s*str\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, '');
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
new file mode 100644
index 00000000000..778a809571e
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf598a4c807930a13a1a27.md
@@ -0,0 +1,185 @@
+---
+id: 63bf598a4c807930a13a1a27
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Declare a `regex` variable, and assign it a regex that matches the character `e`.
+
+# --hints--
+
+Your `isInvalidInput` function should have a `regex` variable.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=/);
+```
+
+Your `regex` variable should be set to `/e/`.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
new file mode 100644
index 00000000000..2bf1aa0f9a3
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a518d54f63181ab639a.md
@@ -0,0 +1,179 @@
+---
+id: 63bf5a518d54f63181ab639a
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+The `e` in a number input can also be an uppercase `E`. Regex has a flag for this, however – the `i` flag, which stands for "insensitive". This flag makes your pattern case-insensitive. Add the `i` flag to your regex pattern.
+
+# --hints--
+
+Your `regex` value should have the `i` flag.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/e\/i/);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
new file mode 100644
index 00000000000..19873a84492
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5a92fd148d3264d5322b.md
@@ -0,0 +1,187 @@
+---
+id: 63bf5a92fd148d3264d5322b
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Number inputs only allow the `e` to occur between two digits. To match any number, you can use the character class `[0-9]`. This will match any digit between `0` and `9`.
+
+Add this character class before and after `e` in your pattern.
+
+# --hints--
+
+You should add the `[0-9]` character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e/);
+```
+
+You should add the `[0-9]` character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]e\[0-9\]\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /e/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
new file mode 100644
index 00000000000..75477ddd763
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5adfe2981b332eb007b6.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5adfe2981b332eb007b6
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+The `+` modifier in a regex allows you to match a pattern that occurs one or more times. To match your digit pattern one or more times, add a plus after each of the digit character classes. For example: `[0-9]+`.
+
+# --hints--
+
+You should add the `+` modifier to the character class before `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e/);
+```
+
+You should add the `+` modifier to the character class after `e` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\[0-9\]\+e\[0-9\]\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]e[0-9]/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
new file mode 100644
index 00000000000..95686b3c3a0
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5bcfebff0734593fad19.md
@@ -0,0 +1,185 @@
+---
+id: 63bf5bcfebff0734593fad19
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+There is a shorthand character class to match any digit: `\d`. Replace your `[0-9]` character classes with this shorthand.
+
+# --hints--
+
+You should replace the `[0-9]` character class before `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e/);
+```
+
+You should replace the `[0-9]` character class after `e` with `\d` in your regular expression.
+
+```js
+assert.match(isInvalidInput.toString(), /regex\s*=\s*\/\\d\+e\\d\+\//);
+```
+
+# --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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /[0-9]+e[0-9]+/i;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
new file mode 100644
index 00000000000..f6f61282ce9
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5c438f523a359769106c.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5c438f523a359769106c
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Strings have a `.match()` method, which takes a regex argument. `.match()` will return an array of match results – containing either the first match, or all matches if the global flag is used.
+
+Return the result of calling the `.match()` method on `str` and passing your `regex` variable as the argument. You'll use this match result later on.
+
+# --hints--
+
+Your `isInvalidInput` function should call the `.match()` method on `str`.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(/);
+```
+
+You should pass `regex` as the argument to the `.match()` method.
+
+```js
+assert.match(isInvalidInput.toString(), /str\.match\(\s*regex\s*\)/);
+```
+
+Your `isInvalidInput` function should directly return the result of the `.match()` call.
+
+```js
+assert.match(isInvalidInput.toString(), /return\s+str\.match\(\s*regex\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, '');
+}
+
+--fcc-editable-region--
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
new file mode 100644
index 00000000000..228f3503303
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf5cf03b50bf36cfbe94ea.md
@@ -0,0 +1,194 @@
+---
+id: 63bf5cf03b50bf36cfbe94ea
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+Your next step is to allow users to add entries to the calorie counter. Declare an empty function `addEntry`. This function should not take any parameters.
+
+# --hints--
+
+You should declare an `addEntry` variable.
+
+```js
+assert.isDefined(addEntry);
+```
+
+Your `addEntry` variable should be a function.
+
+```js
+assert.isFunction(addEntry);
+```
+
+Your `addEntry` function should not take any parameters.
+
+```js
+assert.match(addEntry?.toString(), /\(\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--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
new file mode 100644
index 00000000000..1bc417c8bbb
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1dfbd56c71e278800010c.md
@@ -0,0 +1,198 @@
+---
+id: 63c1dfbd56c71e278800010c
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+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.
+
+# --hints--
+
+Your `addEntry` function should have a `targetId` variable.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=/);
+```
+
+Your `targetId` variable should start with the string `#`.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1/);
+```
+
+You should use concatenation to add `entryDropdown.value` after your `#` string.
+
+```js
+assert.match(addEntry.toString(), /targetId\s*=\s*('|")#\1\s*\+\s*entryDropdown\.value/);
+```
+
+# --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() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
new file mode 100644
index 00000000000..413b5f76d84
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e0af28078f2dfad9eb3e.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e0af28078f2dfad9eb3e
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Now you need to target the `.input-container` element within the element that has your `targetId`. Declare a new `targetInputContainer` variable, and assign it the value of `document.querySelector()`. Use concatenation to separate `targetId` and `'.input-container'` with a space, and pass that string to `querySelector()`.
+
+# --hints--
+
+Your `addEntry` function should have a `targetInputContainer` variable.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=/);
+```
+
+Your `targetInputContainer` variable should be set to `document.querySelector()`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(/);
+```
+
+You should pass `targetId` to your `querySelector()` method.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*/);
+```
+
+You should concatenate `' .input-container'` to `targetId`. Remember to include the space at the beginning of `.input-container`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\s*=\s*document\.querySelector\(\s*targetId\s*\s*\+\s*('|")\s\.input-container\1\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 targetId = '#' + entryDropdown.value;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
new file mode 100644
index 00000000000..06e5ac50cec
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e1965a898d302e0af4e3.md
@@ -0,0 +1,203 @@
+---
+id: 63c1e1965a898d302e0af4e3
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+JavaScript has a feature called
template literals , which allow you to interpolate variables directly within a string. Template literals are denoted with backticks ` `` `, as opposed to single or double quotes. Variables can be passed in to a template literal by surrounding the variable with `${}` – the value of the variable will be inserted into the string.
+
+For example:
+
+```js
+const name = "Naomi";
+const templateLiteral = `Hello, my name is ${name}~!`;
+console.log(templateLiteral);
+```
+
+The console will show the string "Hello, my name is Naomi~!".
+
+Replace your concatenated string in the `querySelector` with a template literal – be sure to keep the space between your `targetId` variable and `.input-container`.
+
+# --hints--
+
+You should use a template literal in your `querySelector` method.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`.*`\)/);
+```
+
+Your template literal should have the value `{targetId} .input-container`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`\$\{targetId\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(targetId + ' .input-container');
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
new file mode 100644
index 00000000000..6aeab26c100
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e5b4b3c8a031def3bd65.md
@@ -0,0 +1,197 @@
+---
+id: 63c1e5b4b3c8a031def3bd65
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Thanks to template literals, you actually don't need the `targetId` variable at all. Remove that variable, and update your template literal to replace `targetId` with `entryDropdown.value` – remember to add `#` before that, in the string.
+
+# --hints--
+
+You should remove the `targetId` variable.
+
+```js
+assert.notMatch(addEntry.toString(), /targetId\s*=/);
+```
+
+You should replace the `targetId` reference in your template literal with `entryDropdown.value`.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#?\$\{entryDropdown\.value\}\s\.input-container`\s*\)/);
+```
+
+You should add `#` at the beginning of your template literal.
+
+```js
+assert.match(code, /const\s+targetInputContainer\s*=\s*document\.querySelector\(`#\$\{entryDropdown\.value\}\s\.input-container`\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 targetId = '#' + entryDropdown.value;
+ const targetInputContainer = document.querySelector(`${targetId} .input-container`);
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c1e704ee12703347625900.md b/curriculum/challenges/ukrainian/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/ukrainian/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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2164c0df38a382062c4af.md b/curriculum/challenges/ukrainian/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/ukrainian/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
+
+
+
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll();
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
new file mode 100644
index 00000000000..a7c1e1d3e7b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c216da562fbb3957b9cb2c.md
@@ -0,0 +1,192 @@
+---
+id: 63c216da562fbb3957b9cb2c
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Now you need to build your dynamic HTML string to add to the webpage. Declare a new `HTMLString` variable, and assign it an empty template literal string.
+
+# --hints--
+
+Your `addEntry` function should have an `HTMLString` variable.
+
+```js
+assert.match(addEntry.toString(), /HTMLString\s*=/)
+```
+
+Your `HTMLString` should be an empty template literal.
+
+```js
+assert.match(code, /HTMLString\s*=\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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
new file mode 100644
index 00000000000..e8ced7f3436
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c2171c1e5b6e3aa51768d0.md
@@ -0,0 +1,198 @@
+---
+id: 63c2171c1e5b6e3aa51768d0
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Start your `HTMLString` with a new line, then create a `label` element. Give that element the text `Entry # Name`, using your template literal syntax to replace `#` with the value of `entryNumber`.
+
+# --hints--
+
+Your `HTMLString` variable should start with a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n/);
+```
+
+You should add a `label` element on the new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*
.*<\/label>/);
+```
+
+Your `label` element should have the text `Entry ${entryNumber} Name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = ``;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
new file mode 100644
index 00000000000..f78a3d0252c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21774193de43bbc6a769f.md
@@ -0,0 +1,193 @@
+---
+id: 63c21774193de43bbc6a769f
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Give your `label` element a `for` attribute with the value `X-#-name`, where `X` is the `value` of the `entryDropdown` element and `#` is the value of `entryNumber`. Remember that HTML attributes should be wrapped in double quotes.
+
+# --hints--
+
+Your `label` element should have a `for` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*/)
+```
+
+Your `label` element should have the same text as before.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
new file mode 100644
index 00000000000..42ee9b19109
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c217ccd939053ce4fa16d6.md
@@ -0,0 +1,217 @@
+---
+id: 63c217ccd939053ce4fa16d6
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+After your `label` element, and on a new line in your template string, create an `input` element. Give it a `type` attribute set to `text`, a `placeholder` attribute set to `Name`, and an `id` attribute that matches the `for` attribute of your `label` element.
+
+# --hints--
+
+You should not modify your `label` element.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>/);
+```
+
+You should add an `input` element on a new line.
+
+```js
+assert.match(code, /HTMLString\s*=\s*`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*/)[0];
+assert.include(inputAttributes, 'placeholder="Name"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(//)[0];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-name"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
new file mode 100644
index 00000000000..cfeec0927c4
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c21839f56eaf3ef4e027c4.md
@@ -0,0 +1,228 @@
+---
+id: 63c21839f56eaf3ef4e027c4
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Create another `label` element (on a new line) at the end of your `HTMLString`. This `label` should have the text `Entry # Calories`, using your template literal syntax to replace `#` with the value of `entryNumber`, and the `for` attribute set to `X-#-calories`, where `X` is the `value` of `entryDropdown` and `#` is the value of `entryNumber`.
+
+# --hints--
+
+You should have two `label` elements in your `HTMLString`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.equal(HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, //)
+```
+
+Your new `label` element should have the text `Entry ${entryNumber} Calories`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const label = HTMLstring.match(/.*<\/label>/g)[1];
+assert.match(label, /Entry\s\$\{entryNumber\}\sCalories<\/label>/);
+```
+
+You should not modify your existing elements.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+assert.match(HTMLstring, /`\n\s*Entry\s\$\{entryNumber\}\sName<\/label>\n\s*Entry\s\$\{entryNumber\}\sCalories<\/label>/)
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ ]*>/g)[1];
+assert.include(inputAttributes, 'placeholder="Calories"');
+```
+
+Your `input` element should have an `id` attribute set to `${entryDropdown.value}-${entryNumber}-name`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'id="${entryDropdown.value}-${entryNumber}-calories"');
+```
+
+Your `input` element should have a `min` attribute set to `0`.
+
+```js
+const HTMLstring = code.split("HTMLString =")[1];
+const inputAttributes = HTMLstring.match(/]*>/g)[1];
+assert.include(inputAttributes, 'min="0"');
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories `;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
new file mode 100644
index 00000000000..36835a69413
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c218c028c56a411b2a379a.md
@@ -0,0 +1,208 @@
+---
+id: 63c218c028c56a411b2a379a
+title: Step 49
+challengeType: 0
+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.
+
+# --hints--
+
+Your `addEntry` function should access the `innerHTML` property of `targetInputContainer`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML/);
+```
+
+You should use the `+=` operator on `targetInputContainer.innerHTML`.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=/);
+```
+
+You should add your `HTMLString` to the `innerHTML` of the `targetInputContainer` element.
+
+```js
+assert.match(addEntry.toString(), /targetInputContainer\.innerHTML\s*\+=\s*HTMLString/);
+```
+
+# --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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ function reference ) directly.
+
+# --hints--
+
+You should call the `.addEventListener()` method of the `addEntryButton`.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(/);
+```
+
+You should pass `click` as the first argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*/);
+```
+
+You should pass `addEntry` as the second argument to the `.addEventListener()` method.
+
+```js
+assert.match(code, /addEntryButton\.addEventListener\(\s*('|")click\1\s*,\s*addEntry\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ truthy or falsy . A value is truthy if it evaluates to `true` when converted to a Boolean. A value is falsy if it evaluates to `false` when converted to a Boolean. `null` is an example of a falsy value.
+
+You need to check if `invalidInputMatch` is truthy – you can do this by passing the variable directly to your `if` condition (without a comparison operator). Here's an example of checking the truthiness of `helloWorld`.
+
+```js
+if (helloWorld) {
+
+}
+```
+
+Add an `if` statement that checks if `invalidInputMatch` is truthy.
+
+# --hints--
+
+You should add an `if` statement to your `getCaloriesFromInputs` function.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(/);
+```
+
+You should check the truthiness of `invalidInputMatch` in your `if` condition.
+
+```js
+assert.match(getCaloriesFromInputs.toString(), /if\s*\(\s*invalidInputMatch\s*\)/);
+```
+
+Your `if` statement should be inside your `for` loop.
+
+```js
+assert.isBelow(getCaloriesFromInputs.toString().indexOf("for"), getCaloriesFromInputs.toString().indexOf("if"));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ 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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ /);
+```
+
+Your `span` should not have any text.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{remainingCalories\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ \$\{Math\.abs\(remainingCalories\)\} Calorie \$\{surplusOrDeficit\}<\/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
+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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${remainingCalories} Calorie ${surplusOrDeficit}
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
new file mode 100644
index 00000000000..d341d5e62bf
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e7d5b21eee2776ecc226.md
@@ -0,0 +1,262 @@
+---
+id: 63c9e7d5b21eee2776ecc226
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+After your `span` element, add an `hr` element to create a horizontal line.
+
+To keep your code clean and readable, you should add this on a new line in the template literal.
+
+# --hints--
+
+You should add an `hr` element to your `output.innerHTML` string.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `hr` element should come after your `span` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
new file mode 100644
index 00000000000..ba1da012290
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md
@@ -0,0 +1,270 @@
+---
+id: 63c9e84c9fe8ca28c4101189
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Now create a `p` element with the text `budgetCalories Calories Budgeted`, using interpolation to replace `budgetCalories` with the appropriate variable.
+
+This should come after your `hr` element.
+
+# --hints--
+
+You should create a `p` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, //);
+```
+
+Your `p` element should come after your `hr` element.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.isAbove(htmlString.indexOf('\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ /g).length, 2);
+```
+
+Your second `p` element should be on a new line.
+
+```js
+const htmlString = code.split(/output\s*\.\s*innerHTML\s*=\s*/)[1].split(/`/)[1];
+assert.match(htmlString, /\n\s*
\$\{budgetCalories\}\s*Calories\s*Budgeted<\/p>\n\s*
\$\{consumedCalories\}\s*Calories\s*Consumed<\/p>/));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+
+ `;
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
new file mode 100644
index 00000000000..f57827b6348
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md
@@ -0,0 +1,264 @@
+---
+id: 63c9e94e9df7d72aed1c24bd
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Finally, you need to make the `#output` element visible so the user can see your text. Your `output` variable is an Element, which has a `classList` property. This property has a `.remove()` method, which accepts a string representing the class to remove from the element.
+
+Use the `.remove()` method of the `output` variable's `classList` property to remove the `hide` class. Don't forget to place the word `hide` inside quotes.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList/);
+```
+
+You should call the `.remove()` method of the `classList` property.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(/);
+```
+
+You should pass `hide` as the argument to the `.remove()` method.
+
+```js
+assert.match(calculateCalories.toString(), /output\.classList\.remove\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+
+}
+--fcc-editable-region--
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
new file mode 100644
index 00000000000..18e5f04d27a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea23dbadbf2c2764e3f5
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+If you click on your `Calculate Remaining Calories` button, you'll see that nothing happens. You still need to mount the event listener.
+
+Add an event listener to your `calorieCounter` element. The event type should be `submit`, and the callback function should be `calculateCalories`.
+
+# --hints--
+
+You should use the `.addEventListener()` method of your `calorieCounter` element.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(/);
+```
+
+You should pass `submit` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*/);
+```
+
+You should pass `calculateCalories` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /calorieCounter\.addEventListener\(\s*('|")submit\1\s*,\s*calculateCalories\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+addEntryButton.addEventListener("click", addEntry);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
new file mode 100644
index 00000000000..6c09fd6f149
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md
@@ -0,0 +1,265 @@
+---
+id: 63c9ea9b16430f2d54522464
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+Your final feature to add is the ability for a user to clear the form. Start by declaring an empty function called `clearForm` – it should not take any arguments.
+
+# --hints--
+
+You should declare a `clearForm` variable.
+
+```js
+assert.isDefined(clearForm);
+```
+
+Your `clearForm` variable should be a function.
+
+```js
+assert.isFunction(clearForm);
+```
+
+Your `clearForm` function should not take any arguments.
+
+```js
+assert.match(clearForm?.toString(), /\(\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
new file mode 100644
index 00000000000..7810095dcce
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md
@@ -0,0 +1,267 @@
+---
+id: 63c9eb09bcfaa72e3da820a1
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+You need to get all of the input containers. Declare an `inputContainers` variable, and assign it to the value of querying the document for all elements with the class `input-container`.
+
+# --hints--
+
+You should declare an `inputContainers` variable in your `clearForm` function.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=/);
+```
+
+You should use the `querySelectorAll` method to get all of the elements with the class `input-container`.
+
+```js
+assert.match(clearForm.toString(), /document\.querySelectorAll\(\s*('|")\.input-container\1\s*\)/);
+```
+
+You should assign the value of the `querySelectorAll` method to the `inputContainers` variable.
+
+```js
+assert.match(clearForm.toString(), /inputContainers\s*=\s*document\.querySelectorAll\(\s*('|")\.input-container\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
new file mode 100644
index 00000000000..73d20bba696
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md
@@ -0,0 +1,263 @@
+---
+id: 63c9eb4a5d68f12f32d9b440
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+Remember that `document.querySelectorAll` returns a `NodeList`, which is array-like but is not an array. However, the `Array` object has a `.from()` method that accepts an array-like and returns an array. This is helpful when you want access to more robust array methods, which you will learn about in a future project.
+
+Wrap your `inputContainers` query selector in `Array.from()`. Do this on the same line as your declaration.
+
+# --hints--
+
+You should wrap your `querySelectorAll` in `Array.from()`.
+
+```js
+assert.match(clearForm, /Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\s*\)/);
+```
+
+You should assign the result of `Array.from()` to your `inputContainers` variable.
+
+```js
+assert.match(clearForm, /inputContainers\s*=\s*Array\.from\(\s*document\.querySelectorAll\(\s*('|")\.input-container*\1\s*\)\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = document.querySelectorAll('.input-container');
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
new file mode 100644
index 00000000000..f6655dc9175
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md
@@ -0,0 +1,276 @@
+---
+id: 63c9ebb7b12bca3025b0a935
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+It is time for another loop. Use a `for` loop to iterate through the `inputContainers` array.
+
+Inside the loop, set the `innerHTML` property of the element at the current index to an empty string. This will clear all of the contents of that input container.
+
+# --hints--
+
+Your `clearForm` function should have a `for` loop.
+
+```js
+// loop protect injects stuff, so let's look at the raw code again
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(/);
+```
+
+Your `for` loop should iterate through the `inputContainers` array. Remember to use `i` as your iterator.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+assert.match(clearForm, /for\s*\(\s*let\s+i\s*=\s*0\s*;\s*i\s*<\s*inputContainers\.length\s*;\s*i\s*\+\+\s*\)/);
+```
+
+Your `for` loop should set the `innerHTML` property of `inputContainers[i]` to an empty string.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const forLoop = clearForm.split("for")[1];
+assert.match(forLoop, /inputContainers\[\s*i\s*\]\s*\.innerHTML\s*=\s*(`|'|")\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
new file mode 100644
index 00000000000..5ef4abce954
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md
@@ -0,0 +1,275 @@
+---
+id: 63c9ec044acedf312c4974ff
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+After your loop completes, you need to clear the `budgetNumberInput`. Set the `value` property of `budgetNumberInput` to an empty string.
+
+# --hints--
+
+Your `clearForm` function should access the `value` property of the `budgetNumberInput` element.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value/);
+```
+
+Your `clearForm` function should set the `value` property of the `budgetNumberInput` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /budgetNumberInput\.value\s*=\s*('|"|`)\1/);
+```
+
+You should modify the `budgetNumberInput` after your `for` loop.
+
+```js
+const clearForm = code.split("function clearForm()")[1];
+const afterLoop = clearForm.split("}")[1];
+assert.match(afterLoop, /budgetNumberInput\.value/);
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
new file mode 100644
index 00000000000..3dab9bed7e5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md
@@ -0,0 +1,276 @@
+---
+id: 63c9f24afbc9cf324dcaa9a4
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+You also need to clear the `output` element's text. You can do this by setting the `innerText` property to an empty string.
+
+The difference between `innerText` and `innerHTML` is that `innerText` will not render HTML elements, but will display the tags and content as raw text.
+
+# --hints--
+
+Your `clearForm` function should access the `innerText` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText/);
+```
+
+Your `clearForm` function should set the `innerText` property of the `output` element to an empty string.
+
+```js
+assert.match(clearForm.toString(), /output\.innerText\s*=\s*('|"|`)\1/);
+```
+
+You should modify `output` after modifying `budgetNumberInput`.
+
+```js
+assert.isAbove(clearForm.toString().indexOf('output'), clearForm.toString().indexOf('budgetNumberInput'));
+```
+
+# --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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
new file mode 100644
index 00000000000..b2e9d536a15
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md
@@ -0,0 +1,277 @@
+---
+id: 63c9f28bda3e3f336e21b6b4
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+To finish off this function, you need to restore the `hide` class to the `output` element. The `classList` property has an `.add()` method which is the opposite of the `.remove()` method. It accepts a string representing the class to add to the element.
+
+Add the `hide` class to your `output`.
+
+# --hints--
+
+You should access the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList/);
+```
+
+You should call the `.add()` method on the `classList` property of the `output` element.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add/);
+```
+
+You should pass `hide` as the argument to the `.add()` method.
+
+```js
+assert.match(clearForm.toString(), /output\.classList\.add\(\s*('|")hide\1\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+--fcc-editable-region--
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+
+}
+--fcc-editable-region--
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
new file mode 100644
index 00000000000..d29b3f2ac72
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md
@@ -0,0 +1,520 @@
+---
+id: 63c9f2bff625af342023512c
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+To complete this project, add an event listener to the `clearButton` button. When the button is clicked, it should call the `clearForm` function.
+
+Congratulations! Your project is complete.
+
+# --hints--
+
+You should add an event listener to the `clearButton` button.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(/);
+```
+
+You should pass `click` as the first argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*/);
+```
+
+You should pass `clearForm` as the second argument to `.addEventListener()`.
+
+```js
+assert.match(code, /clearButton\s*\.addEventListener\s*\(\s*('|"|`)click\1\s*,\s*clearForm\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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener("click", addEntry);
+calorieCounter.addEventListener("submit", calculateCalories);
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```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);
+}
+
+function addEntry() {
+ const targetInputContainer = document.querySelector(`#${entryDropdown.value} .input-container`);
+ const entryNumber = targetInputContainer.querySelectorAll('input[type="text"]').length + 1;
+ const HTMLString = `
+ Entry ${entryNumber} Name
+ Entry ${entryNumber} Calories
+ ${Math.abs(remainingCalories)} Calorie ${surplusOrDeficit}
+ ${budgetCalories} Calories Budgeted
+ ${consumedCalories} Calories Consumed
+ ${exerciseCalories} Calories Burned
+ `;
+
+ output.classList.remove('hide');
+}
+
+function getCaloriesFromInputs(list) {
+ let calories = 0;
+
+ for (let i = 0; i < list.length; i++) {
+ const currVal = cleanInputString(list[i].value);
+ const invalidInputMatch = isInvalidInput(currVal);
+
+ if (invalidInputMatch) {
+ alert(`Invalid Input: ${invalidInputMatch[0]}`);
+ isError = true;
+ return null;
+ }
+ calories += Number(currVal);
+ }
+ return calories;
+}
+
+function clearForm() {
+ const inputContainers = Array.from(document.querySelectorAll('.input-container'));
+
+ for (let i = 0; i < inputContainers.length; i++) {
+ inputContainers[i].innerHTML = '';
+ }
+
+ budgetNumberInput.value = '';
+ output.innerText = '';
+ output.classList.add('hide');
+}
+
+addEntryButton.addEventListener('click', addEntry);
+calorieCounter.addEventListener('submit', calculateCalories);
+clearButton.addEventListener('click', clearForm);
+```
diff --git a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-data-graph-explorer-project/build-a-data-graph-explorer.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-financial-calculator-project/build-a-financial-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-graphing-calculator-project/build-a-graphing-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-a-multi-function-calculator-project/build-a-multi-function-calculator.md
old mode 100755
new mode 100644
diff --git a/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md b/curriculum/challenges/ukrainian/17-college-algebra-with-python/build-three-math-games-project/build-three-math-games.md
old mode 100755
new mode 100644