diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
index 32fee899c59..4d22d637db3 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
@@ -9,23 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript
# --description--
-من الرائع أنه يمكننا توليد أرقام عشرية عشوائية، ولكن من المفيد أكثر إذا استخدمنا ذلك لتوليد أعداد عشوائية صحيحة.
+You can generate random decimal numbers with `Math.random()`, but sometimes you need to generate random whole numbers. The following process will give you a random whole number less than `20`:
-
استخدم Math.random() لإنشاء رَقَم عشري عشوائي.
ضاعف هذا الرَّقَم العشري العشوائي في 20.
استخدم الوظيفة أخر، Math.floor() لتقريب الرَّقْم إلى أقرب رَقَم صحيح.
+1. Use `Math.random()` to generate a random decimal number.
+2. Multiply that random decimal number by `20`.
+3. Use `Math.floor()` to round this number down to its nearest whole number.
-تذكر ألا يمكن `Math.random()` أن يعيد `1` و لأنك تقريب لأقل رَقْم، من المستحيل في الواقع الحصول على `20`. ستعطينا هذه التقنية رَقَما صحيحا بين `0` و `19`.
+Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`.
-بتجميع كل شيء معًا، هذا هو الكود الخاص بنا:
+Putting everything together, this is what your code looks like:
```js
Math.floor(Math.random() * 20);
```
-نحن نستدعي `Math.random()` ثم نضرب النتيجة في 20، ثم نمرر القيمة إلى وظيفة `Math.floor()` لتقريب القيمة إلى أقرب عدد صحيح.
+You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number.
# --instructions--
-استخدم هذه التقنية لإنشاء وإعادة عدد صحيح عشوائي بين `0` و `9`.
+Use this technique to generate and return a random whole number in the range from `0` to `9`.
# --hints--
@@ -47,7 +49,7 @@ assert(
assert(code.match(/Math.random/g).length >= 1);
```
-عليك ضرب نتيجة `Math.random` في 10 لجعلها رقما بين صفر و تسعة.
+You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine.
```js
assert(
@@ -74,9 +76,6 @@ assert(code.match(/Math.floor/g).length >= 1);
```js
function randomWholeNum() {
-
- // Only change code below this line
-
return Math.random();
}
```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
index 95344ace352..b34f2f2875a 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
@@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range
# --description--
-بدلاً من إنشاء رَقَم صحيح عشوائي بين صفر ورَقَم أخر معين، كما فعلنا من قبل، يمكننا إنشاء رَقَم صحيح عشوائي يقع ضمن نطاق رَقَمين محددين.
+You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range.
-لفعل ذلك، سنحدد الحد الأدنى للرَقْم `min` والحد الأقصى `max`.
+You'll call your minimum number `min` and your maximum number `max`.
-هذه هي الصيغة التي سنستخدمها. خذ لحظة لقراءتها ومحاولة فهم ما يفعله هذا الكود:
+This formula gives a random whole number in the range from `min` to `max`. خذ لحظة لقراءتها ومحاولة فهم ما يفعله هذا الكود:
```js
Math.floor(Math.random() * (max - min + 1)) + min
@@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min
# --instructions--
-أنشئ وظيفة (function) تسمى `randomRange` التي تأخذ نطاق `myMin` و `myMax` وترجع رَقَماً صحيحاً عشوائياً أكبر من أو يساوي `myMax`، و أقل من أو يساوي `myMin`، بشمول الاثنين.
+Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`.
# --hints--
@@ -87,9 +87,7 @@ for(var i = 0; i < 100; i++) {
```js
function randomRange(myMin, myMax) {
- // Only change code below this line
return 0;
- // Only change code above this line
}
```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
new file mode 100644
index 00000000000..9afdde2368a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
@@ -0,0 +1,182 @@
+---
+id: 641cd18eb67c661d8a9e11f3
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+To begin the project, use the `.getElementById()` method to retrieve the `#message-input`, `#result`, and `#check-message-btn` elements from the HTML document, and assign them to the variables `messageInput`, `result`, and `checkMessageButton`, respectively.
+
+# --hints--
+
+You should use `const` to declare a `messageInput` variable.
+
+```js
+assert.match(code, /const\s+messageInput\s*=/);
+```
+
+Your `messageInput` variable should have the value of `document.getElementById('message-input')`.
+
+```js
+assert.deepEqual(messageInput, document.getElementById('message-input'));
+```
+
+You should use `const` to declare a `result` variable.
+
+```js
+assert.match(code, /const\s+result\s*=/);
+```
+
+Your `result` variable should have the value of `document.getElementById('result')`.
+
+```js
+assert.deepEqual(result, document.getElementById('result'));
+```
+
+You should use `const` to declare a `checkMessageButton` variable.
+
+```js
+assert.match(code, /const\s+checkMessageButton\s*=/);
+```
+
+Your `checkMessageButton` variable should have the value of `document.getElementById('check-message-btn')`.
+
+```js
+assert.deepEqual(checkMessageButton, document.getElementById('check-message-btn'));
+```
+
+# --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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md
new file mode 100644
index 00000000000..a4040bef0ab
--- /dev/null
+++ b/curriculum/challenges/arabic/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 delcare 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f6f59d665615c9e94d8a.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f98f4999d1179ce37cb4.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642205fa6376c818f78bb24e.md b/curriculum/challenges/arabic/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/arabic/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206e054eef81b5e3092ed.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642208bc4d44701c6fd6f65e.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220e8cb589f61e625bf453.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220f22dff8151f751a53a7.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220fb017c57d20612de8b8.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64221007887f38213fa57827.md b/curriculum/challenges/arabic/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/arabic/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/arabic/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642213bf8d38b0227ed6ab0b.md b/curriculum/challenges/arabic/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/arabic/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.
+
+1. Use `Math.random()` to generate a random decimal number.
+2. Multiply that random decimal number by `20`.
+3. Use `Math.floor()` to round this number down to its nearest whole number.
-記住 `Math.random()` 永遠不會返回 `1`。同時因爲我們是在向下取整，所以最終我們獲得的結果不可能有 `20`。 這確保了我們獲得了一個在 `0` 到 `19` 之間的整數。
+Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`.
-把操作連綴起來，代碼類似於下面：
+Putting everything together, this is what your code looks like:
```js
Math.floor(Math.random() * 20);
```
-我們先調用 `Math.random()`，把它的結果乘以 20，然後把上一步的結果傳給 `Math.floor()`，最終通過向下取整獲得最近的整數。
+You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number.
# --instructions--
-使用這個方法生成並返回 `0` 和 `9` 之間的隨機整數。
+Use this technique to generate and return a random whole number in the range from `0` to `9`.
# --hints--
@@ -47,7 +49,7 @@ assert(
assert(code.match(/Math.random/g).length >= 1);
```
-應該將 `Math.random` 的結果乘以 10，以生成 0 到 9 之間的隨機數。
+You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine.
```js
assert(
@@ -74,9 +76,6 @@ assert(code.match(/Math.floor/g).length >= 1);
```js
function randomWholeNum() {
-
- // Only change code below this line
-
return Math.random();
}
```
diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
index 0ed3e89812a..8112063e803 100644
--- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
+++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
@@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range
# --description--
-我們之前生成的隨機數是在 0 到某個數之間，現在我們要生成的隨機數是在兩個指定的數之間。
+You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range.
-我們需要定義一個最小值 `min` 和一個最大值 `max`。
+You'll call your minimum number `min` and your maximum number `max`.
-下面是我們將要使用的方法， 仔細看看並嘗試理解這行代碼到底在幹嘛：
+This formula gives a random whole number in the range from `min` to `max`. 仔細看看並嘗試理解這行代碼到底在幹嘛：
```js
Math.floor(Math.random() * (max - min + 1)) + min
@@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min
# --instructions--
-創建一個函數 `randomRange`，參數爲 `myMin` 和 `myMax`，返回一個在 `myMin`（包括 myMin）和 `myMax`（包括 myMax）之間的隨機整數。
+Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`.
# --hints--
@@ -87,9 +87,7 @@ for(var i = 0; i < 100; i++) {
```js
function randomRange(myMin, myMax) {
- // Only change code below this line
return 0;
- // Only change code above this line
}
```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
new file mode 100644
index 00000000000..9afdde2368a
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
@@ -0,0 +1,182 @@
+---
+id: 641cd18eb67c661d8a9e11f3
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+To begin the project, use the `.getElementById()` method to retrieve the `#message-input`, `#result`, and `#check-message-btn` elements from the HTML document, and assign them to the variables `messageInput`, `result`, and `checkMessageButton`, respectively.
+
+# --hints--
+
+You should use `const` to declare a `messageInput` variable.
+
+```js
+assert.match(code, /const\s+messageInput\s*=/);
+```
+
+Your `messageInput` variable should have the value of `document.getElementById('message-input')`.
+
+```js
+assert.deepEqual(messageInput, document.getElementById('message-input'));
+```
+
+You should use `const` to declare a `result` variable.
+
+```js
+assert.match(code, /const\s+result\s*=/);
+```
+
+Your `result` variable should have the value of `document.getElementById('result')`.
+
+```js
+assert.deepEqual(result, document.getElementById('result'));
+```
+
+You should use `const` to declare a `checkMessageButton` variable.
+
+```js
+assert.match(code, /const\s+checkMessageButton\s*=/);
+```
+
+Your `checkMessageButton` variable should have the value of `document.getElementById('check-message-btn')`.
+
+```js
+assert.deepEqual(checkMessageButton, document.getElementById('check-message-btn'));
+```
+
+# --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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md
new file mode 100644
index 00000000000..a4040bef0ab
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/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 delcare 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f6f59d665615c9e94d8a.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f98f4999d1179ce37cb4.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642205fa6376c818f78bb24e.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206e054eef81b5e3092ed.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642208bc4d44701c6fd6f65e.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220e8cb589f61e625bf453.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220f22dff8151f751a53a7.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220fb017c57d20612de8b8.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64221007887f38213fa57827.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642213bf8d38b0227ed6ab0b.md b/curriculum/challenges/chinese-traditional/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/chinese-traditional/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.
+
+1. Use `Math.random()` to generate a random decimal number.
+2. Multiply that random decimal number by `20`.
+3. Use `Math.floor()` to round this number down to its nearest whole number.
-记住 `Math.random()` 永远不会返回 `1`。同时因为我们是在向下取整，所以最终我们获得的结果不可能有 `20`。 这确保了我们获得了一个在 `0` 到 `19` 之间的整数。
+Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`.
-把操作连缀起来，代码类似于下面：
+Putting everything together, this is what your code looks like:
```js
Math.floor(Math.random() * 20);
```
-我们先调用 `Math.random()`，把它的结果乘以 20，然后把上一步的结果传给 `Math.floor()`，最终通过向下取整获得最近的整数。
+You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number.
# --instructions--
-使用这个方法生成并返回 `0` 和 `9` 之间的随机整数。
+Use this technique to generate and return a random whole number in the range from `0` to `9`.
# --hints--
@@ -47,7 +49,7 @@ assert(
assert(code.match(/Math.random/g).length >= 1);
```
-应该将 `Math.random` 的结果乘以 10，以生成 0 到 9 之间的随机数。
+You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine.
```js
assert(
@@ -74,9 +76,6 @@ assert(code.match(/Math.floor/g).length >= 1);
```js
function randomWholeNum() {
-
- // Only change code below this line
-
return Math.random();
}
```
diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
index 9ddf0317c85..0740394823e 100644
--- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
+++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
@@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range
# --description--
-我们之前生成的随机数是在 0 到某个数之间，现在我们要生成的随机数是在两个指定的数之间。
+You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range.
-我们需要定义一个最小值 `min` 和一个最大值 `max`。
+You'll call your minimum number `min` and your maximum number `max`.
-下面是我们将要使用的方法， 仔细看看并尝试理解这行代码到底在干嘛：
+This formula gives a random whole number in the range from `min` to `max`. 仔细看看并尝试理解这行代码到底在干嘛：
```js
Math.floor(Math.random() * (max - min + 1)) + min
@@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min
# --instructions--
-创建一个函数 `randomRange`，参数为 `myMin` 和 `myMax`，返回一个在 `myMin`（包括 myMin）和 `myMax`（包括 myMax）之间的随机整数。
+Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`.
# --hints--
@@ -87,9 +87,7 @@ for(var i = 0; i < 100; i++) {
```js
function randomRange(myMin, myMax) {
- // Only change code below this line
return 0;
- // Only change code above this line
}
```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
new file mode 100644
index 00000000000..9afdde2368a
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
@@ -0,0 +1,182 @@
+---
+id: 641cd18eb67c661d8a9e11f3
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+To begin the project, use the `.getElementById()` method to retrieve the `#message-input`, `#result`, and `#check-message-btn` elements from the HTML document, and assign them to the variables `messageInput`, `result`, and `checkMessageButton`, respectively.
+
+# --hints--
+
+You should use `const` to declare a `messageInput` variable.
+
+```js
+assert.match(code, /const\s+messageInput\s*=/);
+```
+
+Your `messageInput` variable should have the value of `document.getElementById('message-input')`.
+
+```js
+assert.deepEqual(messageInput, document.getElementById('message-input'));
+```
+
+You should use `const` to declare a `result` variable.
+
+```js
+assert.match(code, /const\s+result\s*=/);
+```
+
+Your `result` variable should have the value of `document.getElementById('result')`.
+
+```js
+assert.deepEqual(result, document.getElementById('result'));
+```
+
+You should use `const` to declare a `checkMessageButton` variable.
+
+```js
+assert.match(code, /const\s+checkMessageButton\s*=/);
+```
+
+Your `checkMessageButton` variable should have the value of `document.getElementById('check-message-btn')`.
+
+```js
+assert.deepEqual(checkMessageButton, document.getElementById('check-message-btn'));
+```
+
+# --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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md
new file mode 100644
index 00000000000..a4040bef0ab
--- /dev/null
+++ b/curriculum/challenges/chinese/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 delcare 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f6f59d665615c9e94d8a.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f98f4999d1179ce37cb4.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642205fa6376c818f78bb24e.md b/curriculum/challenges/chinese/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/chinese/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206e054eef81b5e3092ed.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642208bc4d44701c6fd6f65e.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220e8cb589f61e625bf453.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220f22dff8151f751a53a7.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220fb017c57d20612de8b8.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64221007887f38213fa57827.md b/curriculum/challenges/chinese/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/chinese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/chinese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642213bf8d38b0227ed6ab0b.md b/curriculum/challenges/chinese/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/chinese/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
index 13223e5da8f..03c6387500d 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
@@ -9,23 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript
# --description--
-Es genial que podamos generar números decimales aleatorios, pero es incluso más útil si lo usamos para generar números enteros aleatorios.
+You can generate random decimal numbers with `Math.random()`, but sometimes you need to generate random whole numbers. The following process will give you a random whole number less than `20`:
-
Usa Math.random() para generar un decimal aleatorio.
Multiplica ese decimal aleatorio por 20.
Utiliza otra función, Math.floor() para redondear el número hacia abajo a su número entero más cercano.
+1. Use `Math.random()` to generate a random decimal number.
+2. Multiply that random decimal number by `20`.
+3. Use `Math.floor()` to round this number down to its nearest whole number.
-Recuerda que `Math.random()` nunca devolverá un `1` y porque estamos redondeando hacia abajo, es imposible obtener `20`. Esta técnica nos dará un número entero entre `0` y `19`.
+Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`.
-Poniendo todo junto, así es como se ve nuestro código:
+Putting everything together, this is what your code looks like:
```js
Math.floor(Math.random() * 20);
```
-Estamos llamando a `Math.random()`, multiplicando el resultado por 20 y pasando el valor a la función `Math.floor()` para redondear el valor hacia abajo al número entero más cercano.
+You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number.
# --instructions--
-Utiliza esta técnica para generar y devolver un número entero aleatorio entre `0` y `9`.
+Use this technique to generate and return a random whole number in the range from `0` to `9`.
# --hints--
@@ -47,7 +49,7 @@ Debes usar `Math.random` para generar un número aleatorio.
assert(code.match(/Math.random/g).length >= 1);
```
-Debes haber multiplicado el resultado de `Math.random` por 10 para convertirlo en un número entre cero y nueve.
+You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine.
```js
assert(
@@ -74,9 +76,6 @@ assert(code.match(/Math.floor/g).length >= 1);
```js
function randomWholeNum() {
-
- // Only change code below this line
-
return Math.random();
}
```
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
index 491b7be1bb2..a997835e1d0 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
@@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range
# --description--
-En lugar de generar un número entero aleatorio entre cero y un número dado como lo hicimos anteriormente, podemos generar un número entero aleatorio que se encuentre dentro de un rango de dos números específicos.
+You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range.
-Para ello, definiremos un número mínimo `min` y un número máximo `max`.
+You'll call your minimum number `min` and your maximum number `max`.
-Esta es la fórmula que utilizaremos. Tómate un momento para leerla e intenta entender lo que este código está haciendo:
+This formula gives a random whole number in the range from `min` to `max`. Tómate un momento para leerla e intenta entender lo que este código está haciendo:
```js
Math.floor(Math.random() * (max - min + 1)) + min
@@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min
# --instructions--
-Crea una función llamada `randomRange` que tenga un rango `myMin` y `myMax` y devuelva un número entero aleatorio mayor o igual a `myMin`, y es menor o igual a `myMax`, inclusivo.
+Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`.
# --hints--
@@ -87,9 +87,7 @@ for(var i = 0; i < 100; i++) {
```js
function randomRange(myMin, myMax) {
- // Only change code below this line
return 0;
- // Only change code above this line
}
```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
new file mode 100644
index 00000000000..9afdde2368a
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
@@ -0,0 +1,182 @@
+---
+id: 641cd18eb67c661d8a9e11f3
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+To begin the project, use the `.getElementById()` method to retrieve the `#message-input`, `#result`, and `#check-message-btn` elements from the HTML document, and assign them to the variables `messageInput`, `result`, and `checkMessageButton`, respectively.
+
+# --hints--
+
+You should use `const` to declare a `messageInput` variable.
+
+```js
+assert.match(code, /const\s+messageInput\s*=/);
+```
+
+Your `messageInput` variable should have the value of `document.getElementById('message-input')`.
+
+```js
+assert.deepEqual(messageInput, document.getElementById('message-input'));
+```
+
+You should use `const` to declare a `result` variable.
+
+```js
+assert.match(code, /const\s+result\s*=/);
+```
+
+Your `result` variable should have the value of `document.getElementById('result')`.
+
+```js
+assert.deepEqual(result, document.getElementById('result'));
+```
+
+You should use `const` to declare a `checkMessageButton` variable.
+
+```js
+assert.match(code, /const\s+checkMessageButton\s*=/);
+```
+
+Your `checkMessageButton` variable should have the value of `document.getElementById('check-message-btn')`.
+
+```js
+assert.deepEqual(checkMessageButton, document.getElementById('check-message-btn'));
+```
+
+# --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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md
new file mode 100644
index 00000000000..a4040bef0ab
--- /dev/null
+++ b/curriculum/challenges/espanol/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 delcare 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f6f59d665615c9e94d8a.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f98f4999d1179ce37cb4.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642205fa6376c818f78bb24e.md b/curriculum/challenges/espanol/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/espanol/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206e054eef81b5e3092ed.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642208bc4d44701c6fd6f65e.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220e8cb589f61e625bf453.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220f22dff8151f751a53a7.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220fb017c57d20612de8b8.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64221007887f38213fa57827.md b/curriculum/challenges/espanol/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/espanol/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/espanol/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642213bf8d38b0227ed6ab0b.md b/curriculum/challenges/espanol/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/espanol/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
index 2968ca78645..ce25d114e82 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
@@ -9,23 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript
# --description--
-Es ist großartig, dass wir zufällige Dezimalzahlen generieren können, aber es ist noch nützlicher, wenn wir es nutzen, um zufällige ganze Zahlen zu generieren.
+You can generate random decimal numbers with `Math.random()`, but sometimes you need to generate random whole numbers. The following process will give you a random whole number less than `20`:
-
Verwende Math.random(), um eine zufällige Dezimalzahl zu erzeugen.
Multipliziere diese zufällige Dezimalzahl mit 20.
Verwende eine andere Funktion, Math.floor(), um die Zahl auf die nächste ganze Zahl abzurunden.
+1. Use `Math.random()` to generate a random decimal number.
+2. Multiply that random decimal number by `20`.
+3. Use `Math.floor()` to round this number down to its nearest whole number.
-Denke daran, dass `Math.random()` niemals eine `1` zurückgeben kann und weil wir abrunden, ist es unmöglich, tatsächlich `20` zu erhalten. Diese Technik liefert uns eine ganze Zahl zwischen `0` und `19`.
+Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`.
-Alles zusammengenommen sieht unser Code folgendermaßen aus:
+Putting everything together, this is what your code looks like:
```js
Math.floor(Math.random() * 20);
```
-Wir rufen `Math.random()` auf, multiplizieren das Ergebnis mit 20 und übergeben den Wert dann an die Funktion `Math.floor()`, um den Wert auf die nächste ganze Zahl abzurunden.
+You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number.
# --instructions--
-Verwende diese Technik, um eine zufällige ganze Zahl zwischen `0` und `9` zu erzeugen und zurückzugeben.
+Use this technique to generate and return a random whole number in the range from `0` to `9`.
# --hints--
@@ -47,7 +49,7 @@ Du solltest `Math.random` verwenden, um eine Zufallszahl zu erzeugen.
assert(code.match(/Math.random/g).length >= 1);
```
-Du solltest das Ergebnis von `Math.random` mit 10 multiplizieren, damit es eine Zahl zwischen null und neun ergibt.
+You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine.
```js
assert(
@@ -74,9 +76,6 @@ assert(code.match(/Math.floor/g).length >= 1);
```js
function randomWholeNum() {
-
- // Only change code below this line
-
return Math.random();
}
```
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
index 97b2f0d8086..7031b5e6618 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
@@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range
# --description--
-Anstatt wie zuvor eine zufällige ganze Zahl zwischen Null und einer bestimmten Zahl zu erzeugen, können wir eine zufällige ganze Zahl erzeugen, die in einen Bereich von zwei bestimmten Zahlen fällt.
+You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range.
-Dazu legen wir eine Mindestzahl `min` und eine Höchstzahl `max` fest.
+You'll call your minimum number `min` and your maximum number `max`.
-Hier ist die Formel, die wir verwenden werden. Nimm dir einen Moment Zeit, um ihn zu lesen und zu verstehen, was dieser Code macht:
+This formula gives a random whole number in the range from `min` to `max`. Nimm dir einen Moment Zeit, um ihn zu lesen und zu verstehen, was dieser Code macht:
```js
Math.floor(Math.random() * (max - min + 1)) + min
@@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min
# --instructions--
-Erstelle eine Funktion namens `randomRange`, die einen Bereich `myMin` und `myMax` annimmt und eine zufällige ganze Zahl zurückgibt, die größer oder gleich `myMin` und kleiner oder gleich `myMax` ist.
+Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`.
# --hints--
@@ -87,9 +87,7 @@ for(var i = 0; i < 100; i++) {
```js
function randomRange(myMin, myMax) {
- // Only change code below this line
return 0;
- // Only change code above this line
}
```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
new file mode 100644
index 00000000000..9afdde2368a
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
@@ -0,0 +1,182 @@
+---
+id: 641cd18eb67c661d8a9e11f3
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+To begin the project, use the `.getElementById()` method to retrieve the `#message-input`, `#result`, and `#check-message-btn` elements from the HTML document, and assign them to the variables `messageInput`, `result`, and `checkMessageButton`, respectively.
+
+# --hints--
+
+You should use `const` to declare a `messageInput` variable.
+
+```js
+assert.match(code, /const\s+messageInput\s*=/);
+```
+
+Your `messageInput` variable should have the value of `document.getElementById('message-input')`.
+
+```js
+assert.deepEqual(messageInput, document.getElementById('message-input'));
+```
+
+You should use `const` to declare a `result` variable.
+
+```js
+assert.match(code, /const\s+result\s*=/);
+```
+
+Your `result` variable should have the value of `document.getElementById('result')`.
+
+```js
+assert.deepEqual(result, document.getElementById('result'));
+```
+
+You should use `const` to declare a `checkMessageButton` variable.
+
+```js
+assert.match(code, /const\s+checkMessageButton\s*=/);
+```
+
+Your `checkMessageButton` variable should have the value of `document.getElementById('check-message-btn')`.
+
+```js
+assert.deepEqual(checkMessageButton, document.getElementById('check-message-btn'));
+```
+
+# --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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md
new file mode 100644
index 00000000000..a4040bef0ab
--- /dev/null
+++ b/curriculum/challenges/german/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 delcare 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f6f59d665615c9e94d8a.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f98f4999d1179ce37cb4.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642205fa6376c818f78bb24e.md b/curriculum/challenges/german/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/german/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206e054eef81b5e3092ed.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642208bc4d44701c6fd6f65e.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220e8cb589f61e625bf453.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220f22dff8151f751a53a7.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220fb017c57d20612de8b8.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64221007887f38213fa57827.md b/curriculum/challenges/german/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/german/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/german/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642213bf8d38b0227ed6ab0b.md b/curriculum/challenges/german/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/german/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
index 1b522341bf8..bfff9dcca8b 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
@@ -9,23 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript
# --description--
-È fantastico poter generare numeri decimali casuali, ma è ancora più utile poter generare numeri interi casuali.
+You can generate random decimal numbers with `Math.random()`, but sometimes you need to generate random whole numbers. The following process will give you a random whole number less than `20`:
-
Utilizza Math.random() per generare un decimale casuale.
Moltiplica quel decimale casuale per 20.
Usa un'altra funzione, Math.floor() per arrotondare il numero per difetto al numero intero più vicino.
+1. Use `Math.random()` to generate a random decimal number.
+2. Multiply that random decimal number by `20`.
+3. Use `Math.floor()` to round this number down to its nearest whole number.
-Ricorda che `Math.random()` non può mai restituire un `1` e, poiché stiamo arrotondando per difetto, è impossibile ottenere effettivamente `20`. Questa tecnica ci darà un numero intero tra `0` e `19`.
+Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`.
-Mettendo tutto insieme, questo è il nostro codice:
+Putting everything together, this is what your code looks like:
```js
Math.floor(Math.random() * 20);
```
-Stiamo chiamando `Math.random()`, moltiplicando il risultato per 20, quindi passando il valore alla funzione `Math.floor()` per arrotondare il valore per difetto al numero intero più vicino.
+You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number.
# --instructions--
-Usa questa tecnica per generare e restituire un numero intero casuale tra `0` e `9`.
+Use this technique to generate and return a random whole number in the range from `0` to `9`.
# --hints--
@@ -47,7 +49,7 @@ Dovresti usare `Math.random` per generare un numero casuale.
assert(code.match(/Math.random/g).length >= 1);
```
-Dovresti moltiplicare il risultato di `Math.random` per 10 per renderlo un numero compreso tra zero e nove.
+You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine.
```js
assert(
@@ -74,9 +76,6 @@ assert(code.match(/Math.floor/g).length >= 1);
```js
function randomWholeNum() {
-
- // Only change code below this line
-
return Math.random();
}
```
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
index a11215c21c8..672ed55e112 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
@@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range
# --description--
-Invece di generare un numero intero casuale tra zero e un dato numero come abbiamo fatto prima, possiamo generare un numero intero casuale che rientri in un intervallo tra due numeri specifici.
+You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range.
-Per fare questo, definiremo un numero minimo `min` e un numero massimo `max`.
+You'll call your minimum number `min` and your maximum number `max`.
-Ecco la formula che useremo. Prenditi un momento per leggerlo e prova a capire cosa sta facendo questo codice:
+This formula gives a random whole number in the range from `min` to `max`. Prenditi un momento per leggerlo e prova a capire cosa sta facendo questo codice:
```js
Math.floor(Math.random() * (max - min + 1)) + min
@@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min
# --instructions--
-Crea una funzione `randomRange` che prende un intervallo `myMin` e `myMax` e restituisce un numero intero casuale maggiore o uguale di `myMin`, e minore o uguale di `myMax`.
+Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`.
# --hints--
@@ -87,9 +87,7 @@ for(var i = 0; i < 100; i++) {
```js
function randomRange(myMin, myMax) {
- // Only change code below this line
return 0;
- // Only change code above this line
}
```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md
index df64bab8a75..e341029c615 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f038e671d3f73d5a041973.md
@@ -7,27 +7,27 @@ dashedName: step-55
# --description--
-La prima cosa che dovresti fare è controllare se l'array `items` è vuoto. If it is, display an `alert` to the user with the text `Your shopping cart is already empty`, then return from the function.
+La prima cosa che dovresti fare è controllare se l'array `items` è vuoto. Se lo è mostra all'utente un `alert` con il testo `Your shopping cart is already empty`, poi aggiungi un return alla funzione.
-Remember that `0` is a falsy value, so you can use the `!` operator to check if the array is empty.
+Ricorda che `0` è un valore falsy, quindi puoi usare l'operatore `!` per controllare se l'array è vuoto.
-After displaying the alert, return from the function to stop execution.
+Dopo aver mostrato l'alert, aggiungi un return alla funzione per interromperne l'esecuzione.
# --hints--
-You should create an `if` statement that checks if the `items` array is empty, using the negation operator.
+Dovresti creare un'istruzione `if` che controlla se l'array `items` è vuoto, utilizzando l'operatore di negazione.
```js
assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)/);
```
-Your `if` statement should display an `alert` to the user with the text `Your shopping cart is already empty`.
+L'istruzione `if` dovrebbe mostrare all'utente un `alert` con il testo `Your shopping cart is already empty`.
```js
assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*/);
```
-Your `if` statement should return from the function.
+L'istruzione `if` nella funzione dovrebbe avere un return.
```js
assert.match(cart.clearCart.toString(), /if\s*\(\s*!\s*this\s*\.\s*items\s*\.\s*length\s*\)\s*\{\s*alert\s*\(\s*('|"|`)Your shopping cart is already empty\1\s*\)\s*;?\s*return\s*;?\s*\}/);
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md
index 23f034e9067..4ff81c3fc2d 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f039dbcef7673e4e758fa3.md
@@ -7,32 +7,32 @@ dashedName: step-56
# --description--
-Browsers have a built-in `confirm()` function which displays a confirmation prompt to the user. `confirm()` accepts a string, which is the message displayed to the user. It returns `true` if the user confirms, and `false` if the user cancels.
+I browser hanno una funzione `confirm()` integrata che mostra un prompt di conferma all'utente. `confirm()` accetta una stringa, che è il messaggio visualizzato dall'utente. Restituisce `true` se l'utente conferma e `false` se l'utente annulla.
-Declare a variable `isCartCleared` and assign it the value of calling `confirm()` with the string `"Are you sure you want to clear all items from your shopping cart?"`.
+Dichiara una variabile `isCartCleared` e assegnale il valore della chiamata `confirm()` con la stringa `"Are you sure you want to clear all items from your shopping cart?"`.
# --hints--
-You should use `const` to declare the `isCartCleared` variable.
+Dovresti usare la parola chiave `const` per dichiarare la variabile `isCartCleared`.
```js
const afterClearCart = code.split('clearCart()')[1];
assert.match(afterClearCart, /const\s+isCartCleared\s*=/);
```
-You should call the `confirm()` function.
+Dovresti chiamare la funzione `confirm()`.
```js
assert.match(cart.clearCart.toString(), /confirm\s*\(/);
```
-You should pass the string `Are you sure you want to clear all items from your shopping cart?` to the `confirm()` function.
+Dovresti passare la stringa `Are you sure you want to clear all items from your shopping cart?` alla funzione `confirm()`.
```js
assert.match(cart.clearCart.toString(), /confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/);
```
-You should assign the value of the `confirm()` function to the `isCartCleared` variable.
+Dovresti assegnare il valore del metodo `confirm()` alla variabile `isCartCleared`.
```js
assert.match(cart.clearCart.toString(), /isCartCleared\s*=\s*confirm\s*\(\s*('|"|`)Are you sure you want to clear all items from your shopping cart\?\1\s*\)/);
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md
index be4fde050a5..c0368816c3d 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03a7143a6ef3f7f3344f0.md
@@ -7,25 +7,25 @@ dashedName: step-57
# --description--
-You only want to clear the cart if the user confirms the prompt. Create an `if` statement that checks if the user confirmed the prompt.
+Vuoi svuotare il carrello solo se l'utente conferma il prompt. Crea un'istruzione `if` che controlla se l'utente ha confermato il prompt.
-In the `if` statement, set the `items` property back to an empty array, then set the `total` property to `0`.
+Nell'istruzione `if`, imposta la proprietà `items` su un array vuoto, quindi imposta la proprietà `total` a `0`.
# --hints--
-You should create an `if` statement that checks if the user confirmed the prompt. Remember that you can check the truthiness of `isCartCleared` directly.
+Dovresti creare un'istruzione `if` che verifica se l'utente ha confermato il prompt. Ricorda che puoi controllare direttamente se `isCartCleared` è truthy.
```js
assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)/);
```
-Your `if` statement should set the `items` property back to an empty array.
+L'istruzione `if` dovrebbe reimpostare la proprietà `items` su un array vuoto.
```js
assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]/);
```
-Your `if` statement should set the `total` property to `0`.
+L'istruzione `if` dovrebbe impostare la proprietà `total` a `0`.
```js
assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*}/);
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md
index 3b6705168d8..31efa71428b 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03ac2b428b2404a5a7518.md
@@ -7,11 +7,11 @@ dashedName: step-58
# --description--
-You also need to start clearing the HTML. Set the `innerHTML` property of the `productsContainer` back to an empty string.
+Devi anche iniziare a ripulire l'HTML. Reimposta la proprietà `innerHTML` di `productsContainer` su una stringa vuota.
# --hints--
-In your `if` statement, you should set the `innerHTML` property of the `productsContainer` back to an empty string.
+Nell'istruzione `if` dovresti reimpostare la proprietà `innerHTML` di `productsContainer` su una stringa vuota.
```js
assert.match(cart.clearCart.toString(), /if\s*\(\s*isCartCleared\s*\)\s*{\s*this\s*\.\s*items\s*=\s*\[\s*\]\s*;?\s*this\s*\.\s*total\s*=\s*0\s*;?\s*productsContainer\.innerHTML\s*=\s*('|"|`)\1\s*;?\s*}/);
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md
index 5a1e7f099f3..64e7f1abd2e 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03af535682e4138fdb915.md
@@ -7,11 +7,11 @@ dashedName: step-59
# --description--
-Set the `textContent` of the `totalNumberOfItems`, `cartSubTotal`, `cartTaxes`, and `cartTotal` elements all to the number `0`.
+Imposta il `textContent` degli elementi `totalNumberOfItems`, `cartSubTotal`, `cartTaxes` e `cartTotal` sul numero `0`.
# --hints--
-You should set the `textContent` of the `totalNumberOfItems` element to `0`.
+Dovresti impostare il `textContent` dell'elemento `totalNumberOfItems` su `0`.
```js
const secondIf = cart.clearCart.toString().split('if')[2];
@@ -19,7 +19,7 @@ const inIf = secondIf.split('}')[0];
assert.match(inIf, /totalNumberOfItems\.textContent\s*=\s*0/);
```
-You should set the `textContent` of the `cartSubTotal` element to `0`.
+Dovresti impostare il `textContent` dell'elemento `cartSubTotal` su `0`.
```js
const secondIf = cart.clearCart.toString().split('if')[2];
@@ -27,7 +27,7 @@ const inIf = secondIf.split('}')[0];
assert.match(inIf, /cartSubTotal\.textContent\s*=\s*0/);
```
-You should set the `textContent` of the `cartTaxes` element to `0`.
+Dovresti impostare il `textContent` dell'elemento `cartTaxes` su `0`.
```js
const secondIf = cart.clearCart.toString().split('if')[2];
@@ -35,7 +35,7 @@ const inIf = secondIf.split('}')[0];
assert.match(inIf, /cartTaxes\.textContent\s*=\s*0/);
```
-You should set the `textContent` of the `cartTotal` element to `0`.
+Dovresti impostare il `textContent` dell'elemento `cartTotal` su `0`.
```js
const secondIf = cart.clearCart.toString().split('if')[2];
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md
index 913c5c53bdb..fcea08e6ad9 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-data-structures-by-building-a-shopping-cart/63f03b1ed5ab15420c057463.md
@@ -7,29 +7,29 @@ dashedName: step-60
# --description--
-Your final step is to make your clear button functional. Add a `click` event listener to the `clearCartBtn`. For the callback, you can pass in `cart.clearCart` directly.
+L'ultimo step è rendere più funzionale il pulsante per svuotare il carrello. Aggiungi un event listener `click` a `clearCartBtn`. Per la callback, puoi passare direttamente `cart.clearCart`.
-However, doing so will not work, because the context of `this` will be the `clearCartBtn` element. You need to bind the `clearCart` method to the `cart` object.
+Tuttavia, non funzionerà, perché il contesto di `this` sarà l'elemento `clearCartBtn`. Devi associare il metodo `clearCart` all'oggetto `cart`.
-You can do this by passing `cart.clearCart.bind(cart)` as the callback.
+Puoi farlo passando `cart.clearCart.bind(cart)` come callback.
-And with that, your shopping cart project is complete!
+E con questo, il progetto del carrello degli acquisti è completo!
# --hints--
-You should add an event listener to your `clearCartBtn` element.
+Dovresti aggiungere un event listener all'elemento `clearCartBtn`.
```js
assert.match(code, /clearCartBtn\.addEventListener\(/);
```
-Your event listener should listen for the `click` event.
+L'event listener dovrebbe essere in ascolto per l'evento `click`.
```js
assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,/);
```
-Your event listener should take `cart.clearCart.bind(cart)` as the callback.
+L'event listener dovrebbe prendere `cart.clearCart.bind(cart)` come callback.
```js
assert.match(code, /clearCartBtn\.addEventListener\(\s*('|"|`)click\1\s*,\s*cart\.clearCart\s*.bind\(\s*cart\s*\)\s*\)/);
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
new file mode 100644
index 00000000000..9afdde2368a
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
@@ -0,0 +1,182 @@
+---
+id: 641cd18eb67c661d8a9e11f3
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+To begin the project, use the `.getElementById()` method to retrieve the `#message-input`, `#result`, and `#check-message-btn` elements from the HTML document, and assign them to the variables `messageInput`, `result`, and `checkMessageButton`, respectively.
+
+# --hints--
+
+You should use `const` to declare a `messageInput` variable.
+
+```js
+assert.match(code, /const\s+messageInput\s*=/);
+```
+
+Your `messageInput` variable should have the value of `document.getElementById('message-input')`.
+
+```js
+assert.deepEqual(messageInput, document.getElementById('message-input'));
+```
+
+You should use `const` to declare a `result` variable.
+
+```js
+assert.match(code, /const\s+result\s*=/);
+```
+
+Your `result` variable should have the value of `document.getElementById('result')`.
+
+```js
+assert.deepEqual(result, document.getElementById('result'));
+```
+
+You should use `const` to declare a `checkMessageButton` variable.
+
+```js
+assert.match(code, /const\s+checkMessageButton\s*=/);
+```
+
+Your `checkMessageButton` variable should have the value of `document.getElementById('check-message-btn')`.
+
+```js
+assert.deepEqual(checkMessageButton, document.getElementById('check-message-btn'));
+```
+
+# --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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md
new file mode 100644
index 00000000000..a4040bef0ab
--- /dev/null
+++ b/curriculum/challenges/italian/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 delcare 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f6f59d665615c9e94d8a.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f98f4999d1179ce37cb4.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642205fa6376c818f78bb24e.md b/curriculum/challenges/italian/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/italian/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206e054eef81b5e3092ed.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642208bc4d44701c6fd6f65e.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220e8cb589f61e625bf453.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220f22dff8151f751a53a7.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220fb017c57d20612de8b8.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64221007887f38213fa57827.md b/curriculum/challenges/italian/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/italian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642213bf8d38b0227ed6ab0b.md b/curriculum/challenges/italian/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/italian/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/italian/18-project-euler/project-euler-problems-101-to-200/problem-103-special-subset-sums-optimum.md b/curriculum/challenges/italian/18-project-euler/project-euler-problems-101-to-200/problem-103-special-subset-sums-optimum.md
index bf85eef1f76..48b4bf152ea 100644
--- a/curriculum/challenges/italian/18-project-euler/project-euler-problems-101-to-200/problem-103-special-subset-sums-optimum.md
+++ b/curriculum/challenges/italian/18-project-euler/project-euler-problems-101-to-200/problem-103-special-subset-sums-optimum.md
@@ -8,10 +8,10 @@ dashedName: problem-103-special-subset-sums-optimum
# --description--
-Let $S(A)$ represent the sum of elements in set A of size n. We shall call it a special sum set if for any two non-empty disjoint subsets, B and C, the following properties are true:
+Sia $S(A)$ la somma degli elementi in un insieme A di dimensione n. Lo chiamiamo un insieme di somma speciale se per ogni due sottoinsiemi non vuoti e distinti, B e C, le seguenti proprietà sono vere:
-1. $S(B) ≠ S(C)$; that is, sums of subsets cannot be equal.
-2. If B contains more elements than C then $S(B) > S(C)$.
+1. $S(B) ≠ S(C)$, cioè le somme dei sottoinsiemi non possono essere uguali.
+2. Se B contiene più elementi di C allora $S(B) > S(C)$.
If $S(A)$ is minimised for a given n, we shall call it an optimum special sum set. The first five optimum special sum sets are given below.
diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
index bc65c0014dd..348c48d34ec 100644
--- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
+++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
@@ -9,23 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript
# --description--
-小数の乱数を生成できるのはとても便利ですが、それを利用して整数の乱数を生成すればさらに便利です。
+You can generate random decimal numbers with `Math.random()`, but sometimes you need to generate random whole numbers. The following process will give you a random whole number less than `20`:
-
Math.random() を使用して小数の乱数を生成する
その小数の乱数に 20 を掛ける
別の関数 Math.floor() を使用して小数点以下の端数を切り捨て、最も近い整数を得る
+1. Use `Math.random()` to generate a random decimal number.
+2. Multiply that random decimal number by `20`.
+3. Use `Math.floor()` to round this number down to its nearest whole number.
-`Math.random()` は決して `1` を返しません。そして切り捨てを行うため、`20` を取得する可能性はありません。 この方法では `0` ～ `19` の整数が得られます。
+Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`.
-すべてをまとめると次のようなコードになります。
+Putting everything together, this is what your code looks like:
```js
Math.floor(Math.random() * 20);
```
-`Math.random()` を呼び出して、その結果に 20 を掛け、その値を `Math.floor()` 関数に渡して端数を切り捨て、最も近い整数を求めています。
+You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number.
# --instructions--
-ここで紹介した方法で、`0` ～ `9` の整数の乱数を生成して返してください。
+Use this technique to generate and return a random whole number in the range from `0` to `9`.
# --hints--
@@ -47,7 +49,7 @@ assert(
assert(code.match(/Math.random/g).length >= 1);
```
-`Math.random` の結果に 10 を掛けて、0 ～ 9 の数値を求める必要があります。
+You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine.
```js
assert(
@@ -74,9 +76,6 @@ assert(code.match(/Math.floor/g).length >= 1);
```js
function randomWholeNum() {
-
- // Only change code below this line
-
return Math.random();
}
```
diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
index dfe0faa36db..ae58c37ea89 100644
--- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
+++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
@@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range
# --description--
-前回は、ゼロから指定した数値までの整数の乱数を生成しましたが、2 つの特定の数値の範囲内で整数の乱数を生成することができます。
+You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range.
-それには最小値 `min` と最大値 `max` を定義します。
+You'll call your minimum number `min` and your maximum number `max`.
-ここでは次のような式を使用します。 このコードの動作を理解して確かめてみてください。
+This formula gives a random whole number in the range from `min` to `max`. このコードの動作を理解して確かめてみてください。
```js
Math.floor(Math.random() * (max - min + 1)) + min
@@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min
# --instructions--
-`myMin` から `myMax` までを範囲とする `randomRange` という関数を作成し、`myMin` 以上 `myMax` 以下の整数の乱数を返してください。
+Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`.
# --hints--
@@ -87,9 +87,7 @@ for(var i = 0; i < 100; i++) {
```js
function randomRange(myMin, myMax) {
- // Only change code below this line
return 0;
- // Only change code above this line
}
```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md
index bb6ab5a93e3..c6a9c1cae50 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md
@@ -9,11 +9,11 @@ dashedName: step-48
HSL カラーモデル、または色相 (hue)、彩度 (saturation)、および明度 (lightness) とは、色を表現するもう一つの方法です。
-The CSS hsl function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness.
+CSS の hsl 関数は 3 つの値を受け付けます: 0 から 360 までの数値の色相、0 から 100 パーセントの彩度、0 から 100 パーセントの明度です。
カラーホイールを想像すると、赤の色相は 0 度、緑は 120 度、青は 240 度に位置します。
-Saturation is the intensity of a color from 0%, or gray, to 100% for pure color. You must add the percent sign `%` to the saturation and lightness values.
+彩度とは色の強度で、0% のグレーから 100% の純粋な色までを表します。 You must add the percent sign `%` to the saturation and lightness values.
明度は色の明るさで、0% の完全な黒から 100% の完全な白までを表し、50% で中間色となります。
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md
index 7636394b1f8..385667671b6 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md
@@ -17,11 +17,11 @@ rgba(redValue, greenValue, blueValue, alphaValue);
You can also use an alpha channel with `hsl` and `hex` colors. You will see how to do that soon.
-In the `.sleeve` rule, use the `rgba` function to set the `background-color` property to pure white with 50% opacity.
+`.sleeve` ルール内で `rgba` 関数を使用して、`background-color` プロパティを不透明度 50％ の純粋な白に設定してください。
# --hints--
-Your `.sleeve` CSS rule should have a `background-color` property set to `rgba(255, 255, 255, 0.5)`.
+`.sleeve` CSS ルールの `background-color` プロパティを `rgba(255, 255, 255, 0.5)` に設定する必要があります。
```js
assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)');
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md
index 537b7fa8bd1..83eb74958c1 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md
@@ -24,13 +24,13 @@ Here's how the `offsetX` and `offsetY` values work:
The height and width of the shadow is determined by the height and width of the element it's applied to. You can also use an optional `spreadRadius` value to spread out the reach of the shadow. More on that later.
-Start by adding a simple shadow to the red marker.
+赤いマーカーにシンプルな影を付けることから始めましょう。
-In the `.red` CSS rule, add the `box-shadow` property with the values `5px` for `offsetX`, `5px` for `offsetY`, and `red` for `color`.
+`.red` CSS ルール内に `box-shadow` プロパティを追加して、値は `offsetX` を `5px`、`offsetY` を `5px`、`color` を `red` にしてください。
# --hints--
-Your `.red` CSS rule should have a `box-shadow` shorthand property and with the value `5px 5px red`.
+`.red` CSS ルールの `box-shadow` 一括指定プロパティの値を `5px 5px red` に設定する必要があります。
```js
assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px');
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md
index ec1a44b67f1..9bc59604484 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md
@@ -9,7 +9,7 @@ dashedName: step-90
`box-shadow` プロパティに慣れてきたので、赤いマーカーから影を完成させていきましょう。
-In the `.red` CSS rule, update the values for the `box-shadow` property so `offsetX` is `0`,`offsetY` is `0`, `blurRadius` is `20px`, `spreadRadius` is `0`, and `color` is `red`. Remember that you don't need to add units to a zero value.
+`.red` CSS ルール内の `box-shadow` プロパティの値を変更して、`offsetX` を `0`、`offsetY` を `0`、`blurRadius` を `20px`、`spreadRadius` を `0`、`color` を `red` にしてください。 Remember that you don't need to add units to a zero value.
# --hints--
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
index be92018e9a5..26388ee650d 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -15,25 +15,25 @@ Here is an example of an `img` element with a `src` attribute pointing to the fr
```
-Inside the existing `img` element, add an `src` attribute with this URL:
+既存の `img` 要素に、`src` 属性を追加してこの URL を指定してください:
`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`
# --hints--
-Your code should have an `img` element. You may have removed the `img` element or you have not surrounded the `src` attribute's value with quotes.
+コードには `img` 要素が 1 つ必要です。 `img` 要素を削除してしまったか、`src` 属性の値を引用符 (") で囲んでいない可能性があります。
```js
assert(document.querySelector('img'));
```
-Your `img` element should have an `src` attribute. You have either omitted the attribute or have a typo. Make sure there is a space between the element name and the attribute name.
+`img` 要素には `src` 属性が必要です。 属性が設定されていないか、誤字脱字があります。 要素名と属性名の間には必ず半角スペースを入れてください。
```js
assert(document.querySelector('img').src);
```
-Your `img` element's `src` attribute should be set to '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. You have either omitted the URL or have a typo. The case of the URL is important.
+`img` 要素の `src` 属性は '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`' に設定される必要があります。 You have either omitted the URL or have a typo. The case of the URL is important.
```js
assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
index 027cd17afc9..c7655c26da4 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -19,49 +19,49 @@ dashedName: step-24
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
```
-Your `th` element should have the text `Total Liabilities`.
+`th` 要素のテキストは `Total Liabilities` にする必要があります。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
```
-You should wrap the text `Liabilities` in a `span` element.
+`Liabilities` というテキストを `span` 要素で囲む必要があります。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
```
-Your `span` element should have the `class` attribute set to `sr-only`.
+`span` 要素の `class` 属性を `sr-only` に設定する必要があります。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
```
-You should have three `td` elements.
+`td` 要素が 3 つ必要です。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
```
-Your first `td` element should have the text `$750`.
+1 つ目の `td` 要素には `$750` というテキストが必要です。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750');
```
-Your second `td` element should have the text `$600`.
+2 つ目の `td` 要素には `$600` というテキストが必要です。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600');
```
-Your third `td` element should have the text `$475`.
+3 つ目の `td` 要素には `$475` というテキストが必要です。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475');
```
-Your third `td` element should have the `class` set to `current`.
+3 つ目の `td` 要素の `class` を `current` に設定する必要があります。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md
index c74f3fca437..58dd16dc757 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md
@@ -20,13 +20,13 @@ Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25re
# --hints--
-Your `#years` selector should have a `margin` property set to `0 -2px`.
+`#years` セレクターの `margin` プロパティを `0 -2px` に設定する必要があります。
```js
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
```
-Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+`#years` セレクターの `padding` プロパティを `0.5rem calc(1.25rem + 2px) 0.5rem 0` に設定する必要があります。
```js
const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding');
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md
index c98c862415a..0d9accf645d 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md
@@ -1,6 +1,6 @@
---
id: 6201782cc420715562f36271
-title: Step 44
+title: ステップ 44
challengeType: 0
dashedName: step-44
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md
index ca565ad9136..e83fda74750 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md
@@ -1,6 +1,6 @@
---
id: 620179bc0a6a2358c72b90ad
-title: Step 45
+title: ステップ 45
challengeType: 0
dashedName: step-45
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md
index f9a996fdb27..8ea5068f79b 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md
@@ -1,6 +1,6 @@
---
id: 62017b6f47454059bf2d3bd1
-title: Step 46
+title: ステップ 46
challengeType: 0
dashedName: step-46
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md
index 7c3d58b08b6..ea6634f1921 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md
@@ -1,6 +1,6 @@
---
id: 62018243f046a368fab8ffb6
-title: Step 49
+title: ステップ 49
challengeType: 0
dashedName: step-49
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md
index 9415cbcc928..6f1df4dcbaa 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md
@@ -1,6 +1,6 @@
---
id: 6201830cb0c74b69f1b41635
-title: Step 50
+title: ステップ 50
challengeType: 0
dashedName: step-50
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md
index 0b6c558b057..fdd25dfc2e6 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md
@@ -1,6 +1,6 @@
---
id: 62018c3e94434a71af1d5eaa
-title: Step 53
+title: ステップ 53
challengeType: 0
dashedName: step-53
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md
index 3fecf81c8dd..51ae0232bcc 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md
@@ -1,6 +1,6 @@
---
id: 620191707bc65579ddd3ce15
-title: Step 56
+title: ステップ 56
challengeType: 0
dashedName: step-56
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md
index c6b7ebb5dbd..379a4d19584 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md
@@ -1,6 +1,6 @@
---
id: 620199c7a7a32c81d4db3410
-title: Step 59
+title: ステップ 59
challengeType: 0
dashedName: step-59
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md
index 2127349c68d..25375f3c90d 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md
@@ -1,6 +1,6 @@
---
id: 6201a5258af7b398b030bfaf
-title: Step 65
+title: ステップ 65
challengeType: 0
dashedName: step-65
---
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
new file mode 100644
index 00000000000..9afdde2368a
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
@@ -0,0 +1,182 @@
+---
+id: 641cd18eb67c661d8a9e11f3
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+To begin the project, use the `.getElementById()` method to retrieve the `#message-input`, `#result`, and `#check-message-btn` elements from the HTML document, and assign them to the variables `messageInput`, `result`, and `checkMessageButton`, respectively.
+
+# --hints--
+
+You should use `const` to declare a `messageInput` variable.
+
+```js
+assert.match(code, /const\s+messageInput\s*=/);
+```
+
+Your `messageInput` variable should have the value of `document.getElementById('message-input')`.
+
+```js
+assert.deepEqual(messageInput, document.getElementById('message-input'));
+```
+
+You should use `const` to declare a `result` variable.
+
+```js
+assert.match(code, /const\s+result\s*=/);
+```
+
+Your `result` variable should have the value of `document.getElementById('result')`.
+
+```js
+assert.deepEqual(result, document.getElementById('result'));
+```
+
+You should use `const` to declare a `checkMessageButton` variable.
+
+```js
+assert.match(code, /const\s+checkMessageButton\s*=/);
+```
+
+Your `checkMessageButton` variable should have the value of `document.getElementById('check-message-btn')`.
+
+```js
+assert.deepEqual(checkMessageButton, document.getElementById('check-message-btn'));
+```
+
+# --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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md
new file mode 100644
index 00000000000..a4040bef0ab
--- /dev/null
+++ b/curriculum/challenges/japanese/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 delcare 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f6f59d665615c9e94d8a.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f98f4999d1179ce37cb4.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642205fa6376c818f78bb24e.md b/curriculum/challenges/japanese/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/japanese/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206e054eef81b5e3092ed.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642208bc4d44701c6fd6f65e.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220e8cb589f61e625bf453.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220f22dff8151f751a53a7.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220fb017c57d20612de8b8.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64221007887f38213fa57827.md b/curriculum/challenges/japanese/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/japanese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642213bf8d38b0227ed6ab0b.md b/curriculum/challenges/japanese/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/japanese/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
index a38169211ec..ce7bb2c62ff 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
@@ -9,23 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript
# --description--
-É ótimo podermos gerar números decimais aleatórios, mas é ainda mais útil se usarmos isso para gerar números inteiros aleatórios.
+You can generate random decimal numbers with `Math.random()`, but sometimes you need to generate random whole numbers. The following process will give you a random whole number less than `20`:
-
Use Math.random() para gerar um decimal aleatório.
Multiplique o decimal aleatório por 20.
Use outra função, Math.floor() para arredondar o número para baixo para o número inteiro mais próximo.
+1. Use `Math.random()` to generate a random decimal number.
+2. Multiply that random decimal number by `20`.
+3. Use `Math.floor()` to round this number down to its nearest whole number.
-Lembre-se de que `Math.random()` pode nunca retornar um `1` e, por estarmos arredondando, é impossível também receber `20`. Essa técnica nos dará um número inteiro entre `0` e `19`.
+Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`.
-Juntando tudo, é assim que nosso código se parece:
+Putting everything together, this is what your code looks like:
```js
Math.floor(Math.random() * 20);
```
-Nós estamos chamando `Math.random()`, multiplicando o resultado por 20, e em seguida passando o valor para a função `Math.floor()` para arredondar o valor para o número inteiro mais próximo abaixo.
+You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number.
# --instructions--
-Use essa técnica para gerar e retornar um número inteiro aleatório entre `0` e `9`.
+Use this technique to generate and return a random whole number in the range from `0` to `9`.
# --hints--
@@ -47,7 +49,7 @@ Você deve usar `Math.random` para gerar um número aleatório.
assert(code.match(/Math.random/g).length >= 1);
```
-Você deve ter multiplicado o resultado de `Math.random` por 10 para torná-lo um número que está entre zero e nove.
+You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine.
```js
assert(
@@ -74,9 +76,6 @@ assert(code.match(/Math.floor/g).length >= 1);
```js
function randomWholeNum() {
-
- // Only change code below this line
-
return Math.random();
}
```
diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
index c8ee5837201..4041350b422 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
@@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range
# --description--
-Ao invés de gerar um número inteiro aleatório entre 0 e um número especificado, como fizemos anteriormente, nós podemos gerar um número inteiro aleatório que fica em um intervalo entre dois números especificados.
+You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range.
-Para isso, definiremos um número mínimo `min` e um número máximo`max`.
+You'll call your minimum number `min` and your maximum number `max`.
-Aqui está a fórmula que usaremos. Leve um momento para ler e entender o que esse código está fazendo:
+This formula gives a random whole number in the range from `min` to `max`. Leve um momento para ler e entender o que esse código está fazendo:
```js
Math.floor(Math.random() * (max - min + 1)) + min
@@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min
# --instructions--
-Crie uma função chamada `randomRange` que recebe um intervalo de `myMin` e `myMax` e retorne um número inteiro aleatório que é maior ou igual a `myMin`, e é menor ou igual a `myMax`.
+Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`.
# --hints--
@@ -87,9 +87,7 @@ for(var i = 0; i < 100; i++) {
```js
function randomRange(myMin, myMax) {
- // Only change code below this line
return 0;
- // Only change code above this line
}
```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
new file mode 100644
index 00000000000..9afdde2368a
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
@@ -0,0 +1,182 @@
+---
+id: 641cd18eb67c661d8a9e11f3
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+To begin the project, use the `.getElementById()` method to retrieve the `#message-input`, `#result`, and `#check-message-btn` elements from the HTML document, and assign them to the variables `messageInput`, `result`, and `checkMessageButton`, respectively.
+
+# --hints--
+
+You should use `const` to declare a `messageInput` variable.
+
+```js
+assert.match(code, /const\s+messageInput\s*=/);
+```
+
+Your `messageInput` variable should have the value of `document.getElementById('message-input')`.
+
+```js
+assert.deepEqual(messageInput, document.getElementById('message-input'));
+```
+
+You should use `const` to declare a `result` variable.
+
+```js
+assert.match(code, /const\s+result\s*=/);
+```
+
+Your `result` variable should have the value of `document.getElementById('result')`.
+
+```js
+assert.deepEqual(result, document.getElementById('result'));
+```
+
+You should use `const` to declare a `checkMessageButton` variable.
+
+```js
+assert.match(code, /const\s+checkMessageButton\s*=/);
+```
+
+Your `checkMessageButton` variable should have the value of `document.getElementById('check-message-btn')`.
+
+```js
+assert.deepEqual(checkMessageButton, document.getElementById('check-message-btn'));
+```
+
+# --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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md
new file mode 100644
index 00000000000..a4040bef0ab
--- /dev/null
+++ b/curriculum/challenges/portuguese/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 delcare 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f6f59d665615c9e94d8a.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f98f4999d1179ce37cb4.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642205fa6376c818f78bb24e.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206e054eef81b5e3092ed.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642208bc4d44701c6fd6f65e.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220e8cb589f61e625bf453.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220f22dff8151f751a53a7.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220fb017c57d20612de8b8.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64221007887f38213fa57827.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/portuguese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642213bf8d38b0227ed6ab0b.md b/curriculum/challenges/portuguese/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/portuguese/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
index a7b636a4d30..1139512a979 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
@@ -9,23 +9,25 @@ dashedName: generate-random-whole-numbers-with-javascript
# --description--
-Чудово, що ми можемо згенерувати випадкові десяткові числа, але навіть краще, якщо ми використаємо їх для генерації випадкових цілих чисел.
+You can generate random decimal numbers with `Math.random()`, but sometimes you need to generate random whole numbers. The following process will give you a random whole number less than `20`:
-
Використайте Math.random(), щоб згенерувати випадкове десяткове число.
Помножте це випадкове десяткове число на 20.
Використайте іншу функцію, Math.floor(), щоб заокруглити число до найближчого цілого числа.
+1. Use `Math.random()` to generate a random decimal number.
+2. Multiply that random decimal number by `20`.
+3. Use `Math.floor()` to round this number down to its nearest whole number.
-Пам’ятайте, що `Math.random()` ніколи не повертає `1`, і, оскільки ми округлюємо, неможливо отримати `20`. Цей метод видасть нам ціле число від `0` до `19`.
+Remember that `Math.random()` can never quite return a `1`, so it's impossible to actually get `20` since you are rounding down with `Math.floor()`. This process will give you a random whole number in the range from `0` to `19`.
-Зіставивши усе разом, ось так виглядає наш код:
+Putting everything together, this is what your code looks like:
```js
Math.floor(Math.random() * 20);
```
-Ми викликаємо `Math.random()`, перемноживши результат на 20, а потім передаємо значення до функції `Math.floor()`, щоб округлити значення до найближчого цілого числа.
+You are calling `Math.random()`, multiplying the result by 20, then passing the value to `Math.floor()` to round the value down to the nearest whole number.
# --instructions--
-Використайте цю техніку, щоб згенерувати та повернути випадкове ціле число від `0` до `9`.
+Use this technique to generate and return a random whole number in the range from `0` to `9`.
# --hints--
@@ -47,7 +49,7 @@ assert(
assert(code.match(/Math.random/g).length >= 1);
```
-Ви повинні помножити результат `Math.random` на 10, щоб зробити його числом від 0 до 9.
+You should have multiplied the result of `Math.random` by 10 to make it a number in the range from zero to nine.
```js
assert(
@@ -74,9 +76,6 @@ assert(code.match(/Math.floor/g).length >= 1);
```js
function randomWholeNum() {
-
- // Only change code below this line
-
return Math.random();
}
```
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
index a293e915746..da4fc5fdb98 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
@@ -9,11 +9,11 @@ dashedName: generate-random-whole-numbers-within-a-range
# --description--
-Замість генерації випадкового цілого числа між нулем і заданим числом, як ми робили це раніше, ми можемо згенерувати випадкове ціле число, що потрапляє в діапазон двох конкретних чисел.
+You can generate a random whole number in the range from zero to a given number. You can also pick a different lower number for this range.
-Для цього ми визначимо мінімальне число `min` і максимальне число `max`.
+You'll call your minimum number `min` and your maximum number `max`.
-Ми будемо використовувати наступну формулу. Зробіть паузу, щоб прочитати і зрозуміти, що робить цей код:
+This formula gives a random whole number in the range from `min` to `max`. Зробіть паузу, щоб прочитати і зрозуміти, що робить цей код:
```js
Math.floor(Math.random() * (max - min + 1)) + min
@@ -21,7 +21,7 @@ Math.floor(Math.random() * (max - min + 1)) + min
# --instructions--
-Створіть функцію під назвою `randomRange`, яка приймає діапазон `myMin` та `myMax` і повертає випадкове ціле число, яке більше або дорівнює `myMin` і менше або дорівнює `myMax`.
+Create a function called `randomRange` that takes a range `myMin` and `myMax` and returns a random whole number that's greater than or equal to `myMin` and less than or equal to `myMax`.
# --hints--
@@ -87,9 +87,7 @@ for(var i = 0; i < 100; i++) {
```js
function randomRange(myMin, myMax) {
- // Only change code below this line
return 0;
- // Only change code above this line
}
```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
new file mode 100644
index 00000000000..9afdde2368a
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
@@ -0,0 +1,182 @@
+---
+id: 641cd18eb67c661d8a9e11f3
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+To begin the project, use the `.getElementById()` method to retrieve the `#message-input`, `#result`, and `#check-message-btn` elements from the HTML document, and assign them to the variables `messageInput`, `result`, and `checkMessageButton`, respectively.
+
+# --hints--
+
+You should use `const` to declare a `messageInput` variable.
+
+```js
+assert.match(code, /const\s+messageInput\s*=/);
+```
+
+Your `messageInput` variable should have the value of `document.getElementById('message-input')`.
+
+```js
+assert.deepEqual(messageInput, document.getElementById('message-input'));
+```
+
+You should use `const` to declare a `result` variable.
+
+```js
+assert.match(code, /const\s+result\s*=/);
+```
+
+Your `result` variable should have the value of `document.getElementById('result')`.
+
+```js
+assert.deepEqual(result, document.getElementById('result'));
+```
+
+You should use `const` to declare a `checkMessageButton` variable.
+
+```js
+assert.match(code, /const\s+checkMessageButton\s*=/);
+```
+
+Your `checkMessageButton` variable should have the value of `document.getElementById('check-message-btn')`.
+
+```js
+assert.deepEqual(checkMessageButton, document.getElementById('check-message-btn'));
+```
+
+# --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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdebe67ec0f25a4798356.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdefa704f232675ed98aa.md
new file mode 100644
index 00000000000..a4040bef0ab
--- /dev/null
+++ b/curriculum/challenges/ukrainian/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 delcare 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cdf57c3f7ee276e1d9b32.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce03dfeca10293e05dad7.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3065c50e62f97406973.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ce3dcd0aec8309fbc9971.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641ceed81533263283835c3d.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cf198ec366c33d6504854.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f6f59d665615c9e94d8a.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/6421f98f4999d1179ce37cb4.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642205fa6376c818f78bb24e.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+ Enter a phrase to check if it would be marked as spam or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642206e054eef81b5e3092ed.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642208bc4d44701c6fd6f65e.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220e8cb589f61e625bf453.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220f22dff8151f751a53a7.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64220fb017c57d20612de8b8.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/64221007887f38213fa57827.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/642213bf8d38b0227ed6ab0b.md b/curriculum/challenges/ukrainian/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/ukrainian/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.
+
```
-Inside the existing `img` element, add an `src` attribute with this URL:
+既存の `img` 要素に、`src` 属性を追加してこの URL を指定してください:
`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`
# --hints--
-Your code should have an `img` element. You may have removed the `img` element or you have not surrounded the `src` attribute's value with quotes.
+コードには `img` 要素が 1 つ必要です。 `img` 要素を削除してしまったか、`src` 属性の値を引用符 (") で囲んでいない可能性があります。
```js
assert(document.querySelector('img'));
```
-Your `img` element should have an `src` attribute. You have either omitted the attribute or have a typo. Make sure there is a space between the element name and the attribute name.
+`img` 要素には `src` 属性が必要です。 属性が設定されていないか、誤字脱字があります。 要素名と属性名の間には必ず半角スペースを入れてください。
```js
assert(document.querySelector('img').src);
```
-Your `img` element's `src` attribute should be set to '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. You have either omitted the URL or have a typo. The case of the URL is important.
+`img` 要素の `src` 属性は '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`' に設定される必要があります。 You have either omitted the URL or have a typo. The case of the URL is important.
```js
assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
index 027cd17afc9..c7655c26da4 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -19,49 +19,49 @@ dashedName: step-24
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
```
-Your `th` element should have the text `Total Liabilities`.
+`th` 要素のテキストは `Total Liabilities` にする必要があります。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
```
-You should wrap the text `Liabilities` in a `span` element.
+`Liabilities` というテキストを `span` 要素で囲む必要があります。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
```
-Your `span` element should have the `class` attribute set to `sr-only`.
+`span` 要素の `class` 属性を `sr-only` に設定する必要があります。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
```
-You should have three `td` elements.
+`td` 要素が 3 つ必要です。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
```
-Your first `td` element should have the text `$750`.
+1 つ目の `td` 要素には `$750` というテキストが必要です。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750');
```
-Your second `td` element should have the text `$600`.
+2 つ目の `td` 要素には `$600` というテキストが必要です。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600');
```
-Your third `td` element should have the text `$475`.
+3 つ目の `td` 要素には `$475` というテキストが必要です。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475');
```
-Your third `td` element should have the `class` set to `current`.
+3 つ目の `td` 要素の `class` を `current` に設定する必要があります。
```js
assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md
index c74f3fca437..58dd16dc757 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md
@@ -20,13 +20,13 @@ Give `#years` a `margin` of `0 -2px`, and a `padding` set to `0.5rem calc(1.25re
# --hints--
-Your `#years` selector should have a `margin` property set to `0 -2px`.
+`#years` セレクターの `margin` プロパティを `0 -2px` に設定する必要があります。
```js
assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
```
-Your `#years` selector should have a `padding` property set to `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+`#years` セレクターの `padding` プロパティを `0.5rem calc(1.25rem + 2px) 0.5rem 0` に設定する必要があります。
```js
const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding');
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md
index c98c862415a..0d9accf645d 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md
@@ -1,6 +1,6 @@
---
id: 6201782cc420715562f36271
-title: Step 44
+title: ステップ 44
challengeType: 0
dashedName: step-44
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md
index ca565ad9136..e83fda74750 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md
@@ -1,6 +1,6 @@
---
id: 620179bc0a6a2358c72b90ad
-title: Step 45
+title: ステップ 45
challengeType: 0
dashedName: step-45
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md
index f9a996fdb27..8ea5068f79b 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md
@@ -1,6 +1,6 @@
---
id: 62017b6f47454059bf2d3bd1
-title: Step 46
+title: ステップ 46
challengeType: 0
dashedName: step-46
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md
index 7c3d58b08b6..ea6634f1921 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md
@@ -1,6 +1,6 @@
---
id: 62018243f046a368fab8ffb6
-title: Step 49
+title: ステップ 49
challengeType: 0
dashedName: step-49
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md
index 9415cbcc928..6f1df4dcbaa 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md
@@ -1,6 +1,6 @@
---
id: 6201830cb0c74b69f1b41635
-title: Step 50
+title: ステップ 50
challengeType: 0
dashedName: step-50
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md
index 0b6c558b057..fdd25dfc2e6 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md
@@ -1,6 +1,6 @@
---
id: 62018c3e94434a71af1d5eaa
-title: Step 53
+title: ステップ 53
challengeType: 0
dashedName: step-53
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md
index 3fecf81c8dd..51ae0232bcc 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md
@@ -1,6 +1,6 @@
---
id: 620191707bc65579ddd3ce15
-title: Step 56
+title: ステップ 56
challengeType: 0
dashedName: step-56
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md
index c6b7ebb5dbd..379a4d19584 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md
@@ -1,6 +1,6 @@
---
id: 620199c7a7a32c81d4db3410
-title: Step 59
+title: ステップ 59
challengeType: 0
dashedName: step-59
---
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md
index 2127349c68d..25375f3c90d 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md
@@ -1,6 +1,6 @@
---
id: 6201a5258af7b398b030bfaf
-title: Step 65
+title: ステップ 65
challengeType: 0
dashedName: step-65
---
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
new file mode 100644
index 00000000000..9afdde2368a
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-regular-expressions-by-building-a-spam-filter/641cd18eb67c661d8a9e11f3.md
@@ -0,0 +1,182 @@
+---
+id: 641cd18eb67c661d8a9e11f3
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+To begin the project, use the `.getElementById()` method to retrieve the `#message-input`, `#result`, and `#check-message-btn` elements from the HTML document, and assign them to the variables `messageInput`, `result`, and `checkMessageButton`, respectively.
+
+# --hints--
+
+You should use `const` to declare a `messageInput` variable.
+
+```js
+assert.match(code, /const\s+messageInput\s*=/);
+```
+
+Your `messageInput` variable should have the value of `document.getElementById('message-input')`.
+
+```js
+assert.deepEqual(messageInput, document.getElementById('message-input'));
+```
+
+You should use `const` to declare a `result` variable.
+
+```js
+assert.match(code, /const\s+result\s*=/);
+```
+
+Your `result` variable should have the value of `document.getElementById('result')`.
+
+```js
+assert.deepEqual(result, document.getElementById('result'));
+```
+
+You should use `const` to declare a `checkMessageButton` variable.
+
+```js
+assert.match(code, /const\s+checkMessageButton\s*=/);
+```
+
+Your `checkMessageButton` variable should have the value of `document.getElementById('check-message-btn')`.
+
+```js
+assert.deepEqual(checkMessageButton, document.getElementById('check-message-btn'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+