/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Calorie Counter
+
+
+
+ Calorie Counter
+
+
+
+
+
+```
+
+```css
+body {
+ font-family: "Lato", Arial;
+}
+
+h1 {
+ text-align: center;
+}
+
+.container {
+ width: 90%;
+ max-width: 680px;
+}
+
+h1,
+.container,
+.output {
+ margin: 20px auto;
+}
+
+label,
+legend {
+ font-weight: bold;
+}
+
+.input-container {
+ display: flex;
+ flex-direction: column;
+}
+
+button:hover {
+ cursor: pointer;
+}
+
+fieldset,
+label,
+button,
+input,
+select {
+ margin-bottom: 10px;
+}
+
+.output {
+ border: 2px solid black;
+ padding: 10px;
+ text-align: center;
+}
+
+.hide {
+ display: none;
+}
+
+.output span {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+.surplus {
+ color: #006627;
+}
+
+.deficit {
+ color: #B30000;
+}
+```
+
+```js
+const calorieCounter = document.getElementById('calorie-counter');
+const budgetNumberInput = document.getElementById('budget');
+const entryDropdown = document.getElementById('entry-dropdown');
+const addEntryButton = document.getElementById('add-entry');
+const clearButton = document.getElementById('clear');
+const output = document.getElementById('output');
+let isError = false;
+
+function cleanInputString(str) {
+ const regex = /[+-\s]/g;
+ return str.replace(regex, '');
+}
+
+function isInvalidInput(str) {
+ const regex = /\d+e\d+/i;
+ return str.match(regex);
+}
+
+function addEntry() {
+ const 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/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e84c9fe8ca28c4101189.md b/curriculum/challenges/swahili/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/swahili/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/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e94e9df7d72aed1c24bd.md b/curriculum/challenges/swahili/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/swahili/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/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea23dbadbf2c2764e3f5.md b/curriculum/challenges/swahili/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/swahili/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/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ea9b16430f2d54522464.md b/curriculum/challenges/swahili/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/swahili/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/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb09bcfaa72e3da820a1.md b/curriculum/challenges/swahili/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/swahili/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/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9eb4a5d68f12f32d9b440.md b/curriculum/challenges/swahili/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/swahili/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/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ebb7b12bca3025b0a935.md b/curriculum/challenges/swahili/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/swahili/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/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9ec044acedf312c4974ff.md b/curriculum/challenges/swahili/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/swahili/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/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f24afbc9cf324dcaa9a4.md b/curriculum/challenges/swahili/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/swahili/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/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f28bda3e3f336e21b6b4.md b/curriculum/challenges/swahili/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/swahili/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/swahili/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9f2bff625af342023512c.md b/curriculum/challenges/swahili/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/swahili/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/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md
new file mode 100644
index 00000000000..46b4f675589
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63c620161fc2b49ac340ffc4.md
@@ -0,0 +1,278 @@
+---
+id: 63c620161fc2b49ac340ffc4
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will build a set of football team cards and learn about nested objects, object destructuring, default parameters, event listeners, and switch statements. All of the HTML and CSS for this project has been provided for you.
+
+Start by accessing the `id` called `team` from the HTML document and storing it in a `const` variable called `teamName`.
+
+Remember, you can use the `getElementById` method for this.
+
+# --hints--
+
+You should use the `document.getElementById()` method to get the `#team` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)team\1\s*\)/);
+```
+
+You should use `const` to declare the variable called `teamName` and assign it the `#team` element.
+
+```js
+assert.match(code, /const\s+teamName\s*=\s*document\.getElementById\(\s*('|"|`)team\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md
new file mode 100644
index 00000000000..513b3c3ed99
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7e324c1831f8d936b3ae.md
@@ -0,0 +1,287 @@
+---
+id: 63cf7e324c1831f8d936b3ae
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Next, access the `id` called `sport` from the HTML document and store it in a `const` variable called `typeOfSport`. Below that variable, assign the `id` of `year` to a `const` variable called `worldCupYear`.
+
+# --hints--
+
+You should use the `document.getElementById()` method to get the `#sport` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)sport\1\s*\)/);
+```
+
+You should use `const` to declare the variable called `typeOfSport` and assign it the `#sport` element.
+
+```js
+assert.match(code, /const\s+typeOfSport\s*=\s*document\.getElementById\(\s*('|"|`)sport\1\s*\)/);
+```
+
+You should use the `document.getElementById()` method to get the `#year` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)year\1\s*\)/);
+```
+
+You should use `const` to declare the variable called `worldCupYear` and assign it the `#year` element.
+
+```js
+assert.match(code, /const\s+worldCupYear\s*=\s*document\.getElementById\(\s*('|"|`)year\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md
new file mode 100644
index 00000000000..080e5e186a1
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf7f97e7f99af9348f5068.md
@@ -0,0 +1,289 @@
+---
+id: 63cf7f97e7f99af9348f5068
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Next, access the `id` called `head-coach` from the HTML document and store it in a `const` variable called `headCoach`. Below that variable, assign the `id` of `player-cards` to a `const` variable called `playerCards`.
+
+# --hints--
+
+You should use the `document.getElementById()` method to get the `#head-coach` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/);
+```
+
+You should use `const` to declare the variable called `headCoach` and assign it the `#head-coach` element.
+
+```js
+assert.match(code, /const\s+headCoach\s*=\s*document\.getElementById\(\s*('|"|`)head-coach\1\s*\)/);
+```
+
+You should use the `document.getElementById()` method to get the `#player-cards` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/);
+```
+
+You should use `const` to declare the variable called `playerCards` and assign it the `#player-cards` element.
+
+```js
+assert.match(code, /const\s+playerCards\s*=\s*document\.getElementById\(\s*('|"|`)player-cards\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md
new file mode 100644
index 00000000000..6afeaf034bf
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf812bb8ecd4f9cf749b8f.md
@@ -0,0 +1,279 @@
+---
+id: 63cf812bb8ecd4f9cf749b8f
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Create one more `const` variable called `playersDropdownList` and assign it the `id` of `players` using the `getElementById` method.
+
+# --hints--
+
+You should use the `document.getElementById()` method to get the `#players` element.
+
+```js
+assert.match(code, /document\.getElementById\(\s*('|"|`)players\1\s*\)/);
+```
+
+You should use `const` to declare the variable called `playersDropdownList` and assign it the `#players` element.
+
+```js
+assert.match(code, /const\s+playersDropdownList\s*=\s*document\.getElementById\(\s*('|"|`)players\1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md
new file mode 100644
index 00000000000..e306a5ea676
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf83fdbb51d9fa54654ae6.md
@@ -0,0 +1,276 @@
+---
+id: 63cf83fdbb51d9fa54654ae6
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Now it is time to build out the data structure that will hold all of the information for your football team.
+
+Below the variables you just created, create a new `const` variable called `myFavoriteFootballTeam` and assign it an empty object.
+
+# --hints--
+
+You should use `const` to declare the variable called `myFavoriteFootballTeam` and assign it an empty object.
+
+```js
+assert.match(code, /const\s+myFavoriteFootballTeam\s*=\s*{\s*}\s*/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md
new file mode 100644
index 00000000000..815176b6cff
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf8ec006a776ff5f6e3c68.md
@@ -0,0 +1,283 @@
+---
+id: 63cf8ec006a776ff5f6e3c68
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Inside the `myFavoriteFootballTeam` object, add a new property with a key named `team` and a string value of `Argentina`.
+
+
+# --hints--
+
+Your `myFavoriteFootballTeam` object should have a `team` property.
+
+```js
+assert.property(myFavoriteFootballTeam, 'team');
+```
+
+Your `team` property should be set to `Argentina`.
+
+```js
+assert.equal(myFavoriteFootballTeam.team, 'Argentina');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+--fcc-editable-region--
+const myFavoriteFootballTeam = {
+
+};
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md
new file mode 100644
index 00000000000..7d7fc38601f
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf90d4696d8f00851873a4.md
@@ -0,0 +1,283 @@
+---
+id: 63cf90d4696d8f00851873a4
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Below the `team` property, add a new property with a key named `sport` and a string value of `Football`.
+
+# --hints--
+
+Your `myFavoriteFootballTeam` object should have a `sport` property.
+
+```js
+assert.property(myFavoriteFootballTeam, 'sport');
+```
+
+Your `sport` property should be set to `Football`.
+
+```js
+assert.equal(myFavoriteFootballTeam.sport, 'Football');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+--fcc-editable-region--
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+
+};
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md
new file mode 100644
index 00000000000..3714c62cac6
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf91b0ff6e9300ead140cc.md
@@ -0,0 +1,290 @@
+---
+id: 63cf91b0ff6e9300ead140cc
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Below the `sport` property, add a new property with a key named `year` and a number value of `1986`.
+
+# --hints--
+
+Your `myFavoriteFootballTeam` object should have a `year` property.
+
+```js
+assert.property(myFavoriteFootballTeam, 'year');
+```
+
+Your `year` property should be a number.
+
+```js
+assert.isNumber(myFavoriteFootballTeam.year);
+```
+
+Your `year` property should be set to `1986`.
+
+```js
+assert.equal(myFavoriteFootballTeam.year, 1986);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+--fcc-editable-region--
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+
+};
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md
new file mode 100644
index 00000000000..e2ea93816b4
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf920228531a0145abd0b3.md
@@ -0,0 +1,291 @@
+---
+id: 63cf920228531a0145abd0b3
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Below the `year` property, add a new property with a key named `isWorldCupWinner` and a boolean value set to `true`.
+
+# --hints--
+
+Your `myFavoriteFootballTeam` object should have an `isWorldCupWinner` property.
+
+```js
+assert.property(myFavoriteFootballTeam, 'isWorldCupWinner');
+```
+
+Your `isWorldCupWinner` property should be a boolean.
+
+```js
+assert.isBoolean(myFavoriteFootballTeam.isWorldCupWinner);
+```
+
+Your `isWorldCupWinner` property should be set to `true`.
+
+```js
+assert.equal(myFavoriteFootballTeam.isWorldCupWinner, true);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+--fcc-editable-region--
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+
+};
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md
new file mode 100644
index 00000000000..7935b15618b
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63cf93472de77d01bf8474bf.md
@@ -0,0 +1,316 @@
+---
+id: 63cf93472de77d01bf8474bf
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Below the `isWorldCupWinner` property, add a new key called `headCoach` with a value of an empty object. Inside that object, add a property with a key of `coachName` and a string value of `Carlos Bilardo`. Below that property, add another key called `matches` with a number value of 7.
+
+# --hints--
+
+Your `myFavoriteFootballTeam` object should have a `headCoach` property.
+
+```js
+assert.property(myFavoriteFootballTeam, 'headCoach');
+```
+
+Your `headCoach` value should be an object.
+
+```js
+assert.isObject(myFavoriteFootballTeam.headCoach)
+```
+
+Your `headCoach` object should have a `coachName` property.
+
+```js
+assert.property(myFavoriteFootballTeam.headCoach, 'coachName');
+```
+
+Your `coachName` property should be set to `Carlos Bilardo`.
+
+```js
+assert.equal(myFavoriteFootballTeam.headCoach.coachName, 'Carlos Bilardo');
+```
+
+Your `headCoach` object should have a `matches` property.
+
+```js
+assert.property(myFavoriteFootballTeam.headCoach, 'matches');
+```
+
+Your `matches` property should be a number.
+
+```js
+assert.isNumber(myFavoriteFootballTeam.headCoach.matches);
+```
+
+Your `matches` property should be set to `7`.
+
+```js
+assert.equal(myFavoriteFootballTeam.headCoach.matches, 7);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+--fcc-editable-region--
+
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md
new file mode 100644
index 00000000000..1acacae44eb
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d120a05ee93f38353b84c0.md
@@ -0,0 +1,296 @@
+---
+id: 63d120a05ee93f38353b84c0
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Below the `headCoach` property, create a new property with a key named `players` with the value of an empty array.
+
+# --hints--
+
+Your `myFavoriteFootballTeam` object should have a `players` property.
+
+```js
+assert.property(myFavoriteFootballTeam, 'players');
+```
+
+Your `players` value should be an array.
+
+```js
+assert.isArray(myFavoriteFootballTeam.players)
+```
+
+Your `players` array should be empty.
+
+```js
+assert.deepEqual(myFavoriteFootballTeam.players, [])
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+--fcc-editable-region--
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+
+--fcc-editable-region--
+};
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md
new file mode 100644
index 00000000000..c5569d06c04
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d1214a0ac7a9389793269b.md
@@ -0,0 +1,369 @@
+---
+id: 63d1214a0ac7a9389793269b
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Inside that `players` array, create a new object with the following properties:
+
+
+```md
+
+name: "Sergio Almirón"
+position: "forward"
+number: 1
+isCaptain: false
+nickname: null
+
+```
+
+# --hints--
+
+Your `myFavoriteFootballTeam.players` array should have the value of an object.
+
+```js
+assert.isObject(myFavoriteFootballTeam.players[0])
+```
+
+Your new object should have a `name` property.
+
+```js
+assert.property(myFavoriteFootballTeam.players[0], 'name');
+```
+
+Your `name` property should be set to `Sergio Almirón`.
+
+```js
+assert.equal(myFavoriteFootballTeam.players[0]?.name, 'Sergio Almirón');
+```
+
+Your new object should have a `position` property.
+
+```js
+assert.property(myFavoriteFootballTeam.players[0], 'position');
+```
+
+Your `position` property should be set to `forward`.
+
+```js
+assert.equal(myFavoriteFootballTeam.players[0]?.position, 'forward');
+```
+
+Your new object should have a `number` property.
+
+```js
+assert.property(myFavoriteFootballTeam.players[0], 'number');
+```
+
+Your `number` property should be a number.
+
+```js
+assert.isNumber(myFavoriteFootballTeam.players[0]?.number);
+```
+
+Your `number` property should be set to `1`.
+
+```js
+assert.equal(myFavoriteFootballTeam.players[0]?.number, 1);
+```
+
+Your new object should have a `isCaptain` property.
+
+```js
+assert.property(myFavoriteFootballTeam.players[0], 'isCaptain');
+```
+
+Your `isCaptain` property should be a boolean.
+
+```js
+assert.isBoolean(myFavoriteFootballTeam.players[0]?.isCaptain);
+```
+
+Your `isCaptain` property should be set to `false`.
+
+```js
+assert.equal(myFavoriteFootballTeam.players[0]?.isCaptain, false);
+```
+
+Your new object should have a `nickname` property.
+
+```js
+assert.property(myFavoriteFootballTeam.players[0], 'nickname');
+```
+
+Your `nickname` property should be set to `null`.
+
+```js
+assert.isNull(myFavoriteFootballTeam.players[0]?.nickname);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+--fcc-editable-region--
+
+--fcc-editable-region--
+ ]
+};
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md
new file mode 100644
index 00000000000..7bb2e78b95d
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d128eaedcc773d2ded2128.md
@@ -0,0 +1,380 @@
+---
+id: 63d128eaedcc773d2ded2128
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Below that object, create a new object with the following properties:
+
+```md
+name: "Sergio Batista"
+position: "midfielder"
+number: 2
+isCaptain: false
+nickname: null
+```
+
+# --hints--
+
+Your `myFavoriteFootballTeam.players` array should have two values.
+
+```js
+// Have to assert at least, because we pre-populate data in the next step.
+assert.isAtLeast(myFavoriteFootballTeam.players.length, 2);
+```
+
+Your `myFavoriteFootballTeam.players` array should have an object as the second value.
+
+```js
+assert.isObject(myFavoriteFootballTeam.players[1])
+```
+
+Your new object should have a `name` property.
+
+```js
+assert.property(myFavoriteFootballTeam.players[1], 'name');
+```
+
+Your `name` property should be set to `Sergio Batista`.
+
+```js
+assert.equal(myFavoriteFootballTeam.players[1]?.name, 'Sergio Batista');
+```
+
+Your new object should have a `position` property.
+
+```js
+assert.property(myFavoriteFootballTeam.players[1], 'position');
+```
+
+Your `position` property should be set to `midfielder`.
+
+```js
+assert.equal(myFavoriteFootballTeam.players[1]?.position, 'midfielder');
+```
+
+Your new object should have a `number` property.
+
+```js
+assert.property(myFavoriteFootballTeam.players[1], 'number');
+```
+
+Your `number` property should be a number.
+
+```js
+assert.isNumber(myFavoriteFootballTeam.players[1]?.number);
+```
+
+Your `number` property should be set to `2`.
+
+```js
+assert.equal(myFavoriteFootballTeam.players[1]?.number, 2);
+```
+
+Your new object should have a `isCaptain` property.
+
+```js
+assert.property(myFavoriteFootballTeam.players[1], 'isCaptain');
+```
+
+Your `isCaptain` property should be a boolean.
+
+```js
+assert.isBoolean(myFavoriteFootballTeam.players[1]?.isCaptain);
+```
+
+Your `isCaptain` property should be set to `false`.
+
+```js
+assert.equal(myFavoriteFootballTeam.players[1]?.isCaptain, false);
+```
+
+Your new object should have a `nickname` property.
+
+```js
+assert.property(myFavoriteFootballTeam.players[1], 'nickname');
+```
+
+Your `nickname` property should be set to `null`.
+
+```js
+assert.isNull(myFavoriteFootballTeam.players[1]?.nickname);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+--fcc-editable-region--
+
+--fcc-editable-region--
+ ]
+};
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md
new file mode 100644
index 00000000000..e117f81605f
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12b9c7aaee43de1ba265d.md
@@ -0,0 +1,446 @@
+---
+id: 63d12b9c7aaee43de1ba265d
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+The rest of the data for the `myFavoriteFootballTeam.players` array has been filled out for you.
+
+The next step is to ensure that you can't modify this object by adding or removing any properties. We are going to use a method called `Object.freeze(obj)` which will freeze this object and prevent any changes being made to it.
+
+Use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object.
+
+
+# --hints--
+
+You should use the `Object.freeze()` method to freeze the `myFavoriteFootballTeam` object.
+
+```js
+assert.isFrozen(myFavoriteFootballTeam);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md
new file mode 100644
index 00000000000..6e03cf91edf
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63d12fe2a595263e8f5084f7.md
@@ -0,0 +1,458 @@
+---
+id: 63d12fe2a595263e8f5084f7
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+To check if the `Object.freeze()` method is working, you can try to assign a new value to one of the existing properties.
+
+Below the `Object.freeze(myFavoriteFootballTeam)`, assign the `USA` string to `myFavoriteFootballTeam.team`. Below that, add a `console.log` for `myFavoriteFootballTeam.team`.
+
+When you open up the console, you will see an `Uncaught TypeError` message. This error appears because the `Object.freeze()` method does not allow you to overwrite that value.
+
+# --hints--
+
+You should assign the `USA` string to `myFavoriteFootballTeam.team`.
+
+```js
+
+assert.match(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/);
+
+```
+
+You should add a `console.log` for `myFavoriteFootballTeam.team`.
+
+```js
+
+assert.match(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/);
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md
new file mode 100644
index 00000000000..ab1defde71c
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e02a333354343b595d64ca.md
@@ -0,0 +1,470 @@
+---
+id: 63e02a333354343b595d64ca
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+Now that you have tested the `Object.freeze()` method, you can delete those two lines of code from the last lesson.
+
+The next step is to access the key called `sport` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `sport`.
+
+Remember you can use dot notation for this.
+
+# --hints--
+
+You should remove your assignment of the `USA` string to `myFavoriteFootballTeam.team`.
+
+```js
+assert.notMatch(code, /myFavoriteFootballTeam\.team\s*=\s*('|"|`)USA\1\s*/);
+```
+
+You should remove your `console.log` for `myFavoriteFootballTeam.team`.
+
+```js
+assert.notMatch(code, /console\.log\(\s*myFavoriteFootballTeam\.team\s*\)/);
+```
+
+You should use `const` to declare a `sport` variable.
+
+```js
+assert.match(code, /const\s+sport\s*=/);
+```
+
+You should assign the value of the `sport` key from the `myFavoriteFootballTeam` object to the `sport` variable.
+
+```js
+assert.equal(sport, myFavoriteFootballTeam.sport);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+
+
+--fcc-editable-region--
+
+myFavoriteFootballTeam.team = "USA";
+console.log(myFavoriteFootballTeam.team);
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md
new file mode 100644
index 00000000000..9815fa204b9
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e0334b7a24bd3c96aca4de.md
@@ -0,0 +1,454 @@
+---
+id: 63e0334b7a24bd3c96aca4de
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Below the `sport` variable, access the key called `team` from the `myFavoriteFootballTeam` object and assign it to a new `const` variable called `team`.
+
+# --hints--
+
+You should use `const` to declare a `team` variable.
+
+```js
+assert.match(code, /const\s+team\s*=/);
+```
+
+You should assign the value of the `team` key from the `myFavoriteFootballTeam` object to the `team` variable.
+
+```js
+assert.equal(team, myFavoriteFootballTeam.team);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+
+
+--fcc-editable-region--
+
+const sport = myFavoriteFootballTeam.sport;
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md
new file mode 100644
index 00000000000..ce0835fa4d9
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e036373fc9173d284e165a.md
@@ -0,0 +1,464 @@
+---
+id: 63e036373fc9173d284e165a
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+In the last two steps, you have been accessing properties from the `myFavoriteFootballTeam` object using dot notation and assigning them to new `const` variables. But in JavaScript, there is an easier way to accomplish the same goal.
+
+The object destructuring syntax allows you to unpack values from arrays and objects:
+
+```js
+const developerObj = {
+ name: "Jessica Wilkins",
+ isDeveloper: true
+};
+
+// Object destructuring
+const { name, isDeveloper } = developerObj;
+```
+
+Rewrite the two lines of code below using the new destructuring syntax. Your answer should be one line of code.
+
+# --hints--
+
+Use object destructuring to access the `sport` and `team` values.
+
+```js
+
+assert.match(code, /const\s*{\s*(sport\s*\,\s*team)|(team\s*\,\s*sport)\s*}\s*=\s*myFavoriteFootballTeam\s*/)
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+
+
+--fcc-editable-region--
+
+const sport = myFavoriteFootballTeam.sport;
+const team = myFavoriteFootballTeam.team;
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md
new file mode 100644
index 00000000000..de3439a814b
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e03b86008bbb3e1c3de846.md
@@ -0,0 +1,449 @@
+---
+id: 63e03b86008bbb3e1c3de846
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Next, add the `year` and `players` to your destructuring assignment.
+
+# --hints--
+
+You should add the `year` and `players` values to your destructuring assignment.
+
+```js
+assert.match(code, /const\s*{\s*((sport\s*,\s*team\s*,\s*year\s*,\s*players)|(team\s*,\s*sport\s*,\s*year\s*,\s*players)|(year\s*,\s*sport\s*,\s*team\s*,\s*players)|(sport\s*,\s*year\s*,\s*team\s*,\s*players)|(team\s*,\s*year\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*sport\s*,\s*players)|(year\s*,\s*team\s*,\s*players\s*,\s*sport)|(team\s*,\s*year\s*,\s*players\s*,\s*sport)|(players\s*,\s*year\s*,\s*team\s*,\s*sport)|(year\s*,\s*players\s*,\s*team\s*,\s*sport)|(team\s*,\s*players\s*,\s*year\s*,\s*sport)|(players\s*,\s*team\s*,\s*year\s*,\s*sport)|(players\s*,\s*sport\s*,\s*year\s*,\s*team)|(sport\s*,\s*players\s*,\s*year\s*,\s*team)|(year\s*,\s*players\s*,\s*sport\s*,\s*team)|(players\s*,\s*year\s*,\s*sport\s*,\s*team)|(sport\s*,\s*year\s*,\s*players\s*,\s*team)|(year\s*,\s*sport\s*,\s*players\s*,\s*team)|(team\s*,\s*sport\s*,\s*players\s*,\s*year)|(sport\s*,\s*team\s*,\s*players\s*,\s*year)|(players\s*,\s*team\s*,\s*sport\s*,\s*year)|(team\s*,\s*players\s*,\s*sport\s*,\s*year)|(sport\s*,\s*players\s*,\s*team\s*,\s*year)|(players\s*,\s*sport\s*,\s*team\s*,\s*year))\s*}\s*=\s*myFavoriteFootballTeam\s*/);
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+
+
+--fcc-editable-region--
+
+const { sport, team } = myFavoriteFootballTeam;
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md
new file mode 100644
index 00000000000..95eda5017a7
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e042661ad2663f0d468740.md
@@ -0,0 +1,448 @@
+---
+id: 63e042661ad2663f0d468740
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Now you need to access the `coachName` value from the `myFavoriteFootballTeam.headCoach` object using the destructuring syntax.
+
+# --hints--
+
+Use object destructuring to access the `coachName` value.
+
+```js
+
+assert.match(code, /const\s*{\s*coachName\s*}\s*=\s*myFavoriteFootballTeam.headCoach\s*/)
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md
new file mode 100644
index 00000000000..8179fd09158
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e050bf935ac341b88326d6.md
@@ -0,0 +1,453 @@
+---
+id: 63e050bf935ac341b88326d6
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Now you need to start displaying the team's information on the screen.
+
+Below your destructuring assignments, assign the `sport` variable to `typeOfSport.innerHTML`. Remember that the `innerHTML` property sets the HTML for that particular element.
+
+Once you complete that task, you should see the result in the preview window.
+
+# --hints--
+
+You should assign the `sport` variable to `typeOfSport.innerHTML`.
+
+```js
+
+assert.match(code, /typeOfSport.innerHTML\s*=\s*sport\s*/)
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md
new file mode 100644
index 00000000000..587342d8d66
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05557016dfd45ea49152c.md
@@ -0,0 +1,451 @@
+---
+id: 63e05557016dfd45ea49152c
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Below `typeOfSport.innerHTML`, assign the `team` variable to `teamName.innerHTML`.
+
+# --hints--
+
+You should assign the `team` variable to `teamName.innerHTML`.
+
+```js
+
+assert.match(code, /teamName.innerHTML\s*=\s*team\s*/)
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md
new file mode 100644
index 00000000000..fd77bba607c
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e05c00b615bb46ac87273a.md
@@ -0,0 +1,462 @@
+---
+id: 63e05c00b615bb46ac87273a
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Below `teamName.innerHTML`, assign the `year` variable to `worldCupYear.innerHTML`. Below that, assign the `coachName` variable to `headCoach.innerHTML`.
+
+You should now see all of that information displayed on the screen below `Team stats`.
+
+# --hints--
+
+You should assign the `year` variable to `worldCupYear.innerHTML`.
+
+```js
+
+assert.match(code, /worldCupYear.innerHTML\s*=\s*year\s*/)
+
+```
+
+You should assign the `coachName` variable to `headCoach.innerHTML`.
+
+```js
+
+assert.match(code, /headCoach.innerHTML\s*=\s*coachName\s*/)
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md
new file mode 100644
index 00000000000..64e5e01482a
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e060df21bca347b2d2b374.md
@@ -0,0 +1,479 @@
+---
+id: 63e060df21bca347b2d2b374
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Now you will start building out the function that will show player cards based on the selections made by the user in the `Filter Teammates` dropdown menu.
+
+Start by creating an empty arrow function called `setPlayerCards`. You do not need to add a parameter because that will be taken care of in the next step.
+
+
+# --hints--
+
+You should use `const` to declare a `setPlayerCards` variable.
+
+```js
+assert.match(code, /const\s+setPlayerCards\s*=/);
+```
+
+Your `setPlayerCards` variable should be a function.
+
+```js
+assert.isFunction(setPlayerCards);
+```
+
+Your `setPlayerCards` function should use arrow syntax.
+
+```js
+assert.match(code, /const\s+setPlayerCards\s*=\s*\(.*\)\s*=>/);
+```
+
+Your `setPlayerCards` function should not take a parameter.
+
+```js
+assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>/);
+```
+
+Your `setPlayerCards` function should be empty.
+
+```js
+assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*\)\s*=>\s*{\s*}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md
new file mode 100644
index 00000000000..e2fd95b4278
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e062d6090ebb486a4eda3a.md
@@ -0,0 +1,470 @@
+---
+id: 63e062d6090ebb486a4eda3a
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Function parameters can be initialized with default values. If a function is called without an argument, then the default value will be used:
+
+```js
+const greeting = (name = "Anonymous") => {
+ return "Hello " + name;
+}
+
+console.log(greeting("John")); // Hello John
+console.log(greeting()); // Hello Anonymous
+```
+
+Add a new parameter to your `setPlayerCards` function called `arr` and assign it a default value of `players`.
+
+# --hints--
+
+Your `setPlayerCards` function should take an `arr` parameter.
+
+```js
+assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr/);
+```
+
+Your `arr` parameter should have a default value of `players`.
+
+```js
+assert.match(code, /const\s+setPlayerCards\s*=\s*\(\s*arr\s*=\s*players\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+--fcc-editable-region--
+
+const setPlayerCards = () => {};
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md
new file mode 100644
index 00000000000..c5f10540ae0
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e949b8327aa2aca2ca8eac.md
@@ -0,0 +1,478 @@
+---
+id: 63e949b8327aa2aca2ca8eac
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+The next step is to create a new array that will be responsible for adding the player card information to the page.
+
+Inside the `setPlayerCards` function, start by adding the `map` method to `arr` that will take in an empty callback function. Then, use the addition assignment `+=` operator to assign the new array to `playerCards.innerHTML`.
+
+Remember that the `innerHTML` property gets, or in this case, sets the HTML markup for the `playerCards` element.
+
+# --hints--
+
+You should call the `.map()` method on your `arr` parameter.
+
+```js
+assert.match(setPlayerCards.toString(), /arr\.map\(.*\)/);
+```
+
+Your `.map()` method should take an empty callback function.
+
+```js
+assert.match(code, /arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
+```
+
+You should use the `+=` operator on `playerCards.innerHTML`.
+
+```js
+assert.match(setPlayerCards.toString(), /playerCards\.innerHTML\s*\+=/);
+```
+
+You should assign `arr.map()` to the `playerCards.innerHTML` using the `+=` operator.
+
+```js
+assert.match(code, /playerCards\.innerHTML\s+\+=\s*arr\.map\(\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+};
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md
new file mode 100644
index 00000000000..10556005822
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e94dae6dcedbad73f2f6ee.md
@@ -0,0 +1,472 @@
+---
+id: 63e94dae6dcedbad73f2f6ee
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+`arr` contains a series of objects that each contain a `name`, `position`, `number`, `isCaptain` and `nickname` property. In order to access each of those properties inside the callback function, you will need to use object destructuring to unpack them into variables.
+
+Here is an example:
+
+```js
+function myExampleFunction({ name, age, job, city }) {
+
+}
+```
+
+Inside the parameter list in the callback function for the `map` method, unpack all 5 object properties from objects in `arr` using object destructuring.
+
+# --hints--
+
+You should unpack all 5 object properties from objects in `arr` using object destructuring.
+
+```js
+
+assert.match(code, /{\s*((name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname)\s*\,\s*(name|position|number|isCaptain|nickname))\s*}\s*/)
+
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+
+--fcc-editable-region--
+
+ playerCards.innerHTML += arr.map(() => {
+
+ })
+
+--fcc-editable-region--
+
+};
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md
new file mode 100644
index 00000000000..564fb6bb8e0
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e954321b0a77ae4f6d9650.md
@@ -0,0 +1,467 @@
+---
+id: 63e954321b0a77ae4f6d9650
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Inside the body of the callback function, you will need to add template literals ` `` ` which will contain the HTML content for the player cards.
+
+Inside the template literals, add an empty `div` with a class of `player-card`.
+
+# --hints--
+
+You should use template literals to add an empty `div` with a class of `player-card`.
+
+
+```js
+
+assert.match(code, /`\s*\s*<\/div>\s*`\s*/)
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+
+--fcc-editable-region--
+
+ playerCards.innerHTML += arr.map(
+ ({ name, position, number, isCaptain, nickname }) => {
+
+ }
+ );
+
+--fcc-editable-region--
+
+};
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md
new file mode 100644
index 00000000000..b9c104fb55a
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95a45dce95baf41dd4f78.md
@@ -0,0 +1,475 @@
+---
+id: 63e95a45dce95baf41dd4f78
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Inside the `div`, add an `h2` element which contains the `name` parameter. Since you are working with template literals, you will need to use an embedded expression for the `name` parameter:
+
+```js
+${expression goes here}
+```
+
+# --hints--
+
+You should add an `h2` element with the `name` parameter.
+
+```js
+assert.match(code, /\s*\s*\${\s*name\s*}\s*<\/h2>\s*/)
+```
+
+Your `h2` should be nested in your `div`.
+
+```js
+assert.match(code, /`\s*\s*\s*\${\s*name\s*}\s*<\/h2>\s*<\/div>\s*`\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+
+--fcc-editable-region--
+
+ playerCards.innerHTML += arr.map(
+ ({ name, position, number, isCaptain, nickname }) => {
+ `
+
+
+
+ `;
+ }
+ );
+
+--fcc-editable-region--
+
+};
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md
new file mode 100644
index 00000000000..53646c4fff0
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e95e39860dc5b01ebe9be0.md
@@ -0,0 +1,467 @@
+---
+id: 63e95e39860dc5b01ebe9be0
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+The next step would be to display the word `(Captain)` next to the player if they are listed as a captain for the team.
+
+Right next to the `${name}` expression, add a new embedded expression. Inside that expression, use a ternary operator to check if `isCaptain` is true. If so, return `(Captain)` otherwise return an empty string.
+
+# --hints--
+
+You should use a ternary operator to check if `isCaptain` is true and return `(Captain)` or return an empty string.
+
+```js
+assert.match(code, /\s*\s*\${\s*name\s*}\s*\$\{isCaptain\s*\?\s*('|"|`)\(Captain\)\1\s*:\s*('|"|`)\2\}\s*<\/h2>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+
+--fcc-editable-region--
+
+ playerCards.innerHTML += arr.map(
+ ({ name, position, number, isCaptain, nickname }) => {
+ `
+
+
${name}
+
+ `;
+ }
+ );
+
+--fcc-editable-region--
+
+};
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md
new file mode 100644
index 00000000000..f41577b8e76
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e9667c881b61b1e338d276.md
@@ -0,0 +1,472 @@
+---
+id: 63e9667c881b61b1e338d276
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Below the `h2` element, add a paragraph element with the text `Position:` and an embedded expression that contains the `position` parameter.
+
+# --hints--
+
+You should add a new paragraph element with the text `Position:` followed by the `position` variable.
+
+```js
+assert.match(code, /\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/)
+```
+
+Your new `p` element should come after the `h2` element.
+
+```js
+assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+
+--fcc-editable-region--
+
+ playerCards.innerHTML += arr.map(
+ ({ name, position, number, isCaptain, nickname }) => {
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
+
+ `;
+ }
+ );
+
+--fcc-editable-region--
+
+};
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md
new file mode 100644
index 00000000000..edceac6fe11
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-modern-javascript-methods-by-building-football-team-cards/63e96938d2a347b2734a1587.md
@@ -0,0 +1,472 @@
+---
+id: 63e96938d2a347b2734a1587
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Below the paragraph element, add another paragraph element with the text `Number:` and an embedded expression that contains the `number` parameter.
+
+# --hints--
+
+You should add a new paragraph element with the text `Number:` followed by the `number` variable.
+
+```js
+assert.match(code, /\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/)
+```
+
+Your new `p` element should come after your existing `p` element.
+
+```js
+assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+
+--fcc-editable-region--
+
+ playerCards.innerHTML += arr.map(
+ ({ name, position, number, isCaptain, nickname }) => {
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
\s*Nickname:\s*<\/p>\s*/)
+```
+
+Your new `p` element should come after the `h2` element.
+
+```js
+assert.match(code, /<\/h2>\s*\s*Position:\s*\${\s*position\s*}\s*<\/p>\s*\s*Number:\s*\${\s*number\s*}\s*<\/p>\s*\s*Nickname:\s*<\/p>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+
+--fcc-editable-region--
+
+ playerCards.innerHTML += arr.map(
+ ({ name, position, number, isCaptain, nickname }) => {
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?/)
+```
+
+If your ternary is truthy, it should display the player's `nickname`.
+
+```js
+assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:/)
+```
+
+If your ternary is falsy, it should display the string `N/A`.
+
+```js
+assert.match(code, /\s*\s*Nickname:\s*\$\{\s*nickname\s*!==\s*null\s*\?\s*nickname\s*:\s*('|"|`)\N\/A\1}\s*<\/p>\s*/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+
+--fcc-editable-region--
+
+ playerCards.innerHTML += arr.map(
+ ({ name, position, number, isCaptain, nickname }) => {
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname:
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+
+--fcc-editable-region--
+
+ playerCards.innerHTML += arr.map(
+ ({ name, position, number, isCaptain, nickname }) => {
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js const teamName = document.getElementById("team"); const typeOfSport = document.getElementById("sport"); const worldCupYear = document.getElementById("year"); const headCoach = document.getElementById("head-coach"); const playerCards = document.getElementById("player-cards"); const playersDropdownList = document.getElementById("players"); const myFavoriteFootballTeam = { team: "Argentina", sport: "Football", year: 1986, isWorldCupWinner: true, headCoach: { coachName: "Carlos Bilardo", matches: 7, }, players: [
+ { name: "Sergio Almirón", position: "forward", number: 1, isCaptain: false, nickname: null, },
+ { name: "Sergio Batista", position: "midfielder", number: 2, isCaptain: false, nickname: null, },
+ { name: "Ricardo Bochini", position: "midfielder", number: 3, isCaptain: false, nickname: "El Bocha", },
+ { name: "Claudio Borghi", position: "midfielder", number: 4, isCaptain: false, nickname: "Bichi", },
+ { name: "José Luis Brown", position: "defender", number: 5, isCaptain: false, nickname: "Tata", },
+ { name: "Daniel Passarella", position: "defender", number: 6, isCaptain: false, nickname: "El Gran Capitán", },
+ { name: "Jorge Burruchaga", position: "forward", number: 7, isCaptain: false, nickname: "Burru", },
+ { name: "Néstor Clausen", position: "defender", number: 8, isCaptain: false, nickname: null, },
+ { name: "José Luis Cuciuffo", position: "defender", number: 9, isCaptain: false, nickname: "El Cuchu", },
+ { name: "Diego Maradona", position: "midfielder", number: 10, isCaptain: true, nickname: "El Pibe de Oro", },
+ { name: "Jorge Valdano", position: "forward", number: 11, isCaptain: false, nickname: "The Philosopher of Football", },
+ { name: "Héctor Enrique", position: "midfielder", number: 12, isCaptain: false, nickname: null, },
+ { name: "Oscar Garré", position: "defender", number: 13, isCaptain: false, nickname: null, },
+ { name: "Ricardo Giusti", position: "midfielder", number: 14, isCaptain: false, nickname: null, },
+ { name: "Luis Islas", position: "goalkeeper", number: 15, isCaptain: false, nickname: "El loco", },
+ { name: "Julio Olarticoechea", position: "defender", number: 16, isCaptain: false, nickname: null, },
+ { name: "Pedro Pasculli", position: "forward", number: 17, isCaptain: false, nickname: null, },
+ { name: "Nery Pumpido", position: "goalkeeper", number: 18, isCaptain: false, nickname: null, },
+ { name: "Oscar Ruggeri", position: "defender", number: 19, isCaptain: false, nickname: "El Cabezón", },
+ { name: "Carlos Tapia", position: "midfielder", number: 20, isCaptain: false, nickname: null, },
+ { name: "Marcelo Trobbiani", position: "midfielder", number: 21, isCaptain: false, nickname: "Calesita", },
+ { name: "Héctor Zelada", position: "goalkeeper", number: 22, isCaptain: false, nickname: null, }, ], };
+
+Object.freeze(myFavoriteFootballTeam); const { sport, team, year, players } = myFavoriteFootballTeam; const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport; teamName.innerHTML = team; worldCupYear.innerHTML = year; headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => { playerCards.innerHTML += arr .map( ({ name, position, number, isCaptain, nickname }) => `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
+ Learn Modern JavaScript methods by building football team cards
+
+ Team stats
+
+
+
Team:
+
Sport:
+
Year:
+
Head coach:
+
Filter Teammates:
+
+ All Players
+ Nicknames
+ Position Forward
+ Position Midfielder
+ Position Defender
+ Position Goalkeeper
+
+
+
+
Sergio Almirón
+
Position: forward
+
Number: 1
+
Nickname: N/A
+
+
+
Sergio Batista
+
Position: midfielder
+
Number: 2
+
Nickname: N/A
+
+
+
Ricardo Bochini
+
Position: midfielder
+
Number: 3
+
Nickname: El Bocha
+
+
+
Claudio Borghi
+
Position: midfielder
+
Number: 4
+
Nickname: Bichi
+
+
+
José Luis Brown
+
Position: defender
+
Number: 5
+
Nickname: Tata
+
+
+
Daniel Passarella
+
Position: defender
+
Number: 6
+
Nickname: El Gran Capitán
+
+
+
Jorge Burruchaga
+
Position: forward
+
Number: 7
+
Nickname: Burru
+
+
+
Néstor Clausen
+
Position: defender
+
Number: 8
+
Nickname: N/A
+
+
+
José Luis Cuciuffo
+
Position: defender
+
Number: 9
+
Nickname: El Cuchu
+
+
+
(Captain) Diego Maradona
+
Position: midfielder
+
Number: 10
+
Nickname: El Pibe de Oro
+
+
+
Jorge Valdano
+
Position: forward
+
Number: 11
+
Nickname: The Philosopher of Football
+
+
+
Héctor Enrique
+
Position: midfielder
+
Number: 12
+
Nickname: N/A
+
+
+
Oscar Garré
+
Position: defender
+
Number: 13
+
Nickname: N/A
+
+
+
Ricardo Giusti
+
Position: midfielder
+
Number: 14
+
Nickname: N/A
+
+
+
Luis Islas
+
Position: goalkeeper
+
Number: 15
+
Nickname: El loco
+
+
+
Julio Olarticoechea
+
Position: defender
+
Number: 16
+
Nickname: N/A
+
+
+
Pedro Pasculli
+
Position: forward
+
Number: 17
+
Nickname: N/A
+
+
+
Nery Pumpido
+
Position: goalkeeper
+
Number: 18
+
Nickname: N/A
+
+
+
Oscar Ruggeri
+
Position: defender
+
Number: 19
+
Nickname: El Cabezón
+
+
+
Carlos Tapia
+
Position: midfielder
+
Number: 20
+
Nickname: N/A
+
+
+
Marcelo Trobbiani
+
Position: midfielder
+
Number: 21
+
Nickname: Calesita
+
+
+
Héctor Zelada
+
Position: goalkeeper
+
Number: 22
+
Nickname: N/A
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #0a0a23;
+ --light-grey: #f5f6f7;
+ --white: #ffffff;
+ --black: #000;
+}
+
+body {
+ background-color: var(--dark-grey);
+ text-align: center;
+ padding: 10px;
+}
+
+.title,
+.options-label,
+.team-stats,
+footer {
+ color: var(--white);
+}
+
+.title {
+ margin: 1.3rem 0;
+}
+
+.team-stats {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ font-size: 1.3rem;
+ margin: 1.2rem 0;
+}
+
+.options-label {
+ font-size: 1.2rem;
+}
+
+.cards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.player-card {
+ background-color: var(--light-grey);
+ padding: 1.3rem;
+ margin: 1.2rem;
+ width: 300px;
+ border-radius: 15px;
+}
+
+@media (max-width: 768px) {
+ .team-stats {
+ flex-direction: column;
+ }
+}
+
+```
+
+```js
+const teamName = document.getElementById("team");
+const typeOfSport = document.getElementById("sport");
+const worldCupYear = document.getElementById("year");
+const headCoach = document.getElementById("head-coach");
+const playerCards = document.getElementById("player-cards");
+const playersDropdownList = document.getElementById("players");
+const myFavoriteFootballTeam = {
+ team: "Argentina",
+ sport: "Football",
+ year: 1986,
+ isWorldCupWinner: true,
+ headCoach: {
+ coachName: "Carlos Bilardo",
+ matches: 7,
+ },
+ players: [
+ {
+ name: "Sergio Almirón",
+ position: "forward",
+ number: 1,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Sergio Batista",
+ position: "midfielder",
+ number: 2,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Bochini",
+ position: "midfielder",
+ number: 3,
+ isCaptain: false,
+ nickname: "El Bocha",
+ },
+ {
+ name: "Claudio Borghi",
+ position: "midfielder",
+ number: 4,
+ isCaptain: false,
+ nickname: "Bichi",
+ },
+ {
+ name: "José Luis Brown",
+ position: "defender",
+ number: 5,
+ isCaptain: false,
+ nickname: "Tata",
+ },
+ {
+ name: "Daniel Passarella",
+ position: "defender",
+ number: 6,
+ isCaptain: false,
+ nickname: "El Gran Capitán",
+ },
+ {
+ name: "Jorge Burruchaga",
+ position: "forward",
+ number: 7,
+ isCaptain: false,
+ nickname: "Burru",
+ },
+ {
+ name: "Néstor Clausen",
+ position: "defender",
+ number: 8,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "José Luis Cuciuffo",
+ position: "defender",
+ number: 9,
+ isCaptain: false,
+ nickname: "El Cuchu",
+ },
+ {
+ name: "Diego Maradona",
+ position: "midfielder",
+ number: 10,
+ isCaptain: true,
+ nickname: "El Pibe de Oro",
+ },
+ {
+ name: "Jorge Valdano",
+ position: "forward",
+ number: 11,
+ isCaptain: false,
+ nickname: "The Philosopher of Football",
+ },
+ {
+ name: "Héctor Enrique",
+ position: "midfielder",
+ number: 12,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Garré",
+ position: "defender",
+ number: 13,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Ricardo Giusti",
+ position: "midfielder",
+ number: 14,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Luis Islas",
+ position: "goalkeeper",
+ number: 15,
+ isCaptain: false,
+ nickname: "El loco",
+ },
+ {
+ name: "Julio Olarticoechea",
+ position: "defender",
+ number: 16,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Pedro Pasculli",
+ position: "forward",
+ number: 17,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Nery Pumpido",
+ position: "goalkeeper",
+ number: 18,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Oscar Ruggeri",
+ position: "defender",
+ number: 19,
+ isCaptain: false,
+ nickname: "El Cabezón",
+ },
+ {
+ name: "Carlos Tapia",
+ position: "midfielder",
+ number: 20,
+ isCaptain: false,
+ nickname: null,
+ },
+ {
+ name: "Marcelo Trobbiani",
+ position: "midfielder",
+ number: 21,
+ isCaptain: false,
+ nickname: "Calesita",
+ },
+ {
+ name: "Héctor Zelada",
+ position: "goalkeeper",
+ number: 22,
+ isCaptain: false,
+ nickname: null,
+ },
+ ],
+};
+
+Object.freeze(myFavoriteFootballTeam);
+const { sport, team, year, players } = myFavoriteFootballTeam;
+const { coachName } = myFavoriteFootballTeam.headCoach;
+
+typeOfSport.innerHTML = sport;
+teamName.innerHTML = team;
+worldCupYear.innerHTML = year;
+headCoach.innerHTML = coachName;
+
+const setPlayerCards = (arr = players) => {
+ playerCards.innerHTML += arr
+ .map(
+ ({ name, position, number, isCaptain, nickname }) =>
+ `
+
+
${name} ${isCaptain ? "(Captain)" : ""}
+
Position: ${position}
+
Number: ${number}
+
Nickname: ${nickname !== null ? nickname : "N/A"}
+
Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd91d28bebe226f765d86.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd91d28bebe226f765d86.md
new file mode 100644
index 00000000000..fe80d09027d
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd91d28bebe226f765d86.md
@@ -0,0 +1,168 @@
+---
+id: 641cd91d28bebe226f765d86
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Attach an event listener to your `checkMessageButton`, listening for the `click` event. Give it an empty callback function.
+
+# --hints--
+
+You should call `.addEventListener()` on your `checkMessageButton` element.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(/);
+```
+
+Your `.addEventListener()` method should have a `click` event type.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,/);
+```
+
+Your `.addEventListener()` method should have an empty callback function.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*\}\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md
new file mode 100644
index 00000000000..e030b927fe8
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md
@@ -0,0 +1,178 @@
+---
+id: 641cdebe67ec0f25a4798356
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+If the `messageInput` is empty, display an alert to the user with the message `Please enter a message.`.
+
+Then, exit the function execution.
+
+# --hints--
+
+Your callback function should have an `if` statement.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(/)
+```
+
+Your `if` statement should check if the `value` of `messageInput` is an empty string.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)/)
+```
+
+Your `if` statement should display an alert to the user with the message `Please enter a message.`.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\)/)
+```
+
+Your `if` statement should exit the function execution.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+--fcc-editable-region--
+checkMessageButton.addEventListener("click", () => {
+
+});
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md
new file mode 100644
index 00000000000..9310cd9c68f
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md
@@ -0,0 +1,181 @@
+---
+id: 641cdefa704f232675ed98aa
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Create an `isSpam` function using the `const` keyword and arrow syntax. The function should take a single parameter `msg` and implicitly return `false` for now.
+
+# --hints--
+
+You should use `const` to declare an `isSpam` variable.
+
+```js
+assert.match(code, /const\s+isSpam\s*=/);
+```
+
+You should use arrow syntax to assign `isSpam` a function.
+
+```js
+assert.match(code, /const\s+isSpam\s*=\s*\(?.*\)?\s*=>/);
+```
+
+Your `isSpam` function should have a single `msg` parameter.
+
+```js
+assert.match(code, /const\s+isSpam\s*=\s*\(?\s*msg\s*\)?/);
+```
+
+Your `isSpam` function should implicitly return `false`.
+
+```js
+assert.match(code, /const\s+isSpam\s*=\s*\(?\s*msg\s*\)?\s*=>\s*false;?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md
new file mode 100644
index 00000000000..269cc030d8f
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md
@@ -0,0 +1,199 @@
+---
+id: 641cdf57c3f7ee276e1d9b32
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Back in your event listener, you need to update the text of the `result` element.
+
+Use a ternary operator to update the text of the `result` element after the `if` statement. Check the truthiness of calling `isSpam()` on the value of the `messageInput` element. If true, set the text to `Oh no! This looks like a spam message.`. Otherwise, set the text to `This message does not seem to contain any spam.`
+
+Then set the `messageInput` element's value to an empty string.
+
+# --hints--
+
+You should use the assignment operator to set the `textContent` property of the `result` element.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*result\.textContent\s*\=\s*/)
+```
+
+You should assign the `isSpam()` function call to `result.textContent`.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*result\.textContent\s*\=\s*isSpam\(\s*messageInput\.value\s*\)/)
+```
+
+You should use ternary syntax to check the truthiness of `isSpam(messageInput.value)`.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*result\.textContent\s*\=\s*isSpam\(\s*messageInput\.value\s*\)\s*\?/)
+```
+
+The truthy expression of your ternary should set the `textContent` property of the `result` element to `Oh no! This looks like a spam message.`.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*result\.textContent\s*\=\s*isSpam\(\s*messageInput\.value\s*\)\s*\?\s*('|"|`)Oh no! This looks like a spam message.\4\s*:/);
+```
+
+The falsy expression of your ternary should set the `textContent` property of the `result` element to `This message does not seem to contain any spam.`.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*result\.textContent\s*\=\s*isSpam\(\s*messageInput\.value\s*\)\s*\?\s*('|"|`)Oh no! This looks like a spam message.\4\s*:\s*('|"|`)This message does not seem to contain any spam.\5;?\s*/);
+```
+
+After your ternary, set the `value` of `messageInput` to an empty string.
+
+```js
+assert.match(code, /checkMessageButton\.addEventListener\(\s*('|"|`)click\1\s*,\s*\(\s*\)\s*=>\s*\{\s*if\s*\(\s*messageInput\.value\s*===\s*('|"|`)\2\s*\)\s*\{\s*alert\(\s*('|"|`)Please enter a message\.\3\s*\);?\s*return\s*;?\s*\}\s*result\.textContent\s*\=\s*isSpam\(\s*messageInput\.value\s*\)\s*\?\s*('|"|`)Oh no! This looks like a spam message.\4\s*:\s*('|"|`)This message does not seem to contain any spam.\5;?\s*messageInput\.value\s*=\s*('|"|`)\6;?\s*\}/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const isSpam = (msg) => false;
+
+--fcc-editable-region--
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+
+});
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md
new file mode 100644
index 00000000000..4b9ba9bc1af
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md
@@ -0,0 +1,188 @@
+---
+id: 641ce03dfeca10293e05dad7
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Your first regular expression will be used to catch help requests. Declare a `helpRegex` variable, and assign it a regular expression that matches the string `please help`.
+
+As a refresher, here is a regular expression to match the string `hello world`:
+
+```js
+const regex = /hello world/;
+```
+
+# --hints--
+
+You should use `const` to declare a `helpRegex` variable.
+
+```js
+assert.match(code, /const\s+helpRegex\s*=/);
+```
+
+Your `helpRegex` variable should be a regular expression.
+
+```js
+assert.instanceOf(helpRegex, RegExp);
+```
+
+Your `helpRegex` variable should match the string `please help`.
+
+```js
+assert.match('please help', helpRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+const isSpam = (msg) => false;
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md
new file mode 100644
index 00000000000..c0028fec254
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md
@@ -0,0 +1,172 @@
+---
+id: 641ce3065c50e62f97406973
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Regular expressions can take flags to modify their behavior. For instance, the `i` flag can be used to make the expression ignore case, causing it to match `hello`, `HELLO`, and `Hello` for the expression `/hello/`.
+
+Flags are added after the trailing backslash. Add the `i` flag to your `helpRegex`.
+
+# --hints--
+
+Your `helpRegex` should have the case-insensitive `i` flag.
+
+```js
+assert.include(helpRegex.flags, 'i');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+--fcc-editable-region--
+const helpRegex = /please help/;
+--fcc-editable-region--
+
+const isSpam = (msg) => false;
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md
new file mode 100644
index 00000000000..aa5f5c1bb48
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md
@@ -0,0 +1,174 @@
+---
+id: 641ce3dcd0aec8309fbc9971
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Strings have a `.match()` method, which accepts a regular expression as an argument and determines if the string matches that expression.
+
+Update your `isSpam()` function to implicitly return the result of calling the `.match()` method on `msg`, passing `helpRegex` as the argument.
+
+Then, try entering some messages on your page and see the result.
+
+# --hints--
+
+Your `isSpam()` function should implicitly return the result of `msg.match(helpRegex)`.
+
+```js
+assert.match(code, /const\s*isSpam\s*=\s*\(msg\)\s*=>\s*msg\.match\(helpRegex\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help/i;
+
+--fcc-editable-region--
+const isSpam = (msg) => false;
+--fcc-editable-region--
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md
new file mode 100644
index 00000000000..318d7db7662
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md
@@ -0,0 +1,174 @@
+---
+id: 641ceed81533263283835c3d
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Instead of using the `.match()` method, you can use the `.test()` method of a regular expression to test if a string matches the pattern. Unlike `.match()`, `.test()` returns a boolean value indicating whether or not the string matches the pattern.
+
+Update your `isSpam()` function to use the `.test()` method of `helpRegex` to test if `msg` is a match.
+
+Then, try entering some messages on your page and see the result.
+
+# --hints--
+
+Your `isSpam()` function should implicitly return the result of `helpRegex.test(msg)`.
+
+```js
+assert.match(code, /const\s*isSpam\s*=\s*\(msg\)\s*=>\s*helpRegex\.test\(msg\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help/i;
+
+--fcc-editable-region--
+const isSpam = (msg) => msg.match(helpRegex);
+--fcc-editable-region--
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md
new file mode 100644
index 00000000000..db22a7b6b2f
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md
@@ -0,0 +1,184 @@
+---
+id: 641cf198ec366c33d6504854
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+The alternate sequence `|` can be used to match either the text on the left or the text on the right of the `|`. For example, the regular expression `/yes|no/` will match either `yes` or `no`.
+
+Update your `helpRegex` to match either `please help` or `assist me`.
+
+# --hints--
+
+Your `helpRegex` should use the `|` alternate sequence.
+
+```js
+assert.match(helpRegex.toString(), /\|/);
+```
+
+Your `helpRegex` should match the string `please help`.
+
+```js
+assert.match('please help', helpRegex);
+```
+
+Your `helpRegex` should match the string `assist me`.
+
+```js
+assert.match('assist me', helpRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+--fcc-editable-region--
+const helpRegex = /please help/i;
+--fcc-editable-region--
+
+const isSpam = (msg) => helpRegex.test(msg);
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f6f59d665615c9e94d8a.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f6f59d665615c9e94d8a.md
new file mode 100644
index 00000000000..bfbdaa2e30b
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f6f59d665615c9e94d8a.md
@@ -0,0 +1,186 @@
+---
+id: 6421f6f59d665615c9e94d8a
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Before you start creating additional regular expressions, you need to update your application to check more than one regular expression.
+
+Start by declaring a `denyList` variable. Assign it an array containing your `helpRegex`.
+
+# --hints--
+
+You should use `const` to declare a `denyList` variable.
+
+```js
+assert.match(code, /const\s*denyList\s*=/);
+```
+
+Your `denyList` variable should be an array.
+
+```js
+assert.isArray(denyList);
+```
+
+Your `denyList` array should have `helpRegex` as its only element.
+
+```js
+assert.deepEqual(denyList, [helpRegex]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+const isSpam = (msg) => helpRegex.test(msg);
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f98f4999d1179ce37cb4.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f98f4999d1179ce37cb4.md
new file mode 100644
index 00000000000..0d884ee0ab3
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f98f4999d1179ce37cb4.md
@@ -0,0 +1,192 @@
+---
+id: 6421f98f4999d1179ce37cb4
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Remember that arrays have a `.some()` method. Use the `.some()` method to check if testing your `msg` on any of your `denyList` regular expressions returns `true`.
+
+Use `regex` as the parameter for the callback function, for clarity.
+
+# --hints--
+
+Your `isSpam` function should implicitly return the result of `denyList.some()`.
+
+```js
+assert.match(code, /const\s*isSpam\s*=\s*\(?\s*msg\s*\)?\s*=>\s*/)
+```
+
+Your `.some()` method should use arrow syntax for the callback.
+
+```js
+assert.match(code, /const\s*isSpam\s*=\s*\(?\s*msg\s*\)?\s*=>\s*denyList\.some\(\s*\(?.*\)?\s*=>/);
+```
+
+Your `.some()` callback should take `regex` as the parameter.
+
+```js
+assert.match(code, /const\s*isSpam\s*=\s*\(?\s*msg\s*\)?\s*=>\s*denyList\.some\(\s*\(?\s*regex\s*\)?\s*=>/);
+```
+
+Your `.some()` callback should implicitly return the result of testing `msg` on `regex`.
+
+```js
+assert.match(code, /const\s*isSpam\s*=\s*\(?\s*msg\s*\)?\s*=>\s*denyList\.some\(\s*\(?\s*regex\s*\)?\s*=>\s*regex\.test\(\s*msg\s*\)\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+
+const denyList = [helpRegex];
+
+--fcc-editable-region--
+const isSpam = (msg) => helpRegex.test(msg);
+--fcc-editable-region--
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642205fa6376c818f78bb24e.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642205fa6376c818f78bb24e.md
new file mode 100644
index 00000000000..38360e8284d
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642205fa6376c818f78bb24e.md
@@ -0,0 +1,193 @@
+---
+id: 642205fa6376c818f78bb24e
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+The next regular expression you will work on is one that matches mentions of dollar amounts.
+
+Start by declaring a `dollarRegex` variable, and assign it a case-insensitive regular expression that matches the text `dollars`.
+
+# --hints--
+
+You should use `const` to declare a `dollarRegex` variable.
+
+```js
+assert.match(code, /const\s*dollarRegex\s*=/);
+```
+
+Your `dollarRegex` variable should be a regular expression.
+
+```js
+assert.instanceOf(dollarRegex, RegExp);
+```
+
+Your `dollarRegex` should match `dollars`.
+
+```js
+assert.match('dollars', dollarRegex);
+```
+
+Your `dollarRegex` should be case-insensitive.
+
+```js
+assert.include(dollarRegex.flags, 'i');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+const denyList = [helpRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206618bdd611a0c4e90f3.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206618bdd611a0c4e90f3.md
new file mode 100644
index 00000000000..3cb29fcb5b9
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206618bdd611a0c4e90f3.md
@@ -0,0 +1,181 @@
+---
+id: 642206618bdd611a0c4e90f3
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Add your `dollarRegex` to the `denyList` array so that you can test the regular expression.
+
+Then try entering a message in your app.
+
+# --hints--
+
+Your `denyList` array should include `dollarRegex`.
+
+```js
+assert.deepInclude(denyList, dollarRegex);
+```
+
+Your `denyList` array should still include `helpRegex`.
+
+```js
+assert.deepInclude(denyList, helpRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /dollars/i;
+
+--fcc-editable-region--
+const denyList = [helpRegex];
+--fcc-editable-region--
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206e054eef81b5e3092ed.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206e054eef81b5e3092ed.md
new file mode 100644
index 00000000000..f879e8ee96d
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206e054eef81b5e3092ed.md
@@ -0,0 +1,189 @@
+---
+id: 642206e054eef81b5e3092ed
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+You need to match a number before the text `dollars`. While you could write out `0|1|2` and so on, regular expressions have a feature that makes this easier.
+
+A character class is defined by square brackets, and matches any character within the brackets. For example, `[aeiou]` matches any character in the list `aeiou`. You can also define a range of characters to match using a hyphen. For example, `[a-z]` matches any character from `a` to `z`.
+
+Add a character class to match the digits `0` through `9` to your `dollarRegex` expression - remember the digit must come before the word `dollars`, and there should be a space between the digit and the word.
+
+# --hints--
+
+Your `dollarRegex` should use a character class.
+
+```js
+assert.match(dollarRegex.source, /\[.*\]/);
+```
+
+Your character class should be `0-9`.
+
+```js
+assert.match(dollarRegex.source, /\[0-9\]/);
+```
+
+Your `dollarRegex` should match `1 dollars`.
+
+```js
+assert.match('1 dollars', dollarRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+--fcc-editable-region--
+const dollarRegex = /dollars/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642208bc4d44701c6fd6f65e.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642208bc4d44701c6fd6f65e.md
new file mode 100644
index 00000000000..6cadb0b8709
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642208bc4d44701c6fd6f65e.md
@@ -0,0 +1,193 @@
+---
+id: 642208bc4d44701c6fd6f65e
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+The dollar value may be more than one digit. To match this, the `+` quantifier can be used - this matches one or more consecutive occurrence. For example, the regular expression `/a+/` matches one or more consecutive `a` characters.
+
+Update your regular expression to match one or more consecutive digits.
+
+# --hints--
+
+Your `dollarRegex` should use the `+` quantifier.
+
+```js
+assert.match(dollarRegex.source, /\+/);
+```
+
+Your `dollarRegex` should use the `+` quantifier on your `[0-9]` character class.
+
+```js
+assert.match(dollarRegex.source, /\[0-9\]\+/);
+```
+
+Your `dollarRegex` should match `100 dollars`.
+
+```js
+assert.match('100 dollars', dollarRegex);
+```
+
+Your `dollarRegex` should match `3 dollars`.
+
+```js
+assert.match('3 dollars', dollarRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+--fcc-editable-region--
+const dollarRegex = /[0-9] dollars/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220e8cb589f61e625bf453.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220e8cb589f61e625bf453.md
new file mode 100644
index 00000000000..9b6e7192541
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220e8cb589f61e625bf453.md
@@ -0,0 +1,215 @@
+---
+id: 64220e8cb589f61e625bf453
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Between your digits and your `dollars` text, you want to catch place values.
+
+Use the `|` token to allow `hundred`, `thousand`, `million`, or `billion` between your digits and `dollars`.
+
+# --hints--
+
+Your `dollarRegex` should use the `|` token.
+
+```js
+assert.match(dollarRegex.source, /\|/);
+```
+
+Your `dollarRegex` should have three `|` tokens.
+
+```js
+assert.lengthOf(dollarRegex.source.match(/\|/g), 3);
+```
+
+Your `dollarRegex` should use the `|` token to match `hundred`, `thousand`, `million`, or `billion`.
+
+```js
+const placeValues = dollarRegex.source.replace("[0-9]+ ", "").replace(" dollars", "").split('|');
+assert.include(placeValues, 'hundred');
+assert.include(placeValues, 'thousand');
+assert.include(placeValues, 'million');
+assert.include(placeValues, 'billion');
+```
+
+Your `dollarRegex` should match `1 hundred dollars`.
+
+```js
+assert.match('1 hundred dollars', dollarRegex);
+```
+
+Your `dollarRegex` should match `1 thousand dollars`.
+
+```js
+assert.match('1 thousand dollars', dollarRegex);
+```
+
+Your `dollarRegex` should match `1 million dollars`.
+
+```js
+assert.match('1 million dollars', dollarRegex);
+```
+
+Your `dollarRegex` should match `1 billion dollars`.
+
+```js
+assert.match('1 billion dollars', dollarRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+--fcc-editable-region--
+const dollarRegex = /[0-9]+ dollars/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220f22dff8151f751a53a7.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220f22dff8151f751a53a7.md
new file mode 100644
index 00000000000..d06112d99fc
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220f22dff8151f751a53a7.md
@@ -0,0 +1,187 @@
+---
+id: 64220f22dff8151f751a53a7
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+A capture group is a way to define a part of the expression that should be captured and saved for later reference. You can define a capture group by wrapping a part of your expression in parentheses. For example, `/h(i|ey) camper/` would match either `hi camper` or `hey camper`, and would capture `i` or `ey` in a group.
+
+Turn your place values into a capture group.
+
+# --hints--
+
+You should not change your `helpRegex` regular expression.
+
+```js
+assert.match(helpRegex.source, /please help|assist me/);
+```
+
+Your `dollarRegex` should use a capture group.
+
+```js
+assert.match(dollarRegex.source, /\(.*\)/)
+```
+
+Your `hundred|thousand|million|billion` pattern should be a capture group.
+
+```js
+assert.match(dollarRegex.source, /\(hundred\|thousand\|million\|billion\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+--fcc-editable-region--
+const dollarRegex = /[0-9]+ hundred|thousand|million|billion dollars/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220fb017c57d20612de8b8.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220fb017c57d20612de8b8.md
new file mode 100644
index 00000000000..3af8f66ca54
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220fb017c57d20612de8b8.md
@@ -0,0 +1,181 @@
+---
+id: 64220fb017c57d20612de8b8
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Now that you have your capture group, you can mark the entire pattern as an optional match. The `?` quantifier matches zero or one occurrence of the preceding character or group. For example, the regular expression `/colou?r/` matches both `color` and `colour`, because the `u` is optional.
+
+Mark your capture group as optional.
+
+# --hints--
+
+Your `dollarRegex` should use the `?` quantifier.
+
+```js
+assert.match(dollarRegex.source, /\?/);
+```
+
+Your `(hundred|thousand|million|billion)` capture group should be optional.
+
+```js
+assert.match(dollarRegex.source, /\(hundred\|thousand\|million\|billion\)\?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+--fcc-editable-region--
+const dollarRegex = /[0-9]+ (hundred|thousand|million|billion) dollars/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64221007887f38213fa57827.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64221007887f38213fa57827.md
new file mode 100644
index 00000000000..b1c681fe077
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64221007887f38213fa57827.md
@@ -0,0 +1,195 @@
+---
+id: 64221007887f38213fa57827
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+One last thing with this expression. You don't actually need the match value from your capture group, so you can turn it into a non-capturing group . This will allow you to group the characters together without preserving the result.
+
+To create a non-capturing group in a regular expression, you can add `?:` after the opening parenthesis of a group. For instance, `(?:a|b)` will match either `a` or `b`, but it will not capture the result.
+
+Update your regular expression to use a non-capturing group.
+
+# --hints--
+
+Your `dollarRegex` should use `?:`.
+
+```js
+assert.match(dollarRegex.source, /\?:/);
+```
+
+Your `dollarRegex` should use a non-capturing group.
+
+```js
+assert.match(dollarRegex.source, /\(\?:.*\)/);
+```
+
+Your `(hundred|thousand|million|billion)` should be a non-capturing group.
+
+```js
+assert.match(dollarRegex.source, /\(\?:hundred\|thousand\|million\|billion\)/);
+```
+
+Your `(hundred|thousand|million|billion)` group should still be optional.
+
+```js
+assert.match(dollarRegex.source, /\(\?:hundred\|thousand\|million\|billion\)\?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+--fcc-editable-region--
+const dollarRegex = /[0-9]+ (hundred|thousand|million|billion)? dollars/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642213bf8d38b0227ed6ab0b.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642213bf8d38b0227ed6ab0b.md
new file mode 100644
index 00000000000..ffff341569f
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642213bf8d38b0227ed6ab0b.md
@@ -0,0 +1,192 @@
+---
+id: 642213bf8d38b0227ed6ab0b
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Your next regular expression will look for strings like `free money`. Start by declaring a `freeRegex` variable and assigning it a regular expression that will match the string `free money`. Remember to make it case-insensitive.
+
+# --hints--
+
+You should declare a `freeRegex` variable using `const`.
+
+```js
+assert.match(code, /const\s*freeRegex\s*=/);
+```
+
+Your `freeRegex` variable should be a regular expression.
+
+```js
+assert.instanceOf(freeRegex, RegExp);
+```
+
+Your `freeRegex` should match `free money`.
+
+```js
+assert.match('free money', freeRegex);
+```
+
+Your `freeRegex` should be case-insensitive.
+
+```js
+assert.include(freeRegex.flags, 'i');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64233060735ddf06451c5c8c.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64233060735ddf06451c5c8c.md
new file mode 100644
index 00000000000..1ba309995ce
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64233060735ddf06451c5c8c.md
@@ -0,0 +1,186 @@
+---
+id: 64233060735ddf06451c5c8c
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add your new regular expression to your `denyList` array so you can test it.
+
+# --hints--
+
+Your `denyList` array should include your `freeRegex` variable.
+
+```js
+assert.deepInclude(denyList, freeRegex);
+```
+
+Your `denyList` array should include your `dollarRegex` variable.
+
+```js
+assert.deepInclude(denyList, dollarRegex);
+```
+
+Your `denyList` array should include your `helpRegex` variable.
+
+```js
+assert.deepInclude(denyList, helpRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+const freeRegex = /free money/i;
+
+--fcc-editable-region--
+const denyList = [helpRegex, dollarRegex];
+--fcc-editable-region--
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64233094a1293c079b5b0996.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64233094a1293c079b5b0996.md
new file mode 100644
index 00000000000..c5af62cc064
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64233094a1293c079b5b0996.md
@@ -0,0 +1,200 @@
+---
+id: 64233094a1293c079b5b0996
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Spam messages often use numbers instead of letters to bypass filters. Your regular expression should catch these.
+
+Replace the `e` characters in your regular expression with character classes that match `e` and `3`.
+
+# --hints--
+
+Your `freeRegex` should use a character class.
+
+```js
+assert.match(freeRegex.source, /\[.*\]/);
+```
+
+Your `freeRegex` should use a character class to match `e` and `3`.
+
+```js
+assert.match(freeRegex.source, /\[(e3|3e)\]/);
+```
+
+Your `freeRegex` should use three character classes to match `e` and `3`.
+
+```js
+assert.lengthOf(freeRegex.source.match(/\[(e3|3e)\]/g), 3);
+```
+
+Your `freeRegex` should match `free money`.
+
+```js
+assert.match('free money', freeRegex);
+```
+
+Your `freeRegex` should match `fr33 mon3y`.
+
+```js
+assert.match('fr33 mon3y', freeRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+--fcc-editable-region--
+const freeRegex = /free money/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex, freeRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423322e71f8d108608005cb.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423322e71f8d108608005cb.md
new file mode 100644
index 00000000000..4021e82456c
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423322e71f8d108608005cb.md
@@ -0,0 +1,186 @@
+---
+id: 6423322e71f8d108608005cb
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Now update your `o` character to match `o` and `0` (the digit).
+
+# --hints--
+
+Your `freeRegex` should use a character class to match `o` and `0`.
+
+```js
+assert.match(freeRegex.source, /\[(o0|0o)\]/);
+```
+
+Your `freeRegex` should match `free money`.
+
+```js
+assert.match('free money', freeRegex);
+```
+
+Your `freeRegex` should match `fr33 m0n3y`.
+
+```js
+assert.match('fr33 m0n3y', freeRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+--fcc-editable-region--
+const freeRegex = /fr[e3][e3] mon[e3]y/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex, freeRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423331f0527840934183aba.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423331f0527840934183aba.md
new file mode 100644
index 00000000000..ccb25a40b92
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423331f0527840934183aba.md
@@ -0,0 +1,183 @@
+---
+id: 6423331f0527840934183aba
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Your regex should match whole words, not partial words. That is, you do not want to match `hands-free money management`.
+
+To do this, start by checking for spaces before and after your pattern. You can do this by using the meta character `\s`, which will match spaces, tabs, and line breaks.
+
+# --hints--
+
+Your `freeRegex` should use the `\s` token.
+
+```js
+assert.match(freeRegex.source, /\s/);
+```
+
+Your `freeRegex` should look for spaces at the beginning and end of your pattern.
+
+```js
+assert.isTrue(freeRegex.source.startsWith('\\s'));
+assert.isTrue(freeRegex.source.endsWith('\\s'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+--fcc-editable-region--
+const freeRegex = /fr[e3][e3] m[o0]n[e3]y/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex, freeRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642335220b7d830a69eb59fb.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642335220b7d830a69eb59fb.md
new file mode 100644
index 00000000000..8e87903b371
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642335220b7d830a69eb59fb.md
@@ -0,0 +1,202 @@
+---
+id: 642335220b7d830a69eb59fb
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+If you try entering the message `free money`, you'll notice it doesn't match your expression! This is because `\s` doesn't match the beginning or end of the text.
+
+To match the beginning of the text, you can use the `^` anchor. This asserts that your pattern match starts at the beginning of the full string.
+
+Replace your first `\s` character with a non-capturing group that matches `\s` or `^`.
+
+# --hints--
+
+Your `freeRegex` should use a non-capturing group.
+
+```js
+assert.match(freeRegex.source, /\(\?:/);
+```
+
+Your `freeRegex` should use a non-capturing group to match `\s` or `^`.
+
+```js
+assert.match(freeRegex.source, /\(\?:(\^\|\\s|\\s\|\^)\)/);
+```
+
+Your `freeRegex` should match `it's free money time`.
+
+```js
+assert.match("it's free money time", freeRegex);
+```
+
+Your `freeRegex` should match `free money time`.
+
+```js
+assert.match('free money time', freeRegex);
+```
+
+Your `freeRegex` should not match `hands-free money time`.
+
+```js
+assert.notMatch('hands-free money', freeRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+--fcc-editable-region--
+const freeRegex = /\sfr[e3][e3] m[o0]n[e3]y\s/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex, freeRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642335d232d7690b2d67dbaf.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642335d232d7690b2d67dbaf.md
new file mode 100644
index 00000000000..5ae27ea1ee2
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642335d232d7690b2d67dbaf.md
@@ -0,0 +1,220 @@
+---
+id: 642335d232d7690b2d67dbaf
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+You still aren't matching `free money` yet, because you need to match the end of the string as well.
+
+Like the `^` anchor, you can use the `$` anchor to match the end of the string.
+
+Update your regular expression to match either the end of the string or a space, like you did for the beginning of the string.
+
+# --hints--
+
+Your `freeRegex` should use a second non-capturing group.
+
+```js
+assert.lengthOf(freeRegex.source.match(/\(\?:/g), 2);
+```
+
+Your `freeRegex` should use a non-capturing group to match `\s` or `$`.
+
+```js
+assert.match(freeRegex.source, /\(\?:(\$\|\\s|\\s\|\$)\)/);
+```
+
+Your `freeRegex` should match `it's free money time`.
+
+```js
+assert.match("it's free money time", freeRegex);
+```
+
+Your `freeRegex` should match `free money time`.
+
+```js
+assert.match('free money time', freeRegex);
+```
+
+Your `freeRegex` should match `it's free money`.
+
+```js
+assert.match("it's free money", freeRegex);
+```
+
+Your `freeRegex` should match `free money`.
+
+```js
+assert.match('free money', freeRegex);
+```
+
+Your `freeRegex` should not match `hands-free money time`.
+
+```js
+assert.notMatch('hands-free money', freeRegex);
+```
+
+Your `freeRegex` should not match `free money-management`.
+
+```js
+assert.notMatch('free money-management', freeRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+--fcc-editable-region--
+const freeRegex = /(?:^|\s)fr[e3][e3] m[o0]n[e3]y\s/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex, freeRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64233d08f234a310e73f9496.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64233d08f234a310e73f9496.md
new file mode 100644
index 00000000000..ae37726dd1a
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64233d08f234a310e73f9496.md
@@ -0,0 +1,219 @@
+---
+id: 64233d08f234a310e73f9496
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+Your next regular expression will match strings like `stock alert`. Declare a `stockRegex` variable and assign it a regular expression that will match the string `stock alert`. Remember to make it case insensitive.
+
+Add it to your `denyList` array as well.
+
+# --hints--
+
+You should use `const` to declare your `stockRegex` variable.
+
+```js
+assert.match(code, /const\s+stockRegex\s*=/);
+```
+
+Your `stockRegex` variable should be assigned a regular expression.
+
+```js
+assert.instanceOf(stockRegex, RegExp);
+```
+
+Your `stockRegex` should match `stock alert`.
+
+```js
+assert.match('stock alert', stockRegex);
+```
+
+Your `stockRegex` should be case-insensitive.
+
+```js
+assert.include(stockRegex.flags, 'i');
+```
+
+Your `denyList` array should contain `stockRegex`.
+
+```js
+assert.deepInclude(denyList, stockRegex);
+```
+
+Your `denyList` array should contain `freeRegex`.
+
+```js
+assert.deepInclude(denyList, freeRegex);
+```
+
+Your `denyList` array should contain `dollarRegex`.
+
+```js
+assert.deepInclude(denyList, dollarRegex);
+```
+
+Your `denyList` array should contain `helpRegex`.
+
+```js
+assert.deepInclude(denyList, helpRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+const freeRegex = /(?:^|\s)fr[e3][e3] m[o0]n[e3]y(?:$|\s)/i;
+--fcc-editable-region--
+
+
+const denyList = [helpRegex, dollarRegex, freeRegex];
+--fcc-editable-region--
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642344dc9390c712080432c7.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642344dc9390c712080432c7.md
new file mode 100644
index 00000000000..aa2fb10cb37
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642344dc9390c712080432c7.md
@@ -0,0 +1,193 @@
+---
+id: 642344dc9390c712080432c7
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+Like your `freeRegex`, update your `stockRegex` to replace the `e` and `o` characters with character classes to match the letter and the corresponding number.
+
+# --hints--
+
+Your `stockRegex` should use a character class to match the letter `e` and the number `3`.
+
+```js
+assert.match(stockRegex.source, /\[(e3|3e)\]/);
+```
+
+Your `stockRegex` should use a character class to match the letter `o` and the number `0`.
+
+```js
+assert.match(stockRegex.source, /\[(o0|0o)\]/);
+```
+
+Your `stockRegex` should match `stock alert`.
+
+```js
+assert.match('stock alert', stockRegex);
+```
+
+Your `stockRegex` should match `st0ck al3rt`.
+
+```js
+assert.match('st0ck al3rt', stockRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+const freeRegex = /(?:^|\s)fr[e3][e3] m[o0]n[e3]y(?:$|\s)/i;
+--fcc-editable-region--
+const stockRegex = /stock alert/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex, freeRegex, stockRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64234598ef08dd13114edae5.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64234598ef08dd13114edae5.md
new file mode 100644
index 00000000000..49c7b6696ba
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64234598ef08dd13114edae5.md
@@ -0,0 +1,193 @@
+---
+id: 64234598ef08dd13114edae5
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+Next update your `s` and `t` characters to also match `5` and `7` respectively.
+
+# --hints--
+
+Your `stockRegex` should use a character class to match the letter `s` and the number `5`.
+
+```js
+assert.match(stockRegex.source, /\[(s5|5s)\]/);
+```
+
+Your `stockRegex` should use a character class to match the letter `t` and the number `7`.
+
+```js
+assert.match(stockRegex.source, /\[(t7|7t)\]/);
+```
+
+Your `stockRegex` should match `stock alert`.
+
+```js
+assert.match('stock alert', stockRegex);
+```
+
+Your `stockRegex` should match `570ck al3r7`.
+
+```js
+assert.match('570ck al3r7', stockRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+const freeRegex = /(?:^|\s)fr[e3][e3] m[o0]n[e3]y(?:$|\s)/i;
+--fcc-editable-region--
+const stockRegex = /st[o0]ck al[e3]rt/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex, freeRegex, stockRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423462975f33b14056583de.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423462975f33b14056583de.md
new file mode 100644
index 00000000000..e195aa26eb1
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423462975f33b14056583de.md
@@ -0,0 +1,199 @@
+---
+id: 6423462975f33b14056583de
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+Character classes can take more than two characters. Replace your `a` character with a character class that matches `a`, `@`, and `4`.
+
+# --hints--
+
+Your `stockRegex` should use a character class to match `a`, `@`, and `4`.
+
+```js
+assert.match(stockRegex.source, /\[(a@4|a4@|4@a|4a@|@a4|@4a)]/);
+```
+
+Your `stockRegex` should match `stock alert`.
+
+```js
+assert.match('stock alert', stockRegex);
+```
+
+Your `stockRegex` should match `stock @lert`.
+
+```js
+assert.match('stock @lert', stockRegex);
+```
+
+Your `stockRegex` should match `stock 4lert`.
+
+```js
+assert.match('stock 4lert', stockRegex);
+```
+
+Your `stockRegex` should match `570ck 4l3r7`.
+
+```js
+assert.match('570ck 4l3r7', stockRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+const freeRegex = /(?:^|\s)fr[e3][e3] m[o0]n[e3]y(?:$|\s)/i;
+--fcc-editable-region--
+const stockRegex = /[s5][t7][o0]ck al[e3]r[t7]/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex, freeRegex, stockRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423472aeed932150e8984b6.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423472aeed932150e8984b6.md
new file mode 100644
index 00000000000..109cc7bd27d
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423472aeed932150e8984b6.md
@@ -0,0 +1,199 @@
+---
+id: 6423472aeed932150e8984b6
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Using the same syntax, update `c` to match `c`, `{`, `[`, and `(`.
+
+# --hints--
+
+Your `stockRegex` should use a character class to match `c`, `{`, `[`, and `(`.
+
+```js
+assert.match(stockRegex.source, /\[(c\{\[\(|\{c\[\(|\[c\{\(|c\[\{\(|\{\[c\(|\[\{c\(|\[\{\(c|\{\[\(c|\(\[\{c|\[\(\{c|\{\(\[c|\(\{\[c|\(c\[\{|c\(\[\{|\[\(c\{|\(\[c\{|c\[\(\{|\[c\(\{|\{c\(\[|c\{\(\[|\(\{c\[|\{\(c\[|c\(\{\[|\(c\{\[)\]/);
+```
+
+Your `stockRegex` should match `stock alert`.
+
+```js
+assert.match('stock alert', stockRegex);
+```
+
+Your `stockRegex` should match `570(k 4l3r7`.
+
+```js
+assert.match('570(k 4l3r7', stockRegex);
+```
+
+Your `stockRegex` should match `sto{k alert`.
+
+```js
+assert.match('sto{k alert', stockRegex);
+```
+
+Your `stockRegex` should match `sto[k alert`.
+
+```js
+assert.match('sto[k alert', stockRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+const freeRegex = /(?:^|\s)fr[e3][e3] m[o0]n[e3]y(?:$|\s)/i;
+--fcc-editable-region--
+const stockRegex = /[s5][t7][o0]ck [a@4]l[e3]r[t7]/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex, freeRegex, stockRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64234797d84734163088961a.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64234797d84734163088961a.md
new file mode 100644
index 00000000000..162eaba6781
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64234797d84734163088961a.md
@@ -0,0 +1,229 @@
+---
+id: 64234797d84734163088961a
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Finally, allow your regex to match whole words (like you did with `freeRegex`).
+
+# --hints--
+
+Your `stockRegex` should use a non-capturing group.
+
+```js
+assert.match(stockRegex.source, /\(\?:/);
+```
+
+Your `stockRegex` should use a non-capturing group to match `\s` or `^`.
+
+```js
+assert.match(stockRegex.source, /\(\?:(\^\|\\s|\\s\|\^)\)/);
+```
+
+Your `stockRegex` should use a second non-capturing group.
+
+```js
+assert.lengthOf(stockRegex.source.match(/\(\?:/g), 2);
+```
+
+Your `stockRegex` should use a non-capturing group to match `\s` or `$`.
+
+```js
+assert.match(stockRegex.source, /\(\?:(\$\|\\s|\\s\|\$)\)/);
+```
+
+Your `stockRegex` should match `it's stock alert time`.
+
+```js
+assert.match("it's stock alert time", stockRegex);
+```
+
+Your `stockRegex` should match `stock alert time`.
+
+```js
+assert.match('stock alert time', stockRegex);
+```
+
+Your `stockRegex` should match `it's stock alert`.
+
+```js
+assert.match("it's stock alert", stockRegex);
+```
+
+Your `stockRegex` should match `stock alert`.
+
+```js
+assert.match('stock alert', stockRegex);
+```
+
+Your `stockRegex` should not match `hands-stock alert time`.
+
+```js
+assert.notMatch('hands-stock alert', stockRegex);
+```
+
+Your `stockRegex` should not match `stock alert-management`.
+
+```js
+assert.notMatch('stock alert-management', stockRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+const freeRegex = /(?:^|\s)fr[e3][e3] m[o0]n[e3]y(?:$|\s)/i;
+--fcc-editable-region--
+const stockRegex = /[s5][t7][o0][c{[(]k [a@4]l[e3]r[t7]/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex, freeRegex, stockRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423491485db5e1786dd6434.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423491485db5e1786dd6434.md
new file mode 100644
index 00000000000..dfa5e758a73
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6423491485db5e1786dd6434.md
@@ -0,0 +1,224 @@
+---
+id: 6423491485db5e1786dd6434
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Your final regular expression will look for strings like `dear friend`. Declare a `dearRegex` and assign it a regular expression that will match the string `dear friend`. Remember to make it case insensitive, and add it to your `denyList` array.
+
+# --hints--
+
+You should use `const` to declare your `dearRegex` variable.
+
+```js
+assert.match(code, /const\s+dearRegex\s*=/);
+```
+
+Your `dearRegex` variable should be assigned a regular expression.
+
+```js
+assert.instanceOf(dearRegex, RegExp);
+```
+
+Your `dearRegex` should match `dear friend`.
+
+```js
+assert.match('dear friend', dearRegex);
+```
+
+Your `dearRegex` should be case-insensitive.
+
+```js
+assert.include(dearRegex.flags, 'i');
+```
+
+Your `denyList` array should contain `dearRegex`.
+
+```js
+assert.deepInclude(denyList, dearRegex);
+```
+
+Your `denyList` array should contain `stockRegex`.
+
+```js
+assert.deepInclude(denyList, stockRegex);
+```
+
+Your `denyList` array should contain `freeRegex`.
+
+```js
+assert.deepInclude(denyList, freeRegex);
+```
+
+Your `denyList` array should contain `dollarRegex`.
+
+```js
+assert.deepInclude(denyList, dollarRegex);
+```
+
+Your `denyList` array should contain `helpRegex`.
+
+```js
+assert.deepInclude(denyList, helpRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+const freeRegex = /(?:^|\s)fr[e3][e3] m[o0]n[e3]y(?:$|\s)/i;
+const stockRegex = /(?:^|\s)[s5][t7][o0][c{[(]k [a@4]l[e3]r[t7](?:$|\s)/i;
+--fcc-editable-region--
+
+
+const denyList = [helpRegex, dollarRegex, freeRegex, stockRegex];
+--fcc-editable-region--
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642349b5b7bae31af21cd5f8.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642349b5b7bae31af21cd5f8.md
new file mode 100644
index 00000000000..fc71b4dac4d
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642349b5b7bae31af21cd5f8.md
@@ -0,0 +1,416 @@
+---
+id: 642349b5b7bae31af21cd5f8
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+To put everything you have learned together, update your `dearRegex` to map the vowels to the corresponding numbers (note that `i` should match `1`, and also match the pipe symbol `|`), and to match whole words.
+
+With that, your spam filter project is complete.
+
+# --hints--
+
+Your `dearRegex` should use a character class to match `e` or `3`.
+
+```js
+assert.match(dearRegex.source, /\[(e3|3e)\]/);
+```
+
+Your `dearRegex` should use a character class to match `a`, `@`, or `4`.
+
+```js
+assert.match(dearRegex.source, /\[(a@4|a4@|4a@|4@a|@a4|@4a)\]/);
+```
+
+Your `dearRegex` should use a character class to match `i`, `1`, or `|`.
+
+```js
+assert.match(dearRegex.source, /\[(i1\||i\|1|1i\||1\|i|\|1i|\|i1)\]/);
+```
+
+Your `dearRegex` should use a non-capturing group.
+
+```js
+assert.match(dearRegex.source, /\(\?:/);
+```
+
+Your `dearRegex` should use a non-capturing group to match `\s` or `^`.
+
+```js
+assert.match(dearRegex.source, /\(\?:(\^\|\\s|\\s\|\^)\)/);
+```
+
+Your `dearRegex` should use a second non-capturing group.
+
+```js
+assert.lengthOf(dearRegex.source.match(/\(\?:/g), 2);
+```
+
+Your `dearRegex` should use a non-capturing group to match `\s` or `$`.
+
+```js
+assert.match(dearRegex.source, /\(\?:(\$\|\\s|\\s\|\$)\)/);
+```
+
+Your `dearRegex` should match `dear friend`.
+
+```js
+assert.match('dear friend', dearRegex);
+```
+
+Your `dearRegex` should match `d34r fr13nd`.
+
+```js
+assert.match('d34r fr13nd', dearRegex);
+```
+
+Your `dearRegex` should match `d3@r fr|3nd`.
+
+```js
+assert.match('d3@r fr|3nd', dearRegex);
+```
+
+Your `dearRegex` should match `my dear friend Naomi`.
+
+```js
+assert.match('my dear friend Naomi', dearRegex);
+```
+
+Your `dearRegex` should match `dear friend Naomi`
+
+```js
+assert.match('dear friend Naomi', dearRegex);
+```
+
+Your `dearRegex` should match `my dear friend`.
+
+```js
+assert.match('my dear friend', dearRegex);
+```
+
+Your `dearRegex` should not match `non-dear friend`.
+
+```js
+assert.notMatch('non-dear friend', dearRegex);
+```
+
+Your `dearRegex` should not match `dear friend-o`.
+
+```js
+assert.notMatch('dear friend-o', dearRegex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+const freeRegex = /(?:^|\s)fr[e3][e3] m[o0]n[e3]y(?:$|\s)/i;
+const stockRegex = /(?:^|\s)[s5][t7][o0][c{[(]k [a@4]l[e3]r[t7](?:$|\s)/i;
+--fcc-editable-region--
+const dearRegex = /dear friend/i;
+--fcc-editable-region--
+
+const denyList = [helpRegex, dollarRegex, freeRegex, stockRegex, dearRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
+
+# --solutions--
+
+```html
+
+
+
+ Learn Regular Expressions by Building a Spam Filter
+
+ Is this Spam?
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+ Message:
+
+
+ Check message
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --golden-yellow: #fecc4c;
+ --yellow: #ffcc4c;
+ --gold: #feac32;
+ --orange: #ffac33;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+ color: var(--light-grey);
+}
+
+body,
+#message-input:placeholder-shown {
+ text-align: center;
+}
+
+textarea {
+ max-width: 90%;
+}
+
+.main-text {
+ margin: 25px 0;
+}
+
+.title {
+ font-size: 2.5rem;
+}
+
+.description {
+ margin-top: 15px;
+ font-size: 1.4rem;
+}
+
+.message-label {
+ display: block;
+ margin-bottom: 20px;
+ font-size: 1.5rem;
+}
+
+#message-input:placeholder-shown,
+textarea {
+ font-size: 1.1rem;
+}
+
+.btn {
+ display: block;
+ cursor: pointer;
+ width: 200px;
+ margin: 10px auto;
+ color: var(--dark-grey);
+ background-color: var(--gold);
+ background-image: linear-gradient(var(--golden-yellow), var(--orange));
+ border-color: var(--gold);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(var(--yellow), var(--dark-orange));
+}
+
+#result {
+ font-size: 2rem;
+ margin: 20px 0;
+}
+
+.footer {
+ margin-top: 10px;
+}
+```
+
+```js
+const messageInput = document.getElementById("message-input");
+const result = document.getElementById("result");
+const checkMessageButton = document.getElementById("check-message-btn");
+
+const helpRegex = /please help|assist me/i;
+const dollarRegex = /[0-9]+ (?:hundred|thousand|million|billion)? dollars/i;
+const freeRegex = /(?:^|\s)fr[e3][e3] m[o0]n[e3]y(?:$|\s)/i;
+const stockRegex = /(?:^|\s)[s5][t7][o0][c{[(]k [a@4]l[e3]r[t7](?:$|\s)/i;
+const dearRegex = /(?:^|\s)d[e3][a@4]r fr[i1|][e3]nd(?:$|\s)/i;
+
+const denyList = [helpRegex, dollarRegex, freeRegex, stockRegex, dearRegex];
+
+const isSpam = (msg) => denyList.some((regex) => regex.test(msg));
+
+checkMessageButton.addEventListener("click", () => {
+ if (messageInput.value === "") {
+ alert("Please enter a message.");
+ return;
+ }
+
+ result.textContent = isSpam(messageInput.value)
+ ? "Oh no! This looks like a spam message."
+ : "This message does not seem to contain any spam.";
+ messageInput.value = "";
+});
+```
diff --git a/curriculum/challenges/swahili/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md b/curriculum/challenges/swahili/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md
new file mode 100644
index 00000000000..39441cd555d
--- /dev/null
+++ b/curriculum/challenges/swahili/16-the-odin-project/top-build-a-recipe-project/top-build-a-recipe-project.md
@@ -0,0 +1,204 @@
+---
+id: 6391d1a4f7ac71efd0621380
+title: Build a Recipe Page Project
+challengeType: 14
+dashedName: top-build-a-recipe-project
+---
+
+# --description--
+
+The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
+
+**User Stories:**
+
+1. Your recipe page should contain a `DOCTYPE` tag.
+1. Your recipe page should include an `html` element with a `head` and `body` element as children.
+1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
+1. You should see an `h1` element that has the text `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. 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`.
+1. You should see an ordered list with a couple of steps needed to complete the recipe.
+1. Under the steps there should be an `h2` element with the text `More Recipes`
+1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
+1. These anchor elements should have `href` attribute with the value set to `#`
+
+# --hints--
+
+You should have a `DOCTYPE` tag.
+
+```js
+assert(code.match(//gi));
+```
+
+You should have a `html` element with `head` and `body` element.
+
+```js
+const html = document.querySelectorAll('html')[0];
+const head = document.querySelectorAll('html > head')[0];
+const body = document.querySelectorAll('html > body')[0];
+
+assert(html && head && body);
+```
+
+You should have a `title` element within the `head` element that contains the text `The Odin Recipes`.
+
+```js
+assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
+```
+
+You should have a `h1` element within your `body` element that contains the text `Creamy Chocolate Fudge`.
+
+```js
+assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
+```
+
+You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has a fitting text.
+
+```js
+const img = document.querySelectorAll('IMG')[0];
+
+assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
+```
+
+You should have an `h2` element with the text `Description`.
+
+```js
+const h2 = document.querySelectorAll('H2')[0];
+
+assert(h2.innerText == 'Description');
+```
+
+You should have at least two `p` elements describing the recipe.
+
+```js
+const paragraphs = document.querySelectorAll('P');
+
+assert(paragraphs.length > 1);
+```
+
+You should have an `h2` element with the text `Ingredients`.
+
+```js
+const h2 = document.querySelectorAll('H2')[1];
+
+assert(h2.innerText == 'Ingredients');
+```
+
+You should have an unordered list `` with some ingredients as the list items ``.
+
+```js
+const unorderedList = document.querySelectorAll('UL')[0];
+const listItems = document.querySelectorAll('UL > LI');
+
+assert(unorderedList && listItems && listItems.length > 1);
+```
+
+You should have an `h2` element with the text `Steps`.
+
+```js
+const h2 = document.querySelectorAll('H2')[2];
+
+assert(h2.innerText == 'Steps');
+```
+
+You should have a `` with the the steps as the list items ``.
+
+```js
+const orderedList = document.querySelectorAll('OL')[0];
+const listItems = document.querySelectorAll('OL > LI');
+
+assert(orderedList && listItems && listItems.length > 1);
+```
+
+You should have an `h2` element with the text `More Recipes`.
+
+```js
+const h2 = document.querySelectorAll('H2')[3];
+
+assert(h2.innerText == 'More Recipes');
+```
+
+You should have an unordered list ` 
+```
+
+People with visual impairments rely on screen readers to convert web content to an audio interface. They won't get information if it's only presented visually. For images, screen readers can access the `alt` attribute and read its contents to deliver key information.
+
+Good `alt` text provides the reader a brief description of the image. You should always include an `alt` attribute on your image. Per HTML5 specification, this is now considered mandatory.
+
+# --instructions--
+
+Camper Cat happens to be both a coding ninja and an actual ninja, who is building a website to share his knowledge. The profile picture he wants to use shows his skills and should be appreciated by all site visitors. Add an `alt` attribute in the `img` tag, that explains Camper Cat is doing karate. (The image `src` doesn't link to an actual file, so you should see the `alt` text in the display.)
+
+# --hints--
+
+Your `img` tag should have an `alt` attribute and it should not be empty.
+
+```js
+assert($('img').attr('alt'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+# --solutions--
+
+```html
+
+ 
+ 
+```
+
+Background images usually fall under the 'decorative' label as well. However, they are typically applied with CSS rules, and therefore not part of the markup screen readers process.
+
+**Note:** For images with a caption, you may still want to include `alt` text since it helps search engines catalog the image's content.
+
+# --instructions--
+
+Camper Cat has coded a skeleton page for the blog part of his website. He's planning to add a visual break between his two articles with a decorative image of a samurai sword. Add an `alt` attribute to the `img` tag and set it to an empty string. (Note that the image `src` doesn't link to an actual file - don't worry that there are no swords showing in the display.)
+
+# --hints--
+
+Your `img` tag should have an `alt` attribute.
+
+```js
+assert(!($('img').attr('alt') == undefined));
+```
+
+The `alt` attribute should be set to an empty string.
+
+```js
+assert($('img').attr('alt') == '');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+