diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
index 36fb438bb3f..7752d638fd2 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
@@ -20,7 +20,7 @@ dashedName: use-conditional-logic-with-if-statements
 **مثال**
 
 ```js
-function test (myCondition) {
+function test(myCondition) {
   if (myCondition) {
     return "It was true";
   }
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index d940194e31d..c57172ac027 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -36,13 +36,20 @@ assert(
 يجب أن يكون نص الرابط `cat photos`. إما أنك حذفت النص أو لديك خطأ إملائي.
 
 ```js
-const nestedAnchor = document.querySelector(`p > a`);
-assert(
-  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isTrue(innerContent.trim() === 'cat photos');
 ```
 
-بعد إدخال عنصر الرابط (`a`)، يجب أن يكون محتوى العنصر `p` الوحيد المرئي في المتصفح `See more cat photos in our gallery.` أعد التحقق من النص أو المسافات أو علامات الترقيم لكل من `p` وعنصر الرابط داخله.
+The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`.
+
+```js
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
+```
+
+After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
 
 ```js
 assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
index 54cf79d794b..cb7f01f0065 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -7,9 +7,8 @@ dashedName: step-64
 
 # --description--
 
-Last, but not least, make the `input` for the terms and condition `inline`, then change the text color of the `terms and conditions` link element to `#dfdfe2`.
+Make the `input` for the terms and conditions `inline` by adding the appropriate class in the HTML.
 
-أحسنت صنعا! لقد أكملت الجزء الأخير من مشروع التدريب _Registration Form_.
 
 # --hints--
 
@@ -19,18 +18,6 @@ You should give the `input` a class of `inline`.
 assert(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline'));
 ```
 
-You should use an `a` element selector.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
-```
-
-You should give the `a` element a `color` of `#dfdfe2`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
-```
-
 # --seed--
 
 ## --seed-contents--
@@ -164,133 +151,3 @@ input[type="file"] {
 --fcc-editable-region--
 
 ```
-
-# --solutions--
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Registration Form</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <h1>Registration Form</h1>
-    <p>Please fill out this form with the required information</p>
-    <form method="post" action='https://register-demo.freecodecamp.org'>
-      <fieldset>
-        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
-        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
-        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
-        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
-      </fieldset>
-      <fieldset>
-        <legend>Account type (required)</legend>
-        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
-        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
-      </fieldset>
-      <fieldset>
-        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
-        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
-        <label for="referrer">How did you hear about us?
-          <select id="referrer" name="referrer">
-            <option value="">(select one)</option>
-            <option value="1">freeCodeCamp News</option>
-            <option value="2">freeCodeCamp YouTube Channel</option>
-            <option value="3">freeCodeCamp Forum</option>
-            <option value="4">Other</option>
-          </select>
-        </label>
-        <label for="bio">Provide a bio:
-          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
-        </label>
-      </fieldset>
-      <label for="terms-and-conditions">
-        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
-      </label>
-      <input type="submit" value="Submit" />
-    </form>
-  </body>
-</html>
-```
-
-```css
-body {
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  background-color: #1b1b32;
-  color: #f5f6f7;
-  font-family: Tahoma;
-  font-size: 16px;
-}
-
-h1, p {
-  margin: 1em auto;
-  text-align: center;
-}
-
-form {
-  width: 60vw;
-  max-width: 500px;
-  min-width: 300px;
-  margin: 0 auto;
-  padding-bottom: 2em;
-}
-
-fieldset {
-  border: none;
-  padding: 2rem 0;
-  border-bottom: 3px solid #3b3b4f;
-}
-
-fieldset:last-of-type {
-  border-bottom: none;
-}
-
-label {
-  display: block;
-  margin: 0.5rem 0;
-}
-
-input,
-textarea,
-select {
-  margin: 10px 0 0 0;
-  width: 100%;
-  min-height: 2em;
-}
-
-input, textarea {
-  background-color: #0a0a23;
-  border: 1px solid #0a0a23;
-  color: #ffffff;
-}
-
-.inline {
-  width: unset;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-
-input[type="submit"] {
-  display: block;
-  width: 60%;
-  margin: 1em auto;
-  height: 2em;
-  font-size: 1.1rem;
-  background-color: #3b3b4f;
-  border-color: white;
-  min-width: 300px;
-}
-
-input[type="file"] {
-  padding: 1px 2px;
-}
-
-a {
-  color: #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
new file mode 100644
index 00000000000..fd3a2bfd184
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
@@ -0,0 +1,292 @@
+---
+id: 6537e0be715fcb57d31ba8c3
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Lastly change the text color of the `terms and conditions` link element to `#dfdfe2` by adding a new selector in the CSS.
+
+Well done! You have completed the final part of the _Registration Form_ practice project.
+
+# --hints--
+
+You should use an `a` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
+```
+
+You should give the `a` element a `color` of `#dfdfe2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+.inline{
+  display: inline; 
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+a {
+  color: #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
index 74b7964b09f..f2815e1da0e 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
@@ -17,7 +17,7 @@ You should assign the string `You dodge the attack from the` to the `text.innerT
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/);
 ```
 
-You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monster[fighting].name`.
+You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monsters[fighting].name`.
 
 ```js
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/);
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
index c2291ca73c1..bd993a6cb55 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
@@ -9,7 +9,9 @@ dashedName: step-138
 
 Back to your `attack` function - inside the `else if` block, create another `if` and `else` statement. If the player is fighting the dragon (`fighting` would be `2`), call the `winGame` function. Move the `defeatMonster()` call to the `else` block.
 
-Here is an example that checks if `num` is equal to `5`:
+For this step, you will need to use the strict equality (`===`) operator to check if `fighting` is equal to `2`. The strict equality operator will check if the values are equal and if they are the same data type.
+
+Here is an example that checks if `num` is strictly equal to `5`:
 
 ```js
 if (num === 5) {
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
index 788bdafd4ad..098cb0a8e4e 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
@@ -7,7 +7,7 @@ dashedName: step-150
 
 # --description--
 
-Add an `else` statement to the first `if` statement inside you `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
+Add an `else` statement to the first `if` statement inside your `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
 
 # --hints--
 
@@ -17,7 +17,7 @@ You should add an `else` block after your `if (isMonsterHit())` block.
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/)
 ```
 
-You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment.
+You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment and make sure there is a space before the word `You`.
 
 ```js
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/)
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
index d47f53f5a8b..7a627b89658 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
@@ -207,8 +207,8 @@ const locations = [
         "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
         "button functions": [restart, restart, restart], 
         text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
 --fcc-editable-region--
-    }
 
 --fcc-editable-region--
 ];
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
index 7b34447692f..1d84ca0e5ac 100644
--- a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
@@ -7,7 +7,7 @@ dashedName: step-165
 
 # --description--
 
-Before the final quote in that string you added, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
+At the end of the string, before the final quote, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
 
 # --hints--
 
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
new file mode 100644
index 00000000000..c8bedf3010f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
@@ -0,0 +1,248 @@
+---
+id: 65386e889dd615940cb3e042
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn about the JavaScript `Date` object by building a date formatter.
+
+All of the HTML and CSS for this project have been provided for you.
+
+Start by getting the `#current-date` element using the `.getElementById()` method and assign it to a `const` variable called `currentDateParagraph`.
+
+# --hints--
+
+You should use `const` to declare a `currentDateParagraph` variable.
+
+```js
+assert.match(code, /const\s+currentDateParagraph\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#current-date` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)current-date\1\)/);
+```
+
+You should assign the `#current-date` element to your `currentDateParagraph` variable.
+
+```js
+assert(code.match(/const\s+currentDateParagraph\s+=\s+document\.getElementById\(('|"|`)current-date\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
new file mode 100644
index 00000000000..3295a750daa
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
@@ -0,0 +1,246 @@
+---
+id: 653879d87bc55fa624280c77
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Use the `.getElementById()` method to get the `#date-options` element and use `const` to assign it to a variable named `dateOptionsSelectElement`.
+
+# --hints--
+
+You should use `const` to declare a `dateOptionsSelectElement` variable.
+
+```js
+assert.match(code, /const\s+dateOptionsSelectElement\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#date-options` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)date-options\1\)/);
+```
+
+You should assign the `#date-options` element to your `dateOptionsSelectElement` variable.
+
+```js
+assert(code.match(/const\s+dateOptionsSelectElement\s+=\s+document\.getElementById\(('|"|`)date-options\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
new file mode 100644
index 00000000000..788fae024c1
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
@@ -0,0 +1,253 @@
+---
+id: 65387b440b5cb1aa35585820
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+In JavaScript, there are many built-in <dfn>constructors</dfn> that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the `new` operator.
+
+For example, you can use the `Date()` constructor with the `new` operator to create a new `Date` object that returns a string with the current date and time:
+
+```js
+const currentDate = new Date();
+console.log(currentDate);
+
+// Output:
+// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)
+```
+
+Create a new `const` variable called `date` and assign it a `Date` object with `new Date()`.
+
+# --hints--
+
+You should use `const` to declare a `date` variable.
+
+```js
+assert.match(code, /const\s+date\s+=/);
+```
+
+You should assign a `Date` object to your `date` variable with `new Date()`.
+
+```js
+assert(code.match(/const\s+date\s+=\s+new\s+Date\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
new file mode 100644
index 00000000000..2257dace260
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
@@ -0,0 +1,253 @@
+---
+id: 6538830e01ab66ade75b869e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The `Date` object has a number of methods that allow you to get the date and time in different formats.
+
+One of those is the `.getDate()` method, which returns a number between 1-31 that represents the day of the month for that date. For example:
+
+```js
+const date = new Date();
+const dayOfTheMonth = date.getDate();
+console.log(dayOfTheMonth); // 20
+```
+
+Using `const`, create a variable named `day` and assign it the day of the month from `date` with the `.getDate()` method.
+
+# --hints--
+
+You should use `const` to declare a `day` variable.
+
+```js
+assert.match(code, /const\s+day\s+=/);
+```
+
+You should assign the `date.getDate()` to your `day` variable.
+
+```js
+assert(code.match(/const\s+day\s+=\s+date\.getDate\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
new file mode 100644
index 00000000000..856addb1fea
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
@@ -0,0 +1,248 @@
+---
+id: 653883da4a1fabaeb5f1f5e7
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+The `.getMonth()` method returns a number between `0` and `11`. This represents the month for the date provided, where `0` is January and `11` is December.  Because the number this method returns is zero-based, you need to add `1` to it to get the expected month number.
+
+Using `const`, create a variable named `month` and assign it the month from `date` with the `.getMonth()` method.
+
+Remember to add `1` to the number returned by `.getMonth()`.
+
+# --hints--
+
+You should use `const` to declare a `month` variable.
+
+```js
+assert.match(code, /const\s+month\s+=/);
+```
+
+You should assign the `date.getMonth() + 1` to your `month` variable.
+
+```js
+assert(code.match(/const\s+month\s+=\s+date\.getMonth\(\)\s*\+\s*1/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
new file mode 100644
index 00000000000..36542963348
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
@@ -0,0 +1,247 @@
+---
+id: 65388475abfb4faf8dd5e347
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The `.getFullYear()` method returns a number which represents the year for the provided date.
+
+Using `const`, create a variable named `year` and assign it the year from `date` with the `.getFullYear()` method.
+
+# --hints--
+
+You should use `const` to declare a `year` variable.
+
+```js
+assert.match(code, /const\s+year\s+=/);
+```
+
+You should assign the `date.getFullYear()` to your `year` variable.
+
+```js
+assert(code.match(/const\s+year\s+=\s+date\.getFullYear\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
new file mode 100644
index 00000000000..b43a24cadcf
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
@@ -0,0 +1,248 @@
+---
+id: 653884e09dfb4eb01f1622ed
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `.getHours()` method returns a number between `0` and `23`. This represents the hour for the provided date, where `0` is midnight and `23` is 11 p.m.
+
+Create a `const` variable named `hours` and assign it the hour from `date` with the `.getHours()` method.
+
+# --hints--
+
+You should use `const` to declare a `hours` variable.
+
+```js
+assert.match(code, /const\s+hours\s+=/);
+```
+
+You should assign the `date.getHours()` to your `hours` variable.
+
+```js
+assert(code.match(/const\s+hours\s+=\s+date\.getHours\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
new file mode 100644
index 00000000000..f44a0b50f42
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
@@ -0,0 +1,249 @@
+---
+id: 6538855514cb16b10204e712
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.
+
+Create a `const` variable named `minutes` and assign it the minutes from `date` with the `.getMinutes()` method.
+
+# --hints--
+
+You should use `const` to declare a `minutes` variable.
+
+```js
+assert.match(code, /const\s+minutes\s+=/);
+```
+
+You should assign the `date.getMinutes()` to your `minutes` variable.
+
+```js
+assert(code.match(/const\s+minutes\s+=\s+date\.getMinutes\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
new file mode 100644
index 00000000000..150461fb9c7
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
@@ -0,0 +1,248 @@
+---
+id: 653885c61ede29b1a99554a2
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Next, create a `const` variable named `formattedDate` and assign it empty template literals.
+
+# --hints--
+
+You should use `const` to declare a `formattedDate` variable.
+
+```js
+assert.match(code, /const\s+formattedDate\s*=/);
+```
+
+You should assign the empty template literals to your `formattedDate` variable.
+
+```js
+assert(code.match(/const\s+formattedDate\s*=\s*``/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
new file mode 100644
index 00000000000..2710d11ae38
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
@@ -0,0 +1,244 @@
+---
+id: 65388659a72663b27cde0699
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Inside the template literal, add an embedded expression that contains the `day` variable.
+
+# --hints--
+
+You should use the `day` constant inside the template literal.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = ``;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
new file mode 100644
index 00000000000..8dc4e4832c1
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
@@ -0,0 +1,244 @@
+---
+id: 653887098bdc39b3684a51c8
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+After the `day` variable, add a dash (`-`) followed by another embedded expression that contains the `month` variable.
+
+# --hints--
+
+You will need to use the `month` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
new file mode 100644
index 00000000000..0c42cdb142d
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
@@ -0,0 +1,244 @@
+---
+id: 65388762f61f44b3fd490a4a
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+After the `month` variable, add a dash followed by another embedded expression that contains the `year` variable.
+
+# --hints--
+
+You will need to use the `year` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}\s*-\s*\${year}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
new file mode 100644
index 00000000000..b2eaac290cd
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
@@ -0,0 +1,246 @@
+---
+id: 6538886c61a414b4e34496fe
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To see the results of the `formattedDate` variable, add a `console.log()` statement and pass in the `formattedDate` variable as an argument.
+
+Open up the console and you should see the date printed out.
+
+# --hints--
+
+You should have a `console.log(formattedDate)` line in your code.
+
+```js
+assert.match(code, /console\.log\(formattedDate\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
new file mode 100644
index 00000000000..24181f065b2
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
@@ -0,0 +1,268 @@
+---
+id: 65388ac7154e44b72c74d616
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In JavaScript, the `textContent` property is used to both get and set the text of a node.
+
+For example, here's how you can get the text content from a paragraph element with the id `example-paragraph`, and set its text content to a new value:
+
+```html
+<p id="example-paragraph">Example Text</p>
+```
+
+```js
+const exampleParagraph = document.getElementById("example-paragraph");
+console.log(exampleParagraph.textContent); // "Example Text"
+exampleParagraph.textContent = "New Text";
+console.log(exampleParagraph.textContent); // "New Text"
+```
+
+Use the `textContent` property on `currentDateParagraph` to set its text content to the value of the `formattedDate` variable.
+
+Also, make sure to remove your `console.log(formattedDate);` line.
+
+# --hints--
+
+You should use the `textContent` property to set the text content of `currentDateParagraph` to the value of the constant `formattedDate`.
+
+```js
+assert(code.match(/currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+You should not have a `console.log(formattedDate);` line in your code.
+
+```js
+assert.notMatch(code, /console\.log\(formattedDate\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+console.log(formattedDate);
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
new file mode 100644
index 00000000000..2b3c02282b1
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
@@ -0,0 +1,259 @@
+---
+id: 65388bbcbf6928b83fc424d1
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.
+
+```js
+element.addEventListener("change", () => {
+
+});
+```
+
+Chain the `addEventListener` method to `dateOptionsSelectElement` where the first argument is `change` and the second argument is an empty arrow function.
+
+# --hints--
+
+You should use the `addEventListener` method to add a `change` event listener to `dateOptionsSelectElement`.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*['"]change/g));
+```
+
+You should add an empty arrow function as the second argument to the `addEventListener` method.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*(['"])change\1\s*,\s*\(\s*\)\s*=>\s*{\s*}/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
new file mode 100644
index 00000000000..7f471fcf376
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
@@ -0,0 +1,268 @@
+---
+id: 65388d61a57a00b9ad0d0817
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+When a user makes a selection from the dropdown menu, the function should get the user's value and display the date in their chosen date format. To do this, you can use the `switch` statement.
+
+A `switch` statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It's commonly used for branching logic.
+
+For example, here's how to compare the expression `dayOfWeek` against possible values:
+
+```js
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+Create a `switch` statement and use `dateOptionsSelectElement.value` as the expression.
+
+# --hints--
+
+You should use a `switch` statement where `dateOptionsSelectElement.value` is the expression.
+
+```js
+assert(code.match(/switch\s*\(\s*dateOptionsSelectElement.value\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
new file mode 100644
index 00000000000..83cfa83fd2b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -0,0 +1,262 @@
+---
+id: 65388edfdf364fbb04e426f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+When the user chooses the `Year, Month, Day` option from the dropdown, the date format should reflect this choice.
+
+To do this, you can add a `case` in the `switch` statement, followed by your logic.
+
+```js
+switch (expression) {
+  case 'case123':
+    // Write your logic here
+}
+```
+
+Add a `case` where the value is `yyyy-mm-dd`. Inside the `case`, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+
+# --hints--
+
+You should add a `case` where the condition is `yyyy-mm-dd`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`.
+
+```js
+assert(code.match(/case\s*(['"])yyyy-mm-dd\1\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+  switch (dateOptionsSelectElement.value) {
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
new file mode 100644
index 00000000000..02993fa4aad
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
@@ -0,0 +1,259 @@
+---
+id: 65389211a8d86bbd876a2a74
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+In JavaScript, the `.split()` method is used to split up a string into an array of substrings. This method has an optional separator parameter, which indicates where each split should happen.
+
+```js
+"coca-cola".split("-"); // [ 'coca', 'cola' ]
+```
+
+Split `formattedDate` into an array of substrings with the `.split()` method and use a `"-"` as the separator.
+
+# --hints--
+
+You should use the `.split()` method with `"-"` as the separator to split `formattedDate` into an array of substrings.
+
+```js
+assert(code.match(/formattedDate[\s\S]*?\.split\(\s*(['"`])-\1\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
new file mode 100644
index 00000000000..873ad4fd565
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
@@ -0,0 +1,262 @@
+---
+id: 65389306578c34be5c93bc35
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The `.reverse()` method is used to reverse an array in place. For example:
+
+```js
+const array = [1, 2, 3, 4, 5];
+array.reverse();
+console.log(array); // [5, 4, 3, 2, 1]
+```
+
+Chain the `.reverse()` method to the end of `.split()` method.
+
+# --hints--
+
+You should use the `.reverse()` method to reverse the order of the array returned by `.split()`.
+
+```js
+assert(code.match(/\.reverse\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
new file mode 100644
index 00000000000..3253ba8d27b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
@@ -0,0 +1,257 @@
+---
+id: 6538935e2ab721beedb137c4
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Finally, you need to create a string with the reversed array elements separated by dash (`-`) character.
+
+Use the `.join()` method to join the reversed array elements into a string and use a `"-"` for the separator.
+
+# --hints--
+
+You should use the `.join()` method to join the reversed array elements into a string and use a `"-"` as a separator.
+
+```js
+assert(code.match(/\.join\((['"])-\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
new file mode 100644
index 00000000000..bd71851d497
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
@@ -0,0 +1,268 @@
+---
+id: 653898fa7eee37c57b960e35
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+If your `switch` statement is going to have multiple cases, it is best practice to include a `break` statement.
+
+The `break` statement will tell the JavaScript interpreter to stop executing statements. Without adding a `break` statement at the end of each `case` block, the program will execute the code for all matching `cases`.
+
+```js
+switch (someVariable) {
+  case 'case123':
+    // Write your logic here
+    break; // Terminates the switch statement
+}
+```
+
+Add a `break` statement to the end of your `case` block.
+
+# --hints--
+
+You should add a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
new file mode 100644
index 00000000000..8ce925e00f1
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -0,0 +1,265 @@
+---
+id: 65389a63d3b1d6c764c0e10e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `case` with the value `mm-dd-yyyy-h-mm`. Inside that `case`, set the text content of `currentDateParagraph` to empty template literals.
+
+Also, make sure to include a `break` statement to terminate the `switch` statement.
+
+# --hints--
+
+You should add a `case` where the condition is `mm-dd-yyyy-h-mm`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals.
+
+```js
+assert(code.match(/case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph.textContent\s*=\s*``/g));
+```
+
+You should include a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
new file mode 100644
index 00000000000..85d6fe3c758
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
@@ -0,0 +1,261 @@
+---
+id: 65389de504d0f2ca10e92a57
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Inside the `case` for `mm-dd-yyyy-h-mm`, set the `textContent` property of `currentDateParagraph` to `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`.
+
+
+# --hints--
+
+You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.
+
+```js
+const pattern = /case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*`(\$\{month}-\$\{day}-\$\{year} \$\{hours} Hours \$\{minutes} Minutes)`/;
+assert(code.match(pattern));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = ``;
+      break;
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
new file mode 100644
index 00000000000..9e6b380ff8f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -0,0 +1,519 @@
+---
+id: 65389eff4893facbbe6eae67
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In a `switch` statement, the `default` case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:
+
+```js
+const dayOfWeek = 7;
+
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+For the `default` case, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+And with that, your date formatter is complete! You can now format the current date three different ways.
+
+# --hints--
+
+You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.
+
+```js
+assert(code.match(/default\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
+
+# --solutions--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break; 
+    default:
+      currentDateParagraph.textContent = formattedDate;
+  }
+});
+
+```
diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
index 48570c4b9f0..e9e31834575 100644
--- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
+++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
@@ -20,7 +20,7 @@ dashedName: use-conditional-logic-with-if-statements
 **示例**
 
 ```js
-function test (myCondition) {
+function test(myCondition) {
   if (myCondition) {
     return "It was true";
   }
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index 1bde2824098..3ecb798c28f 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -36,13 +36,20 @@ assert(
 鏈接的文本應該是 `cat photos`。 你可能忽略了文本或有拼寫錯誤。
 
 ```js
-const nestedAnchor = document.querySelector(`p > a`);
-assert(
-  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isTrue(innerContent.trim() === 'cat photos');
 ```
 
-在嵌套了錨點元素（`a`）之後，瀏覽器中顯示的 `p` 元素應該僅爲 `See more cat photos in our gallery.`。再次檢查 `p` 和嵌套其中的錨點元素的文本、間距或標點。
+The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`.
+
+```js
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
+```
+
+After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
 
 ```js
 assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
index 2d15b502e26..cb7f01f0065 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -7,9 +7,8 @@ dashedName: step-64
 
 # --description--
 
-Last, but not least, make the `input` for the terms and condition `inline`, then change the text color of the `terms and conditions` link element to `#dfdfe2`.
+Make the `input` for the terms and conditions `inline` by adding the appropriate class in the HTML.
 
-很棒！ 你已經完成了_註冊表_練習項目的最後一部分。
 
 # --hints--
 
@@ -19,18 +18,6 @@ You should give the `input` a class of `inline`.
 assert(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline'));
 ```
 
-You should use an `a` element selector.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
-```
-
-You should give the `a` element a `color` of `#dfdfe2`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
-```
-
 # --seed--
 
 ## --seed-contents--
@@ -164,133 +151,3 @@ input[type="file"] {
 --fcc-editable-region--
 
 ```
-
-# --solutions--
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Registration Form</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <h1>Registration Form</h1>
-    <p>Please fill out this form with the required information</p>
-    <form method="post" action='https://register-demo.freecodecamp.org'>
-      <fieldset>
-        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
-        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
-        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
-        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
-      </fieldset>
-      <fieldset>
-        <legend>Account type (required)</legend>
-        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
-        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
-      </fieldset>
-      <fieldset>
-        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
-        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
-        <label for="referrer">How did you hear about us?
-          <select id="referrer" name="referrer">
-            <option value="">(select one)</option>
-            <option value="1">freeCodeCamp News</option>
-            <option value="2">freeCodeCamp YouTube Channel</option>
-            <option value="3">freeCodeCamp Forum</option>
-            <option value="4">Other</option>
-          </select>
-        </label>
-        <label for="bio">Provide a bio:
-          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
-        </label>
-      </fieldset>
-      <label for="terms-and-conditions">
-        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
-      </label>
-      <input type="submit" value="Submit" />
-    </form>
-  </body>
-</html>
-```
-
-```css
-body {
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  background-color: #1b1b32;
-  color: #f5f6f7;
-  font-family: Tahoma;
-  font-size: 16px;
-}
-
-h1, p {
-  margin: 1em auto;
-  text-align: center;
-}
-
-form {
-  width: 60vw;
-  max-width: 500px;
-  min-width: 300px;
-  margin: 0 auto;
-  padding-bottom: 2em;
-}
-
-fieldset {
-  border: none;
-  padding: 2rem 0;
-  border-bottom: 3px solid #3b3b4f;
-}
-
-fieldset:last-of-type {
-  border-bottom: none;
-}
-
-label {
-  display: block;
-  margin: 0.5rem 0;
-}
-
-input,
-textarea,
-select {
-  margin: 10px 0 0 0;
-  width: 100%;
-  min-height: 2em;
-}
-
-input, textarea {
-  background-color: #0a0a23;
-  border: 1px solid #0a0a23;
-  color: #ffffff;
-}
-
-.inline {
-  width: unset;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-
-input[type="submit"] {
-  display: block;
-  width: 60%;
-  margin: 1em auto;
-  height: 2em;
-  font-size: 1.1rem;
-  background-color: #3b3b4f;
-  border-color: white;
-  min-width: 300px;
-}
-
-input[type="file"] {
-  padding: 1px 2px;
-}
-
-a {
-  color: #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
new file mode 100644
index 00000000000..fd3a2bfd184
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
@@ -0,0 +1,292 @@
+---
+id: 6537e0be715fcb57d31ba8c3
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Lastly change the text color of the `terms and conditions` link element to `#dfdfe2` by adding a new selector in the CSS.
+
+Well done! You have completed the final part of the _Registration Form_ practice project.
+
+# --hints--
+
+You should use an `a` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
+```
+
+You should give the `a` element a `color` of `#dfdfe2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+.inline{
+  display: inline; 
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+a {
+  color: #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
index 74b7964b09f..f2815e1da0e 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
@@ -17,7 +17,7 @@ You should assign the string `You dodge the attack from the` to the `text.innerT
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/);
 ```
 
-You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monster[fighting].name`.
+You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monsters[fighting].name`.
 
 ```js
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/);
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
index c2291ca73c1..bd993a6cb55 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
@@ -9,7 +9,9 @@ dashedName: step-138
 
 Back to your `attack` function - inside the `else if` block, create another `if` and `else` statement. If the player is fighting the dragon (`fighting` would be `2`), call the `winGame` function. Move the `defeatMonster()` call to the `else` block.
 
-Here is an example that checks if `num` is equal to `5`:
+For this step, you will need to use the strict equality (`===`) operator to check if `fighting` is equal to `2`. The strict equality operator will check if the values are equal and if they are the same data type.
+
+Here is an example that checks if `num` is strictly equal to `5`:
 
 ```js
 if (num === 5) {
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
index 788bdafd4ad..098cb0a8e4e 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
@@ -7,7 +7,7 @@ dashedName: step-150
 
 # --description--
 
-Add an `else` statement to the first `if` statement inside you `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
+Add an `else` statement to the first `if` statement inside your `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
 
 # --hints--
 
@@ -17,7 +17,7 @@ You should add an `else` block after your `if (isMonsterHit())` block.
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/)
 ```
 
-You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment.
+You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment and make sure there is a space before the word `You`.
 
 ```js
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/)
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
index d47f53f5a8b..7a627b89658 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
@@ -207,8 +207,8 @@ const locations = [
         "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
         "button functions": [restart, restart, restart], 
         text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
 --fcc-editable-region--
-    }
 
 --fcc-editable-region--
 ];
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
index 7b34447692f..1d84ca0e5ac 100644
--- a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
@@ -7,7 +7,7 @@ dashedName: step-165
 
 # --description--
 
-Before the final quote in that string you added, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
+At the end of the string, before the final quote, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
new file mode 100644
index 00000000000..c8bedf3010f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
@@ -0,0 +1,248 @@
+---
+id: 65386e889dd615940cb3e042
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn about the JavaScript `Date` object by building a date formatter.
+
+All of the HTML and CSS for this project have been provided for you.
+
+Start by getting the `#current-date` element using the `.getElementById()` method and assign it to a `const` variable called `currentDateParagraph`.
+
+# --hints--
+
+You should use `const` to declare a `currentDateParagraph` variable.
+
+```js
+assert.match(code, /const\s+currentDateParagraph\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#current-date` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)current-date\1\)/);
+```
+
+You should assign the `#current-date` element to your `currentDateParagraph` variable.
+
+```js
+assert(code.match(/const\s+currentDateParagraph\s+=\s+document\.getElementById\(('|"|`)current-date\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
new file mode 100644
index 00000000000..3295a750daa
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
@@ -0,0 +1,246 @@
+---
+id: 653879d87bc55fa624280c77
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Use the `.getElementById()` method to get the `#date-options` element and use `const` to assign it to a variable named `dateOptionsSelectElement`.
+
+# --hints--
+
+You should use `const` to declare a `dateOptionsSelectElement` variable.
+
+```js
+assert.match(code, /const\s+dateOptionsSelectElement\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#date-options` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)date-options\1\)/);
+```
+
+You should assign the `#date-options` element to your `dateOptionsSelectElement` variable.
+
+```js
+assert(code.match(/const\s+dateOptionsSelectElement\s+=\s+document\.getElementById\(('|"|`)date-options\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
new file mode 100644
index 00000000000..788fae024c1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
@@ -0,0 +1,253 @@
+---
+id: 65387b440b5cb1aa35585820
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+In JavaScript, there are many built-in <dfn>constructors</dfn> that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the `new` operator.
+
+For example, you can use the `Date()` constructor with the `new` operator to create a new `Date` object that returns a string with the current date and time:
+
+```js
+const currentDate = new Date();
+console.log(currentDate);
+
+// Output:
+// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)
+```
+
+Create a new `const` variable called `date` and assign it a `Date` object with `new Date()`.
+
+# --hints--
+
+You should use `const` to declare a `date` variable.
+
+```js
+assert.match(code, /const\s+date\s+=/);
+```
+
+You should assign a `Date` object to your `date` variable with `new Date()`.
+
+```js
+assert(code.match(/const\s+date\s+=\s+new\s+Date\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
new file mode 100644
index 00000000000..2257dace260
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
@@ -0,0 +1,253 @@
+---
+id: 6538830e01ab66ade75b869e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The `Date` object has a number of methods that allow you to get the date and time in different formats.
+
+One of those is the `.getDate()` method, which returns a number between 1-31 that represents the day of the month for that date. For example:
+
+```js
+const date = new Date();
+const dayOfTheMonth = date.getDate();
+console.log(dayOfTheMonth); // 20
+```
+
+Using `const`, create a variable named `day` and assign it the day of the month from `date` with the `.getDate()` method.
+
+# --hints--
+
+You should use `const` to declare a `day` variable.
+
+```js
+assert.match(code, /const\s+day\s+=/);
+```
+
+You should assign the `date.getDate()` to your `day` variable.
+
+```js
+assert(code.match(/const\s+day\s+=\s+date\.getDate\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
new file mode 100644
index 00000000000..856addb1fea
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
@@ -0,0 +1,248 @@
+---
+id: 653883da4a1fabaeb5f1f5e7
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+The `.getMonth()` method returns a number between `0` and `11`. This represents the month for the date provided, where `0` is January and `11` is December.  Because the number this method returns is zero-based, you need to add `1` to it to get the expected month number.
+
+Using `const`, create a variable named `month` and assign it the month from `date` with the `.getMonth()` method.
+
+Remember to add `1` to the number returned by `.getMonth()`.
+
+# --hints--
+
+You should use `const` to declare a `month` variable.
+
+```js
+assert.match(code, /const\s+month\s+=/);
+```
+
+You should assign the `date.getMonth() + 1` to your `month` variable.
+
+```js
+assert(code.match(/const\s+month\s+=\s+date\.getMonth\(\)\s*\+\s*1/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
new file mode 100644
index 00000000000..36542963348
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
@@ -0,0 +1,247 @@
+---
+id: 65388475abfb4faf8dd5e347
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The `.getFullYear()` method returns a number which represents the year for the provided date.
+
+Using `const`, create a variable named `year` and assign it the year from `date` with the `.getFullYear()` method.
+
+# --hints--
+
+You should use `const` to declare a `year` variable.
+
+```js
+assert.match(code, /const\s+year\s+=/);
+```
+
+You should assign the `date.getFullYear()` to your `year` variable.
+
+```js
+assert(code.match(/const\s+year\s+=\s+date\.getFullYear\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
new file mode 100644
index 00000000000..b43a24cadcf
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
@@ -0,0 +1,248 @@
+---
+id: 653884e09dfb4eb01f1622ed
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `.getHours()` method returns a number between `0` and `23`. This represents the hour for the provided date, where `0` is midnight and `23` is 11 p.m.
+
+Create a `const` variable named `hours` and assign it the hour from `date` with the `.getHours()` method.
+
+# --hints--
+
+You should use `const` to declare a `hours` variable.
+
+```js
+assert.match(code, /const\s+hours\s+=/);
+```
+
+You should assign the `date.getHours()` to your `hours` variable.
+
+```js
+assert(code.match(/const\s+hours\s+=\s+date\.getHours\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
new file mode 100644
index 00000000000..f44a0b50f42
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
@@ -0,0 +1,249 @@
+---
+id: 6538855514cb16b10204e712
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.
+
+Create a `const` variable named `minutes` and assign it the minutes from `date` with the `.getMinutes()` method.
+
+# --hints--
+
+You should use `const` to declare a `minutes` variable.
+
+```js
+assert.match(code, /const\s+minutes\s+=/);
+```
+
+You should assign the `date.getMinutes()` to your `minutes` variable.
+
+```js
+assert(code.match(/const\s+minutes\s+=\s+date\.getMinutes\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
new file mode 100644
index 00000000000..150461fb9c7
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
@@ -0,0 +1,248 @@
+---
+id: 653885c61ede29b1a99554a2
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Next, create a `const` variable named `formattedDate` and assign it empty template literals.
+
+# --hints--
+
+You should use `const` to declare a `formattedDate` variable.
+
+```js
+assert.match(code, /const\s+formattedDate\s*=/);
+```
+
+You should assign the empty template literals to your `formattedDate` variable.
+
+```js
+assert(code.match(/const\s+formattedDate\s*=\s*``/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
new file mode 100644
index 00000000000..2710d11ae38
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
@@ -0,0 +1,244 @@
+---
+id: 65388659a72663b27cde0699
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Inside the template literal, add an embedded expression that contains the `day` variable.
+
+# --hints--
+
+You should use the `day` constant inside the template literal.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = ``;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
new file mode 100644
index 00000000000..8dc4e4832c1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
@@ -0,0 +1,244 @@
+---
+id: 653887098bdc39b3684a51c8
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+After the `day` variable, add a dash (`-`) followed by another embedded expression that contains the `month` variable.
+
+# --hints--
+
+You will need to use the `month` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
new file mode 100644
index 00000000000..0c42cdb142d
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
@@ -0,0 +1,244 @@
+---
+id: 65388762f61f44b3fd490a4a
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+After the `month` variable, add a dash followed by another embedded expression that contains the `year` variable.
+
+# --hints--
+
+You will need to use the `year` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}\s*-\s*\${year}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
new file mode 100644
index 00000000000..b2eaac290cd
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
@@ -0,0 +1,246 @@
+---
+id: 6538886c61a414b4e34496fe
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To see the results of the `formattedDate` variable, add a `console.log()` statement and pass in the `formattedDate` variable as an argument.
+
+Open up the console and you should see the date printed out.
+
+# --hints--
+
+You should have a `console.log(formattedDate)` line in your code.
+
+```js
+assert.match(code, /console\.log\(formattedDate\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
new file mode 100644
index 00000000000..24181f065b2
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
@@ -0,0 +1,268 @@
+---
+id: 65388ac7154e44b72c74d616
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In JavaScript, the `textContent` property is used to both get and set the text of a node.
+
+For example, here's how you can get the text content from a paragraph element with the id `example-paragraph`, and set its text content to a new value:
+
+```html
+<p id="example-paragraph">Example Text</p>
+```
+
+```js
+const exampleParagraph = document.getElementById("example-paragraph");
+console.log(exampleParagraph.textContent); // "Example Text"
+exampleParagraph.textContent = "New Text";
+console.log(exampleParagraph.textContent); // "New Text"
+```
+
+Use the `textContent` property on `currentDateParagraph` to set its text content to the value of the `formattedDate` variable.
+
+Also, make sure to remove your `console.log(formattedDate);` line.
+
+# --hints--
+
+You should use the `textContent` property to set the text content of `currentDateParagraph` to the value of the constant `formattedDate`.
+
+```js
+assert(code.match(/currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+You should not have a `console.log(formattedDate);` line in your code.
+
+```js
+assert.notMatch(code, /console\.log\(formattedDate\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+console.log(formattedDate);
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
new file mode 100644
index 00000000000..2b3c02282b1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
@@ -0,0 +1,259 @@
+---
+id: 65388bbcbf6928b83fc424d1
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.
+
+```js
+element.addEventListener("change", () => {
+
+});
+```
+
+Chain the `addEventListener` method to `dateOptionsSelectElement` where the first argument is `change` and the second argument is an empty arrow function.
+
+# --hints--
+
+You should use the `addEventListener` method to add a `change` event listener to `dateOptionsSelectElement`.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*['"]change/g));
+```
+
+You should add an empty arrow function as the second argument to the `addEventListener` method.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*(['"])change\1\s*,\s*\(\s*\)\s*=>\s*{\s*}/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
new file mode 100644
index 00000000000..7f471fcf376
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
@@ -0,0 +1,268 @@
+---
+id: 65388d61a57a00b9ad0d0817
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+When a user makes a selection from the dropdown menu, the function should get the user's value and display the date in their chosen date format. To do this, you can use the `switch` statement.
+
+A `switch` statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It's commonly used for branching logic.
+
+For example, here's how to compare the expression `dayOfWeek` against possible values:
+
+```js
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+Create a `switch` statement and use `dateOptionsSelectElement.value` as the expression.
+
+# --hints--
+
+You should use a `switch` statement where `dateOptionsSelectElement.value` is the expression.
+
+```js
+assert(code.match(/switch\s*\(\s*dateOptionsSelectElement.value\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
new file mode 100644
index 00000000000..83cfa83fd2b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -0,0 +1,262 @@
+---
+id: 65388edfdf364fbb04e426f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+When the user chooses the `Year, Month, Day` option from the dropdown, the date format should reflect this choice.
+
+To do this, you can add a `case` in the `switch` statement, followed by your logic.
+
+```js
+switch (expression) {
+  case 'case123':
+    // Write your logic here
+}
+```
+
+Add a `case` where the value is `yyyy-mm-dd`. Inside the `case`, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+
+# --hints--
+
+You should add a `case` where the condition is `yyyy-mm-dd`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`.
+
+```js
+assert(code.match(/case\s*(['"])yyyy-mm-dd\1\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+  switch (dateOptionsSelectElement.value) {
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
new file mode 100644
index 00000000000..02993fa4aad
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
@@ -0,0 +1,259 @@
+---
+id: 65389211a8d86bbd876a2a74
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+In JavaScript, the `.split()` method is used to split up a string into an array of substrings. This method has an optional separator parameter, which indicates where each split should happen.
+
+```js
+"coca-cola".split("-"); // [ 'coca', 'cola' ]
+```
+
+Split `formattedDate` into an array of substrings with the `.split()` method and use a `"-"` as the separator.
+
+# --hints--
+
+You should use the `.split()` method with `"-"` as the separator to split `formattedDate` into an array of substrings.
+
+```js
+assert(code.match(/formattedDate[\s\S]*?\.split\(\s*(['"`])-\1\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
new file mode 100644
index 00000000000..873ad4fd565
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
@@ -0,0 +1,262 @@
+---
+id: 65389306578c34be5c93bc35
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The `.reverse()` method is used to reverse an array in place. For example:
+
+```js
+const array = [1, 2, 3, 4, 5];
+array.reverse();
+console.log(array); // [5, 4, 3, 2, 1]
+```
+
+Chain the `.reverse()` method to the end of `.split()` method.
+
+# --hints--
+
+You should use the `.reverse()` method to reverse the order of the array returned by `.split()`.
+
+```js
+assert(code.match(/\.reverse\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
new file mode 100644
index 00000000000..3253ba8d27b
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
@@ -0,0 +1,257 @@
+---
+id: 6538935e2ab721beedb137c4
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Finally, you need to create a string with the reversed array elements separated by dash (`-`) character.
+
+Use the `.join()` method to join the reversed array elements into a string and use a `"-"` for the separator.
+
+# --hints--
+
+You should use the `.join()` method to join the reversed array elements into a string and use a `"-"` as a separator.
+
+```js
+assert(code.match(/\.join\((['"])-\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
new file mode 100644
index 00000000000..bd71851d497
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
@@ -0,0 +1,268 @@
+---
+id: 653898fa7eee37c57b960e35
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+If your `switch` statement is going to have multiple cases, it is best practice to include a `break` statement.
+
+The `break` statement will tell the JavaScript interpreter to stop executing statements. Without adding a `break` statement at the end of each `case` block, the program will execute the code for all matching `cases`.
+
+```js
+switch (someVariable) {
+  case 'case123':
+    // Write your logic here
+    break; // Terminates the switch statement
+}
+```
+
+Add a `break` statement to the end of your `case` block.
+
+# --hints--
+
+You should add a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
new file mode 100644
index 00000000000..8ce925e00f1
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -0,0 +1,265 @@
+---
+id: 65389a63d3b1d6c764c0e10e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `case` with the value `mm-dd-yyyy-h-mm`. Inside that `case`, set the text content of `currentDateParagraph` to empty template literals.
+
+Also, make sure to include a `break` statement to terminate the `switch` statement.
+
+# --hints--
+
+You should add a `case` where the condition is `mm-dd-yyyy-h-mm`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals.
+
+```js
+assert(code.match(/case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph.textContent\s*=\s*``/g));
+```
+
+You should include a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
new file mode 100644
index 00000000000..85d6fe3c758
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
@@ -0,0 +1,261 @@
+---
+id: 65389de504d0f2ca10e92a57
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Inside the `case` for `mm-dd-yyyy-h-mm`, set the `textContent` property of `currentDateParagraph` to `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`.
+
+
+# --hints--
+
+You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.
+
+```js
+const pattern = /case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*`(\$\{month}-\$\{day}-\$\{year} \$\{hours} Hours \$\{minutes} Minutes)`/;
+assert(code.match(pattern));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = ``;
+      break;
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
new file mode 100644
index 00000000000..9e6b380ff8f
--- /dev/null
+++ b/curriculum/challenges/chinese-traditional/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -0,0 +1,519 @@
+---
+id: 65389eff4893facbbe6eae67
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In a `switch` statement, the `default` case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:
+
+```js
+const dayOfWeek = 7;
+
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+For the `default` case, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+And with that, your date formatter is complete! You can now format the current date three different ways.
+
+# --hints--
+
+You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.
+
+```js
+assert(code.match(/default\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
+
+# --solutions--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break; 
+    default:
+      currentDateParagraph.textContent = formattedDate;
+  }
+});
+
+```
diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
index fa95626af42..1d86b937fec 100644
--- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
+++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
@@ -20,7 +20,7 @@ dashedName: use-conditional-logic-with-if-statements
 **示例**
 
 ```js
-function test (myCondition) {
+function test(myCondition) {
   if (myCondition) {
     return "It was true";
   }
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index 193cd2f5b20..2118fca4b37 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -36,13 +36,20 @@ assert(
 链接的文本应该是 `cat photos`。 你可能忽略了文本或有拼写错误。
 
 ```js
-const nestedAnchor = document.querySelector(`p > a`);
-assert(
-  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isTrue(innerContent.trim() === 'cat photos');
 ```
 
-在嵌套了锚点元素（`a`）之后，浏览器中显示的 `p` 元素应该仅为 `See more cat photos in our gallery.`。再次检查 `p` 和嵌套其中的锚点元素的文本、间距或标点。
+The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`.
+
+```js
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
+```
+
+After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
 
 ```js
 assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
index dbc048c97f4..cb7f01f0065 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -7,9 +7,8 @@ dashedName: step-64
 
 # --description--
 
-Last, but not least, make the `input` for the terms and condition `inline`, then change the text color of the `terms and conditions` link element to `#dfdfe2`.
+Make the `input` for the terms and conditions `inline` by adding the appropriate class in the HTML.
 
-很棒！ 你已经完成了_注册表_练习项目的最后一部分。
 
 # --hints--
 
@@ -19,18 +18,6 @@ You should give the `input` a class of `inline`.
 assert(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline'));
 ```
 
-You should use an `a` element selector.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
-```
-
-You should give the `a` element a `color` of `#dfdfe2`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
-```
-
 # --seed--
 
 ## --seed-contents--
@@ -164,133 +151,3 @@ input[type="file"] {
 --fcc-editable-region--
 
 ```
-
-# --solutions--
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Registration Form</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <h1>Registration Form</h1>
-    <p>Please fill out this form with the required information</p>
-    <form method="post" action='https://register-demo.freecodecamp.org'>
-      <fieldset>
-        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
-        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
-        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
-        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
-      </fieldset>
-      <fieldset>
-        <legend>Account type (required)</legend>
-        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
-        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
-      </fieldset>
-      <fieldset>
-        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
-        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
-        <label for="referrer">How did you hear about us?
-          <select id="referrer" name="referrer">
-            <option value="">(select one)</option>
-            <option value="1">freeCodeCamp News</option>
-            <option value="2">freeCodeCamp YouTube Channel</option>
-            <option value="3">freeCodeCamp Forum</option>
-            <option value="4">Other</option>
-          </select>
-        </label>
-        <label for="bio">Provide a bio:
-          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
-        </label>
-      </fieldset>
-      <label for="terms-and-conditions">
-        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
-      </label>
-      <input type="submit" value="Submit" />
-    </form>
-  </body>
-</html>
-```
-
-```css
-body {
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  background-color: #1b1b32;
-  color: #f5f6f7;
-  font-family: Tahoma;
-  font-size: 16px;
-}
-
-h1, p {
-  margin: 1em auto;
-  text-align: center;
-}
-
-form {
-  width: 60vw;
-  max-width: 500px;
-  min-width: 300px;
-  margin: 0 auto;
-  padding-bottom: 2em;
-}
-
-fieldset {
-  border: none;
-  padding: 2rem 0;
-  border-bottom: 3px solid #3b3b4f;
-}
-
-fieldset:last-of-type {
-  border-bottom: none;
-}
-
-label {
-  display: block;
-  margin: 0.5rem 0;
-}
-
-input,
-textarea,
-select {
-  margin: 10px 0 0 0;
-  width: 100%;
-  min-height: 2em;
-}
-
-input, textarea {
-  background-color: #0a0a23;
-  border: 1px solid #0a0a23;
-  color: #ffffff;
-}
-
-.inline {
-  width: unset;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-
-input[type="submit"] {
-  display: block;
-  width: 60%;
-  margin: 1em auto;
-  height: 2em;
-  font-size: 1.1rem;
-  background-color: #3b3b4f;
-  border-color: white;
-  min-width: 300px;
-}
-
-input[type="file"] {
-  padding: 1px 2px;
-}
-
-a {
-  color: #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
new file mode 100644
index 00000000000..fd3a2bfd184
--- /dev/null
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
@@ -0,0 +1,292 @@
+---
+id: 6537e0be715fcb57d31ba8c3
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Lastly change the text color of the `terms and conditions` link element to `#dfdfe2` by adding a new selector in the CSS.
+
+Well done! You have completed the final part of the _Registration Form_ practice project.
+
+# --hints--
+
+You should use an `a` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
+```
+
+You should give the `a` element a `color` of `#dfdfe2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+.inline{
+  display: inline; 
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+a {
+  color: #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
index 74b7964b09f..f2815e1da0e 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
@@ -17,7 +17,7 @@ You should assign the string `You dodge the attack from the` to the `text.innerT
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/);
 ```
 
-You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monster[fighting].name`.
+You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monsters[fighting].name`.
 
 ```js
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/);
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
index c2291ca73c1..bd993a6cb55 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
@@ -9,7 +9,9 @@ dashedName: step-138
 
 Back to your `attack` function - inside the `else if` block, create another `if` and `else` statement. If the player is fighting the dragon (`fighting` would be `2`), call the `winGame` function. Move the `defeatMonster()` call to the `else` block.
 
-Here is an example that checks if `num` is equal to `5`:
+For this step, you will need to use the strict equality (`===`) operator to check if `fighting` is equal to `2`. The strict equality operator will check if the values are equal and if they are the same data type.
+
+Here is an example that checks if `num` is strictly equal to `5`:
 
 ```js
 if (num === 5) {
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
index 788bdafd4ad..098cb0a8e4e 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
@@ -7,7 +7,7 @@ dashedName: step-150
 
 # --description--
 
-Add an `else` statement to the first `if` statement inside you `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
+Add an `else` statement to the first `if` statement inside your `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
 
 # --hints--
 
@@ -17,7 +17,7 @@ You should add an `else` block after your `if (isMonsterHit())` block.
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/)
 ```
 
-You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment.
+You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment and make sure there is a space before the word `You`.
 
 ```js
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/)
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
index d47f53f5a8b..7a627b89658 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
@@ -207,8 +207,8 @@ const locations = [
         "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
         "button functions": [restart, restart, restart], 
         text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
 --fcc-editable-region--
-    }
 
 --fcc-editable-region--
 ];
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
index 7b34447692f..1d84ca0e5ac 100644
--- a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
@@ -7,7 +7,7 @@ dashedName: step-165
 
 # --description--
 
-Before the final quote in that string you added, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
+At the end of the string, before the final quote, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
new file mode 100644
index 00000000000..c8bedf3010f
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
@@ -0,0 +1,248 @@
+---
+id: 65386e889dd615940cb3e042
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn about the JavaScript `Date` object by building a date formatter.
+
+All of the HTML and CSS for this project have been provided for you.
+
+Start by getting the `#current-date` element using the `.getElementById()` method and assign it to a `const` variable called `currentDateParagraph`.
+
+# --hints--
+
+You should use `const` to declare a `currentDateParagraph` variable.
+
+```js
+assert.match(code, /const\s+currentDateParagraph\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#current-date` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)current-date\1\)/);
+```
+
+You should assign the `#current-date` element to your `currentDateParagraph` variable.
+
+```js
+assert(code.match(/const\s+currentDateParagraph\s+=\s+document\.getElementById\(('|"|`)current-date\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
new file mode 100644
index 00000000000..3295a750daa
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
@@ -0,0 +1,246 @@
+---
+id: 653879d87bc55fa624280c77
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Use the `.getElementById()` method to get the `#date-options` element and use `const` to assign it to a variable named `dateOptionsSelectElement`.
+
+# --hints--
+
+You should use `const` to declare a `dateOptionsSelectElement` variable.
+
+```js
+assert.match(code, /const\s+dateOptionsSelectElement\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#date-options` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)date-options\1\)/);
+```
+
+You should assign the `#date-options` element to your `dateOptionsSelectElement` variable.
+
+```js
+assert(code.match(/const\s+dateOptionsSelectElement\s+=\s+document\.getElementById\(('|"|`)date-options\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
new file mode 100644
index 00000000000..788fae024c1
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
@@ -0,0 +1,253 @@
+---
+id: 65387b440b5cb1aa35585820
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+In JavaScript, there are many built-in <dfn>constructors</dfn> that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the `new` operator.
+
+For example, you can use the `Date()` constructor with the `new` operator to create a new `Date` object that returns a string with the current date and time:
+
+```js
+const currentDate = new Date();
+console.log(currentDate);
+
+// Output:
+// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)
+```
+
+Create a new `const` variable called `date` and assign it a `Date` object with `new Date()`.
+
+# --hints--
+
+You should use `const` to declare a `date` variable.
+
+```js
+assert.match(code, /const\s+date\s+=/);
+```
+
+You should assign a `Date` object to your `date` variable with `new Date()`.
+
+```js
+assert(code.match(/const\s+date\s+=\s+new\s+Date\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
new file mode 100644
index 00000000000..2257dace260
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
@@ -0,0 +1,253 @@
+---
+id: 6538830e01ab66ade75b869e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The `Date` object has a number of methods that allow you to get the date and time in different formats.
+
+One of those is the `.getDate()` method, which returns a number between 1-31 that represents the day of the month for that date. For example:
+
+```js
+const date = new Date();
+const dayOfTheMonth = date.getDate();
+console.log(dayOfTheMonth); // 20
+```
+
+Using `const`, create a variable named `day` and assign it the day of the month from `date` with the `.getDate()` method.
+
+# --hints--
+
+You should use `const` to declare a `day` variable.
+
+```js
+assert.match(code, /const\s+day\s+=/);
+```
+
+You should assign the `date.getDate()` to your `day` variable.
+
+```js
+assert(code.match(/const\s+day\s+=\s+date\.getDate\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
new file mode 100644
index 00000000000..856addb1fea
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
@@ -0,0 +1,248 @@
+---
+id: 653883da4a1fabaeb5f1f5e7
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+The `.getMonth()` method returns a number between `0` and `11`. This represents the month for the date provided, where `0` is January and `11` is December.  Because the number this method returns is zero-based, you need to add `1` to it to get the expected month number.
+
+Using `const`, create a variable named `month` and assign it the month from `date` with the `.getMonth()` method.
+
+Remember to add `1` to the number returned by `.getMonth()`.
+
+# --hints--
+
+You should use `const` to declare a `month` variable.
+
+```js
+assert.match(code, /const\s+month\s+=/);
+```
+
+You should assign the `date.getMonth() + 1` to your `month` variable.
+
+```js
+assert(code.match(/const\s+month\s+=\s+date\.getMonth\(\)\s*\+\s*1/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
new file mode 100644
index 00000000000..36542963348
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
@@ -0,0 +1,247 @@
+---
+id: 65388475abfb4faf8dd5e347
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The `.getFullYear()` method returns a number which represents the year for the provided date.
+
+Using `const`, create a variable named `year` and assign it the year from `date` with the `.getFullYear()` method.
+
+# --hints--
+
+You should use `const` to declare a `year` variable.
+
+```js
+assert.match(code, /const\s+year\s+=/);
+```
+
+You should assign the `date.getFullYear()` to your `year` variable.
+
+```js
+assert(code.match(/const\s+year\s+=\s+date\.getFullYear\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
new file mode 100644
index 00000000000..b43a24cadcf
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
@@ -0,0 +1,248 @@
+---
+id: 653884e09dfb4eb01f1622ed
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `.getHours()` method returns a number between `0` and `23`. This represents the hour for the provided date, where `0` is midnight and `23` is 11 p.m.
+
+Create a `const` variable named `hours` and assign it the hour from `date` with the `.getHours()` method.
+
+# --hints--
+
+You should use `const` to declare a `hours` variable.
+
+```js
+assert.match(code, /const\s+hours\s+=/);
+```
+
+You should assign the `date.getHours()` to your `hours` variable.
+
+```js
+assert(code.match(/const\s+hours\s+=\s+date\.getHours\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
new file mode 100644
index 00000000000..f44a0b50f42
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
@@ -0,0 +1,249 @@
+---
+id: 6538855514cb16b10204e712
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.
+
+Create a `const` variable named `minutes` and assign it the minutes from `date` with the `.getMinutes()` method.
+
+# --hints--
+
+You should use `const` to declare a `minutes` variable.
+
+```js
+assert.match(code, /const\s+minutes\s+=/);
+```
+
+You should assign the `date.getMinutes()` to your `minutes` variable.
+
+```js
+assert(code.match(/const\s+minutes\s+=\s+date\.getMinutes\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
new file mode 100644
index 00000000000..150461fb9c7
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
@@ -0,0 +1,248 @@
+---
+id: 653885c61ede29b1a99554a2
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Next, create a `const` variable named `formattedDate` and assign it empty template literals.
+
+# --hints--
+
+You should use `const` to declare a `formattedDate` variable.
+
+```js
+assert.match(code, /const\s+formattedDate\s*=/);
+```
+
+You should assign the empty template literals to your `formattedDate` variable.
+
+```js
+assert(code.match(/const\s+formattedDate\s*=\s*``/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
new file mode 100644
index 00000000000..2710d11ae38
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
@@ -0,0 +1,244 @@
+---
+id: 65388659a72663b27cde0699
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Inside the template literal, add an embedded expression that contains the `day` variable.
+
+# --hints--
+
+You should use the `day` constant inside the template literal.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = ``;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
new file mode 100644
index 00000000000..8dc4e4832c1
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
@@ -0,0 +1,244 @@
+---
+id: 653887098bdc39b3684a51c8
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+After the `day` variable, add a dash (`-`) followed by another embedded expression that contains the `month` variable.
+
+# --hints--
+
+You will need to use the `month` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
new file mode 100644
index 00000000000..0c42cdb142d
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
@@ -0,0 +1,244 @@
+---
+id: 65388762f61f44b3fd490a4a
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+After the `month` variable, add a dash followed by another embedded expression that contains the `year` variable.
+
+# --hints--
+
+You will need to use the `year` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}\s*-\s*\${year}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
new file mode 100644
index 00000000000..b2eaac290cd
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
@@ -0,0 +1,246 @@
+---
+id: 6538886c61a414b4e34496fe
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To see the results of the `formattedDate` variable, add a `console.log()` statement and pass in the `formattedDate` variable as an argument.
+
+Open up the console and you should see the date printed out.
+
+# --hints--
+
+You should have a `console.log(formattedDate)` line in your code.
+
+```js
+assert.match(code, /console\.log\(formattedDate\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
new file mode 100644
index 00000000000..24181f065b2
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
@@ -0,0 +1,268 @@
+---
+id: 65388ac7154e44b72c74d616
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In JavaScript, the `textContent` property is used to both get and set the text of a node.
+
+For example, here's how you can get the text content from a paragraph element with the id `example-paragraph`, and set its text content to a new value:
+
+```html
+<p id="example-paragraph">Example Text</p>
+```
+
+```js
+const exampleParagraph = document.getElementById("example-paragraph");
+console.log(exampleParagraph.textContent); // "Example Text"
+exampleParagraph.textContent = "New Text";
+console.log(exampleParagraph.textContent); // "New Text"
+```
+
+Use the `textContent` property on `currentDateParagraph` to set its text content to the value of the `formattedDate` variable.
+
+Also, make sure to remove your `console.log(formattedDate);` line.
+
+# --hints--
+
+You should use the `textContent` property to set the text content of `currentDateParagraph` to the value of the constant `formattedDate`.
+
+```js
+assert(code.match(/currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+You should not have a `console.log(formattedDate);` line in your code.
+
+```js
+assert.notMatch(code, /console\.log\(formattedDate\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+console.log(formattedDate);
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
new file mode 100644
index 00000000000..2b3c02282b1
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
@@ -0,0 +1,259 @@
+---
+id: 65388bbcbf6928b83fc424d1
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.
+
+```js
+element.addEventListener("change", () => {
+
+});
+```
+
+Chain the `addEventListener` method to `dateOptionsSelectElement` where the first argument is `change` and the second argument is an empty arrow function.
+
+# --hints--
+
+You should use the `addEventListener` method to add a `change` event listener to `dateOptionsSelectElement`.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*['"]change/g));
+```
+
+You should add an empty arrow function as the second argument to the `addEventListener` method.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*(['"])change\1\s*,\s*\(\s*\)\s*=>\s*{\s*}/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
new file mode 100644
index 00000000000..7f471fcf376
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
@@ -0,0 +1,268 @@
+---
+id: 65388d61a57a00b9ad0d0817
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+When a user makes a selection from the dropdown menu, the function should get the user's value and display the date in their chosen date format. To do this, you can use the `switch` statement.
+
+A `switch` statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It's commonly used for branching logic.
+
+For example, here's how to compare the expression `dayOfWeek` against possible values:
+
+```js
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+Create a `switch` statement and use `dateOptionsSelectElement.value` as the expression.
+
+# --hints--
+
+You should use a `switch` statement where `dateOptionsSelectElement.value` is the expression.
+
+```js
+assert(code.match(/switch\s*\(\s*dateOptionsSelectElement.value\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
new file mode 100644
index 00000000000..83cfa83fd2b
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -0,0 +1,262 @@
+---
+id: 65388edfdf364fbb04e426f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+When the user chooses the `Year, Month, Day` option from the dropdown, the date format should reflect this choice.
+
+To do this, you can add a `case` in the `switch` statement, followed by your logic.
+
+```js
+switch (expression) {
+  case 'case123':
+    // Write your logic here
+}
+```
+
+Add a `case` where the value is `yyyy-mm-dd`. Inside the `case`, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+
+# --hints--
+
+You should add a `case` where the condition is `yyyy-mm-dd`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`.
+
+```js
+assert(code.match(/case\s*(['"])yyyy-mm-dd\1\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+  switch (dateOptionsSelectElement.value) {
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
new file mode 100644
index 00000000000..02993fa4aad
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
@@ -0,0 +1,259 @@
+---
+id: 65389211a8d86bbd876a2a74
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+In JavaScript, the `.split()` method is used to split up a string into an array of substrings. This method has an optional separator parameter, which indicates where each split should happen.
+
+```js
+"coca-cola".split("-"); // [ 'coca', 'cola' ]
+```
+
+Split `formattedDate` into an array of substrings with the `.split()` method and use a `"-"` as the separator.
+
+# --hints--
+
+You should use the `.split()` method with `"-"` as the separator to split `formattedDate` into an array of substrings.
+
+```js
+assert(code.match(/formattedDate[\s\S]*?\.split\(\s*(['"`])-\1\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
new file mode 100644
index 00000000000..873ad4fd565
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
@@ -0,0 +1,262 @@
+---
+id: 65389306578c34be5c93bc35
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The `.reverse()` method is used to reverse an array in place. For example:
+
+```js
+const array = [1, 2, 3, 4, 5];
+array.reverse();
+console.log(array); // [5, 4, 3, 2, 1]
+```
+
+Chain the `.reverse()` method to the end of `.split()` method.
+
+# --hints--
+
+You should use the `.reverse()` method to reverse the order of the array returned by `.split()`.
+
+```js
+assert(code.match(/\.reverse\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
new file mode 100644
index 00000000000..3253ba8d27b
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
@@ -0,0 +1,257 @@
+---
+id: 6538935e2ab721beedb137c4
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Finally, you need to create a string with the reversed array elements separated by dash (`-`) character.
+
+Use the `.join()` method to join the reversed array elements into a string and use a `"-"` for the separator.
+
+# --hints--
+
+You should use the `.join()` method to join the reversed array elements into a string and use a `"-"` as a separator.
+
+```js
+assert(code.match(/\.join\((['"])-\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
new file mode 100644
index 00000000000..bd71851d497
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
@@ -0,0 +1,268 @@
+---
+id: 653898fa7eee37c57b960e35
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+If your `switch` statement is going to have multiple cases, it is best practice to include a `break` statement.
+
+The `break` statement will tell the JavaScript interpreter to stop executing statements. Without adding a `break` statement at the end of each `case` block, the program will execute the code for all matching `cases`.
+
+```js
+switch (someVariable) {
+  case 'case123':
+    // Write your logic here
+    break; // Terminates the switch statement
+}
+```
+
+Add a `break` statement to the end of your `case` block.
+
+# --hints--
+
+You should add a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
new file mode 100644
index 00000000000..8ce925e00f1
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -0,0 +1,265 @@
+---
+id: 65389a63d3b1d6c764c0e10e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `case` with the value `mm-dd-yyyy-h-mm`. Inside that `case`, set the text content of `currentDateParagraph` to empty template literals.
+
+Also, make sure to include a `break` statement to terminate the `switch` statement.
+
+# --hints--
+
+You should add a `case` where the condition is `mm-dd-yyyy-h-mm`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals.
+
+```js
+assert(code.match(/case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph.textContent\s*=\s*``/g));
+```
+
+You should include a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
new file mode 100644
index 00000000000..85d6fe3c758
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
@@ -0,0 +1,261 @@
+---
+id: 65389de504d0f2ca10e92a57
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Inside the `case` for `mm-dd-yyyy-h-mm`, set the `textContent` property of `currentDateParagraph` to `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`.
+
+
+# --hints--
+
+You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.
+
+```js
+const pattern = /case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*`(\$\{month}-\$\{day}-\$\{year} \$\{hours} Hours \$\{minutes} Minutes)`/;
+assert(code.match(pattern));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = ``;
+      break;
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
new file mode 100644
index 00000000000..9e6b380ff8f
--- /dev/null
+++ b/curriculum/challenges/chinese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -0,0 +1,519 @@
+---
+id: 65389eff4893facbbe6eae67
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In a `switch` statement, the `default` case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:
+
+```js
+const dayOfWeek = 7;
+
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+For the `default` case, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+And with that, your date formatter is complete! You can now format the current date three different ways.
+
+# --hints--
+
+You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.
+
+```js
+assert(code.match(/default\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
+
+# --solutions--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break; 
+    default:
+      currentDateParagraph.textContent = formattedDate;
+  }
+});
+
+```
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
index 1c2d0f3387f..ed1cfb49a4a 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
@@ -20,7 +20,7 @@ Cuando la condición se evalúa como `true`, el programa ejecuta el comando dent
 **Ejemplo**
 
 ```js
-function test (myCondition) {
+function test(myCondition) {
   if (myCondition) {
     return "It was true";
   }
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index 1147b164cb5..18efbe37826 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -36,13 +36,20 @@ assert(
 El texto del enlace debe ser `cat photos`. Has omitido el texto o tienes un error de escritura.
 
 ```js
-const nestedAnchor = document.querySelector(`p > a`);
-assert(
-  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isTrue(innerContent.trim() === 'cat photos');
 ```
 
-Después de anidar el elemento anchor (`a`), el único contenido del elemento `p` visible en el navegador debe ser `See more cat photos in our gallery.` Verifique el texto, el espaciado o la puntuación tanto del elemento `p` como del elemento de anclaje anidado.
+The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`.
+
+```js
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
+```
+
+After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
 
 ```js
 assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
index 04e51cd97e2..cb7f01f0065 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -7,9 +7,8 @@ dashedName: step-64
 
 # --description--
 
-Last, but not least, make the `input` for the terms and condition `inline`, then change the text color of the `terms and conditions` link element to `#dfdfe2`.
+Make the `input` for the terms and conditions `inline` by adding the appropriate class in the HTML.
 
-¡Bien hecho! Ha completado la parte final del proyecto de práctica del _Registration Form_.
 
 # --hints--
 
@@ -19,18 +18,6 @@ You should give the `input` a class of `inline`.
 assert(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline'));
 ```
 
-You should use an `a` element selector.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
-```
-
-You should give the `a` element a `color` of `#dfdfe2`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
-```
-
 # --seed--
 
 ## --seed-contents--
@@ -164,133 +151,3 @@ input[type="file"] {
 --fcc-editable-region--
 
 ```
-
-# --solutions--
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Registration Form</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <h1>Registration Form</h1>
-    <p>Please fill out this form with the required information</p>
-    <form method="post" action='https://register-demo.freecodecamp.org'>
-      <fieldset>
-        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
-        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
-        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
-        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
-      </fieldset>
-      <fieldset>
-        <legend>Account type (required)</legend>
-        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
-        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
-      </fieldset>
-      <fieldset>
-        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
-        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
-        <label for="referrer">How did you hear about us?
-          <select id="referrer" name="referrer">
-            <option value="">(select one)</option>
-            <option value="1">freeCodeCamp News</option>
-            <option value="2">freeCodeCamp YouTube Channel</option>
-            <option value="3">freeCodeCamp Forum</option>
-            <option value="4">Other</option>
-          </select>
-        </label>
-        <label for="bio">Provide a bio:
-          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
-        </label>
-      </fieldset>
-      <label for="terms-and-conditions">
-        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
-      </label>
-      <input type="submit" value="Submit" />
-    </form>
-  </body>
-</html>
-```
-
-```css
-body {
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  background-color: #1b1b32;
-  color: #f5f6f7;
-  font-family: Tahoma;
-  font-size: 16px;
-}
-
-h1, p {
-  margin: 1em auto;
-  text-align: center;
-}
-
-form {
-  width: 60vw;
-  max-width: 500px;
-  min-width: 300px;
-  margin: 0 auto;
-  padding-bottom: 2em;
-}
-
-fieldset {
-  border: none;
-  padding: 2rem 0;
-  border-bottom: 3px solid #3b3b4f;
-}
-
-fieldset:last-of-type {
-  border-bottom: none;
-}
-
-label {
-  display: block;
-  margin: 0.5rem 0;
-}
-
-input,
-textarea,
-select {
-  margin: 10px 0 0 0;
-  width: 100%;
-  min-height: 2em;
-}
-
-input, textarea {
-  background-color: #0a0a23;
-  border: 1px solid #0a0a23;
-  color: #ffffff;
-}
-
-.inline {
-  width: unset;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-
-input[type="submit"] {
-  display: block;
-  width: 60%;
-  margin: 1em auto;
-  height: 2em;
-  font-size: 1.1rem;
-  background-color: #3b3b4f;
-  border-color: white;
-  min-width: 300px;
-}
-
-input[type="file"] {
-  padding: 1px 2px;
-}
-
-a {
-  color: #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
new file mode 100644
index 00000000000..fd3a2bfd184
--- /dev/null
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
@@ -0,0 +1,292 @@
+---
+id: 6537e0be715fcb57d31ba8c3
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Lastly change the text color of the `terms and conditions` link element to `#dfdfe2` by adding a new selector in the CSS.
+
+Well done! You have completed the final part of the _Registration Form_ practice project.
+
+# --hints--
+
+You should use an `a` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
+```
+
+You should give the `a` element a `color` of `#dfdfe2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+.inline{
+  display: inline; 
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+a {
+  color: #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
index 2546756cf4a..0e7c27384be 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
@@ -17,7 +17,7 @@ You should assign the string `You dodge the attack from the` to the `text.innerT
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/);
 ```
 
-You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monster[fighting].name`.
+You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monsters[fighting].name`.
 
 ```js
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/);
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
index 9841fe636fb..769f7cbc1a2 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
@@ -9,7 +9,9 @@ dashedName: step-138
 
 Back to your `attack` function - inside the `else if` block, create another `if` and `else` statement. If the player is fighting the dragon (`fighting` would be `2`), call the `winGame` function. Move the `defeatMonster()` call to the `else` block.
 
-Here is an example that checks if `num` is equal to `5`:
+For this step, you will need to use the strict equality (`===`) operator to check if `fighting` is equal to `2`. The strict equality operator will check if the values are equal and if they are the same data type.
+
+Here is an example that checks if `num` is strictly equal to `5`:
 
 ```js
 if (num === 5) {
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
index 3e8060fd61c..f1e0c828f8c 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
@@ -7,7 +7,7 @@ dashedName: step-150
 
 # --description--
 
-Add an `else` statement to the first `if` statement inside you `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
+Add an `else` statement to the first `if` statement inside your `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
 
 # --hints--
 
@@ -17,7 +17,7 @@ You should add an `else` block after your `if (isMonsterHit())` block.
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/)
 ```
 
-You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment.
+You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment and make sure there is a space before the word `You`.
 
 ```js
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/)
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
index 3dcd6502245..fe83429dca2 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
@@ -207,8 +207,8 @@ const locations = [
         "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
         "button functions": [restart, restart, restart], 
         text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
 --fcc-editable-region--
-    }
 
 --fcc-editable-region--
 ];
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
index 2f36cfcbdcb..38c98fbeb8b 100644
--- a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
@@ -7,7 +7,7 @@ dashedName: step-165
 
 # --description--
 
-Before the final quote in that string you added, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
+At the end of the string, before the final quote, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
 
 # --hints--
 
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
new file mode 100644
index 00000000000..c8bedf3010f
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
@@ -0,0 +1,248 @@
+---
+id: 65386e889dd615940cb3e042
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn about the JavaScript `Date` object by building a date formatter.
+
+All of the HTML and CSS for this project have been provided for you.
+
+Start by getting the `#current-date` element using the `.getElementById()` method and assign it to a `const` variable called `currentDateParagraph`.
+
+# --hints--
+
+You should use `const` to declare a `currentDateParagraph` variable.
+
+```js
+assert.match(code, /const\s+currentDateParagraph\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#current-date` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)current-date\1\)/);
+```
+
+You should assign the `#current-date` element to your `currentDateParagraph` variable.
+
+```js
+assert(code.match(/const\s+currentDateParagraph\s+=\s+document\.getElementById\(('|"|`)current-date\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
new file mode 100644
index 00000000000..3295a750daa
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
@@ -0,0 +1,246 @@
+---
+id: 653879d87bc55fa624280c77
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Use the `.getElementById()` method to get the `#date-options` element and use `const` to assign it to a variable named `dateOptionsSelectElement`.
+
+# --hints--
+
+You should use `const` to declare a `dateOptionsSelectElement` variable.
+
+```js
+assert.match(code, /const\s+dateOptionsSelectElement\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#date-options` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)date-options\1\)/);
+```
+
+You should assign the `#date-options` element to your `dateOptionsSelectElement` variable.
+
+```js
+assert(code.match(/const\s+dateOptionsSelectElement\s+=\s+document\.getElementById\(('|"|`)date-options\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
new file mode 100644
index 00000000000..788fae024c1
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
@@ -0,0 +1,253 @@
+---
+id: 65387b440b5cb1aa35585820
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+In JavaScript, there are many built-in <dfn>constructors</dfn> that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the `new` operator.
+
+For example, you can use the `Date()` constructor with the `new` operator to create a new `Date` object that returns a string with the current date and time:
+
+```js
+const currentDate = new Date();
+console.log(currentDate);
+
+// Output:
+// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)
+```
+
+Create a new `const` variable called `date` and assign it a `Date` object with `new Date()`.
+
+# --hints--
+
+You should use `const` to declare a `date` variable.
+
+```js
+assert.match(code, /const\s+date\s+=/);
+```
+
+You should assign a `Date` object to your `date` variable with `new Date()`.
+
+```js
+assert(code.match(/const\s+date\s+=\s+new\s+Date\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
new file mode 100644
index 00000000000..2257dace260
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
@@ -0,0 +1,253 @@
+---
+id: 6538830e01ab66ade75b869e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The `Date` object has a number of methods that allow you to get the date and time in different formats.
+
+One of those is the `.getDate()` method, which returns a number between 1-31 that represents the day of the month for that date. For example:
+
+```js
+const date = new Date();
+const dayOfTheMonth = date.getDate();
+console.log(dayOfTheMonth); // 20
+```
+
+Using `const`, create a variable named `day` and assign it the day of the month from `date` with the `.getDate()` method.
+
+# --hints--
+
+You should use `const` to declare a `day` variable.
+
+```js
+assert.match(code, /const\s+day\s+=/);
+```
+
+You should assign the `date.getDate()` to your `day` variable.
+
+```js
+assert(code.match(/const\s+day\s+=\s+date\.getDate\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
new file mode 100644
index 00000000000..856addb1fea
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
@@ -0,0 +1,248 @@
+---
+id: 653883da4a1fabaeb5f1f5e7
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+The `.getMonth()` method returns a number between `0` and `11`. This represents the month for the date provided, where `0` is January and `11` is December.  Because the number this method returns is zero-based, you need to add `1` to it to get the expected month number.
+
+Using `const`, create a variable named `month` and assign it the month from `date` with the `.getMonth()` method.
+
+Remember to add `1` to the number returned by `.getMonth()`.
+
+# --hints--
+
+You should use `const` to declare a `month` variable.
+
+```js
+assert.match(code, /const\s+month\s+=/);
+```
+
+You should assign the `date.getMonth() + 1` to your `month` variable.
+
+```js
+assert(code.match(/const\s+month\s+=\s+date\.getMonth\(\)\s*\+\s*1/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
new file mode 100644
index 00000000000..36542963348
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
@@ -0,0 +1,247 @@
+---
+id: 65388475abfb4faf8dd5e347
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The `.getFullYear()` method returns a number which represents the year for the provided date.
+
+Using `const`, create a variable named `year` and assign it the year from `date` with the `.getFullYear()` method.
+
+# --hints--
+
+You should use `const` to declare a `year` variable.
+
+```js
+assert.match(code, /const\s+year\s+=/);
+```
+
+You should assign the `date.getFullYear()` to your `year` variable.
+
+```js
+assert(code.match(/const\s+year\s+=\s+date\.getFullYear\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
new file mode 100644
index 00000000000..b43a24cadcf
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
@@ -0,0 +1,248 @@
+---
+id: 653884e09dfb4eb01f1622ed
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `.getHours()` method returns a number between `0` and `23`. This represents the hour for the provided date, where `0` is midnight and `23` is 11 p.m.
+
+Create a `const` variable named `hours` and assign it the hour from `date` with the `.getHours()` method.
+
+# --hints--
+
+You should use `const` to declare a `hours` variable.
+
+```js
+assert.match(code, /const\s+hours\s+=/);
+```
+
+You should assign the `date.getHours()` to your `hours` variable.
+
+```js
+assert(code.match(/const\s+hours\s+=\s+date\.getHours\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
new file mode 100644
index 00000000000..f44a0b50f42
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
@@ -0,0 +1,249 @@
+---
+id: 6538855514cb16b10204e712
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.
+
+Create a `const` variable named `minutes` and assign it the minutes from `date` with the `.getMinutes()` method.
+
+# --hints--
+
+You should use `const` to declare a `minutes` variable.
+
+```js
+assert.match(code, /const\s+minutes\s+=/);
+```
+
+You should assign the `date.getMinutes()` to your `minutes` variable.
+
+```js
+assert(code.match(/const\s+minutes\s+=\s+date\.getMinutes\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
new file mode 100644
index 00000000000..150461fb9c7
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
@@ -0,0 +1,248 @@
+---
+id: 653885c61ede29b1a99554a2
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Next, create a `const` variable named `formattedDate` and assign it empty template literals.
+
+# --hints--
+
+You should use `const` to declare a `formattedDate` variable.
+
+```js
+assert.match(code, /const\s+formattedDate\s*=/);
+```
+
+You should assign the empty template literals to your `formattedDate` variable.
+
+```js
+assert(code.match(/const\s+formattedDate\s*=\s*``/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
new file mode 100644
index 00000000000..2710d11ae38
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
@@ -0,0 +1,244 @@
+---
+id: 65388659a72663b27cde0699
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Inside the template literal, add an embedded expression that contains the `day` variable.
+
+# --hints--
+
+You should use the `day` constant inside the template literal.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = ``;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
new file mode 100644
index 00000000000..8dc4e4832c1
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
@@ -0,0 +1,244 @@
+---
+id: 653887098bdc39b3684a51c8
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+After the `day` variable, add a dash (`-`) followed by another embedded expression that contains the `month` variable.
+
+# --hints--
+
+You will need to use the `month` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
new file mode 100644
index 00000000000..0c42cdb142d
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
@@ -0,0 +1,244 @@
+---
+id: 65388762f61f44b3fd490a4a
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+After the `month` variable, add a dash followed by another embedded expression that contains the `year` variable.
+
+# --hints--
+
+You will need to use the `year` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}\s*-\s*\${year}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
new file mode 100644
index 00000000000..b2eaac290cd
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
@@ -0,0 +1,246 @@
+---
+id: 6538886c61a414b4e34496fe
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To see the results of the `formattedDate` variable, add a `console.log()` statement and pass in the `formattedDate` variable as an argument.
+
+Open up the console and you should see the date printed out.
+
+# --hints--
+
+You should have a `console.log(formattedDate)` line in your code.
+
+```js
+assert.match(code, /console\.log\(formattedDate\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
new file mode 100644
index 00000000000..24181f065b2
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
@@ -0,0 +1,268 @@
+---
+id: 65388ac7154e44b72c74d616
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In JavaScript, the `textContent` property is used to both get and set the text of a node.
+
+For example, here's how you can get the text content from a paragraph element with the id `example-paragraph`, and set its text content to a new value:
+
+```html
+<p id="example-paragraph">Example Text</p>
+```
+
+```js
+const exampleParagraph = document.getElementById("example-paragraph");
+console.log(exampleParagraph.textContent); // "Example Text"
+exampleParagraph.textContent = "New Text";
+console.log(exampleParagraph.textContent); // "New Text"
+```
+
+Use the `textContent` property on `currentDateParagraph` to set its text content to the value of the `formattedDate` variable.
+
+Also, make sure to remove your `console.log(formattedDate);` line.
+
+# --hints--
+
+You should use the `textContent` property to set the text content of `currentDateParagraph` to the value of the constant `formattedDate`.
+
+```js
+assert(code.match(/currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+You should not have a `console.log(formattedDate);` line in your code.
+
+```js
+assert.notMatch(code, /console\.log\(formattedDate\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+console.log(formattedDate);
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
new file mode 100644
index 00000000000..2b3c02282b1
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
@@ -0,0 +1,259 @@
+---
+id: 65388bbcbf6928b83fc424d1
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.
+
+```js
+element.addEventListener("change", () => {
+
+});
+```
+
+Chain the `addEventListener` method to `dateOptionsSelectElement` where the first argument is `change` and the second argument is an empty arrow function.
+
+# --hints--
+
+You should use the `addEventListener` method to add a `change` event listener to `dateOptionsSelectElement`.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*['"]change/g));
+```
+
+You should add an empty arrow function as the second argument to the `addEventListener` method.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*(['"])change\1\s*,\s*\(\s*\)\s*=>\s*{\s*}/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
new file mode 100644
index 00000000000..7f471fcf376
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
@@ -0,0 +1,268 @@
+---
+id: 65388d61a57a00b9ad0d0817
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+When a user makes a selection from the dropdown menu, the function should get the user's value and display the date in their chosen date format. To do this, you can use the `switch` statement.
+
+A `switch` statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It's commonly used for branching logic.
+
+For example, here's how to compare the expression `dayOfWeek` against possible values:
+
+```js
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+Create a `switch` statement and use `dateOptionsSelectElement.value` as the expression.
+
+# --hints--
+
+You should use a `switch` statement where `dateOptionsSelectElement.value` is the expression.
+
+```js
+assert(code.match(/switch\s*\(\s*dateOptionsSelectElement.value\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
new file mode 100644
index 00000000000..83cfa83fd2b
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -0,0 +1,262 @@
+---
+id: 65388edfdf364fbb04e426f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+When the user chooses the `Year, Month, Day` option from the dropdown, the date format should reflect this choice.
+
+To do this, you can add a `case` in the `switch` statement, followed by your logic.
+
+```js
+switch (expression) {
+  case 'case123':
+    // Write your logic here
+}
+```
+
+Add a `case` where the value is `yyyy-mm-dd`. Inside the `case`, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+
+# --hints--
+
+You should add a `case` where the condition is `yyyy-mm-dd`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`.
+
+```js
+assert(code.match(/case\s*(['"])yyyy-mm-dd\1\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+  switch (dateOptionsSelectElement.value) {
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
new file mode 100644
index 00000000000..02993fa4aad
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
@@ -0,0 +1,259 @@
+---
+id: 65389211a8d86bbd876a2a74
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+In JavaScript, the `.split()` method is used to split up a string into an array of substrings. This method has an optional separator parameter, which indicates where each split should happen.
+
+```js
+"coca-cola".split("-"); // [ 'coca', 'cola' ]
+```
+
+Split `formattedDate` into an array of substrings with the `.split()` method and use a `"-"` as the separator.
+
+# --hints--
+
+You should use the `.split()` method with `"-"` as the separator to split `formattedDate` into an array of substrings.
+
+```js
+assert(code.match(/formattedDate[\s\S]*?\.split\(\s*(['"`])-\1\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
new file mode 100644
index 00000000000..873ad4fd565
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
@@ -0,0 +1,262 @@
+---
+id: 65389306578c34be5c93bc35
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The `.reverse()` method is used to reverse an array in place. For example:
+
+```js
+const array = [1, 2, 3, 4, 5];
+array.reverse();
+console.log(array); // [5, 4, 3, 2, 1]
+```
+
+Chain the `.reverse()` method to the end of `.split()` method.
+
+# --hints--
+
+You should use the `.reverse()` method to reverse the order of the array returned by `.split()`.
+
+```js
+assert(code.match(/\.reverse\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
new file mode 100644
index 00000000000..3253ba8d27b
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
@@ -0,0 +1,257 @@
+---
+id: 6538935e2ab721beedb137c4
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Finally, you need to create a string with the reversed array elements separated by dash (`-`) character.
+
+Use the `.join()` method to join the reversed array elements into a string and use a `"-"` for the separator.
+
+# --hints--
+
+You should use the `.join()` method to join the reversed array elements into a string and use a `"-"` as a separator.
+
+```js
+assert(code.match(/\.join\((['"])-\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
new file mode 100644
index 00000000000..bd71851d497
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
@@ -0,0 +1,268 @@
+---
+id: 653898fa7eee37c57b960e35
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+If your `switch` statement is going to have multiple cases, it is best practice to include a `break` statement.
+
+The `break` statement will tell the JavaScript interpreter to stop executing statements. Without adding a `break` statement at the end of each `case` block, the program will execute the code for all matching `cases`.
+
+```js
+switch (someVariable) {
+  case 'case123':
+    // Write your logic here
+    break; // Terminates the switch statement
+}
+```
+
+Add a `break` statement to the end of your `case` block.
+
+# --hints--
+
+You should add a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
new file mode 100644
index 00000000000..8ce925e00f1
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -0,0 +1,265 @@
+---
+id: 65389a63d3b1d6c764c0e10e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `case` with the value `mm-dd-yyyy-h-mm`. Inside that `case`, set the text content of `currentDateParagraph` to empty template literals.
+
+Also, make sure to include a `break` statement to terminate the `switch` statement.
+
+# --hints--
+
+You should add a `case` where the condition is `mm-dd-yyyy-h-mm`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals.
+
+```js
+assert(code.match(/case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph.textContent\s*=\s*``/g));
+```
+
+You should include a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
new file mode 100644
index 00000000000..85d6fe3c758
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
@@ -0,0 +1,261 @@
+---
+id: 65389de504d0f2ca10e92a57
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Inside the `case` for `mm-dd-yyyy-h-mm`, set the `textContent` property of `currentDateParagraph` to `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`.
+
+
+# --hints--
+
+You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.
+
+```js
+const pattern = /case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*`(\$\{month}-\$\{day}-\$\{year} \$\{hours} Hours \$\{minutes} Minutes)`/;
+assert(code.match(pattern));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = ``;
+      break;
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
new file mode 100644
index 00000000000..9e6b380ff8f
--- /dev/null
+++ b/curriculum/challenges/espanol/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -0,0 +1,519 @@
+---
+id: 65389eff4893facbbe6eae67
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In a `switch` statement, the `default` case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:
+
+```js
+const dayOfWeek = 7;
+
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+For the `default` case, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+And with that, your date formatter is complete! You can now format the current date three different ways.
+
+# --hints--
+
+You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.
+
+```js
+assert(code.match(/default\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
+
+# --solutions--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break; 
+    default:
+      currentDateParagraph.textContent = formattedDate;
+  }
+});
+
+```
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
index c07afa10d31..105203954d5 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
@@ -20,7 +20,7 @@ Wenn die Bedingung als `true` ausgewertet wird, führt das Programm die Anweisun
 **Beispiel**
 
 ```js
-function test (myCondition) {
+function test(myCondition) {
   if (myCondition) {
     return "It was true";
   }
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index a647592e4ac..1ab98d69a4a 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -36,13 +36,20 @@ assert(
 Der Linktext sollte `cat photos` sein. Du hast entweder den Text weggelassen oder einen Tippfehler gemacht.
 
 ```js
-const nestedAnchor = document.querySelector(`p > a`);
-assert(
-  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isTrue(innerContent.trim() === 'cat photos');
 ```
 
-Nachdem das (`a`)-Ankerelement eingebettet wurde, sollte der einzige sichtbare `p`-Elementinhalt im Browser `See more cat photos in our gallery.` sein. Überprüfe den Text, die Abstände oder die Satzzeichen des `p`s und des eingebetteten Ankerelements.
+The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`.
+
+```js
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
+```
+
+After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
 
 ```js
 assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
index eb0d38b8225..cb7f01f0065 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -7,9 +7,8 @@ dashedName: step-64
 
 # --description--
 
-Last, but not least, make the `input` for the terms and condition `inline`, then change the text color of the `terms and conditions` link element to `#dfdfe2`.
+Make the `input` for the terms and conditions `inline` by adding the appropriate class in the HTML.
 
-Gut gemacht! Du hast den letzten Teil des _Registration Form_-Übungsprojekts abgeschlossen.
 
 # --hints--
 
@@ -19,18 +18,6 @@ You should give the `input` a class of `inline`.
 assert(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline'));
 ```
 
-You should use an `a` element selector.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
-```
-
-You should give the `a` element a `color` of `#dfdfe2`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
-```
-
 # --seed--
 
 ## --seed-contents--
@@ -164,133 +151,3 @@ input[type="file"] {
 --fcc-editable-region--
 
 ```
-
-# --solutions--
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Registration Form</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <h1>Registration Form</h1>
-    <p>Please fill out this form with the required information</p>
-    <form method="post" action='https://register-demo.freecodecamp.org'>
-      <fieldset>
-        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
-        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
-        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
-        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
-      </fieldset>
-      <fieldset>
-        <legend>Account type (required)</legend>
-        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
-        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
-      </fieldset>
-      <fieldset>
-        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
-        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
-        <label for="referrer">How did you hear about us?
-          <select id="referrer" name="referrer">
-            <option value="">(select one)</option>
-            <option value="1">freeCodeCamp News</option>
-            <option value="2">freeCodeCamp YouTube Channel</option>
-            <option value="3">freeCodeCamp Forum</option>
-            <option value="4">Other</option>
-          </select>
-        </label>
-        <label for="bio">Provide a bio:
-          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
-        </label>
-      </fieldset>
-      <label for="terms-and-conditions">
-        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
-      </label>
-      <input type="submit" value="Submit" />
-    </form>
-  </body>
-</html>
-```
-
-```css
-body {
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  background-color: #1b1b32;
-  color: #f5f6f7;
-  font-family: Tahoma;
-  font-size: 16px;
-}
-
-h1, p {
-  margin: 1em auto;
-  text-align: center;
-}
-
-form {
-  width: 60vw;
-  max-width: 500px;
-  min-width: 300px;
-  margin: 0 auto;
-  padding-bottom: 2em;
-}
-
-fieldset {
-  border: none;
-  padding: 2rem 0;
-  border-bottom: 3px solid #3b3b4f;
-}
-
-fieldset:last-of-type {
-  border-bottom: none;
-}
-
-label {
-  display: block;
-  margin: 0.5rem 0;
-}
-
-input,
-textarea,
-select {
-  margin: 10px 0 0 0;
-  width: 100%;
-  min-height: 2em;
-}
-
-input, textarea {
-  background-color: #0a0a23;
-  border: 1px solid #0a0a23;
-  color: #ffffff;
-}
-
-.inline {
-  width: unset;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-
-input[type="submit"] {
-  display: block;
-  width: 60%;
-  margin: 1em auto;
-  height: 2em;
-  font-size: 1.1rem;
-  background-color: #3b3b4f;
-  border-color: white;
-  min-width: 300px;
-}
-
-input[type="file"] {
-  padding: 1px 2px;
-}
-
-a {
-  color: #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
new file mode 100644
index 00000000000..fd3a2bfd184
--- /dev/null
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
@@ -0,0 +1,292 @@
+---
+id: 6537e0be715fcb57d31ba8c3
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Lastly change the text color of the `terms and conditions` link element to `#dfdfe2` by adding a new selector in the CSS.
+
+Well done! You have completed the final part of the _Registration Form_ practice project.
+
+# --hints--
+
+You should use an `a` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
+```
+
+You should give the `a` element a `color` of `#dfdfe2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+.inline{
+  display: inline; 
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+a {
+  color: #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
index a9449f5cbad..f30e1de7a87 100644
--- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
@@ -17,7 +17,7 @@ Du solltest der `text.innerText`-Eigenschaft den String `You dodge the attack fr
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/);
 ```
 
-Du solltest den Verkettungsoperator verwenden, um den Namen des Monsters am Ende deines Strings hinzuzufügen. Du erhältst dies mit `monster[fighting].name`.
+Du solltest den Verkettungsoperator verwenden, um den Namen des Monsters am Ende deines Strings hinzuzufügen. You can get this with `monsters[fighting].name`.
 
 ```js
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/);
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
index ddba1a23152..b786ba0f12f 100644
--- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
@@ -9,7 +9,9 @@ dashedName: step-138
 
 Zurück zu deiner `attack`-Funktion - erstelle innerhalb des `else if`-Blocks eine weitere `if`- und `else`-Anweisung. Wenn der Spieler gegen den Drachen kämpft (`fighting` would be `2`), rufe die Funktion `winGame` auf. Verschiebe den `defeatMonster()`-Aufruf in den `else`-Block.
 
-Hier ist ein Beispiel, das prüft, ob `num` gleich `5` ist:
+For this step, you will need to use the strict equality (`===`) operator to check if `fighting` is equal to `2`. The strict equality operator will check if the values are equal and if they are the same data type.
+
+Here is an example that checks if `num` is strictly equal to `5`:
 
 ```js
 if (num === 5) {
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
index 48e2b368a90..3de20227692 100644
--- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
@@ -7,7 +7,7 @@ dashedName: step-150
 
 # --description--
 
-Füge eine `else`-Anweisung zur ersten `if`-Anweisung innerhalb deiner `attack()`-Funktion hinzu. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
+Add an `else` statement to the first `if` statement inside your `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
 
 # --hints--
 
@@ -17,7 +17,7 @@ You should add an `else` block after your `if (isMonsterHit())` block.
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/)
 ```
 
-You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment.
+You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment and make sure there is a space before the word `You`.
 
 ```js
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/)
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
index 3e5dde9b623..af0e643cf5c 100644
--- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
@@ -207,8 +207,8 @@ const locations = [
         "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
         "button functions": [restart, restart, restart], 
         text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
 --fcc-editable-region--
-    }
 
 --fcc-editable-region--
 ];
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
index 048d798d32f..e2d094333c9 100644
--- a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
@@ -7,7 +7,7 @@ dashedName: step-165
 
 # --description--
 
-Before the final quote in that string you added, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
+At the end of the string, before the final quote, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
 
 # --hints--
 
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
new file mode 100644
index 00000000000..c8bedf3010f
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
@@ -0,0 +1,248 @@
+---
+id: 65386e889dd615940cb3e042
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn about the JavaScript `Date` object by building a date formatter.
+
+All of the HTML and CSS for this project have been provided for you.
+
+Start by getting the `#current-date` element using the `.getElementById()` method and assign it to a `const` variable called `currentDateParagraph`.
+
+# --hints--
+
+You should use `const` to declare a `currentDateParagraph` variable.
+
+```js
+assert.match(code, /const\s+currentDateParagraph\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#current-date` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)current-date\1\)/);
+```
+
+You should assign the `#current-date` element to your `currentDateParagraph` variable.
+
+```js
+assert(code.match(/const\s+currentDateParagraph\s+=\s+document\.getElementById\(('|"|`)current-date\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
new file mode 100644
index 00000000000..3295a750daa
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
@@ -0,0 +1,246 @@
+---
+id: 653879d87bc55fa624280c77
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Use the `.getElementById()` method to get the `#date-options` element and use `const` to assign it to a variable named `dateOptionsSelectElement`.
+
+# --hints--
+
+You should use `const` to declare a `dateOptionsSelectElement` variable.
+
+```js
+assert.match(code, /const\s+dateOptionsSelectElement\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#date-options` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)date-options\1\)/);
+```
+
+You should assign the `#date-options` element to your `dateOptionsSelectElement` variable.
+
+```js
+assert(code.match(/const\s+dateOptionsSelectElement\s+=\s+document\.getElementById\(('|"|`)date-options\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
new file mode 100644
index 00000000000..788fae024c1
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
@@ -0,0 +1,253 @@
+---
+id: 65387b440b5cb1aa35585820
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+In JavaScript, there are many built-in <dfn>constructors</dfn> that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the `new` operator.
+
+For example, you can use the `Date()` constructor with the `new` operator to create a new `Date` object that returns a string with the current date and time:
+
+```js
+const currentDate = new Date();
+console.log(currentDate);
+
+// Output:
+// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)
+```
+
+Create a new `const` variable called `date` and assign it a `Date` object with `new Date()`.
+
+# --hints--
+
+You should use `const` to declare a `date` variable.
+
+```js
+assert.match(code, /const\s+date\s+=/);
+```
+
+You should assign a `Date` object to your `date` variable with `new Date()`.
+
+```js
+assert(code.match(/const\s+date\s+=\s+new\s+Date\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
new file mode 100644
index 00000000000..2257dace260
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
@@ -0,0 +1,253 @@
+---
+id: 6538830e01ab66ade75b869e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The `Date` object has a number of methods that allow you to get the date and time in different formats.
+
+One of those is the `.getDate()` method, which returns a number between 1-31 that represents the day of the month for that date. For example:
+
+```js
+const date = new Date();
+const dayOfTheMonth = date.getDate();
+console.log(dayOfTheMonth); // 20
+```
+
+Using `const`, create a variable named `day` and assign it the day of the month from `date` with the `.getDate()` method.
+
+# --hints--
+
+You should use `const` to declare a `day` variable.
+
+```js
+assert.match(code, /const\s+day\s+=/);
+```
+
+You should assign the `date.getDate()` to your `day` variable.
+
+```js
+assert(code.match(/const\s+day\s+=\s+date\.getDate\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
new file mode 100644
index 00000000000..856addb1fea
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
@@ -0,0 +1,248 @@
+---
+id: 653883da4a1fabaeb5f1f5e7
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+The `.getMonth()` method returns a number between `0` and `11`. This represents the month for the date provided, where `0` is January and `11` is December.  Because the number this method returns is zero-based, you need to add `1` to it to get the expected month number.
+
+Using `const`, create a variable named `month` and assign it the month from `date` with the `.getMonth()` method.
+
+Remember to add `1` to the number returned by `.getMonth()`.
+
+# --hints--
+
+You should use `const` to declare a `month` variable.
+
+```js
+assert.match(code, /const\s+month\s+=/);
+```
+
+You should assign the `date.getMonth() + 1` to your `month` variable.
+
+```js
+assert(code.match(/const\s+month\s+=\s+date\.getMonth\(\)\s*\+\s*1/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
new file mode 100644
index 00000000000..36542963348
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
@@ -0,0 +1,247 @@
+---
+id: 65388475abfb4faf8dd5e347
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The `.getFullYear()` method returns a number which represents the year for the provided date.
+
+Using `const`, create a variable named `year` and assign it the year from `date` with the `.getFullYear()` method.
+
+# --hints--
+
+You should use `const` to declare a `year` variable.
+
+```js
+assert.match(code, /const\s+year\s+=/);
+```
+
+You should assign the `date.getFullYear()` to your `year` variable.
+
+```js
+assert(code.match(/const\s+year\s+=\s+date\.getFullYear\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
new file mode 100644
index 00000000000..b43a24cadcf
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
@@ -0,0 +1,248 @@
+---
+id: 653884e09dfb4eb01f1622ed
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `.getHours()` method returns a number between `0` and `23`. This represents the hour for the provided date, where `0` is midnight and `23` is 11 p.m.
+
+Create a `const` variable named `hours` and assign it the hour from `date` with the `.getHours()` method.
+
+# --hints--
+
+You should use `const` to declare a `hours` variable.
+
+```js
+assert.match(code, /const\s+hours\s+=/);
+```
+
+You should assign the `date.getHours()` to your `hours` variable.
+
+```js
+assert(code.match(/const\s+hours\s+=\s+date\.getHours\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
new file mode 100644
index 00000000000..f44a0b50f42
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
@@ -0,0 +1,249 @@
+---
+id: 6538855514cb16b10204e712
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.
+
+Create a `const` variable named `minutes` and assign it the minutes from `date` with the `.getMinutes()` method.
+
+# --hints--
+
+You should use `const` to declare a `minutes` variable.
+
+```js
+assert.match(code, /const\s+minutes\s+=/);
+```
+
+You should assign the `date.getMinutes()` to your `minutes` variable.
+
+```js
+assert(code.match(/const\s+minutes\s+=\s+date\.getMinutes\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
new file mode 100644
index 00000000000..150461fb9c7
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
@@ -0,0 +1,248 @@
+---
+id: 653885c61ede29b1a99554a2
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Next, create a `const` variable named `formattedDate` and assign it empty template literals.
+
+# --hints--
+
+You should use `const` to declare a `formattedDate` variable.
+
+```js
+assert.match(code, /const\s+formattedDate\s*=/);
+```
+
+You should assign the empty template literals to your `formattedDate` variable.
+
+```js
+assert(code.match(/const\s+formattedDate\s*=\s*``/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
new file mode 100644
index 00000000000..2710d11ae38
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
@@ -0,0 +1,244 @@
+---
+id: 65388659a72663b27cde0699
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Inside the template literal, add an embedded expression that contains the `day` variable.
+
+# --hints--
+
+You should use the `day` constant inside the template literal.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = ``;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
new file mode 100644
index 00000000000..8dc4e4832c1
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
@@ -0,0 +1,244 @@
+---
+id: 653887098bdc39b3684a51c8
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+After the `day` variable, add a dash (`-`) followed by another embedded expression that contains the `month` variable.
+
+# --hints--
+
+You will need to use the `month` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
new file mode 100644
index 00000000000..0c42cdb142d
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
@@ -0,0 +1,244 @@
+---
+id: 65388762f61f44b3fd490a4a
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+After the `month` variable, add a dash followed by another embedded expression that contains the `year` variable.
+
+# --hints--
+
+You will need to use the `year` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}\s*-\s*\${year}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
new file mode 100644
index 00000000000..b2eaac290cd
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
@@ -0,0 +1,246 @@
+---
+id: 6538886c61a414b4e34496fe
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To see the results of the `formattedDate` variable, add a `console.log()` statement and pass in the `formattedDate` variable as an argument.
+
+Open up the console and you should see the date printed out.
+
+# --hints--
+
+You should have a `console.log(formattedDate)` line in your code.
+
+```js
+assert.match(code, /console\.log\(formattedDate\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
new file mode 100644
index 00000000000..24181f065b2
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
@@ -0,0 +1,268 @@
+---
+id: 65388ac7154e44b72c74d616
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In JavaScript, the `textContent` property is used to both get and set the text of a node.
+
+For example, here's how you can get the text content from a paragraph element with the id `example-paragraph`, and set its text content to a new value:
+
+```html
+<p id="example-paragraph">Example Text</p>
+```
+
+```js
+const exampleParagraph = document.getElementById("example-paragraph");
+console.log(exampleParagraph.textContent); // "Example Text"
+exampleParagraph.textContent = "New Text";
+console.log(exampleParagraph.textContent); // "New Text"
+```
+
+Use the `textContent` property on `currentDateParagraph` to set its text content to the value of the `formattedDate` variable.
+
+Also, make sure to remove your `console.log(formattedDate);` line.
+
+# --hints--
+
+You should use the `textContent` property to set the text content of `currentDateParagraph` to the value of the constant `formattedDate`.
+
+```js
+assert(code.match(/currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+You should not have a `console.log(formattedDate);` line in your code.
+
+```js
+assert.notMatch(code, /console\.log\(formattedDate\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+console.log(formattedDate);
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
new file mode 100644
index 00000000000..2b3c02282b1
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
@@ -0,0 +1,259 @@
+---
+id: 65388bbcbf6928b83fc424d1
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.
+
+```js
+element.addEventListener("change", () => {
+
+});
+```
+
+Chain the `addEventListener` method to `dateOptionsSelectElement` where the first argument is `change` and the second argument is an empty arrow function.
+
+# --hints--
+
+You should use the `addEventListener` method to add a `change` event listener to `dateOptionsSelectElement`.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*['"]change/g));
+```
+
+You should add an empty arrow function as the second argument to the `addEventListener` method.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*(['"])change\1\s*,\s*\(\s*\)\s*=>\s*{\s*}/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
new file mode 100644
index 00000000000..7f471fcf376
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
@@ -0,0 +1,268 @@
+---
+id: 65388d61a57a00b9ad0d0817
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+When a user makes a selection from the dropdown menu, the function should get the user's value and display the date in their chosen date format. To do this, you can use the `switch` statement.
+
+A `switch` statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It's commonly used for branching logic.
+
+For example, here's how to compare the expression `dayOfWeek` against possible values:
+
+```js
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+Create a `switch` statement and use `dateOptionsSelectElement.value` as the expression.
+
+# --hints--
+
+You should use a `switch` statement where `dateOptionsSelectElement.value` is the expression.
+
+```js
+assert(code.match(/switch\s*\(\s*dateOptionsSelectElement.value\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
new file mode 100644
index 00000000000..83cfa83fd2b
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -0,0 +1,262 @@
+---
+id: 65388edfdf364fbb04e426f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+When the user chooses the `Year, Month, Day` option from the dropdown, the date format should reflect this choice.
+
+To do this, you can add a `case` in the `switch` statement, followed by your logic.
+
+```js
+switch (expression) {
+  case 'case123':
+    // Write your logic here
+}
+```
+
+Add a `case` where the value is `yyyy-mm-dd`. Inside the `case`, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+
+# --hints--
+
+You should add a `case` where the condition is `yyyy-mm-dd`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`.
+
+```js
+assert(code.match(/case\s*(['"])yyyy-mm-dd\1\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+  switch (dateOptionsSelectElement.value) {
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
new file mode 100644
index 00000000000..02993fa4aad
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
@@ -0,0 +1,259 @@
+---
+id: 65389211a8d86bbd876a2a74
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+In JavaScript, the `.split()` method is used to split up a string into an array of substrings. This method has an optional separator parameter, which indicates where each split should happen.
+
+```js
+"coca-cola".split("-"); // [ 'coca', 'cola' ]
+```
+
+Split `formattedDate` into an array of substrings with the `.split()` method and use a `"-"` as the separator.
+
+# --hints--
+
+You should use the `.split()` method with `"-"` as the separator to split `formattedDate` into an array of substrings.
+
+```js
+assert(code.match(/formattedDate[\s\S]*?\.split\(\s*(['"`])-\1\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
new file mode 100644
index 00000000000..873ad4fd565
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
@@ -0,0 +1,262 @@
+---
+id: 65389306578c34be5c93bc35
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The `.reverse()` method is used to reverse an array in place. For example:
+
+```js
+const array = [1, 2, 3, 4, 5];
+array.reverse();
+console.log(array); // [5, 4, 3, 2, 1]
+```
+
+Chain the `.reverse()` method to the end of `.split()` method.
+
+# --hints--
+
+You should use the `.reverse()` method to reverse the order of the array returned by `.split()`.
+
+```js
+assert(code.match(/\.reverse\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
new file mode 100644
index 00000000000..3253ba8d27b
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
@@ -0,0 +1,257 @@
+---
+id: 6538935e2ab721beedb137c4
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Finally, you need to create a string with the reversed array elements separated by dash (`-`) character.
+
+Use the `.join()` method to join the reversed array elements into a string and use a `"-"` for the separator.
+
+# --hints--
+
+You should use the `.join()` method to join the reversed array elements into a string and use a `"-"` as a separator.
+
+```js
+assert(code.match(/\.join\((['"])-\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
new file mode 100644
index 00000000000..bd71851d497
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
@@ -0,0 +1,268 @@
+---
+id: 653898fa7eee37c57b960e35
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+If your `switch` statement is going to have multiple cases, it is best practice to include a `break` statement.
+
+The `break` statement will tell the JavaScript interpreter to stop executing statements. Without adding a `break` statement at the end of each `case` block, the program will execute the code for all matching `cases`.
+
+```js
+switch (someVariable) {
+  case 'case123':
+    // Write your logic here
+    break; // Terminates the switch statement
+}
+```
+
+Add a `break` statement to the end of your `case` block.
+
+# --hints--
+
+You should add a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
new file mode 100644
index 00000000000..8ce925e00f1
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -0,0 +1,265 @@
+---
+id: 65389a63d3b1d6c764c0e10e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `case` with the value `mm-dd-yyyy-h-mm`. Inside that `case`, set the text content of `currentDateParagraph` to empty template literals.
+
+Also, make sure to include a `break` statement to terminate the `switch` statement.
+
+# --hints--
+
+You should add a `case` where the condition is `mm-dd-yyyy-h-mm`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals.
+
+```js
+assert(code.match(/case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph.textContent\s*=\s*``/g));
+```
+
+You should include a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
new file mode 100644
index 00000000000..85d6fe3c758
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
@@ -0,0 +1,261 @@
+---
+id: 65389de504d0f2ca10e92a57
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Inside the `case` for `mm-dd-yyyy-h-mm`, set the `textContent` property of `currentDateParagraph` to `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`.
+
+
+# --hints--
+
+You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.
+
+```js
+const pattern = /case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*`(\$\{month}-\$\{day}-\$\{year} \$\{hours} Hours \$\{minutes} Minutes)`/;
+assert(code.match(pattern));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = ``;
+      break;
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
new file mode 100644
index 00000000000..9e6b380ff8f
--- /dev/null
+++ b/curriculum/challenges/german/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -0,0 +1,519 @@
+---
+id: 65389eff4893facbbe6eae67
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In a `switch` statement, the `default` case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:
+
+```js
+const dayOfWeek = 7;
+
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+For the `default` case, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+And with that, your date formatter is complete! You can now format the current date three different ways.
+
+# --hints--
+
+You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.
+
+```js
+assert(code.match(/default\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
+
+# --solutions--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break; 
+    default:
+      currentDateParagraph.textContent = formattedDate;
+  }
+});
+
+```
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
index a0712627a32..7798c3039c4 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
@@ -20,7 +20,7 @@ Quando la condizione valuta un `true`, il programma esegue la dichiarazione all'
 **Esempio**
 
 ```js
-function test (myCondition) {
+function test(myCondition) {
   if (myCondition) {
     return "It was true";
   }
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index ba423445b60..035b0ad2920 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -36,13 +36,20 @@ assert(
 Il testo del link dovrebbe essere `cat photos`. Hai omesso il testo o hai un refuso.
 
 ```js
-const nestedAnchor = document.querySelector(`p > a`);
-assert(
-  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isTrue(innerContent.trim() === 'cat photos');
 ```
 
-Dopo aver annidato l'elemento di ancoraggio (`a`), l'unico contenuto dell'elemento `p` visibile nel browser dovrebbe essere `See more cat photos in our gallery.` Controlla il testo, la spaziatura o la punteggiatura, sia dell'elemento `p` che dell'elemento di ancoraggio annidato.
+The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`.
+
+```js
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
+```
+
+After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
 
 ```js
 assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
index 9770b808bac..cb7f01f0065 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -7,30 +7,17 @@ dashedName: step-64
 
 # --description--
 
-Ultimo, ma non meno importante, rendi l'`input` per termini e condizioni `inline`, quindi cambia il colore del testo dell'elemento link `terms and conditions` in `#dfdfe2`.
+Make the `input` for the terms and conditions `inline` by adding the appropriate class in the HTML.
 
-Ottimo lavoro! Hai completato la parte finale del progetto _Registration Form_.
 
 # --hints--
 
-Dovresti assegnare all'`input` la classe `inline`.
+You should give the `input` a class of `inline`.
 
 ```js
 assert(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline'));
 ```
 
-Dovresti usare il selettore di elemento `a`.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
-```
-
-Dovresti assegnare all'elemento `a` una proprietà `color` con il valore `#dfdfe2`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
-```
-
 # --seed--
 
 ## --seed-contents--
@@ -164,133 +151,3 @@ input[type="file"] {
 --fcc-editable-region--
 
 ```
-
-# --solutions--
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Registration Form</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <h1>Registration Form</h1>
-    <p>Please fill out this form with the required information</p>
-    <form method="post" action='https://register-demo.freecodecamp.org'>
-      <fieldset>
-        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
-        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
-        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
-        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
-      </fieldset>
-      <fieldset>
-        <legend>Account type (required)</legend>
-        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
-        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
-      </fieldset>
-      <fieldset>
-        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
-        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
-        <label for="referrer">How did you hear about us?
-          <select id="referrer" name="referrer">
-            <option value="">(select one)</option>
-            <option value="1">freeCodeCamp News</option>
-            <option value="2">freeCodeCamp YouTube Channel</option>
-            <option value="3">freeCodeCamp Forum</option>
-            <option value="4">Other</option>
-          </select>
-        </label>
-        <label for="bio">Provide a bio:
-          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
-        </label>
-      </fieldset>
-      <label for="terms-and-conditions">
-        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
-      </label>
-      <input type="submit" value="Submit" />
-    </form>
-  </body>
-</html>
-```
-
-```css
-body {
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  background-color: #1b1b32;
-  color: #f5f6f7;
-  font-family: Tahoma;
-  font-size: 16px;
-}
-
-h1, p {
-  margin: 1em auto;
-  text-align: center;
-}
-
-form {
-  width: 60vw;
-  max-width: 500px;
-  min-width: 300px;
-  margin: 0 auto;
-  padding-bottom: 2em;
-}
-
-fieldset {
-  border: none;
-  padding: 2rem 0;
-  border-bottom: 3px solid #3b3b4f;
-}
-
-fieldset:last-of-type {
-  border-bottom: none;
-}
-
-label {
-  display: block;
-  margin: 0.5rem 0;
-}
-
-input,
-textarea,
-select {
-  margin: 10px 0 0 0;
-  width: 100%;
-  min-height: 2em;
-}
-
-input, textarea {
-  background-color: #0a0a23;
-  border: 1px solid #0a0a23;
-  color: #ffffff;
-}
-
-.inline {
-  width: unset;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-
-input[type="submit"] {
-  display: block;
-  width: 60%;
-  margin: 1em auto;
-  height: 2em;
-  font-size: 1.1rem;
-  background-color: #3b3b4f;
-  border-color: white;
-  min-width: 300px;
-}
-
-input[type="file"] {
-  padding: 1px 2px;
-}
-
-a {
-  color: #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
new file mode 100644
index 00000000000..fd3a2bfd184
--- /dev/null
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
@@ -0,0 +1,292 @@
+---
+id: 6537e0be715fcb57d31ba8c3
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Lastly change the text color of the `terms and conditions` link element to `#dfdfe2` by adding a new selector in the CSS.
+
+Well done! You have completed the final part of the _Registration Form_ practice project.
+
+# --hints--
+
+You should use an `a` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
+```
+
+You should give the `a` element a `color` of `#dfdfe2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+.inline{
+  display: inline; 
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+a {
+  color: #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
index cd14d9fb73e..8e65feacdaf 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
@@ -17,7 +17,7 @@ Dovresti assegnare la stringa `You dodge the attack from the` alla proprietà `t
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/);
 ```
 
-Dovresti usare l'operazione di concatenazione per aggiungere il nome del mostro alla fine della stringa. Puoi ottenerlo con `monster[fighting].name`.
+Dovresti usare l'operazione di concatenazione per aggiungere il nome del mostro alla fine della stringa. You can get this with `monsters[fighting].name`.
 
 ```js
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/);
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
index d8993f4e3ff..3d45e7b2c15 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
@@ -9,7 +9,9 @@ dashedName: step-138
 
 Torna alla funzione `attack` - all'interno del blocco `else if`, crea delle altre istruzioni `if` ed `else`. Se il giocatore sta combattendo il drago (`fighting` ha il valore `2`), chiama la funzione `winGame`. Sposta la chiamata `defeatMonster()` nel blocco `else`.
 
-Ecco un esempio che verifica se `num` è uguale a `5`:
+For this step, you will need to use the strict equality (`===`) operator to check if `fighting` is equal to `2`. The strict equality operator will check if the values are equal and if they are the same data type.
+
+Here is an example that checks if `num` is strictly equal to `5`:
 
 ```js
 if (num === 5) {
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
index a996e5d3233..fbcca04149b 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
@@ -7,7 +7,7 @@ dashedName: step-150
 
 # --description--
 
-Aggiungi un'istruzione `else` alla prima istruzione `if` all'interno della funzione `attack()`. Nell'istruzione `else`, usa l'operatore `+=` per aggiungere il testo `You miss.` alla fine di `text.innerText`.
+Add an `else` statement to the first `if` statement inside your `attack()` function. Nell'istruzione `else`, usa l'operatore `+=` per aggiungere il testo `You miss.` alla fine di `text.innerText`.
 
 # --hints--
 
@@ -17,7 +17,7 @@ Dovresti aggiungere un blocco `else` dopo il blocco `if (isMonsterHit())`.
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/)
 ```
 
-Dovresti aggiungere il testo `You miss.` alla fine di `text.innerText`. Ricordati di usare l'assegnazione composta.
+Dovresti aggiungere il testo `You miss.` alla fine di `text.innerText`. Remember to use compound assignment and make sure there is a space before the word `You`.
 
 ```js
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/)
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
index 31865680247..b23aaf9927e 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
@@ -207,8 +207,8 @@ const locations = [
         "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
         "button functions": [restart, restart, restart], 
         text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
 --fcc-editable-region--
-    }
 
 --fcc-editable-region--
 ];
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
index fe9bee7318c..a00275e7b28 100644
--- a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
@@ -7,7 +7,7 @@ dashedName: step-165
 
 # --description--
 
-Prima delle ultime virgolette nella stringa che hai aggiunto, inserisci un carattere di escape nuova riga `\n`. Farà sì che la parte successiva aggiunta a `text.innerText` sia su una nuova riga.
+At the end of the string, before the final quote, insert the new line escape character `\n`. Farà sì che la parte successiva aggiunta a `text.innerText` sia su una nuova riga.
 
 # --hints--
 
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
new file mode 100644
index 00000000000..c8bedf3010f
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
@@ -0,0 +1,248 @@
+---
+id: 65386e889dd615940cb3e042
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn about the JavaScript `Date` object by building a date formatter.
+
+All of the HTML and CSS for this project have been provided for you.
+
+Start by getting the `#current-date` element using the `.getElementById()` method and assign it to a `const` variable called `currentDateParagraph`.
+
+# --hints--
+
+You should use `const` to declare a `currentDateParagraph` variable.
+
+```js
+assert.match(code, /const\s+currentDateParagraph\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#current-date` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)current-date\1\)/);
+```
+
+You should assign the `#current-date` element to your `currentDateParagraph` variable.
+
+```js
+assert(code.match(/const\s+currentDateParagraph\s+=\s+document\.getElementById\(('|"|`)current-date\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
new file mode 100644
index 00000000000..3295a750daa
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
@@ -0,0 +1,246 @@
+---
+id: 653879d87bc55fa624280c77
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Use the `.getElementById()` method to get the `#date-options` element and use `const` to assign it to a variable named `dateOptionsSelectElement`.
+
+# --hints--
+
+You should use `const` to declare a `dateOptionsSelectElement` variable.
+
+```js
+assert.match(code, /const\s+dateOptionsSelectElement\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#date-options` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)date-options\1\)/);
+```
+
+You should assign the `#date-options` element to your `dateOptionsSelectElement` variable.
+
+```js
+assert(code.match(/const\s+dateOptionsSelectElement\s+=\s+document\.getElementById\(('|"|`)date-options\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
new file mode 100644
index 00000000000..788fae024c1
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
@@ -0,0 +1,253 @@
+---
+id: 65387b440b5cb1aa35585820
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+In JavaScript, there are many built-in <dfn>constructors</dfn> that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the `new` operator.
+
+For example, you can use the `Date()` constructor with the `new` operator to create a new `Date` object that returns a string with the current date and time:
+
+```js
+const currentDate = new Date();
+console.log(currentDate);
+
+// Output:
+// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)
+```
+
+Create a new `const` variable called `date` and assign it a `Date` object with `new Date()`.
+
+# --hints--
+
+You should use `const` to declare a `date` variable.
+
+```js
+assert.match(code, /const\s+date\s+=/);
+```
+
+You should assign a `Date` object to your `date` variable with `new Date()`.
+
+```js
+assert(code.match(/const\s+date\s+=\s+new\s+Date\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
new file mode 100644
index 00000000000..2257dace260
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
@@ -0,0 +1,253 @@
+---
+id: 6538830e01ab66ade75b869e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The `Date` object has a number of methods that allow you to get the date and time in different formats.
+
+One of those is the `.getDate()` method, which returns a number between 1-31 that represents the day of the month for that date. For example:
+
+```js
+const date = new Date();
+const dayOfTheMonth = date.getDate();
+console.log(dayOfTheMonth); // 20
+```
+
+Using `const`, create a variable named `day` and assign it the day of the month from `date` with the `.getDate()` method.
+
+# --hints--
+
+You should use `const` to declare a `day` variable.
+
+```js
+assert.match(code, /const\s+day\s+=/);
+```
+
+You should assign the `date.getDate()` to your `day` variable.
+
+```js
+assert(code.match(/const\s+day\s+=\s+date\.getDate\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
new file mode 100644
index 00000000000..856addb1fea
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
@@ -0,0 +1,248 @@
+---
+id: 653883da4a1fabaeb5f1f5e7
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+The `.getMonth()` method returns a number between `0` and `11`. This represents the month for the date provided, where `0` is January and `11` is December.  Because the number this method returns is zero-based, you need to add `1` to it to get the expected month number.
+
+Using `const`, create a variable named `month` and assign it the month from `date` with the `.getMonth()` method.
+
+Remember to add `1` to the number returned by `.getMonth()`.
+
+# --hints--
+
+You should use `const` to declare a `month` variable.
+
+```js
+assert.match(code, /const\s+month\s+=/);
+```
+
+You should assign the `date.getMonth() + 1` to your `month` variable.
+
+```js
+assert(code.match(/const\s+month\s+=\s+date\.getMonth\(\)\s*\+\s*1/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
new file mode 100644
index 00000000000..36542963348
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
@@ -0,0 +1,247 @@
+---
+id: 65388475abfb4faf8dd5e347
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The `.getFullYear()` method returns a number which represents the year for the provided date.
+
+Using `const`, create a variable named `year` and assign it the year from `date` with the `.getFullYear()` method.
+
+# --hints--
+
+You should use `const` to declare a `year` variable.
+
+```js
+assert.match(code, /const\s+year\s+=/);
+```
+
+You should assign the `date.getFullYear()` to your `year` variable.
+
+```js
+assert(code.match(/const\s+year\s+=\s+date\.getFullYear\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
new file mode 100644
index 00000000000..b43a24cadcf
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
@@ -0,0 +1,248 @@
+---
+id: 653884e09dfb4eb01f1622ed
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `.getHours()` method returns a number between `0` and `23`. This represents the hour for the provided date, where `0` is midnight and `23` is 11 p.m.
+
+Create a `const` variable named `hours` and assign it the hour from `date` with the `.getHours()` method.
+
+# --hints--
+
+You should use `const` to declare a `hours` variable.
+
+```js
+assert.match(code, /const\s+hours\s+=/);
+```
+
+You should assign the `date.getHours()` to your `hours` variable.
+
+```js
+assert(code.match(/const\s+hours\s+=\s+date\.getHours\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
new file mode 100644
index 00000000000..f44a0b50f42
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
@@ -0,0 +1,249 @@
+---
+id: 6538855514cb16b10204e712
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.
+
+Create a `const` variable named `minutes` and assign it the minutes from `date` with the `.getMinutes()` method.
+
+# --hints--
+
+You should use `const` to declare a `minutes` variable.
+
+```js
+assert.match(code, /const\s+minutes\s+=/);
+```
+
+You should assign the `date.getMinutes()` to your `minutes` variable.
+
+```js
+assert(code.match(/const\s+minutes\s+=\s+date\.getMinutes\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
new file mode 100644
index 00000000000..150461fb9c7
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
@@ -0,0 +1,248 @@
+---
+id: 653885c61ede29b1a99554a2
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Next, create a `const` variable named `formattedDate` and assign it empty template literals.
+
+# --hints--
+
+You should use `const` to declare a `formattedDate` variable.
+
+```js
+assert.match(code, /const\s+formattedDate\s*=/);
+```
+
+You should assign the empty template literals to your `formattedDate` variable.
+
+```js
+assert(code.match(/const\s+formattedDate\s*=\s*``/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
new file mode 100644
index 00000000000..2710d11ae38
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
@@ -0,0 +1,244 @@
+---
+id: 65388659a72663b27cde0699
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Inside the template literal, add an embedded expression that contains the `day` variable.
+
+# --hints--
+
+You should use the `day` constant inside the template literal.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = ``;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
new file mode 100644
index 00000000000..8dc4e4832c1
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
@@ -0,0 +1,244 @@
+---
+id: 653887098bdc39b3684a51c8
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+After the `day` variable, add a dash (`-`) followed by another embedded expression that contains the `month` variable.
+
+# --hints--
+
+You will need to use the `month` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
new file mode 100644
index 00000000000..0c42cdb142d
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
@@ -0,0 +1,244 @@
+---
+id: 65388762f61f44b3fd490a4a
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+After the `month` variable, add a dash followed by another embedded expression that contains the `year` variable.
+
+# --hints--
+
+You will need to use the `year` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}\s*-\s*\${year}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
new file mode 100644
index 00000000000..b2eaac290cd
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
@@ -0,0 +1,246 @@
+---
+id: 6538886c61a414b4e34496fe
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To see the results of the `formattedDate` variable, add a `console.log()` statement and pass in the `formattedDate` variable as an argument.
+
+Open up the console and you should see the date printed out.
+
+# --hints--
+
+You should have a `console.log(formattedDate)` line in your code.
+
+```js
+assert.match(code, /console\.log\(formattedDate\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
new file mode 100644
index 00000000000..24181f065b2
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
@@ -0,0 +1,268 @@
+---
+id: 65388ac7154e44b72c74d616
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In JavaScript, the `textContent` property is used to both get and set the text of a node.
+
+For example, here's how you can get the text content from a paragraph element with the id `example-paragraph`, and set its text content to a new value:
+
+```html
+<p id="example-paragraph">Example Text</p>
+```
+
+```js
+const exampleParagraph = document.getElementById("example-paragraph");
+console.log(exampleParagraph.textContent); // "Example Text"
+exampleParagraph.textContent = "New Text";
+console.log(exampleParagraph.textContent); // "New Text"
+```
+
+Use the `textContent` property on `currentDateParagraph` to set its text content to the value of the `formattedDate` variable.
+
+Also, make sure to remove your `console.log(formattedDate);` line.
+
+# --hints--
+
+You should use the `textContent` property to set the text content of `currentDateParagraph` to the value of the constant `formattedDate`.
+
+```js
+assert(code.match(/currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+You should not have a `console.log(formattedDate);` line in your code.
+
+```js
+assert.notMatch(code, /console\.log\(formattedDate\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+console.log(formattedDate);
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
new file mode 100644
index 00000000000..2b3c02282b1
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
@@ -0,0 +1,259 @@
+---
+id: 65388bbcbf6928b83fc424d1
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.
+
+```js
+element.addEventListener("change", () => {
+
+});
+```
+
+Chain the `addEventListener` method to `dateOptionsSelectElement` where the first argument is `change` and the second argument is an empty arrow function.
+
+# --hints--
+
+You should use the `addEventListener` method to add a `change` event listener to `dateOptionsSelectElement`.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*['"]change/g));
+```
+
+You should add an empty arrow function as the second argument to the `addEventListener` method.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*(['"])change\1\s*,\s*\(\s*\)\s*=>\s*{\s*}/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
new file mode 100644
index 00000000000..7f471fcf376
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
@@ -0,0 +1,268 @@
+---
+id: 65388d61a57a00b9ad0d0817
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+When a user makes a selection from the dropdown menu, the function should get the user's value and display the date in their chosen date format. To do this, you can use the `switch` statement.
+
+A `switch` statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It's commonly used for branching logic.
+
+For example, here's how to compare the expression `dayOfWeek` against possible values:
+
+```js
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+Create a `switch` statement and use `dateOptionsSelectElement.value` as the expression.
+
+# --hints--
+
+You should use a `switch` statement where `dateOptionsSelectElement.value` is the expression.
+
+```js
+assert(code.match(/switch\s*\(\s*dateOptionsSelectElement.value\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
new file mode 100644
index 00000000000..83cfa83fd2b
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -0,0 +1,262 @@
+---
+id: 65388edfdf364fbb04e426f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+When the user chooses the `Year, Month, Day` option from the dropdown, the date format should reflect this choice.
+
+To do this, you can add a `case` in the `switch` statement, followed by your logic.
+
+```js
+switch (expression) {
+  case 'case123':
+    // Write your logic here
+}
+```
+
+Add a `case` where the value is `yyyy-mm-dd`. Inside the `case`, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+
+# --hints--
+
+You should add a `case` where the condition is `yyyy-mm-dd`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`.
+
+```js
+assert(code.match(/case\s*(['"])yyyy-mm-dd\1\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+  switch (dateOptionsSelectElement.value) {
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
new file mode 100644
index 00000000000..02993fa4aad
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
@@ -0,0 +1,259 @@
+---
+id: 65389211a8d86bbd876a2a74
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+In JavaScript, the `.split()` method is used to split up a string into an array of substrings. This method has an optional separator parameter, which indicates where each split should happen.
+
+```js
+"coca-cola".split("-"); // [ 'coca', 'cola' ]
+```
+
+Split `formattedDate` into an array of substrings with the `.split()` method and use a `"-"` as the separator.
+
+# --hints--
+
+You should use the `.split()` method with `"-"` as the separator to split `formattedDate` into an array of substrings.
+
+```js
+assert(code.match(/formattedDate[\s\S]*?\.split\(\s*(['"`])-\1\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
new file mode 100644
index 00000000000..873ad4fd565
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
@@ -0,0 +1,262 @@
+---
+id: 65389306578c34be5c93bc35
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The `.reverse()` method is used to reverse an array in place. For example:
+
+```js
+const array = [1, 2, 3, 4, 5];
+array.reverse();
+console.log(array); // [5, 4, 3, 2, 1]
+```
+
+Chain the `.reverse()` method to the end of `.split()` method.
+
+# --hints--
+
+You should use the `.reverse()` method to reverse the order of the array returned by `.split()`.
+
+```js
+assert(code.match(/\.reverse\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
new file mode 100644
index 00000000000..3253ba8d27b
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
@@ -0,0 +1,257 @@
+---
+id: 6538935e2ab721beedb137c4
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Finally, you need to create a string with the reversed array elements separated by dash (`-`) character.
+
+Use the `.join()` method to join the reversed array elements into a string and use a `"-"` for the separator.
+
+# --hints--
+
+You should use the `.join()` method to join the reversed array elements into a string and use a `"-"` as a separator.
+
+```js
+assert(code.match(/\.join\((['"])-\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
new file mode 100644
index 00000000000..bd71851d497
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
@@ -0,0 +1,268 @@
+---
+id: 653898fa7eee37c57b960e35
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+If your `switch` statement is going to have multiple cases, it is best practice to include a `break` statement.
+
+The `break` statement will tell the JavaScript interpreter to stop executing statements. Without adding a `break` statement at the end of each `case` block, the program will execute the code for all matching `cases`.
+
+```js
+switch (someVariable) {
+  case 'case123':
+    // Write your logic here
+    break; // Terminates the switch statement
+}
+```
+
+Add a `break` statement to the end of your `case` block.
+
+# --hints--
+
+You should add a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
new file mode 100644
index 00000000000..8ce925e00f1
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -0,0 +1,265 @@
+---
+id: 65389a63d3b1d6c764c0e10e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `case` with the value `mm-dd-yyyy-h-mm`. Inside that `case`, set the text content of `currentDateParagraph` to empty template literals.
+
+Also, make sure to include a `break` statement to terminate the `switch` statement.
+
+# --hints--
+
+You should add a `case` where the condition is `mm-dd-yyyy-h-mm`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals.
+
+```js
+assert(code.match(/case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph.textContent\s*=\s*``/g));
+```
+
+You should include a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
new file mode 100644
index 00000000000..85d6fe3c758
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
@@ -0,0 +1,261 @@
+---
+id: 65389de504d0f2ca10e92a57
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Inside the `case` for `mm-dd-yyyy-h-mm`, set the `textContent` property of `currentDateParagraph` to `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`.
+
+
+# --hints--
+
+You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.
+
+```js
+const pattern = /case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*`(\$\{month}-\$\{day}-\$\{year} \$\{hours} Hours \$\{minutes} Minutes)`/;
+assert(code.match(pattern));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = ``;
+      break;
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
new file mode 100644
index 00000000000..9e6b380ff8f
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -0,0 +1,519 @@
+---
+id: 65389eff4893facbbe6eae67
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In a `switch` statement, the `default` case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:
+
+```js
+const dayOfWeek = 7;
+
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+For the `default` case, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+And with that, your date formatter is complete! You can now format the current date three different ways.
+
+# --hints--
+
+You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.
+
+```js
+assert(code.match(/default\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
+
+# --solutions--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break; 
+    default:
+      currentDateParagraph.textContent = formattedDate;
+  }
+});
+
+```
diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
index b6342a79787..f0d3f87e2f1 100644
--- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
+++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
@@ -20,7 +20,7 @@ dashedName: use-conditional-logic-with-if-statements
 **例**
 
 ```js
-function test (myCondition) {
+function test(myCondition) {
   if (myCondition) {
     return "It was true";
   }
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index cdd71cb5c3f..1fd4b3afb94 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -36,13 +36,20 @@ assert(
 リンクのテキストは `cat photos` でなければなりません。 テキストに誤字脱字があります。
 
 ```js
-const nestedAnchor = document.querySelector(`p > a`);
-assert(
-  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isTrue(innerContent.trim() === 'cat photos');
 ```
 
-アンカー (`a`) 要素をネストした後は、ブラウザーに表示される `p` 要素の中身は `See more cat photos in our gallery.` だけになるはずです。`p` 要素およびネストされたアンカー要素の、テキスト、スペース、句読点を再確認してください。
+The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`.
+
+```js
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
+```
+
+After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
 
 ```js
 assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
index 7e7bc3cdc81..cb7f01f0065 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -7,9 +7,8 @@ dashedName: step-64
 
 # --description--
 
-Last, but not least, make the `input` for the terms and condition `inline`, then change the text color of the `terms and conditions` link element to `#dfdfe2`.
+Make the `input` for the terms and conditions `inline` by adding the appropriate class in the HTML.
 
-よくできました！ _登録フォーム_の練習プロジェクトの最後のパートが完成しました。
 
 # --hints--
 
@@ -19,18 +18,6 @@ You should give the `input` a class of `inline`.
 assert(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline'));
 ```
 
-You should use an `a` element selector.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
-```
-
-You should give the `a` element a `color` of `#dfdfe2`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
-```
-
 # --seed--
 
 ## --seed-contents--
@@ -164,133 +151,3 @@ input[type="file"] {
 --fcc-editable-region--
 
 ```
-
-# --solutions--
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Registration Form</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <h1>Registration Form</h1>
-    <p>Please fill out this form with the required information</p>
-    <form method="post" action='https://register-demo.freecodecamp.org'>
-      <fieldset>
-        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
-        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
-        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
-        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
-      </fieldset>
-      <fieldset>
-        <legend>Account type (required)</legend>
-        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
-        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
-      </fieldset>
-      <fieldset>
-        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
-        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
-        <label for="referrer">How did you hear about us?
-          <select id="referrer" name="referrer">
-            <option value="">(select one)</option>
-            <option value="1">freeCodeCamp News</option>
-            <option value="2">freeCodeCamp YouTube Channel</option>
-            <option value="3">freeCodeCamp Forum</option>
-            <option value="4">Other</option>
-          </select>
-        </label>
-        <label for="bio">Provide a bio:
-          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
-        </label>
-      </fieldset>
-      <label for="terms-and-conditions">
-        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
-      </label>
-      <input type="submit" value="Submit" />
-    </form>
-  </body>
-</html>
-```
-
-```css
-body {
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  background-color: #1b1b32;
-  color: #f5f6f7;
-  font-family: Tahoma;
-  font-size: 16px;
-}
-
-h1, p {
-  margin: 1em auto;
-  text-align: center;
-}
-
-form {
-  width: 60vw;
-  max-width: 500px;
-  min-width: 300px;
-  margin: 0 auto;
-  padding-bottom: 2em;
-}
-
-fieldset {
-  border: none;
-  padding: 2rem 0;
-  border-bottom: 3px solid #3b3b4f;
-}
-
-fieldset:last-of-type {
-  border-bottom: none;
-}
-
-label {
-  display: block;
-  margin: 0.5rem 0;
-}
-
-input,
-textarea,
-select {
-  margin: 10px 0 0 0;
-  width: 100%;
-  min-height: 2em;
-}
-
-input, textarea {
-  background-color: #0a0a23;
-  border: 1px solid #0a0a23;
-  color: #ffffff;
-}
-
-.inline {
-  width: unset;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-
-input[type="submit"] {
-  display: block;
-  width: 60%;
-  margin: 1em auto;
-  height: 2em;
-  font-size: 1.1rem;
-  background-color: #3b3b4f;
-  border-color: white;
-  min-width: 300px;
-}
-
-input[type="file"] {
-  padding: 1px 2px;
-}
-
-a {
-  color: #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
new file mode 100644
index 00000000000..fd3a2bfd184
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
@@ -0,0 +1,292 @@
+---
+id: 6537e0be715fcb57d31ba8c3
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Lastly change the text color of the `terms and conditions` link element to `#dfdfe2` by adding a new selector in the CSS.
+
+Well done! You have completed the final part of the _Registration Form_ practice project.
+
+# --hints--
+
+You should use an `a` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
+```
+
+You should give the `a` element a `color` of `#dfdfe2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+.inline{
+  display: inline; 
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+a {
+  color: #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
index 74b7964b09f..f2815e1da0e 100644
--- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
@@ -17,7 +17,7 @@ You should assign the string `You dodge the attack from the` to the `text.innerT
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/);
 ```
 
-You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monster[fighting].name`.
+You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monsters[fighting].name`.
 
 ```js
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/);
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
index c2291ca73c1..bd993a6cb55 100644
--- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
@@ -9,7 +9,9 @@ dashedName: step-138
 
 Back to your `attack` function - inside the `else if` block, create another `if` and `else` statement. If the player is fighting the dragon (`fighting` would be `2`), call the `winGame` function. Move the `defeatMonster()` call to the `else` block.
 
-Here is an example that checks if `num` is equal to `5`:
+For this step, you will need to use the strict equality (`===`) operator to check if `fighting` is equal to `2`. The strict equality operator will check if the values are equal and if they are the same data type.
+
+Here is an example that checks if `num` is strictly equal to `5`:
 
 ```js
 if (num === 5) {
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
index 788bdafd4ad..098cb0a8e4e 100644
--- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
@@ -7,7 +7,7 @@ dashedName: step-150
 
 # --description--
 
-Add an `else` statement to the first `if` statement inside you `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
+Add an `else` statement to the first `if` statement inside your `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
 
 # --hints--
 
@@ -17,7 +17,7 @@ You should add an `else` block after your `if (isMonsterHit())` block.
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/)
 ```
 
-You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment.
+You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment and make sure there is a space before the word `You`.
 
 ```js
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/)
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
index d47f53f5a8b..7a627b89658 100644
--- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
@@ -207,8 +207,8 @@ const locations = [
         "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
         "button functions": [restart, restart, restart], 
         text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
 --fcc-editable-region--
-    }
 
 --fcc-editable-region--
 ];
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
index 7b34447692f..1d84ca0e5ac 100644
--- a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
@@ -7,7 +7,7 @@ dashedName: step-165
 
 # --description--
 
-Before the final quote in that string you added, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
+At the end of the string, before the final quote, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
 
 # --hints--
 
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
new file mode 100644
index 00000000000..c8bedf3010f
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
@@ -0,0 +1,248 @@
+---
+id: 65386e889dd615940cb3e042
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn about the JavaScript `Date` object by building a date formatter.
+
+All of the HTML and CSS for this project have been provided for you.
+
+Start by getting the `#current-date` element using the `.getElementById()` method and assign it to a `const` variable called `currentDateParagraph`.
+
+# --hints--
+
+You should use `const` to declare a `currentDateParagraph` variable.
+
+```js
+assert.match(code, /const\s+currentDateParagraph\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#current-date` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)current-date\1\)/);
+```
+
+You should assign the `#current-date` element to your `currentDateParagraph` variable.
+
+```js
+assert(code.match(/const\s+currentDateParagraph\s+=\s+document\.getElementById\(('|"|`)current-date\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
new file mode 100644
index 00000000000..3295a750daa
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
@@ -0,0 +1,246 @@
+---
+id: 653879d87bc55fa624280c77
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Use the `.getElementById()` method to get the `#date-options` element and use `const` to assign it to a variable named `dateOptionsSelectElement`.
+
+# --hints--
+
+You should use `const` to declare a `dateOptionsSelectElement` variable.
+
+```js
+assert.match(code, /const\s+dateOptionsSelectElement\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#date-options` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)date-options\1\)/);
+```
+
+You should assign the `#date-options` element to your `dateOptionsSelectElement` variable.
+
+```js
+assert(code.match(/const\s+dateOptionsSelectElement\s+=\s+document\.getElementById\(('|"|`)date-options\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
new file mode 100644
index 00000000000..788fae024c1
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
@@ -0,0 +1,253 @@
+---
+id: 65387b440b5cb1aa35585820
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+In JavaScript, there are many built-in <dfn>constructors</dfn> that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the `new` operator.
+
+For example, you can use the `Date()` constructor with the `new` operator to create a new `Date` object that returns a string with the current date and time:
+
+```js
+const currentDate = new Date();
+console.log(currentDate);
+
+// Output:
+// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)
+```
+
+Create a new `const` variable called `date` and assign it a `Date` object with `new Date()`.
+
+# --hints--
+
+You should use `const` to declare a `date` variable.
+
+```js
+assert.match(code, /const\s+date\s+=/);
+```
+
+You should assign a `Date` object to your `date` variable with `new Date()`.
+
+```js
+assert(code.match(/const\s+date\s+=\s+new\s+Date\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
new file mode 100644
index 00000000000..2257dace260
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
@@ -0,0 +1,253 @@
+---
+id: 6538830e01ab66ade75b869e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The `Date` object has a number of methods that allow you to get the date and time in different formats.
+
+One of those is the `.getDate()` method, which returns a number between 1-31 that represents the day of the month for that date. For example:
+
+```js
+const date = new Date();
+const dayOfTheMonth = date.getDate();
+console.log(dayOfTheMonth); // 20
+```
+
+Using `const`, create a variable named `day` and assign it the day of the month from `date` with the `.getDate()` method.
+
+# --hints--
+
+You should use `const` to declare a `day` variable.
+
+```js
+assert.match(code, /const\s+day\s+=/);
+```
+
+You should assign the `date.getDate()` to your `day` variable.
+
+```js
+assert(code.match(/const\s+day\s+=\s+date\.getDate\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
new file mode 100644
index 00000000000..856addb1fea
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
@@ -0,0 +1,248 @@
+---
+id: 653883da4a1fabaeb5f1f5e7
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+The `.getMonth()` method returns a number between `0` and `11`. This represents the month for the date provided, where `0` is January and `11` is December.  Because the number this method returns is zero-based, you need to add `1` to it to get the expected month number.
+
+Using `const`, create a variable named `month` and assign it the month from `date` with the `.getMonth()` method.
+
+Remember to add `1` to the number returned by `.getMonth()`.
+
+# --hints--
+
+You should use `const` to declare a `month` variable.
+
+```js
+assert.match(code, /const\s+month\s+=/);
+```
+
+You should assign the `date.getMonth() + 1` to your `month` variable.
+
+```js
+assert(code.match(/const\s+month\s+=\s+date\.getMonth\(\)\s*\+\s*1/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
new file mode 100644
index 00000000000..36542963348
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
@@ -0,0 +1,247 @@
+---
+id: 65388475abfb4faf8dd5e347
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The `.getFullYear()` method returns a number which represents the year for the provided date.
+
+Using `const`, create a variable named `year` and assign it the year from `date` with the `.getFullYear()` method.
+
+# --hints--
+
+You should use `const` to declare a `year` variable.
+
+```js
+assert.match(code, /const\s+year\s+=/);
+```
+
+You should assign the `date.getFullYear()` to your `year` variable.
+
+```js
+assert(code.match(/const\s+year\s+=\s+date\.getFullYear\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
new file mode 100644
index 00000000000..b43a24cadcf
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
@@ -0,0 +1,248 @@
+---
+id: 653884e09dfb4eb01f1622ed
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `.getHours()` method returns a number between `0` and `23`. This represents the hour for the provided date, where `0` is midnight and `23` is 11 p.m.
+
+Create a `const` variable named `hours` and assign it the hour from `date` with the `.getHours()` method.
+
+# --hints--
+
+You should use `const` to declare a `hours` variable.
+
+```js
+assert.match(code, /const\s+hours\s+=/);
+```
+
+You should assign the `date.getHours()` to your `hours` variable.
+
+```js
+assert(code.match(/const\s+hours\s+=\s+date\.getHours\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
new file mode 100644
index 00000000000..f44a0b50f42
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
@@ -0,0 +1,249 @@
+---
+id: 6538855514cb16b10204e712
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.
+
+Create a `const` variable named `minutes` and assign it the minutes from `date` with the `.getMinutes()` method.
+
+# --hints--
+
+You should use `const` to declare a `minutes` variable.
+
+```js
+assert.match(code, /const\s+minutes\s+=/);
+```
+
+You should assign the `date.getMinutes()` to your `minutes` variable.
+
+```js
+assert(code.match(/const\s+minutes\s+=\s+date\.getMinutes\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
new file mode 100644
index 00000000000..150461fb9c7
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
@@ -0,0 +1,248 @@
+---
+id: 653885c61ede29b1a99554a2
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Next, create a `const` variable named `formattedDate` and assign it empty template literals.
+
+# --hints--
+
+You should use `const` to declare a `formattedDate` variable.
+
+```js
+assert.match(code, /const\s+formattedDate\s*=/);
+```
+
+You should assign the empty template literals to your `formattedDate` variable.
+
+```js
+assert(code.match(/const\s+formattedDate\s*=\s*``/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
new file mode 100644
index 00000000000..2710d11ae38
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
@@ -0,0 +1,244 @@
+---
+id: 65388659a72663b27cde0699
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Inside the template literal, add an embedded expression that contains the `day` variable.
+
+# --hints--
+
+You should use the `day` constant inside the template literal.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = ``;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
new file mode 100644
index 00000000000..8dc4e4832c1
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
@@ -0,0 +1,244 @@
+---
+id: 653887098bdc39b3684a51c8
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+After the `day` variable, add a dash (`-`) followed by another embedded expression that contains the `month` variable.
+
+# --hints--
+
+You will need to use the `month` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
new file mode 100644
index 00000000000..0c42cdb142d
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
@@ -0,0 +1,244 @@
+---
+id: 65388762f61f44b3fd490a4a
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+After the `month` variable, add a dash followed by another embedded expression that contains the `year` variable.
+
+# --hints--
+
+You will need to use the `year` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}\s*-\s*\${year}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
new file mode 100644
index 00000000000..b2eaac290cd
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
@@ -0,0 +1,246 @@
+---
+id: 6538886c61a414b4e34496fe
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To see the results of the `formattedDate` variable, add a `console.log()` statement and pass in the `formattedDate` variable as an argument.
+
+Open up the console and you should see the date printed out.
+
+# --hints--
+
+You should have a `console.log(formattedDate)` line in your code.
+
+```js
+assert.match(code, /console\.log\(formattedDate\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
new file mode 100644
index 00000000000..24181f065b2
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
@@ -0,0 +1,268 @@
+---
+id: 65388ac7154e44b72c74d616
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In JavaScript, the `textContent` property is used to both get and set the text of a node.
+
+For example, here's how you can get the text content from a paragraph element with the id `example-paragraph`, and set its text content to a new value:
+
+```html
+<p id="example-paragraph">Example Text</p>
+```
+
+```js
+const exampleParagraph = document.getElementById("example-paragraph");
+console.log(exampleParagraph.textContent); // "Example Text"
+exampleParagraph.textContent = "New Text";
+console.log(exampleParagraph.textContent); // "New Text"
+```
+
+Use the `textContent` property on `currentDateParagraph` to set its text content to the value of the `formattedDate` variable.
+
+Also, make sure to remove your `console.log(formattedDate);` line.
+
+# --hints--
+
+You should use the `textContent` property to set the text content of `currentDateParagraph` to the value of the constant `formattedDate`.
+
+```js
+assert(code.match(/currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+You should not have a `console.log(formattedDate);` line in your code.
+
+```js
+assert.notMatch(code, /console\.log\(formattedDate\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+console.log(formattedDate);
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
new file mode 100644
index 00000000000..2b3c02282b1
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
@@ -0,0 +1,259 @@
+---
+id: 65388bbcbf6928b83fc424d1
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.
+
+```js
+element.addEventListener("change", () => {
+
+});
+```
+
+Chain the `addEventListener` method to `dateOptionsSelectElement` where the first argument is `change` and the second argument is an empty arrow function.
+
+# --hints--
+
+You should use the `addEventListener` method to add a `change` event listener to `dateOptionsSelectElement`.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*['"]change/g));
+```
+
+You should add an empty arrow function as the second argument to the `addEventListener` method.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*(['"])change\1\s*,\s*\(\s*\)\s*=>\s*{\s*}/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
new file mode 100644
index 00000000000..7f471fcf376
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
@@ -0,0 +1,268 @@
+---
+id: 65388d61a57a00b9ad0d0817
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+When a user makes a selection from the dropdown menu, the function should get the user's value and display the date in their chosen date format. To do this, you can use the `switch` statement.
+
+A `switch` statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It's commonly used for branching logic.
+
+For example, here's how to compare the expression `dayOfWeek` against possible values:
+
+```js
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+Create a `switch` statement and use `dateOptionsSelectElement.value` as the expression.
+
+# --hints--
+
+You should use a `switch` statement where `dateOptionsSelectElement.value` is the expression.
+
+```js
+assert(code.match(/switch\s*\(\s*dateOptionsSelectElement.value\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
new file mode 100644
index 00000000000..83cfa83fd2b
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -0,0 +1,262 @@
+---
+id: 65388edfdf364fbb04e426f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+When the user chooses the `Year, Month, Day` option from the dropdown, the date format should reflect this choice.
+
+To do this, you can add a `case` in the `switch` statement, followed by your logic.
+
+```js
+switch (expression) {
+  case 'case123':
+    // Write your logic here
+}
+```
+
+Add a `case` where the value is `yyyy-mm-dd`. Inside the `case`, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+
+# --hints--
+
+You should add a `case` where the condition is `yyyy-mm-dd`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`.
+
+```js
+assert(code.match(/case\s*(['"])yyyy-mm-dd\1\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+  switch (dateOptionsSelectElement.value) {
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
new file mode 100644
index 00000000000..02993fa4aad
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
@@ -0,0 +1,259 @@
+---
+id: 65389211a8d86bbd876a2a74
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+In JavaScript, the `.split()` method is used to split up a string into an array of substrings. This method has an optional separator parameter, which indicates where each split should happen.
+
+```js
+"coca-cola".split("-"); // [ 'coca', 'cola' ]
+```
+
+Split `formattedDate` into an array of substrings with the `.split()` method and use a `"-"` as the separator.
+
+# --hints--
+
+You should use the `.split()` method with `"-"` as the separator to split `formattedDate` into an array of substrings.
+
+```js
+assert(code.match(/formattedDate[\s\S]*?\.split\(\s*(['"`])-\1\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
new file mode 100644
index 00000000000..873ad4fd565
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
@@ -0,0 +1,262 @@
+---
+id: 65389306578c34be5c93bc35
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The `.reverse()` method is used to reverse an array in place. For example:
+
+```js
+const array = [1, 2, 3, 4, 5];
+array.reverse();
+console.log(array); // [5, 4, 3, 2, 1]
+```
+
+Chain the `.reverse()` method to the end of `.split()` method.
+
+# --hints--
+
+You should use the `.reverse()` method to reverse the order of the array returned by `.split()`.
+
+```js
+assert(code.match(/\.reverse\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
new file mode 100644
index 00000000000..3253ba8d27b
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
@@ -0,0 +1,257 @@
+---
+id: 6538935e2ab721beedb137c4
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Finally, you need to create a string with the reversed array elements separated by dash (`-`) character.
+
+Use the `.join()` method to join the reversed array elements into a string and use a `"-"` for the separator.
+
+# --hints--
+
+You should use the `.join()` method to join the reversed array elements into a string and use a `"-"` as a separator.
+
+```js
+assert(code.match(/\.join\((['"])-\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
new file mode 100644
index 00000000000..bd71851d497
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
@@ -0,0 +1,268 @@
+---
+id: 653898fa7eee37c57b960e35
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+If your `switch` statement is going to have multiple cases, it is best practice to include a `break` statement.
+
+The `break` statement will tell the JavaScript interpreter to stop executing statements. Without adding a `break` statement at the end of each `case` block, the program will execute the code for all matching `cases`.
+
+```js
+switch (someVariable) {
+  case 'case123':
+    // Write your logic here
+    break; // Terminates the switch statement
+}
+```
+
+Add a `break` statement to the end of your `case` block.
+
+# --hints--
+
+You should add a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
new file mode 100644
index 00000000000..8ce925e00f1
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -0,0 +1,265 @@
+---
+id: 65389a63d3b1d6c764c0e10e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `case` with the value `mm-dd-yyyy-h-mm`. Inside that `case`, set the text content of `currentDateParagraph` to empty template literals.
+
+Also, make sure to include a `break` statement to terminate the `switch` statement.
+
+# --hints--
+
+You should add a `case` where the condition is `mm-dd-yyyy-h-mm`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals.
+
+```js
+assert(code.match(/case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph.textContent\s*=\s*``/g));
+```
+
+You should include a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
new file mode 100644
index 00000000000..85d6fe3c758
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
@@ -0,0 +1,261 @@
+---
+id: 65389de504d0f2ca10e92a57
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Inside the `case` for `mm-dd-yyyy-h-mm`, set the `textContent` property of `currentDateParagraph` to `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`.
+
+
+# --hints--
+
+You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.
+
+```js
+const pattern = /case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*`(\$\{month}-\$\{day}-\$\{year} \$\{hours} Hours \$\{minutes} Minutes)`/;
+assert(code.match(pattern));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = ``;
+      break;
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
new file mode 100644
index 00000000000..9e6b380ff8f
--- /dev/null
+++ b/curriculum/challenges/japanese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -0,0 +1,519 @@
+---
+id: 65389eff4893facbbe6eae67
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In a `switch` statement, the `default` case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:
+
+```js
+const dayOfWeek = 7;
+
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+For the `default` case, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+And with that, your date formatter is complete! You can now format the current date three different ways.
+
+# --hints--
+
+You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.
+
+```js
+assert(code.match(/default\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
+
+# --solutions--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break; 
+    default:
+      currentDateParagraph.textContent = formattedDate;
+  }
+});
+
+```
diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
index 4db6a40b09b..2ae9481c97d 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
@@ -20,7 +20,7 @@ Quando a condição for `true`, o programa executará as instruções dentro das
 **Exemplo**
 
 ```js
-function test (myCondition) {
+function test(myCondition) {
   if (myCondition) {
     return "It was true";
   }
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index abea9c47055..6a6ee96f549 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -36,13 +36,20 @@ assert(
 O texto do link deve ser `cat photos`. Você omitiu o texto ou tem um erro de digitação.
 
 ```js
-const nestedAnchor = document.querySelector(`p > a`);
-assert(
-  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isTrue(innerContent.trim() === 'cat photos');
 ```
 
-Após aninhar o elemento de âncora (`a`), o único conteúdo do elemento `p` visível no navegador deve ser `See more cat photos in our gallery.` Verifique o texto novamente em termos de espaçamento e pontuação, tanto do elemento `p` quanto do elemento de âncora aninhado.
+The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`.
+
+```js
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
+```
+
+After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
 
 ```js
 assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
index 673fe9d5e4c..1e7a86ce9bf 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
@@ -11,7 +11,7 @@ Agora que você transformou o texto de `cat photos` dentro do elemento `p` em um
 
 # --hints--
 
-Your code should only have one paragraph (`p`) element.
+O código deve ter apenas um elemento de parágrafo (`p`).
 
 ```js
 assert.isTrue(document.querySelectorAll('p').length === 1);
@@ -23,7 +23,7 @@ O código deve ter apenas um elemento de âncora (`a`).
 assert.isTrue(document.querySelectorAll('a').length === 1);
 ```
 
-Do not make any changes to the elements you created in the previous step.
+Não faça alterações aos elementos que você criou no passo anterior.
 
 ```js
 assert.strictEqual(document.querySelector('p').innerHTML, 'See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.')
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
index 8c851ad7842..748f4fa29c0 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -7,9 +7,8 @@ dashedName: step-64
 
 # --description--
 
-Por último, mas não menos importante, torne o `input` para os termos e condições `inline`. Depois, altere a cor do texto de elemento do link, `terms and conditions`, para `#dfdfe2`.
+Faça o `input` para os termos e condições `inline` adicionando a classe apropriada ao HTML.
 
-Bom trabalho! Você completou a parte final do projeto prático de _Formulário de Registro_.
 
 # --hints--
 
@@ -19,18 +18,6 @@ Você deve dar ao elemento `input` uma classe de `inline`.
 assert(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline'));
 ```
 
-Você deve usar o seletor de elemento `a`.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
-```
-
-Você deve dar ao elemento `a` uma `color` com o valor de `#dfdfe2`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
-```
-
 # --seed--
 
 ## --seed-contents--
@@ -164,133 +151,3 @@ input[type="file"] {
 --fcc-editable-region--
 
 ```
-
-# --solutions--
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Registration Form</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <h1>Registration Form</h1>
-    <p>Please fill out this form with the required information</p>
-    <form method="post" action='https://register-demo.freecodecamp.org'>
-      <fieldset>
-        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
-        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
-        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
-        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
-      </fieldset>
-      <fieldset>
-        <legend>Account type (required)</legend>
-        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
-        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
-      </fieldset>
-      <fieldset>
-        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
-        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
-        <label for="referrer">How did you hear about us?
-          <select id="referrer" name="referrer">
-            <option value="">(select one)</option>
-            <option value="1">freeCodeCamp News</option>
-            <option value="2">freeCodeCamp YouTube Channel</option>
-            <option value="3">freeCodeCamp Forum</option>
-            <option value="4">Other</option>
-          </select>
-        </label>
-        <label for="bio">Provide a bio:
-          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
-        </label>
-      </fieldset>
-      <label for="terms-and-conditions">
-        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
-      </label>
-      <input type="submit" value="Submit" />
-    </form>
-  </body>
-</html>
-```
-
-```css
-body {
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  background-color: #1b1b32;
-  color: #f5f6f7;
-  font-family: Tahoma;
-  font-size: 16px;
-}
-
-h1, p {
-  margin: 1em auto;
-  text-align: center;
-}
-
-form {
-  width: 60vw;
-  max-width: 500px;
-  min-width: 300px;
-  margin: 0 auto;
-  padding-bottom: 2em;
-}
-
-fieldset {
-  border: none;
-  padding: 2rem 0;
-  border-bottom: 3px solid #3b3b4f;
-}
-
-fieldset:last-of-type {
-  border-bottom: none;
-}
-
-label {
-  display: block;
-  margin: 0.5rem 0;
-}
-
-input,
-textarea,
-select {
-  margin: 10px 0 0 0;
-  width: 100%;
-  min-height: 2em;
-}
-
-input, textarea {
-  background-color: #0a0a23;
-  border: 1px solid #0a0a23;
-  color: #ffffff;
-}
-
-.inline {
-  width: unset;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-
-input[type="submit"] {
-  display: block;
-  width: 60%;
-  margin: 1em auto;
-  height: 2em;
-  font-size: 1.1rem;
-  background-color: #3b3b4f;
-  border-color: white;
-  min-width: 300px;
-}
-
-input[type="file"] {
-  padding: 1px 2px;
-}
-
-a {
-  color: #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md
index 01ef0e4dfe7..6d98f37444c 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md
@@ -9,9 +9,9 @@ dashedName: step-30
 
 Você precisa confirmar que o usuário leu os termos e condições.
 
-Add a `label` element. Inside the newly created `label` element add an `input` element and set the `type` attribute to `checkbox`. Make this `input` element `required` so users can not sign up without agreeing to the terms and conditions.
+Adicione um elemento `label`. Dentro do elemento `label` recém-criado, adicione um elemento `input` e defina o atributo `type` como `checkbox`. Torne este elemento `input` obrigatório (`required`), pois os usuários não devem se inscrever sem concordar com os termos e condições.
 
-Add an `id` and `for` attribute with the value `terms-and-conditions` to the elements for accessibility.
+Adicione os atributos `id` e `for` com o valor `terms-and-conditions` aos elementos para auxiliar na acessibilidade.
 
 # --hints--
 
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
new file mode 100644
index 00000000000..2bd9f622fc6
--- /dev/null
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
@@ -0,0 +1,292 @@
+---
+id: 6537e0be715fcb57d31ba8c3
+title: Passo 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Por último, altere a cor do texto do elemento de link `terms and conditions` para `#dfdfe2` adicionando um novo seletor no CSS.
+
+Bom trabalho! Você completou a parte final do projeto prático de _Formulário de Registro_.
+
+# --hints--
+
+Você deve usar o seletor `a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
+```
+
+Você deve dar ao elemento `a` uma `color` com o valor de `#dfdfe2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+.inline{
+  display: inline; 
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+a {
+  color: #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
index 5100e62fe9a..e42a9b6ef4e 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
@@ -17,7 +17,7 @@ Você deve atribuir a string `You dodge the attack from the` à propriedade `tex
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/);
 ```
 
-Você deve usar o operador de concatenação para adicionar o nome do monstro ao final da string. Você pode obter isso com `monster[fighting].name`.
+Você deve usar o operador de concatenação para adicionar o nome do monstro ao final da string. You can get this with `monsters[fighting].name`.
 
 ```js
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/);
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
index e428a41257e..2ebf8fb5602 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
@@ -9,7 +9,9 @@ dashedName: step-138
 
 De volta à função `attack` – dentro do bloco `else if`, crie outra instrução `if` e outra instrução `else`. Se o jogador estiver lutando com o dragão (`fighting` seria `2`), chame a função `winGame`. Mova a chamada de `defeatMonster()` para o bloco `else`.
 
-Aqui está um exemplo que verifica se `num` é igual a `5`:
+For this step, you will need to use the strict equality (`===`) operator to check if `fighting` is equal to `2`. The strict equality operator will check if the values are equal and if they are the same data type.
+
+Here is an example that checks if `num` is strictly equal to `5`:
 
 ```js
 if (num === 5) {
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
index 6dcb5e57df3..4aebf780604 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
@@ -7,7 +7,7 @@ dashedName: step-150
 
 # --description--
 
-Adicione uma instrução `else` à primeira instrução `if` dentro da função `attack()`. Na instrução `else`, use o operador `+=` para adicionar o texto `You miss.` ao final de `text.innerText`.
+Add an `else` statement to the first `if` statement inside your `attack()` function. Na instrução `else`, use o operador `+=` para adicionar o texto `You miss.` ao final de `text.innerText`.
 
 # --hints--
 
@@ -17,7 +17,7 @@ Você deve adicionar um bloco `else` após o seu bloco `if (isMonsterHit())`.
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/)
 ```
 
-Você deve adicionar o texto `You miss.` no final do `text.innerText`. Lembre-se de usar uma atribuição composta.
+Você deve adicionar o texto `You miss.` no final do `text.innerText`. Remember to use compound assignment and make sure there is a space before the word `You`.
 
 ```js
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/)
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
index b4f6c795cf1..57e8c500828 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
@@ -207,8 +207,8 @@ const locations = [
         "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
         "button functions": [restart, restart, restart], 
         text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
 --fcc-editable-region--
-    }
 
 --fcc-editable-region--
 ];
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
index c58447cd2db..b1f1c3b2585 100644
--- a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
@@ -7,7 +7,7 @@ dashedName: step-165
 
 # --description--
 
-Antes das aspas ao final dessa string que você adicionou, insira o caractere de escape de nova linha `\n`. Isto fará com que a próxima parte que você adicionar ao `text.innerText` apareça em uma nova linha.
+At the end of the string, before the final quote, insert the new line escape character `\n`. Isto fará com que a próxima parte que você adicionar ao `text.innerText` apareça em uma nova linha.
 
 # --hints--
 
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
new file mode 100644
index 00000000000..c8bedf3010f
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
@@ -0,0 +1,248 @@
+---
+id: 65386e889dd615940cb3e042
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn about the JavaScript `Date` object by building a date formatter.
+
+All of the HTML and CSS for this project have been provided for you.
+
+Start by getting the `#current-date` element using the `.getElementById()` method and assign it to a `const` variable called `currentDateParagraph`.
+
+# --hints--
+
+You should use `const` to declare a `currentDateParagraph` variable.
+
+```js
+assert.match(code, /const\s+currentDateParagraph\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#current-date` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)current-date\1\)/);
+```
+
+You should assign the `#current-date` element to your `currentDateParagraph` variable.
+
+```js
+assert(code.match(/const\s+currentDateParagraph\s+=\s+document\.getElementById\(('|"|`)current-date\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
new file mode 100644
index 00000000000..3295a750daa
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
@@ -0,0 +1,246 @@
+---
+id: 653879d87bc55fa624280c77
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Use the `.getElementById()` method to get the `#date-options` element and use `const` to assign it to a variable named `dateOptionsSelectElement`.
+
+# --hints--
+
+You should use `const` to declare a `dateOptionsSelectElement` variable.
+
+```js
+assert.match(code, /const\s+dateOptionsSelectElement\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#date-options` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)date-options\1\)/);
+```
+
+You should assign the `#date-options` element to your `dateOptionsSelectElement` variable.
+
+```js
+assert(code.match(/const\s+dateOptionsSelectElement\s+=\s+document\.getElementById\(('|"|`)date-options\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
new file mode 100644
index 00000000000..788fae024c1
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
@@ -0,0 +1,253 @@
+---
+id: 65387b440b5cb1aa35585820
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+In JavaScript, there are many built-in <dfn>constructors</dfn> that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the `new` operator.
+
+For example, you can use the `Date()` constructor with the `new` operator to create a new `Date` object that returns a string with the current date and time:
+
+```js
+const currentDate = new Date();
+console.log(currentDate);
+
+// Output:
+// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)
+```
+
+Create a new `const` variable called `date` and assign it a `Date` object with `new Date()`.
+
+# --hints--
+
+You should use `const` to declare a `date` variable.
+
+```js
+assert.match(code, /const\s+date\s+=/);
+```
+
+You should assign a `Date` object to your `date` variable with `new Date()`.
+
+```js
+assert(code.match(/const\s+date\s+=\s+new\s+Date\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
new file mode 100644
index 00000000000..2257dace260
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
@@ -0,0 +1,253 @@
+---
+id: 6538830e01ab66ade75b869e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The `Date` object has a number of methods that allow you to get the date and time in different formats.
+
+One of those is the `.getDate()` method, which returns a number between 1-31 that represents the day of the month for that date. For example:
+
+```js
+const date = new Date();
+const dayOfTheMonth = date.getDate();
+console.log(dayOfTheMonth); // 20
+```
+
+Using `const`, create a variable named `day` and assign it the day of the month from `date` with the `.getDate()` method.
+
+# --hints--
+
+You should use `const` to declare a `day` variable.
+
+```js
+assert.match(code, /const\s+day\s+=/);
+```
+
+You should assign the `date.getDate()` to your `day` variable.
+
+```js
+assert(code.match(/const\s+day\s+=\s+date\.getDate\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
new file mode 100644
index 00000000000..856addb1fea
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
@@ -0,0 +1,248 @@
+---
+id: 653883da4a1fabaeb5f1f5e7
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+The `.getMonth()` method returns a number between `0` and `11`. This represents the month for the date provided, where `0` is January and `11` is December.  Because the number this method returns is zero-based, you need to add `1` to it to get the expected month number.
+
+Using `const`, create a variable named `month` and assign it the month from `date` with the `.getMonth()` method.
+
+Remember to add `1` to the number returned by `.getMonth()`.
+
+# --hints--
+
+You should use `const` to declare a `month` variable.
+
+```js
+assert.match(code, /const\s+month\s+=/);
+```
+
+You should assign the `date.getMonth() + 1` to your `month` variable.
+
+```js
+assert(code.match(/const\s+month\s+=\s+date\.getMonth\(\)\s*\+\s*1/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
new file mode 100644
index 00000000000..36542963348
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
@@ -0,0 +1,247 @@
+---
+id: 65388475abfb4faf8dd5e347
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The `.getFullYear()` method returns a number which represents the year for the provided date.
+
+Using `const`, create a variable named `year` and assign it the year from `date` with the `.getFullYear()` method.
+
+# --hints--
+
+You should use `const` to declare a `year` variable.
+
+```js
+assert.match(code, /const\s+year\s+=/);
+```
+
+You should assign the `date.getFullYear()` to your `year` variable.
+
+```js
+assert(code.match(/const\s+year\s+=\s+date\.getFullYear\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
new file mode 100644
index 00000000000..b43a24cadcf
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
@@ -0,0 +1,248 @@
+---
+id: 653884e09dfb4eb01f1622ed
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `.getHours()` method returns a number between `0` and `23`. This represents the hour for the provided date, where `0` is midnight and `23` is 11 p.m.
+
+Create a `const` variable named `hours` and assign it the hour from `date` with the `.getHours()` method.
+
+# --hints--
+
+You should use `const` to declare a `hours` variable.
+
+```js
+assert.match(code, /const\s+hours\s+=/);
+```
+
+You should assign the `date.getHours()` to your `hours` variable.
+
+```js
+assert(code.match(/const\s+hours\s+=\s+date\.getHours\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
new file mode 100644
index 00000000000..f44a0b50f42
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
@@ -0,0 +1,249 @@
+---
+id: 6538855514cb16b10204e712
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.
+
+Create a `const` variable named `minutes` and assign it the minutes from `date` with the `.getMinutes()` method.
+
+# --hints--
+
+You should use `const` to declare a `minutes` variable.
+
+```js
+assert.match(code, /const\s+minutes\s+=/);
+```
+
+You should assign the `date.getMinutes()` to your `minutes` variable.
+
+```js
+assert(code.match(/const\s+minutes\s+=\s+date\.getMinutes\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
new file mode 100644
index 00000000000..150461fb9c7
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
@@ -0,0 +1,248 @@
+---
+id: 653885c61ede29b1a99554a2
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Next, create a `const` variable named `formattedDate` and assign it empty template literals.
+
+# --hints--
+
+You should use `const` to declare a `formattedDate` variable.
+
+```js
+assert.match(code, /const\s+formattedDate\s*=/);
+```
+
+You should assign the empty template literals to your `formattedDate` variable.
+
+```js
+assert(code.match(/const\s+formattedDate\s*=\s*``/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
new file mode 100644
index 00000000000..2710d11ae38
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
@@ -0,0 +1,244 @@
+---
+id: 65388659a72663b27cde0699
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Inside the template literal, add an embedded expression that contains the `day` variable.
+
+# --hints--
+
+You should use the `day` constant inside the template literal.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = ``;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
new file mode 100644
index 00000000000..8dc4e4832c1
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
@@ -0,0 +1,244 @@
+---
+id: 653887098bdc39b3684a51c8
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+After the `day` variable, add a dash (`-`) followed by another embedded expression that contains the `month` variable.
+
+# --hints--
+
+You will need to use the `month` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
new file mode 100644
index 00000000000..0c42cdb142d
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
@@ -0,0 +1,244 @@
+---
+id: 65388762f61f44b3fd490a4a
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+After the `month` variable, add a dash followed by another embedded expression that contains the `year` variable.
+
+# --hints--
+
+You will need to use the `year` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}\s*-\s*\${year}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
new file mode 100644
index 00000000000..b2eaac290cd
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
@@ -0,0 +1,246 @@
+---
+id: 6538886c61a414b4e34496fe
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To see the results of the `formattedDate` variable, add a `console.log()` statement and pass in the `formattedDate` variable as an argument.
+
+Open up the console and you should see the date printed out.
+
+# --hints--
+
+You should have a `console.log(formattedDate)` line in your code.
+
+```js
+assert.match(code, /console\.log\(formattedDate\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
new file mode 100644
index 00000000000..24181f065b2
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
@@ -0,0 +1,268 @@
+---
+id: 65388ac7154e44b72c74d616
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In JavaScript, the `textContent` property is used to both get and set the text of a node.
+
+For example, here's how you can get the text content from a paragraph element with the id `example-paragraph`, and set its text content to a new value:
+
+```html
+<p id="example-paragraph">Example Text</p>
+```
+
+```js
+const exampleParagraph = document.getElementById("example-paragraph");
+console.log(exampleParagraph.textContent); // "Example Text"
+exampleParagraph.textContent = "New Text";
+console.log(exampleParagraph.textContent); // "New Text"
+```
+
+Use the `textContent` property on `currentDateParagraph` to set its text content to the value of the `formattedDate` variable.
+
+Also, make sure to remove your `console.log(formattedDate);` line.
+
+# --hints--
+
+You should use the `textContent` property to set the text content of `currentDateParagraph` to the value of the constant `formattedDate`.
+
+```js
+assert(code.match(/currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+You should not have a `console.log(formattedDate);` line in your code.
+
+```js
+assert.notMatch(code, /console\.log\(formattedDate\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+console.log(formattedDate);
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
new file mode 100644
index 00000000000..2b3c02282b1
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
@@ -0,0 +1,259 @@
+---
+id: 65388bbcbf6928b83fc424d1
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.
+
+```js
+element.addEventListener("change", () => {
+
+});
+```
+
+Chain the `addEventListener` method to `dateOptionsSelectElement` where the first argument is `change` and the second argument is an empty arrow function.
+
+# --hints--
+
+You should use the `addEventListener` method to add a `change` event listener to `dateOptionsSelectElement`.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*['"]change/g));
+```
+
+You should add an empty arrow function as the second argument to the `addEventListener` method.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*(['"])change\1\s*,\s*\(\s*\)\s*=>\s*{\s*}/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
new file mode 100644
index 00000000000..7f471fcf376
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
@@ -0,0 +1,268 @@
+---
+id: 65388d61a57a00b9ad0d0817
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+When a user makes a selection from the dropdown menu, the function should get the user's value and display the date in their chosen date format. To do this, you can use the `switch` statement.
+
+A `switch` statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It's commonly used for branching logic.
+
+For example, here's how to compare the expression `dayOfWeek` against possible values:
+
+```js
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+Create a `switch` statement and use `dateOptionsSelectElement.value` as the expression.
+
+# --hints--
+
+You should use a `switch` statement where `dateOptionsSelectElement.value` is the expression.
+
+```js
+assert(code.match(/switch\s*\(\s*dateOptionsSelectElement.value\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
new file mode 100644
index 00000000000..83cfa83fd2b
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -0,0 +1,262 @@
+---
+id: 65388edfdf364fbb04e426f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+When the user chooses the `Year, Month, Day` option from the dropdown, the date format should reflect this choice.
+
+To do this, you can add a `case` in the `switch` statement, followed by your logic.
+
+```js
+switch (expression) {
+  case 'case123':
+    // Write your logic here
+}
+```
+
+Add a `case` where the value is `yyyy-mm-dd`. Inside the `case`, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+
+# --hints--
+
+You should add a `case` where the condition is `yyyy-mm-dd`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`.
+
+```js
+assert(code.match(/case\s*(['"])yyyy-mm-dd\1\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+  switch (dateOptionsSelectElement.value) {
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
new file mode 100644
index 00000000000..02993fa4aad
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
@@ -0,0 +1,259 @@
+---
+id: 65389211a8d86bbd876a2a74
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+In JavaScript, the `.split()` method is used to split up a string into an array of substrings. This method has an optional separator parameter, which indicates where each split should happen.
+
+```js
+"coca-cola".split("-"); // [ 'coca', 'cola' ]
+```
+
+Split `formattedDate` into an array of substrings with the `.split()` method and use a `"-"` as the separator.
+
+# --hints--
+
+You should use the `.split()` method with `"-"` as the separator to split `formattedDate` into an array of substrings.
+
+```js
+assert(code.match(/formattedDate[\s\S]*?\.split\(\s*(['"`])-\1\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
new file mode 100644
index 00000000000..873ad4fd565
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
@@ -0,0 +1,262 @@
+---
+id: 65389306578c34be5c93bc35
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The `.reverse()` method is used to reverse an array in place. For example:
+
+```js
+const array = [1, 2, 3, 4, 5];
+array.reverse();
+console.log(array); // [5, 4, 3, 2, 1]
+```
+
+Chain the `.reverse()` method to the end of `.split()` method.
+
+# --hints--
+
+You should use the `.reverse()` method to reverse the order of the array returned by `.split()`.
+
+```js
+assert(code.match(/\.reverse\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
new file mode 100644
index 00000000000..3253ba8d27b
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
@@ -0,0 +1,257 @@
+---
+id: 6538935e2ab721beedb137c4
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Finally, you need to create a string with the reversed array elements separated by dash (`-`) character.
+
+Use the `.join()` method to join the reversed array elements into a string and use a `"-"` for the separator.
+
+# --hints--
+
+You should use the `.join()` method to join the reversed array elements into a string and use a `"-"` as a separator.
+
+```js
+assert(code.match(/\.join\((['"])-\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
new file mode 100644
index 00000000000..bd71851d497
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
@@ -0,0 +1,268 @@
+---
+id: 653898fa7eee37c57b960e35
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+If your `switch` statement is going to have multiple cases, it is best practice to include a `break` statement.
+
+The `break` statement will tell the JavaScript interpreter to stop executing statements. Without adding a `break` statement at the end of each `case` block, the program will execute the code for all matching `cases`.
+
+```js
+switch (someVariable) {
+  case 'case123':
+    // Write your logic here
+    break; // Terminates the switch statement
+}
+```
+
+Add a `break` statement to the end of your `case` block.
+
+# --hints--
+
+You should add a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
new file mode 100644
index 00000000000..8ce925e00f1
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -0,0 +1,265 @@
+---
+id: 65389a63d3b1d6c764c0e10e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `case` with the value `mm-dd-yyyy-h-mm`. Inside that `case`, set the text content of `currentDateParagraph` to empty template literals.
+
+Also, make sure to include a `break` statement to terminate the `switch` statement.
+
+# --hints--
+
+You should add a `case` where the condition is `mm-dd-yyyy-h-mm`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals.
+
+```js
+assert(code.match(/case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph.textContent\s*=\s*``/g));
+```
+
+You should include a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
new file mode 100644
index 00000000000..85d6fe3c758
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
@@ -0,0 +1,261 @@
+---
+id: 65389de504d0f2ca10e92a57
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Inside the `case` for `mm-dd-yyyy-h-mm`, set the `textContent` property of `currentDateParagraph` to `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`.
+
+
+# --hints--
+
+You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.
+
+```js
+const pattern = /case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*`(\$\{month}-\$\{day}-\$\{year} \$\{hours} Hours \$\{minutes} Minutes)`/;
+assert(code.match(pattern));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = ``;
+      break;
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
new file mode 100644
index 00000000000..9e6b380ff8f
--- /dev/null
+++ b/curriculum/challenges/portuguese/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -0,0 +1,519 @@
+---
+id: 65389eff4893facbbe6eae67
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In a `switch` statement, the `default` case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:
+
+```js
+const dayOfWeek = 7;
+
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+For the `default` case, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+And with that, your date formatter is complete! You can now format the current date three different ways.
+
+# --hints--
+
+You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.
+
+```js
+assert(code.match(/default\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
+
+# --solutions--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break; 
+    default:
+      currentDateParagraph.textContent = formattedDate;
+  }
+});
+
+```
diff --git a/curriculum/challenges/swahili/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md b/curriculum/challenges/swahili/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
index dca449be068..4e2ae7d67e2 100644
--- a/curriculum/challenges/swahili/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
+++ b/curriculum/challenges/swahili/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
@@ -20,7 +20,7 @@ When the condition evaluates to `true`, the program executes the statement insid
 **Example**
 
 ```js
-function test (myCondition) {
+function test(myCondition) {
   if (myCondition) {
     return "It was true";
   }
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index 093942a603a..bf9bcc3dec2 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -36,13 +36,20 @@ assert(
 Maandishi ya kiungo yanapaswa kuwa `cat photos`. Aidha umesahau maandishi, au kuna makosa ya herufi.
 
 ```js
-const nestedAnchor = document.querySelector(`p > a`);
-assert(
-  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isTrue(innerContent.trim() === 'cat photos');
 ```
 
-Baada ya kuweka kipengee cha nanga (`a`), kipengele pekee cha `p` kinachoonekana kwenye kivinjari kinapaswa kuwa `See more cat photos in our gallery.` Mara mbili angalia maandishi, nafasi, au uakifishaji wa `p` na kipengele cha nanga kilichowekwa.
+The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`.
+
+```js
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
+```
+
+After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
 
 ```js
 assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
index 2f26794510b..cb7f01f0065 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -7,9 +7,8 @@ dashedName: step-64
 
 # --description--
 
-Last, but not least, make the `input` for the terms and condition `inline`, then change the text color of the `terms and conditions` link element to `#dfdfe2`.
+Make the `input` for the terms and conditions `inline` by adding the appropriate class in the HTML.
 
-Hongera! Umekamilisha sehemu ya mwisho ya mradi wa mazoezi ya _Registration Form_.
 
 # --hints--
 
@@ -19,18 +18,6 @@ You should give the `input` a class of `inline`.
 assert(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline'));
 ```
 
-You should use an `a` element selector.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
-```
-
-You should give the `a` element a `color` of `#dfdfe2`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
-```
-
 # --seed--
 
 ## --seed-contents--
@@ -164,133 +151,3 @@ input[type="file"] {
 --fcc-editable-region--
 
 ```
-
-# --solutions--
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Registration Form</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <h1>Registration Form</h1>
-    <p>Please fill out this form with the required information</p>
-    <form method="post" action='https://register-demo.freecodecamp.org'>
-      <fieldset>
-        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
-        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
-        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
-        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
-      </fieldset>
-      <fieldset>
-        <legend>Account type (required)</legend>
-        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
-        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
-      </fieldset>
-      <fieldset>
-        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
-        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
-        <label for="referrer">How did you hear about us?
-          <select id="referrer" name="referrer">
-            <option value="">(select one)</option>
-            <option value="1">freeCodeCamp News</option>
-            <option value="2">freeCodeCamp YouTube Channel</option>
-            <option value="3">freeCodeCamp Forum</option>
-            <option value="4">Other</option>
-          </select>
-        </label>
-        <label for="bio">Provide a bio:
-          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
-        </label>
-      </fieldset>
-      <label for="terms-and-conditions">
-        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
-      </label>
-      <input type="submit" value="Submit" />
-    </form>
-  </body>
-</html>
-```
-
-```css
-body {
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  background-color: #1b1b32;
-  color: #f5f6f7;
-  font-family: Tahoma;
-  font-size: 16px;
-}
-
-h1, p {
-  margin: 1em auto;
-  text-align: center;
-}
-
-form {
-  width: 60vw;
-  max-width: 500px;
-  min-width: 300px;
-  margin: 0 auto;
-  padding-bottom: 2em;
-}
-
-fieldset {
-  border: none;
-  padding: 2rem 0;
-  border-bottom: 3px solid #3b3b4f;
-}
-
-fieldset:last-of-type {
-  border-bottom: none;
-}
-
-label {
-  display: block;
-  margin: 0.5rem 0;
-}
-
-input,
-textarea,
-select {
-  margin: 10px 0 0 0;
-  width: 100%;
-  min-height: 2em;
-}
-
-input, textarea {
-  background-color: #0a0a23;
-  border: 1px solid #0a0a23;
-  color: #ffffff;
-}
-
-.inline {
-  width: unset;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-
-input[type="submit"] {
-  display: block;
-  width: 60%;
-  margin: 1em auto;
-  height: 2em;
-  font-size: 1.1rem;
-  background-color: #3b3b4f;
-  border-color: white;
-  min-width: 300px;
-}
-
-input[type="file"] {
-  padding: 1px 2px;
-}
-
-a {
-  color: #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
new file mode 100644
index 00000000000..fd3a2bfd184
--- /dev/null
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
@@ -0,0 +1,292 @@
+---
+id: 6537e0be715fcb57d31ba8c3
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Lastly change the text color of the `terms and conditions` link element to `#dfdfe2` by adding a new selector in the CSS.
+
+Well done! You have completed the final part of the _Registration Form_ practice project.
+
+# --hints--
+
+You should use an `a` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
+```
+
+You should give the `a` element a `color` of `#dfdfe2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+.inline{
+  display: inline; 
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+a {
+  color: #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
index 74b7964b09f..f2815e1da0e 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
@@ -17,7 +17,7 @@ You should assign the string `You dodge the attack from the` to the `text.innerT
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/);
 ```
 
-You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monster[fighting].name`.
+You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monsters[fighting].name`.
 
 ```js
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/);
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
index c2291ca73c1..bd993a6cb55 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
@@ -9,7 +9,9 @@ dashedName: step-138
 
 Back to your `attack` function - inside the `else if` block, create another `if` and `else` statement. If the player is fighting the dragon (`fighting` would be `2`), call the `winGame` function. Move the `defeatMonster()` call to the `else` block.
 
-Here is an example that checks if `num` is equal to `5`:
+For this step, you will need to use the strict equality (`===`) operator to check if `fighting` is equal to `2`. The strict equality operator will check if the values are equal and if they are the same data type.
+
+Here is an example that checks if `num` is strictly equal to `5`:
 
 ```js
 if (num === 5) {
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
index 788bdafd4ad..098cb0a8e4e 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
@@ -7,7 +7,7 @@ dashedName: step-150
 
 # --description--
 
-Add an `else` statement to the first `if` statement inside you `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
+Add an `else` statement to the first `if` statement inside your `attack()` function. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
 
 # --hints--
 
@@ -17,7 +17,7 @@ You should add an `else` block after your `if (isMonsterHit())` block.
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/)
 ```
 
-You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment.
+You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment and make sure there is a space before the word `You`.
 
 ```js
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/)
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
index d47f53f5a8b..7a627b89658 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
@@ -207,8 +207,8 @@ const locations = [
         "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
         "button functions": [restart, restart, restart], 
         text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
 --fcc-editable-region--
-    }
 
 --fcc-editable-region--
 ];
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
index 7b34447692f..1d84ca0e5ac 100644
--- a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
@@ -7,7 +7,7 @@ dashedName: step-165
 
 # --description--
 
-Before the final quote in that string you added, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
+At the end of the string, before the final quote, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
 
 # --hints--
 
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
new file mode 100644
index 00000000000..c8bedf3010f
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
@@ -0,0 +1,248 @@
+---
+id: 65386e889dd615940cb3e042
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn about the JavaScript `Date` object by building a date formatter.
+
+All of the HTML and CSS for this project have been provided for you.
+
+Start by getting the `#current-date` element using the `.getElementById()` method and assign it to a `const` variable called `currentDateParagraph`.
+
+# --hints--
+
+You should use `const` to declare a `currentDateParagraph` variable.
+
+```js
+assert.match(code, /const\s+currentDateParagraph\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#current-date` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)current-date\1\)/);
+```
+
+You should assign the `#current-date` element to your `currentDateParagraph` variable.
+
+```js
+assert(code.match(/const\s+currentDateParagraph\s+=\s+document\.getElementById\(('|"|`)current-date\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
new file mode 100644
index 00000000000..3295a750daa
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
@@ -0,0 +1,246 @@
+---
+id: 653879d87bc55fa624280c77
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Use the `.getElementById()` method to get the `#date-options` element and use `const` to assign it to a variable named `dateOptionsSelectElement`.
+
+# --hints--
+
+You should use `const` to declare a `dateOptionsSelectElement` variable.
+
+```js
+assert.match(code, /const\s+dateOptionsSelectElement\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#date-options` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)date-options\1\)/);
+```
+
+You should assign the `#date-options` element to your `dateOptionsSelectElement` variable.
+
+```js
+assert(code.match(/const\s+dateOptionsSelectElement\s+=\s+document\.getElementById\(('|"|`)date-options\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
new file mode 100644
index 00000000000..788fae024c1
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
@@ -0,0 +1,253 @@
+---
+id: 65387b440b5cb1aa35585820
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+In JavaScript, there are many built-in <dfn>constructors</dfn> that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the `new` operator.
+
+For example, you can use the `Date()` constructor with the `new` operator to create a new `Date` object that returns a string with the current date and time:
+
+```js
+const currentDate = new Date();
+console.log(currentDate);
+
+// Output:
+// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)
+```
+
+Create a new `const` variable called `date` and assign it a `Date` object with `new Date()`.
+
+# --hints--
+
+You should use `const` to declare a `date` variable.
+
+```js
+assert.match(code, /const\s+date\s+=/);
+```
+
+You should assign a `Date` object to your `date` variable with `new Date()`.
+
+```js
+assert(code.match(/const\s+date\s+=\s+new\s+Date\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
new file mode 100644
index 00000000000..2257dace260
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
@@ -0,0 +1,253 @@
+---
+id: 6538830e01ab66ade75b869e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The `Date` object has a number of methods that allow you to get the date and time in different formats.
+
+One of those is the `.getDate()` method, which returns a number between 1-31 that represents the day of the month for that date. For example:
+
+```js
+const date = new Date();
+const dayOfTheMonth = date.getDate();
+console.log(dayOfTheMonth); // 20
+```
+
+Using `const`, create a variable named `day` and assign it the day of the month from `date` with the `.getDate()` method.
+
+# --hints--
+
+You should use `const` to declare a `day` variable.
+
+```js
+assert.match(code, /const\s+day\s+=/);
+```
+
+You should assign the `date.getDate()` to your `day` variable.
+
+```js
+assert(code.match(/const\s+day\s+=\s+date\.getDate\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
new file mode 100644
index 00000000000..856addb1fea
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
@@ -0,0 +1,248 @@
+---
+id: 653883da4a1fabaeb5f1f5e7
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+The `.getMonth()` method returns a number between `0` and `11`. This represents the month for the date provided, where `0` is January and `11` is December.  Because the number this method returns is zero-based, you need to add `1` to it to get the expected month number.
+
+Using `const`, create a variable named `month` and assign it the month from `date` with the `.getMonth()` method.
+
+Remember to add `1` to the number returned by `.getMonth()`.
+
+# --hints--
+
+You should use `const` to declare a `month` variable.
+
+```js
+assert.match(code, /const\s+month\s+=/);
+```
+
+You should assign the `date.getMonth() + 1` to your `month` variable.
+
+```js
+assert(code.match(/const\s+month\s+=\s+date\.getMonth\(\)\s*\+\s*1/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
new file mode 100644
index 00000000000..36542963348
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
@@ -0,0 +1,247 @@
+---
+id: 65388475abfb4faf8dd5e347
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The `.getFullYear()` method returns a number which represents the year for the provided date.
+
+Using `const`, create a variable named `year` and assign it the year from `date` with the `.getFullYear()` method.
+
+# --hints--
+
+You should use `const` to declare a `year` variable.
+
+```js
+assert.match(code, /const\s+year\s+=/);
+```
+
+You should assign the `date.getFullYear()` to your `year` variable.
+
+```js
+assert(code.match(/const\s+year\s+=\s+date\.getFullYear\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
new file mode 100644
index 00000000000..b43a24cadcf
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
@@ -0,0 +1,248 @@
+---
+id: 653884e09dfb4eb01f1622ed
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `.getHours()` method returns a number between `0` and `23`. This represents the hour for the provided date, where `0` is midnight and `23` is 11 p.m.
+
+Create a `const` variable named `hours` and assign it the hour from `date` with the `.getHours()` method.
+
+# --hints--
+
+You should use `const` to declare a `hours` variable.
+
+```js
+assert.match(code, /const\s+hours\s+=/);
+```
+
+You should assign the `date.getHours()` to your `hours` variable.
+
+```js
+assert(code.match(/const\s+hours\s+=\s+date\.getHours\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
new file mode 100644
index 00000000000..f44a0b50f42
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
@@ -0,0 +1,249 @@
+---
+id: 6538855514cb16b10204e712
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.
+
+Create a `const` variable named `minutes` and assign it the minutes from `date` with the `.getMinutes()` method.
+
+# --hints--
+
+You should use `const` to declare a `minutes` variable.
+
+```js
+assert.match(code, /const\s+minutes\s+=/);
+```
+
+You should assign the `date.getMinutes()` to your `minutes` variable.
+
+```js
+assert(code.match(/const\s+minutes\s+=\s+date\.getMinutes\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
new file mode 100644
index 00000000000..150461fb9c7
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
@@ -0,0 +1,248 @@
+---
+id: 653885c61ede29b1a99554a2
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Next, create a `const` variable named `formattedDate` and assign it empty template literals.
+
+# --hints--
+
+You should use `const` to declare a `formattedDate` variable.
+
+```js
+assert.match(code, /const\s+formattedDate\s*=/);
+```
+
+You should assign the empty template literals to your `formattedDate` variable.
+
+```js
+assert(code.match(/const\s+formattedDate\s*=\s*``/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
new file mode 100644
index 00000000000..2710d11ae38
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
@@ -0,0 +1,244 @@
+---
+id: 65388659a72663b27cde0699
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Inside the template literal, add an embedded expression that contains the `day` variable.
+
+# --hints--
+
+You should use the `day` constant inside the template literal.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = ``;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
new file mode 100644
index 00000000000..8dc4e4832c1
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
@@ -0,0 +1,244 @@
+---
+id: 653887098bdc39b3684a51c8
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+After the `day` variable, add a dash (`-`) followed by another embedded expression that contains the `month` variable.
+
+# --hints--
+
+You will need to use the `month` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
new file mode 100644
index 00000000000..0c42cdb142d
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
@@ -0,0 +1,244 @@
+---
+id: 65388762f61f44b3fd490a4a
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+After the `month` variable, add a dash followed by another embedded expression that contains the `year` variable.
+
+# --hints--
+
+You will need to use the `year` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}\s*-\s*\${year}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
new file mode 100644
index 00000000000..b2eaac290cd
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
@@ -0,0 +1,246 @@
+---
+id: 6538886c61a414b4e34496fe
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To see the results of the `formattedDate` variable, add a `console.log()` statement and pass in the `formattedDate` variable as an argument.
+
+Open up the console and you should see the date printed out.
+
+# --hints--
+
+You should have a `console.log(formattedDate)` line in your code.
+
+```js
+assert.match(code, /console\.log\(formattedDate\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
new file mode 100644
index 00000000000..24181f065b2
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
@@ -0,0 +1,268 @@
+---
+id: 65388ac7154e44b72c74d616
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In JavaScript, the `textContent` property is used to both get and set the text of a node.
+
+For example, here's how you can get the text content from a paragraph element with the id `example-paragraph`, and set its text content to a new value:
+
+```html
+<p id="example-paragraph">Example Text</p>
+```
+
+```js
+const exampleParagraph = document.getElementById("example-paragraph");
+console.log(exampleParagraph.textContent); // "Example Text"
+exampleParagraph.textContent = "New Text";
+console.log(exampleParagraph.textContent); // "New Text"
+```
+
+Use the `textContent` property on `currentDateParagraph` to set its text content to the value of the `formattedDate` variable.
+
+Also, make sure to remove your `console.log(formattedDate);` line.
+
+# --hints--
+
+You should use the `textContent` property to set the text content of `currentDateParagraph` to the value of the constant `formattedDate`.
+
+```js
+assert(code.match(/currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+You should not have a `console.log(formattedDate);` line in your code.
+
+```js
+assert.notMatch(code, /console\.log\(formattedDate\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+console.log(formattedDate);
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
new file mode 100644
index 00000000000..2b3c02282b1
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
@@ -0,0 +1,259 @@
+---
+id: 65388bbcbf6928b83fc424d1
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.
+
+```js
+element.addEventListener("change", () => {
+
+});
+```
+
+Chain the `addEventListener` method to `dateOptionsSelectElement` where the first argument is `change` and the second argument is an empty arrow function.
+
+# --hints--
+
+You should use the `addEventListener` method to add a `change` event listener to `dateOptionsSelectElement`.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*['"]change/g));
+```
+
+You should add an empty arrow function as the second argument to the `addEventListener` method.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*(['"])change\1\s*,\s*\(\s*\)\s*=>\s*{\s*}/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
new file mode 100644
index 00000000000..7f471fcf376
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
@@ -0,0 +1,268 @@
+---
+id: 65388d61a57a00b9ad0d0817
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+When a user makes a selection from the dropdown menu, the function should get the user's value and display the date in their chosen date format. To do this, you can use the `switch` statement.
+
+A `switch` statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It's commonly used for branching logic.
+
+For example, here's how to compare the expression `dayOfWeek` against possible values:
+
+```js
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+Create a `switch` statement and use `dateOptionsSelectElement.value` as the expression.
+
+# --hints--
+
+You should use a `switch` statement where `dateOptionsSelectElement.value` is the expression.
+
+```js
+assert(code.match(/switch\s*\(\s*dateOptionsSelectElement.value\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
new file mode 100644
index 00000000000..83cfa83fd2b
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -0,0 +1,262 @@
+---
+id: 65388edfdf364fbb04e426f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+When the user chooses the `Year, Month, Day` option from the dropdown, the date format should reflect this choice.
+
+To do this, you can add a `case` in the `switch` statement, followed by your logic.
+
+```js
+switch (expression) {
+  case 'case123':
+    // Write your logic here
+}
+```
+
+Add a `case` where the value is `yyyy-mm-dd`. Inside the `case`, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+
+# --hints--
+
+You should add a `case` where the condition is `yyyy-mm-dd`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`.
+
+```js
+assert(code.match(/case\s*(['"])yyyy-mm-dd\1\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+  switch (dateOptionsSelectElement.value) {
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
new file mode 100644
index 00000000000..02993fa4aad
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
@@ -0,0 +1,259 @@
+---
+id: 65389211a8d86bbd876a2a74
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+In JavaScript, the `.split()` method is used to split up a string into an array of substrings. This method has an optional separator parameter, which indicates where each split should happen.
+
+```js
+"coca-cola".split("-"); // [ 'coca', 'cola' ]
+```
+
+Split `formattedDate` into an array of substrings with the `.split()` method and use a `"-"` as the separator.
+
+# --hints--
+
+You should use the `.split()` method with `"-"` as the separator to split `formattedDate` into an array of substrings.
+
+```js
+assert(code.match(/formattedDate[\s\S]*?\.split\(\s*(['"`])-\1\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
new file mode 100644
index 00000000000..873ad4fd565
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
@@ -0,0 +1,262 @@
+---
+id: 65389306578c34be5c93bc35
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The `.reverse()` method is used to reverse an array in place. For example:
+
+```js
+const array = [1, 2, 3, 4, 5];
+array.reverse();
+console.log(array); // [5, 4, 3, 2, 1]
+```
+
+Chain the `.reverse()` method to the end of `.split()` method.
+
+# --hints--
+
+You should use the `.reverse()` method to reverse the order of the array returned by `.split()`.
+
+```js
+assert(code.match(/\.reverse\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
new file mode 100644
index 00000000000..3253ba8d27b
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
@@ -0,0 +1,257 @@
+---
+id: 6538935e2ab721beedb137c4
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Finally, you need to create a string with the reversed array elements separated by dash (`-`) character.
+
+Use the `.join()` method to join the reversed array elements into a string and use a `"-"` for the separator.
+
+# --hints--
+
+You should use the `.join()` method to join the reversed array elements into a string and use a `"-"` as a separator.
+
+```js
+assert(code.match(/\.join\((['"])-\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
new file mode 100644
index 00000000000..bd71851d497
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
@@ -0,0 +1,268 @@
+---
+id: 653898fa7eee37c57b960e35
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+If your `switch` statement is going to have multiple cases, it is best practice to include a `break` statement.
+
+The `break` statement will tell the JavaScript interpreter to stop executing statements. Without adding a `break` statement at the end of each `case` block, the program will execute the code for all matching `cases`.
+
+```js
+switch (someVariable) {
+  case 'case123':
+    // Write your logic here
+    break; // Terminates the switch statement
+}
+```
+
+Add a `break` statement to the end of your `case` block.
+
+# --hints--
+
+You should add a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
new file mode 100644
index 00000000000..8ce925e00f1
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -0,0 +1,265 @@
+---
+id: 65389a63d3b1d6c764c0e10e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `case` with the value `mm-dd-yyyy-h-mm`. Inside that `case`, set the text content of `currentDateParagraph` to empty template literals.
+
+Also, make sure to include a `break` statement to terminate the `switch` statement.
+
+# --hints--
+
+You should add a `case` where the condition is `mm-dd-yyyy-h-mm`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals.
+
+```js
+assert(code.match(/case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph.textContent\s*=\s*``/g));
+```
+
+You should include a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
new file mode 100644
index 00000000000..85d6fe3c758
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
@@ -0,0 +1,261 @@
+---
+id: 65389de504d0f2ca10e92a57
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Inside the `case` for `mm-dd-yyyy-h-mm`, set the `textContent` property of `currentDateParagraph` to `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`.
+
+
+# --hints--
+
+You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.
+
+```js
+const pattern = /case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*`(\$\{month}-\$\{day}-\$\{year} \$\{hours} Hours \$\{minutes} Minutes)`/;
+assert(code.match(pattern));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = ``;
+      break;
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
new file mode 100644
index 00000000000..9e6b380ff8f
--- /dev/null
+++ b/curriculum/challenges/swahili/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -0,0 +1,519 @@
+---
+id: 65389eff4893facbbe6eae67
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In a `switch` statement, the `default` case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:
+
+```js
+const dayOfWeek = 7;
+
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+For the `default` case, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+And with that, your date formatter is complete! You can now format the current date three different ways.
+
+# --hints--
+
+You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.
+
+```js
+assert(code.match(/default\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
+
+# --solutions--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break; 
+    default:
+      currentDateParagraph.textContent = formattedDate;
+  }
+});
+
+```
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
index 2db5dc4acf8..146712552c6 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
@@ -20,7 +20,7 @@ dashedName: use-conditional-logic-with-if-statements
 **Приклад**
 
 ```js
-function test (myCondition) {
+function test(myCondition) {
   if (myCondition) {
     return "It was true";
   }
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index 99d58e1070f..85bdbbabdc7 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -36,13 +36,20 @@ assert(
 Текст посилання повинен бути `cat photos`. Ви або не написали текст, або маєте друкарську помилку.
 
 ```js
-const nestedAnchor = document.querySelector(`p > a`);
-assert(
-  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
-);
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isTrue(innerContent.trim() === 'cat photos');
 ```
 
-Після вкладення елемента прив'язки (`a`) єдиним видимим вмістом елемента `p` в браузері повинен бути `See more cat photos in our gallery.` Перевірте текст, пробіли та пунктуацію обох елементів (`p` та вкладеного елемента прив'язки).
+The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word `cat` and the word `photos`.
+
+```js
+const nestedAnchor = document.querySelector('p > a');
+const innerContent = nestedAnchor.innerHTML;
+assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
+```
+
+After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
 
 ```js
 assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
index 7b9f5e25d09..cb7f01f0065 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -7,9 +7,8 @@ dashedName: step-64
 
 # --description--
 
-Last, but not least, make the `input` for the terms and condition `inline`, then change the text color of the `terms and conditions` link element to `#dfdfe2`.
+Make the `input` for the terms and conditions `inline` by adding the appropriate class in the HTML.
 
-Хороша робота! Ви завершили останню частину практичного проєкту _«Реєстраційна форма»_.
 
 # --hints--
 
@@ -19,18 +18,6 @@ You should give the `input` a class of `inline`.
 assert(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline'));
 ```
 
-You should use an `a` element selector.
-
-```js
-assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
-```
-
-You should give the `a` element a `color` of `#dfdfe2`.
-
-```js
-assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
-```
-
 # --seed--
 
 ## --seed-contents--
@@ -164,133 +151,3 @@ input[type="file"] {
 --fcc-editable-region--
 
 ```
-
-# --solutions--
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Registration Form</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <h1>Registration Form</h1>
-    <p>Please fill out this form with the required information</p>
-    <form method="post" action='https://register-demo.freecodecamp.org'>
-      <fieldset>
-        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
-        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
-        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
-        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
-      </fieldset>
-      <fieldset>
-        <legend>Account type (required)</legend>
-        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
-        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
-      </fieldset>
-      <fieldset>
-        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
-        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
-        <label for="referrer">How did you hear about us?
-          <select id="referrer" name="referrer">
-            <option value="">(select one)</option>
-            <option value="1">freeCodeCamp News</option>
-            <option value="2">freeCodeCamp YouTube Channel</option>
-            <option value="3">freeCodeCamp Forum</option>
-            <option value="4">Other</option>
-          </select>
-        </label>
-        <label for="bio">Provide a bio:
-          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
-        </label>
-      </fieldset>
-      <label for="terms-and-conditions">
-        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
-      </label>
-      <input type="submit" value="Submit" />
-    </form>
-  </body>
-</html>
-```
-
-```css
-body {
-  width: 100%;
-  height: 100vh;
-  margin: 0;
-  background-color: #1b1b32;
-  color: #f5f6f7;
-  font-family: Tahoma;
-  font-size: 16px;
-}
-
-h1, p {
-  margin: 1em auto;
-  text-align: center;
-}
-
-form {
-  width: 60vw;
-  max-width: 500px;
-  min-width: 300px;
-  margin: 0 auto;
-  padding-bottom: 2em;
-}
-
-fieldset {
-  border: none;
-  padding: 2rem 0;
-  border-bottom: 3px solid #3b3b4f;
-}
-
-fieldset:last-of-type {
-  border-bottom: none;
-}
-
-label {
-  display: block;
-  margin: 0.5rem 0;
-}
-
-input,
-textarea,
-select {
-  margin: 10px 0 0 0;
-  width: 100%;
-  min-height: 2em;
-}
-
-input, textarea {
-  background-color: #0a0a23;
-  border: 1px solid #0a0a23;
-  color: #ffffff;
-}
-
-.inline {
-  width: unset;
-  margin: 0 0.5em 0 0;
-  vertical-align: middle;
-}
-
-input[type="submit"] {
-  display: block;
-  width: 60%;
-  margin: 1em auto;
-  height: 2em;
-  font-size: 1.1rem;
-  background-color: #3b3b4f;
-  border-color: white;
-  min-width: 300px;
-}
-
-input[type="file"] {
-  padding: 1px 2px;
-}
-
-a {
-  color: #dfdfe2;
-}
-
-```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
new file mode 100644
index 00000000000..fd3a2bfd184
--- /dev/null
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/6537e0be715fcb57d31ba8c3.md
@@ -0,0 +1,292 @@
+---
+id: 6537e0be715fcb57d31ba8c3
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Lastly change the text color of the `terms and conditions` link element to `#dfdfe2` by adding a new selector in the CSS.
+
+Well done! You have completed the final part of the _Registration Form_ practice project.
+
+# --hints--
+
+You should use an `a` element selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
+```
+
+You should give the `a` element a `color` of `#dfdfe2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+.inline{
+  display: inline; 
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form method="post" action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <legend>Account type (required)</legend>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" checked /> Personal</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business</label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <label for="terms-and-conditions">
+        <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+a {
+  color: #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
index 0c493b0e3de..388330fca07 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
@@ -17,7 +17,7 @@ dashedName: step-127
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/);
 ```
 
-Ви повинні використати оператор конкатенації, щоб додати назву монстра в кінець рядка. Її можна отримати за допомогою `monster[fighting].name`.
+Ви повинні використати оператор конкатенації, щоб додати назву монстра в кінець рядка. You can get this with `monsters[fighting].name`.
 
 ```js
 assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/);
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
index b49f19e96f7..9922ca24a60 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
@@ -9,7 +9,9 @@ dashedName: step-138
 
 Повернемось до функції `attack`: всередині блоку `else if` створіть іншу інструкцію `if` та `else`. Якщо гравець бореться з драконом (`fighting` буде `2`), викличте функцію `winGame`. Перемістіть виклик `defeatMonster()` до блоку `else`.
 
-Ось приклад, який перевіряє, чи `num` дорівнює `5`:
+For this step, you will need to use the strict equality (`===`) operator to check if `fighting` is equal to `2`. The strict equality operator will check if the values are equal and if they are the same data type.
+
+Here is an example that checks if `num` is strictly equal to `5`:
 
 ```js
 if (num === 5) {
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
index e46d034697b..a41752b6508 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
@@ -7,7 +7,7 @@ dashedName: step-150
 
 # --description--
 
-Додайте інструкцію `else` до першої інструкції `if` всередині функції `attack()`. Використайте оператор `+=` в інструкції `else`, щоб додати текст `You miss.` в кінець `text.innerText`.
+Add an `else` statement to the first `if` statement inside your `attack()` function. Використайте оператор `+=` в інструкції `else`, щоб додати текст `You miss.` в кінець `text.innerText`.
 
 # --hints--
 
@@ -17,7 +17,7 @@ dashedName: step-150
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/)
 ```
 
-Додайте текст `You miss.` у кінець `text.innerText`. Не забудьте використати складене присвоювання.
+Додайте текст `You miss.` у кінець `text.innerText`. Remember to use compound assignment and make sure there is a space before the word `You`.
 
 ```js
 assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/)
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
index d5125224a0d..5f6d526c7af 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
@@ -207,8 +207,8 @@ const locations = [
         "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
         "button functions": [restart, restart, restart], 
         text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
 --fcc-editable-region--
-    }
 
 --fcc-editable-region--
 ];
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
index 7ef850e6b5d..2b9ab42bdab 100644
--- a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
@@ -7,7 +7,7 @@ dashedName: step-165
 
 # --description--
 
-Перед останньою лапкою в цьому рядку, який ви додали, вставте екранований символ нового рядка `\n`. Це призведе до того, що наступна частина, яку ви додасте до `text.innerText`, з’явиться в новому рядку.
+At the end of the string, before the final quote, insert the new line escape character `\n`. Це призведе до того, що наступна частина, яку ви додасте до `text.innerText`, з’явиться в новому рядку.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
new file mode 100644
index 00000000000..c8bedf3010f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md
@@ -0,0 +1,248 @@
+---
+id: 65386e889dd615940cb3e042
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+In this project, you will learn about the JavaScript `Date` object by building a date formatter.
+
+All of the HTML and CSS for this project have been provided for you.
+
+Start by getting the `#current-date` element using the `.getElementById()` method and assign it to a `const` variable called `currentDateParagraph`.
+
+# --hints--
+
+You should use `const` to declare a `currentDateParagraph` variable.
+
+```js
+assert.match(code, /const\s+currentDateParagraph\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#current-date` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)current-date\1\)/);
+```
+
+You should assign the `#current-date` element to your `currentDateParagraph` variable.
+
+```js
+assert(code.match(/const\s+currentDateParagraph\s+=\s+document\.getElementById\(('|"|`)current-date\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
new file mode 100644
index 00000000000..3295a750daa
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md
@@ -0,0 +1,246 @@
+---
+id: 653879d87bc55fa624280c77
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Use the `.getElementById()` method to get the `#date-options` element and use `const` to assign it to a variable named `dateOptionsSelectElement`.
+
+# --hints--
+
+You should use `const` to declare a `dateOptionsSelectElement` variable.
+
+```js
+assert.match(code, /const\s+dateOptionsSelectElement\s+=/);
+```
+
+You should use `document.getElementById()` to get the `#date-options` element.
+
+```js
+assert.match(code, /document\.getElementById\(('|"|`)date-options\1\)/);
+```
+
+You should assign the `#date-options` element to your `dateOptionsSelectElement` variable.
+
+```js
+assert(code.match(/const\s+dateOptionsSelectElement\s+=\s+document\.getElementById\(('|"|`)date-options\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
new file mode 100644
index 00000000000..788fae024c1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md
@@ -0,0 +1,253 @@
+---
+id: 65387b440b5cb1aa35585820
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+In JavaScript, there are many built-in <dfn>constructors</dfn> that create objects. A constructor is like a regular function, but starts with a capital letter, and is initialized with the `new` operator.
+
+For example, you can use the `Date()` constructor with the `new` operator to create a new `Date` object that returns a string with the current date and time:
+
+```js
+const currentDate = new Date();
+console.log(currentDate);
+
+// Output:
+// Mon Aug 23 2021 15:31:00 GMT-0400 (Eastern Daylight Time)
+```
+
+Create a new `const` variable called `date` and assign it a `Date` object with `new Date()`.
+
+# --hints--
+
+You should use `const` to declare a `date` variable.
+
+```js
+assert.match(code, /const\s+date\s+=/);
+```
+
+You should assign a `Date` object to your `date` variable with `new Date()`.
+
+```js
+assert(code.match(/const\s+date\s+=\s+new\s+Date\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
new file mode 100644
index 00000000000..2257dace260
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md
@@ -0,0 +1,253 @@
+---
+id: 6538830e01ab66ade75b869e
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+The `Date` object has a number of methods that allow you to get the date and time in different formats.
+
+One of those is the `.getDate()` method, which returns a number between 1-31 that represents the day of the month for that date. For example:
+
+```js
+const date = new Date();
+const dayOfTheMonth = date.getDate();
+console.log(dayOfTheMonth); // 20
+```
+
+Using `const`, create a variable named `day` and assign it the day of the month from `date` with the `.getDate()` method.
+
+# --hints--
+
+You should use `const` to declare a `day` variable.
+
+```js
+assert.match(code, /const\s+day\s+=/);
+```
+
+You should assign the `date.getDate()` to your `day` variable.
+
+```js
+assert(code.match(/const\s+day\s+=\s+date\.getDate\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
new file mode 100644
index 00000000000..856addb1fea
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md
@@ -0,0 +1,248 @@
+---
+id: 653883da4a1fabaeb5f1f5e7
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+The `.getMonth()` method returns a number between `0` and `11`. This represents the month for the date provided, where `0` is January and `11` is December.  Because the number this method returns is zero-based, you need to add `1` to it to get the expected month number.
+
+Using `const`, create a variable named `month` and assign it the month from `date` with the `.getMonth()` method.
+
+Remember to add `1` to the number returned by `.getMonth()`.
+
+# --hints--
+
+You should use `const` to declare a `month` variable.
+
+```js
+assert.match(code, /const\s+month\s+=/);
+```
+
+You should assign the `date.getMonth() + 1` to your `month` variable.
+
+```js
+assert(code.match(/const\s+month\s+=\s+date\.getMonth\(\)\s*\+\s*1/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
new file mode 100644
index 00000000000..36542963348
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388475abfb4faf8dd5e347.md
@@ -0,0 +1,247 @@
+---
+id: 65388475abfb4faf8dd5e347
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+The `.getFullYear()` method returns a number which represents the year for the provided date.
+
+Using `const`, create a variable named `year` and assign it the year from `date` with the `.getFullYear()` method.
+
+# --hints--
+
+You should use `const` to declare a `year` variable.
+
+```js
+assert.match(code, /const\s+year\s+=/);
+```
+
+You should assign the `date.getFullYear()` to your `year` variable.
+
+```js
+assert(code.match(/const\s+year\s+=\s+date\.getFullYear\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
new file mode 100644
index 00000000000..b43a24cadcf
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md
@@ -0,0 +1,248 @@
+---
+id: 653884e09dfb4eb01f1622ed
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+The `.getHours()` method returns a number between `0` and `23`. This represents the hour for the provided date, where `0` is midnight and `23` is 11 p.m.
+
+Create a `const` variable named `hours` and assign it the hour from `date` with the `.getHours()` method.
+
+# --hints--
+
+You should use `const` to declare a `hours` variable.
+
+```js
+assert.match(code, /const\s+hours\s+=/);
+```
+
+You should assign the `date.getHours()` to your `hours` variable.
+
+```js
+assert(code.match(/const\s+hours\s+=\s+date\.getHours\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
new file mode 100644
index 00000000000..f44a0b50f42
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md
@@ -0,0 +1,249 @@
+---
+id: 6538855514cb16b10204e712
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.
+
+Create a `const` variable named `minutes` and assign it the minutes from `date` with the `.getMinutes()` method.
+
+# --hints--
+
+You should use `const` to declare a `minutes` variable.
+
+```js
+assert.match(code, /const\s+minutes\s+=/);
+```
+
+You should assign the `date.getMinutes()` to your `minutes` variable.
+
+```js
+assert(code.match(/const\s+minutes\s+=\s+date\.getMinutes\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
new file mode 100644
index 00000000000..150461fb9c7
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653885c61ede29b1a99554a2.md
@@ -0,0 +1,248 @@
+---
+id: 653885c61ede29b1a99554a2
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Next, create a `const` variable named `formattedDate` and assign it empty template literals.
+
+# --hints--
+
+You should use `const` to declare a `formattedDate` variable.
+
+```js
+assert.match(code, /const\s+formattedDate\s*=/);
+```
+
+You should assign the empty template literals to your `formattedDate` variable.
+
+```js
+assert(code.match(/const\s+formattedDate\s*=\s*``/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
new file mode 100644
index 00000000000..2710d11ae38
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md
@@ -0,0 +1,244 @@
+---
+id: 65388659a72663b27cde0699
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Inside the template literal, add an embedded expression that contains the `day` variable.
+
+# --hints--
+
+You should use the `day` constant inside the template literal.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = ``;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
new file mode 100644
index 00000000000..8dc4e4832c1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md
@@ -0,0 +1,244 @@
+---
+id: 653887098bdc39b3684a51c8
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+After the `day` variable, add a dash (`-`) followed by another embedded expression that contains the `month` variable.
+
+# --hints--
+
+You will need to use the `month` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
new file mode 100644
index 00000000000..0c42cdb142d
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md
@@ -0,0 +1,244 @@
+---
+id: 65388762f61f44b3fd490a4a
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+After the `month` variable, add a dash followed by another embedded expression that contains the `year` variable.
+
+# --hints--
+
+You will need to use the `year` constant inside the template literal after a dash.
+
+```js
+assert(code.match(/const\s+formattedDate\s+=\s+`\${day}\s*-\s*\${month}\s*-\s*\${year}`/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
new file mode 100644
index 00000000000..b2eaac290cd
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538886c61a414b4e34496fe.md
@@ -0,0 +1,246 @@
+---
+id: 6538886c61a414b4e34496fe
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+To see the results of the `formattedDate` variable, add a `console.log()` statement and pass in the `formattedDate` variable as an argument.
+
+Open up the console and you should see the date printed out.
+
+# --hints--
+
+You should have a `console.log(formattedDate)` line in your code.
+
+```js
+assert.match(code, /console\.log\(formattedDate\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
new file mode 100644
index 00000000000..24181f065b2
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388ac7154e44b72c74d616.md
@@ -0,0 +1,268 @@
+---
+id: 65388ac7154e44b72c74d616
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+In JavaScript, the `textContent` property is used to both get and set the text of a node.
+
+For example, here's how you can get the text content from a paragraph element with the id `example-paragraph`, and set its text content to a new value:
+
+```html
+<p id="example-paragraph">Example Text</p>
+```
+
+```js
+const exampleParagraph = document.getElementById("example-paragraph");
+console.log(exampleParagraph.textContent); // "Example Text"
+exampleParagraph.textContent = "New Text";
+console.log(exampleParagraph.textContent); // "New Text"
+```
+
+Use the `textContent` property on `currentDateParagraph` to set its text content to the value of the `formattedDate` variable.
+
+Also, make sure to remove your `console.log(formattedDate);` line.
+
+# --hints--
+
+You should use the `textContent` property to set the text content of `currentDateParagraph` to the value of the constant `formattedDate`.
+
+```js
+assert(code.match(/currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+You should not have a `console.log(formattedDate);` line in your code.
+
+```js
+assert.notMatch(code, /console\.log\(formattedDate\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+--fcc-editable-region--
+
+const formattedDate = `${day}-${month}-${year}`;
+console.log(formattedDate);
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
new file mode 100644
index 00000000000..2b3c02282b1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md
@@ -0,0 +1,259 @@
+---
+id: 65388bbcbf6928b83fc424d1
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.
+
+```js
+element.addEventListener("change", () => {
+
+});
+```
+
+Chain the `addEventListener` method to `dateOptionsSelectElement` where the first argument is `change` and the second argument is an empty arrow function.
+
+# --hints--
+
+You should use the `addEventListener` method to add a `change` event listener to `dateOptionsSelectElement`.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*['"]change/g));
+```
+
+You should add an empty arrow function as the second argument to the `addEventListener` method.
+
+```js
+assert(code.match(/dateOptionsSelectElement.addEventListener\s*\(\s*(['"])change\1\s*,\s*\(\s*\)\s*=>\s*{\s*}/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
new file mode 100644
index 00000000000..7f471fcf376
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md
@@ -0,0 +1,268 @@
+---
+id: 65388d61a57a00b9ad0d0817
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+When a user makes a selection from the dropdown menu, the function should get the user's value and display the date in their chosen date format. To do this, you can use the `switch` statement.
+
+A `switch` statement is used to compare an expression against multiple possible values and execute different code blocks based on the match. It's commonly used for branching logic.
+
+For example, here's how to compare the expression `dayOfWeek` against possible values:
+
+```js
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+Create a `switch` statement and use `dateOptionsSelectElement.value` as the expression.
+
+# --hints--
+
+You should use a `switch` statement where `dateOptionsSelectElement.value` is the expression.
+
+```js
+assert(code.match(/switch\s*\(\s*dateOptionsSelectElement.value\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
new file mode 100644
index 00000000000..83cfa83fd2b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md
@@ -0,0 +1,262 @@
+---
+id: 65388edfdf364fbb04e426f2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+When the user chooses the `Year, Month, Day` option from the dropdown, the date format should reflect this choice.
+
+To do this, you can add a `case` in the `switch` statement, followed by your logic.
+
+```js
+switch (expression) {
+  case 'case123':
+    // Write your logic here
+}
+```
+
+Add a `case` where the value is `yyyy-mm-dd`. Inside the `case`, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+
+# --hints--
+
+You should add a `case` where the condition is `yyyy-mm-dd`. Then set the `textContent` property of `currentDateParagraph` equal to `formattedDate`.
+
+```js
+assert(code.match(/case\s*(['"])yyyy-mm-dd\1\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+  switch (dateOptionsSelectElement.value) {
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
new file mode 100644
index 00000000000..02993fa4aad
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
@@ -0,0 +1,259 @@
+---
+id: 65389211a8d86bbd876a2a74
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+In JavaScript, the `.split()` method is used to split up a string into an array of substrings. This method has an optional separator parameter, which indicates where each split should happen.
+
+```js
+"coca-cola".split("-"); // [ 'coca', 'cola' ]
+```
+
+Split `formattedDate` into an array of substrings with the `.split()` method and use a `"-"` as the separator.
+
+# --hints--
+
+You should use the `.split()` method with `"-"` as the separator to split `formattedDate` into an array of substrings.
+
+```js
+assert(code.match(/formattedDate[\s\S]*?\.split\(\s*(['"`])-\1\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
new file mode 100644
index 00000000000..873ad4fd565
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
@@ -0,0 +1,262 @@
+---
+id: 65389306578c34be5c93bc35
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The `.reverse()` method is used to reverse an array in place. For example:
+
+```js
+const array = [1, 2, 3, 4, 5];
+array.reverse();
+console.log(array); // [5, 4, 3, 2, 1]
+```
+
+Chain the `.reverse()` method to the end of `.split()` method.
+
+# --hints--
+
+You should use the `.reverse()` method to reverse the order of the array returned by `.split()`.
+
+```js
+assert(code.match(/\.reverse\(\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
new file mode 100644
index 00000000000..3253ba8d27b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
@@ -0,0 +1,257 @@
+---
+id: 6538935e2ab721beedb137c4
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Finally, you need to create a string with the reversed array elements separated by dash (`-`) character.
+
+Use the `.join()` method to join the reversed array elements into a string and use a `"-"` for the separator.
+
+# --hints--
+
+You should use the `.join()` method to join the reversed array elements into a string and use a `"-"` as a separator.
+
+```js
+assert(code.match(/\.join\((['"])-\1\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
new file mode 100644
index 00000000000..bd71851d497
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
@@ -0,0 +1,268 @@
+---
+id: 653898fa7eee37c57b960e35
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+If your `switch` statement is going to have multiple cases, it is best practice to include a `break` statement.
+
+The `break` statement will tell the JavaScript interpreter to stop executing statements. Without adding a `break` statement at the end of each `case` block, the program will execute the code for all matching `cases`.
+
+```js
+switch (someVariable) {
+  case 'case123':
+    // Write your logic here
+    break; // Terminates the switch statement
+}
+```
+
+Add a `break` statement to the end of your `case` block.
+
+# --hints--
+
+You should add a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
new file mode 100644
index 00000000000..8ce925e00f1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -0,0 +1,265 @@
+---
+id: 65389a63d3b1d6c764c0e10e
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Add another `case` with the value `mm-dd-yyyy-h-mm`. Inside that `case`, set the text content of `currentDateParagraph` to empty template literals.
+
+Also, make sure to include a `break` statement to terminate the `switch` statement.
+
+# --hints--
+
+You should add a `case` where the condition is `mm-dd-yyyy-h-mm`, then set the `textContent` property of `currentDateParagraph` equal to empty template literals.
+
+```js
+assert(code.match(/case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph.textContent\s*=\s*``/g));
+```
+
+You should include a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
new file mode 100644
index 00000000000..85d6fe3c758
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
@@ -0,0 +1,261 @@
+---
+id: 65389de504d0f2ca10e92a57
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Inside the `case` for `mm-dd-yyyy-h-mm`, set the `textContent` property of `currentDateParagraph` to `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`.
+
+
+# --hints--
+
+You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.
+
+```js
+const pattern = /case\s*(['"])mm-dd-yyyy-h-mm\1\s*:\s*currentDateParagraph\.textContent\s*=\s*`(\$\{month}-\$\{day}-\$\{year} \$\{hours} Hours \$\{minutes} Minutes)`/;
+assert(code.match(pattern));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = ``;
+      break;
+  }
+--fcc-editable-region--
+});
+
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
new file mode 100644
index 00000000000..9e6b380ff8f
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -0,0 +1,519 @@
+---
+id: 65389eff4893facbbe6eae67
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+In a `switch` statement, the `default` case is executed when none of the previous case conditions match the value being evaluated. It serves as a catch-all for any other possible cases. For example:
+
+```js
+const dayOfWeek = 7;
+
+switch (dayOfWeek) {
+  case 1:
+    console.log("It's Monday!");
+    break;
+  case 2:
+    console.log("It's Tuesday!");
+    break;
+  // ...cases for other workdays
+  default:
+    console.log("It's the weekend!");
+}
+```
+
+For the `default` case, set the text content of `currentDateParagraph` to the value of `formattedDate`.
+
+And with that, your date formatter is complete! You can now format the current date three different ways.
+
+# --hints--
+
+You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.
+
+```js
+assert(code.match(/default\s*:\s*currentDateParagraph.textContent\s*=\s*formattedDate/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+--fcc-editable-region--
+
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break;
+
+  }
+--fcc-editable-region--
+});
+
+```
+
+# --solutions--
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Learn the Date Object by Building a Date Formatter</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <main>
+      <div class="title-container">
+        <h1 class="title">Today's Date</h1>
+
+        <svg
+          class="date-svg"
+          xmlns="http://www.w3.org/2000/svg"
+          version="1.0"
+          width="512.000000pt"
+          height="512.000000pt"
+          viewBox="0 0 512.000000 512.000000"
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <g
+            transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+            fill="#fff"
+            stroke="none"
+          >
+            <path
+              d="M1145 4777 c-71 -24 -120 -54 -164 -102 -59 -64 -83 -124 -89 -216 l-4 -77 -147 -3 c-142 -4 -149 -5 -213 -37 -81 -40 -149 -111 -177 -188 -21 -54 -21 -64 -21 -1789 0 -1725 0 -1735 21 -1789 28 -77 96 -148 177 -188 l67 -33 1950 0 1950 0 67 33 c74 36 133 96 170 170 l23 47 0 1760 0 1760 -23 47 c-37 74 -96 134 -169 170 -63 31 -71 32 -213 36 l-148 4 -4 77 c-8 133 -82 242 -200 297 -54 25 -75 29 -148 29 -94 -1 -151 -20 -220 -75 -75 -59 -130 -181 -130 -287 l0 -43 -954 0 -954 0 -7 74 c-12 137 -89 251 -201 303 -66 30 -179 39 -239 20z m209 -164 c23 -16 52 -49 66 -73 l25 -45 0 -365 0 -365 -28 -47 c-30 -52 -88 -92 -149 -103 -54 -10 -137 17 -175 57 -65 69 -64 60 -61 471 l3 373 27 41 c17 26 45 50 80 68 71 35 151 31 212 -12z m2594 11 c41 -20 59 -37 82 -78 l30 -51 0 -360 c0 -329 -2 -364 -19 -401 -36 -79 -137 -133 -222 -119 -57 10 -125 58 -151 107 -23 42 -23 50 -26 388 -3 377 -1 403 51 465 62 76 162 95 255 49z m537 -2717 l0 -1239 -24 -19 c-23 -19 -67 -19 -1916 -19 -1849 0 -1893 0 -1916 19 l-24 19 -3 1241 -2 1241 1942 -2 1943 -3 0 -1238z"
+            />
+            <path
+              d="M1112 2493 l3 -158 318 -3 317 -2 0 160 0 160 -320 0 -321 0 3 -157z"
+            />
+            <path
+              d="M2230 2490 l0 -160 315 0 315 0 0 160 0 160 -315 0 -315 0 0 -160z"
+            />
+            <path
+              d="M3342 2493 l3 -158 310 0 310 0 3 158 3 157 -316 0 -316 0 3 -157z"
+            />
+            <path
+              d="M1110 1855 l0 -155 320 0 320 0 0 155 0 155 -320 0 -320 0 0 -155z"
+            />
+            <path
+              d="M2230 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M3340 1855 l0 -155 315 0 315 0 0 155 0 155 -315 0 -315 0 0 -155z"
+            />
+            <path
+              d="M1117 1383 c-4 -3 -7 -78 -7 -165 l0 -158 320 0 320 0 0 165 0 165 -313 0 c-173 0 -317 -3 -320 -7z"
+            />
+            <path
+              d="M2230 1225 l0 -165 315 0 315 0 0 165 0 165 -315 0 -315 0 0 -165z"
+            />
+            <path
+              d="M3347 1383 c-4 -3 -7 -78 -7 -165 l0 -158 315 0 315 0 -2 163 -3 162 -306 3 c-168 1 -308 -1 -312 -5z"
+            />
+          </g>
+        </svg>
+      </div>
+      <div class="divider"></div>
+
+      <div class="dropdown-container">
+        <select name="date-options" id="date-options">
+          <option value="dd-mm-yyyy">Day, Month, Year</option>
+          <option value="yyyy-mm-dd">Year, Month, Day</option>
+          <option value="mm-dd-yyyy-h-mm">
+            Month, Day, Year, Hours, Minutes
+          </option>
+        </select>
+        <div class="select-icon">
+          <svg
+            class="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="25"
+            height="35"
+            viewBox="0 0 24 24"
+          >
+            <rect x="0" fill="none" width="24" height="24" />
+
+            <g>
+              <path d="M7 10l5 5 5-5" />
+            </g>
+          </svg>
+        </div>
+      </div>
+
+      <p id="current-date"></p>
+    </main>
+
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```css
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --dark-grey: #0a0a23;
+  --white: #ffffff;
+  --yellow: #f1be32;
+}
+
+body {
+  color: var(--white);
+  background-color: var(--dark-grey);
+}
+
+.title-container {
+  margin: 10px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.title {
+  font-size: 2.5rem;
+}
+
+.date-svg {
+  width: 30px;
+  height: 30px;
+}
+
+.divider {
+  margin: auto;
+  width: 150px;
+  height: 10px;
+  background-color: var(--yellow);
+}
+
+.dropdown-container {
+  width: 50%;
+  margin: 40px auto;
+  position: relative;
+}
+
+select {
+  display: block;
+  margin: 20px auto 0;
+  width: 100%;
+  height: 50px;
+  font-size: 100%;
+  font-weight: bold;
+  cursor: pointer;
+  background-color: var(--white);
+  border: none;
+  color: var(--dark-grey);
+  appearance: none;
+  padding: 10px;
+  padding-right: 38px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  transition: color 0.3s ease, background-color 0.3s ease,
+    border-bottom-color 0.3s ease;
+}
+
+.select-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 30px;
+  height: 36px;
+  pointer-events: none;
+  padding-left: 5px;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+
+.select-icon svg.icon {
+  transition: fill 0.3s ease;
+  fill: var(--dark-grey);
+}
+
+#current-date {
+  font-size: 2rem;
+  text-align: center;
+}
+
+@media (max-width: 375px) {
+  .title {
+    font-size: 2rem;
+  }
+
+  .dropdown-container {
+    width: 80%;
+  }
+
+  .date-svg {
+    display: none;
+  }
+}
+
+```
+
+```js
+const currentDateParagraph = document.getElementById("current-date");
+const dateOptionsSelectElement = document.getElementById("date-options");
+
+const date = new Date();
+const day = date.getDate();
+const month = date.getMonth() + 1;
+const year = date.getFullYear();
+const hours = date.getHours();
+const minutes = date.getMinutes();
+
+const formattedDate = `${day}-${month}-${year}`;
+currentDateParagraph.textContent = formattedDate;
+
+dateOptionsSelectElement.addEventListener("change", () => {
+  switch (dateOptionsSelectElement.value) {
+    case "yyyy-mm-dd":
+      currentDateParagraph.textContent = formattedDate
+        .split("-")
+        .reverse()
+        .join("-");
+      break;
+    case "mm-dd-yyyy-h-mm":
+      currentDateParagraph.textContent = `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes`;
+      break; 
+    default:
+      currentDateParagraph.textContent = formattedDate;
+  }
+});
+
+```
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-211-divisor-square-sum.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-211-divisor-square-sum.md
index 65a72eb3560..437683e585f 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-211-divisor-square-sum.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-211-divisor-square-sum.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f43f1000cf542c50ff52
-title: 'Problem 211: Divisor Square Sum'
+title: 'Завдання 211: сума квадратів дільників'
 challengeType: 1
 forumTopicId: 301853
 dashedName: problem-211-divisor-square-sum
@@ -8,11 +8,11 @@ dashedName: problem-211-divisor-square-sum
 
 # --description--
 
-For a positive integer $n$, let $σ_2(n)$ be the sum of the squares of its divisors. Наприклад,
+Нехай $σ_2(n)$ буде сумою квадратів дільників натурального числа $n$. Наприклад,
 
 $$σ_2(10) = 1 + 4 + 25 + 100 = 130$$
 
-Find the sum of all $n$, $0 &lt; n &lt; 64\\,000\\,000$ such that $σ_2(n)$ is a perfect square.
+Знайдіть суму всіх $n$ за умови $0 &lt; n &lt; 64\\,000\\,000$, за яких $σ_2(n)$ є повним квадратом.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-212-combined-volume-of-cuboids.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-212-combined-volume-of-cuboids.md
index 86267cbe894..021b4f7f2b1 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-212-combined-volume-of-cuboids.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-212-combined-volume-of-cuboids.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4411000cf542c50ff53
-title: 'Problem 212: Combined Volume of Cuboids'
+title: 'Завдання 212: загальний об’єм прямокутних паралелепіпедів'
 challengeType: 1
 forumTopicId: 301854
 dashedName: problem-212-combined-volume-of-cuboids
@@ -8,7 +8,7 @@ dashedName: problem-212-combined-volume-of-cuboids
 
 # --description--
 
-An axis-aligned cuboid, specified by parameters $\{ (x_0,y_0,z_0), (dx,dy,dz) \}$, consists of all points ($X$,$Y$,$Z$) such that $x_0 ≤ X ≤ x_0 + dx$, $y_0 ≤ Y ≤ y_0 + dy$ and $z_0 ≤ Z ≤ z_0 + dz$. The volume of the cuboid is the product, $dx × dy × dz$. The combined volume of a collection of cuboids is the volume of their union and will be less than the sum of the individual volumes if any cuboids overlap.
+Вирівняний по осях прямокутний паралелепіпед, заданий параметрами $\{ (x_0,y_0,z_0), (dx,dy,dz) \}$, складається з точок ($X$,$Y$,$Z$), за яких $x_0 ≤ X ≤ x_0 + dx$, $y_0 ≤ Y ≤ y_0 + dy$ та $z_0 ≤ Z ≤ z_0 + dz$. Об’ємом прямокутного паралелепіпеда є добуток $dx × dy × dz$. Загальний об’єм декількох паралелепіпедів — це об’єм об’єднаних паралелепіпедів, а якщо вони перетинаються, то він менший за суму окремих об’ємів.
 
 Let $C_1, \ldots, C_{50000}$ be a collection of 50000 axis-aligned cuboids such that $C_n$ has parameters
 
@@ -19,9 +19,9 @@ $$\begin{align}   & x_0 = S_{6n - 5} \\; \text{modulo} \\; 10000    \\\\
 
 where $S_1, \ldots, S_{300000}$ come from the "Lagged Fibonacci Generator":
 
-For $1 ≤ k ≤ 55$, $S_k = [100003 - 200003k + 300007k^3] \\; (modulo \\; 1000000)$
+За умови $1 ≤ k ≤ 55$, $S_k = [100003 - 200003k + 300007k^3] \\; (modulo \\; 1000000)$
 
-For $56 ≤ k$, $S_k = [S_{k - 24} + S_{k - 55}] \\; (modulo \\; 1000000)$
+За умови $56 ≤ k$, $S_k = [S_{k - 24} + S_{k - 55}] \\; (modulo \\; 1000000)$
 
 Thus, $C_1$ has parameters $\{(7,53,183), (94,369,56)\}$, $C_2$ has parameters $\{(2383,3563,5079), (42,212,344)\}$, and so on.
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-213-flea-circus.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-213-flea-circus.md
index 6a2ac8341dd..292c325bd4c 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-213-flea-circus.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-213-flea-circus.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4411000cf542c50ff54
-title: 'Problem 213: Flea Circus'
+title: 'Завдання 213: блошиний цирк'
 challengeType: 1
 forumTopicId: 301855
 dashedName: problem-213-flea-circus
@@ -8,11 +8,11 @@ dashedName: problem-213-flea-circus
 
 # --description--
 
-A 30×30 grid of squares contains 900 fleas, initially one flea per square.
+На сітці 30×30 знаходиться 900 бліх, початково по одній блосі на квадраті.
 
-When a bell is rung, each flea jumps to an adjacent square at random (usually 4 possibilities, except for fleas on the edge of the grid or at the corners).
+Коли дзвонить дзвінок, кожна блоха стрибає на випадковий сусідній квадрат (4 варіанти, за винятком бліх на краю сітки або по кутах).
 
-What is the expected number of unoccupied squares after 50 rings of the bell? Дайте відповідь, заокруглену до шести знаків після коми.
+Скільки залишиться пустих квадратів після 50 дзвінків? Дайте відповідь, заокруглену до шести знаків після коми.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-221-alexandrian-integers.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-221-alexandrian-integers.md
index 37803adc0aa..d2750ea4250 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-221-alexandrian-integers.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-221-alexandrian-integers.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4491000cf542c50ff5c
-title: 'Problem 221: Alexandrian Integers'
+title: 'Завдання 221: александрійські цілі числа'
 challengeType: 1
 forumTopicId: 301864
 dashedName: problem-221-alexandrian-integers
@@ -8,18 +8,18 @@ dashedName: problem-221-alexandrian-integers
 
 # --description--
 
-We shall call a positive integer $A$ an "Alexandrian integer", if there exist integers $p$, $q$, $r$ such that:
+Натуральне число $A$ називають александрійським, якщо існують цілі числа $p$, $q$, $r$, за яких:
 
 $$A = p \times q \times r$$
 
-and
+та
 
 $$\frac{1}{A} = \frac{1}{p} + \frac{1}{q} + \frac{1}{r}$$
 
 
-For example, 630 is an Alexandrian integer ($p = 5$, $q = −7$, $r = −18$). In fact, 630 is the 6th Alexandrian integer, the first 6 Alexandrian integers being: 6, 42, 120, 156, 420 and 630.
+Наприклад, 630 є александрійським цілим числом ($p = 5$, $q = −7$, $r = −18$). Взагалі, 630 є шостим александрійським цілим числом. Першими шістьма александрійськими числами є: 6, 42, 120, 156, 420 та 630.
 
-Find the 150000th Alexandrian integer.
+Знайдіть 150000-не александрійське ціле число.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-222-sphere-packing.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-222-sphere-packing.md
index 77d0ab998c4..4c5fcebfb29 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-222-sphere-packing.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-222-sphere-packing.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f44b1000cf542c50ff5d
-title: 'Problem 222: Sphere Packing'
+title: 'Завдання 222: укладка куль'
 challengeType: 1
 forumTopicId: 301865
 dashedName: problem-222-sphere-packing
@@ -8,9 +8,9 @@ dashedName: problem-222-sphere-packing
 
 # --description--
 
-What is the length of the shortest pipe, of internal radius 50mm, that can fully contain 21 balls of radii 30mm, 31mm, ..., 50mm?
+Яка довжина найкоротшої труби з внутрішнім радіусом 50 мм, яка вміщує 21 кулю радіусом 30 мм, 31 мм, ..., 50 мм?
 
-Give your answer in micrometres (${10}^{-6}$ m) rounded to the nearest integer.
+Відповідь запишіть у мікрометрах (${10}^{-6}$ м), заокругливши до найближчого цілого числа.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-223-almost-right-angled-triangles-i.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-223-almost-right-angled-triangles-i.md
index d1cc120a90c..387e5d157a3 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-223-almost-right-angled-triangles-i.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-223-almost-right-angled-triangles-i.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f44b1000cf542c50ff5e
-title: 'Problem 223: Almost right-angled triangles I'
+title: 'Завдання 223: майже прямокутні трикутники I'
 challengeType: 1
 forumTopicId: 301866
 dashedName: problem-223-almost-right-angled-triangles-i
@@ -8,9 +8,9 @@ dashedName: problem-223-almost-right-angled-triangles-i
 
 # --description--
 
-Let us call an integer sided triangle with sides $a ≤ b ≤ c$ barely acute if the sides satisfy $a^2 + b^2 = c^2 + 1$.
+Назвемо трикутник з цілими сторонами $a ≤ b ≤ c$ ледь гострим, якщо сторони задовільняють рівність $a^2 + b^2 = c^2 + 1$.
 
-How many barely acute triangles are there with perimeter $≤ 25\\,000\\,000$?
+Скільки ледь гострих трикутників мають периметр $≤ 25\\,000\\,000$?
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-224-almost-right-angled-triangles-ii.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-224-almost-right-angled-triangles-ii.md
index ee41d2572ee..b8d6f8a7280 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-224-almost-right-angled-triangles-ii.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-224-almost-right-angled-triangles-ii.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f44e1000cf542c50ff5f
-title: 'Problem 224: Almost right-angled triangles II'
+title: 'Завдання 224: майже прямокутні трикутники II'
 challengeType: 1
 forumTopicId: 301867
 dashedName: problem-224-almost-right-angled-triangles-ii
@@ -8,9 +8,9 @@ dashedName: problem-224-almost-right-angled-triangles-ii
 
 # --description--
 
-Let us call an integer sided triangle with sides $a ≤ b ≤ c$ barely obtuse if the sides satisfy $a^2 + b^2 = c^2 - 1$.
+Назвемо трикутник з цілими сторонами $a ≤ b ≤ c$ ледь тупим, якщо сторони задовільняють рівність $a^2 + b^2 = c^2 - 1$.
 
-How many barely obtuse triangles are there with perimeter $≤ 75\\,000\\,000$?
+Скільки ледь тупих трикутників мають периметр $≤ 75\\,000\\,000$?
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-227-the-chase.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-227-the-chase.md
index 90dbb8539d4..6df93301bd2 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-227-the-chase.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-227-the-chase.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f44f1000cf542c50ff61
-title: 'Problem 227: The Chase'
+title: 'Завдання 227: погоня'
 challengeType: 1
 forumTopicId: 301870
 dashedName: problem-227-the-chase
@@ -8,19 +8,19 @@ dashedName: problem-227-the-chase
 
 # --description--
 
-"The Chase" is a game played with two dice and an even number of players.
+«Погоня» — це гра з двома кубиками та парною кількістю гравців.
 
-The players sit around a table; the game begins with two opposite players having one die each. On each turn, the two players with a die roll it.
+Гравці сидять за столом; гра починається з того, що два гравці навпроти одне одного отримують по гральному кубику. За кожен хід два гравці кидають кубики.
 
-If the player rolls a 1, he passes the die to his neighbour on the left.
+Якщо гравцю випаде 1, він передає кубик сусіду зліва.
 
-If the player rolls a 6, he passes the die to his neighbour on the right.
+Якщо гравцю випаде 6, він передає кубик сусіду справа.
 
-Otherwise, he keeps the die for the next turn.
+За інших умов гравець тримає кубик до наступного ходу.
 
-The game ends when one player has both dice after they have been rolled and passed; that player has then lost.
+Гра закінчується, коли хтось із гравців отримує обидва кубики. Це означає, що той гравець програв.
 
-In a game with 100 players, what is the expected number of turns the game lasts? Give your answer rounded to ten significant digits.
+Яка очікувана кількість ходів у грі зі 100 гравцями? Відповідь закругліть до десяти значущих цифр.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-228-minkowski-sums.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-228-minkowski-sums.md
index fa1f837e59c..a38004f9a6e 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-228-minkowski-sums.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-228-minkowski-sums.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4511000cf542c50ff63
-title: 'Problem 228: Minkowski Sums'
+title: 'Завдання 228: суми Мінковського'
 challengeType: 1
 forumTopicId: 301871
 dashedName: problem-228-minkowski-sums
@@ -8,20 +8,20 @@ dashedName: problem-228-minkowski-sums
 
 # --description--
 
-Let $S_n$ be the regular $n$-sided polygon – or shape – whose vertices $v_k (k = 1, 2, \ldots, n)$ have coordinates:
+Нехай $S_n$ буде правильним $n$-стороннім багатокутником або фігурою, чиї вершини $v_k (k = 1, 2, \ldots, n)$ мають координати:
 
 $$\begin{align}   & x_k = cos(\frac{2k - 1}{n} × 180°) \\\\
   & y_k = sin(\frac{2k - 1}{n} × 180°) \end{align}$$
 
-Each $S_n$ is to be interpreted as a filled shape consisting of all points on the perimeter and in the interior.
+Кожен $S_n$ зображено зафарбованою фігурою, яка складається з усіх точок на периметрі та всередині.
 
-The Minkowski sum, $S + T$, of two shapes $S$ and $T$ is the result of adding every point in $S$ to every point in $T$, where point addition is performed coordinate-wise: $(u, v) + (x, y) = (u + x, v + y)$.
+Сума Мінковського ($S + T$) двох фігур $S$ та $T$ є результатом додавання кожної точки $S$ до кожної точки $T$, де додавання точок виконане за координатами: $(u, v) + (x, y) = (u + x, v + y)$.
 
-For example, the sum of $S_3$ and $S_4$ is the six-sided shape shown in pink below:
+Наприклад, сума $S_3$ та $S_4$ є рожевим шестикутником:
 
-<img class="img-responsive center-block" alt="image showing S_3, S_4 and S_3 + S_4" src="https://cdn.freecodecamp.org/curriculum/project-euler/minkowski-sums.png" style="background-color: white; padding: 10px;" />
+<img class="img-responsive center-block" alt="зображення S_3, S_4 та S_3 + S_4" src="https://cdn.freecodecamp.org/curriculum/project-euler/minkowski-sums.png" style="background-color: white; padding: 10px;" />
 
-How many sides does $S_{1864} + S_{1865} + \ldots + S_{1909}$ have?
+Скільки сторін має $S_{1864} + S_{1865} + \ldots + S_{1909}$?
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-229-four-representations-using-squares.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-229-four-representations-using-squares.md
index 0cf26db4593..0c918b8c4af 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-229-four-representations-using-squares.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-229-four-representations-using-squares.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4521000cf542c50ff64
-title: 'Problem 229: Four Representations using Squares'
+title: 'Завдання 229: чотири представлення через квадрат'
 challengeType: 1
 forumTopicId: 301872
 dashedName: problem-229-four-representations-using-squares
@@ -8,25 +8,25 @@ dashedName: problem-229-four-representations-using-squares
 
 # --description--
 
-Розглянемо число 3600. It is very special, because
+Розглянемо число 3600. Воно дуже особливе, оскільки
 
 $$\begin{align}   & 3600 = {48}^2 + {36}^2   \\\\
   & 3600 = {20}^2 + {2×40}^2 \\\\   & 3600 = {30}^2 + {3×30}^2 \\\\
   & 3600 = {45}^2 + {7×15}^2 \\\\ \end{align}$$
 
-Similarly, we find that $88201 = {99}^2 + {280}^2 = {287}^2 + 2 × {54}^2 = {283}^2 + 3 × {52}^2 = {197}^2 + 7 × {84}^2$.
+Аналогічно бачимо, що $88201 = {99}^2 + {280}^2 = {287}^2 + 2 × {54}^2 = {283}^2 + 3 × {52}^2 = {197}^2 + 7 × {84}^2$.
 
-In 1747, Euler proved which numbers are representable as a sum of two squares. We are interested in the numbers $n$ which admit representations of all of the following four types:
+У 1747 році Ейлер довів, які числа можна представити у вигляді суми двох квадратів. Нас цікавлять числа $n$, які відповідають таким чотирьом представленням:
 
 $$\begin{align}   & n = {a_1}^2 + {b_1}^2  \\\\
   & n = {a_2}^2 + 2{b_2}^2 \\\\   & n = {a_3}^2 + 3{b_3}^2 \\\\
   & n = {a_7}^2 + 7{b_7}^2 \\\\ \end{align}$$
 
-where the $a_k$ and $b_k$ are positive integers.
+де $a_k$ та $b_k$ є натуральними числами.
 
-There are 75373 such numbers that do not exceed ${10}^7$.
+Існує 75373 чисел, які не перевищують ${10}^7$.
 
-How many such numbers are there that do not exceed $2 × {10}^9$?
+Скільки існує чисел, які не перевищують $2 × {10}^9$?
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-230-fibonacci-words.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-230-fibonacci-words.md
index 970d9024517..27539444577 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-230-fibonacci-words.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-230-fibonacci-words.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4531000cf542c50ff65
-title: 'Problem 230: Fibonacci Words'
+title: 'Завдання 230: слова Фібоначчі'
 challengeType: 1
 forumTopicId: 301874
 dashedName: problem-230-fibonacci-words
@@ -8,28 +8,28 @@ dashedName: problem-230-fibonacci-words
 
 # --description--
 
-For any two strings of digits, $A$ and $B$, we define $F_{A,B}$ to be the sequence ($A, B, AB, BAB, ABBAB, \ldots$) in which each term is the concatenation of the previous two.
+Для будь-яких двох рядків $A$ та $B$ з цифр, визначимо $F_{A,B}$ як послідовність ($A, B, AB, BAB, ABBAB, \ldots$), де кожен наступний елемент складається з двох попередніх.
 
-Further, we define $D_{A,B}(n)$ to be the $n^{\text{th}}$ digit in the first term of $F_{A,B}$ that contains at least $n$ digits.
+Потім визначимо $D_{A,B}(n)$ як $n^{\text{-ну}}$ цифру першого елемента послідовності $F_{A,B}$, що містить принаймні $n$ цифр.
 
-Example:
+Наприклад:
 
-Let $A = 1\\,415\\,926\\,535$, $B = 8\\,979\\,323\\,846$. We wish to find $D_{A,B}(35)$, say.
+Нехай $A = 1\\,415\\,926\\,535$, $B = 8\\,979\\,323\\,846$. Припустимо, ми хочемо знайти $D_{A,B}(35)$.
 
-The first few terms of $F_{A,B}$ are:
+Першими елементами $F_{A,B}$ є:
 
 $$\begin{align}   & 1\\,415\\,926\\,535 \\\\
   & 8\\,979\\,323\\,846 \\\\   & 14\\,159\\,265\\,358\\,979\\,323\\,846 \\\\
   & 897\\,932\\,384\\,614\\,159\\,265\\,358\\,979\\,323\\,846 \\\\ & 14\\,159\\,265\\,358\\,979\\,323\\,846\\,897\\,932\\,384\\,614\\,15\color{red}{9}\\,265\\,358\\,979\\,323\\,846 \end{align}$$
 
-Then $D_{A,B}(35)$ is the ${35}^{\text{th}}$ digit in the fifth term, which is 9.
+Тоді $D_{A,B}(35)$ є ${35}^{\text{-ою}}$ цифрою п’ятого елемента, тобто 9.
 
-Now we use for $A$ the first 100 digits of $π$ behind the decimal point:
+Тепер за значення $A$ візьмемо перші 100 цифр $π$ після десяткової коми:
 
 $$\begin{align}   & 14\\,159\\,265\\,358\\,979\\,323\\,846\\,264\\,338\\,327\\,950\\,288\\,419\\,716\\,939\\,937\\,510 \\\\
   & 58\\,209\\,749\\,445\\,923\\,078\\,164\\,062\\,862\\,089\\,986\\,280\\,348\\,253\\,421\\,170\\,679 \end{align}$$
 
-and for $B$ the next hundred digits:
+та наступні 100 цифр за значення $B$:
 
 $$\begin{align}   & 82\\,148\\,086\\,513\\,282\\,306\\,647\\,093\\,844\\,609\\,550\\,582\\,231\\,725\\,359\\,408\\,128 \\\\
   & 48\\,111\\,745\\,028\\,410\\,270\\,193\\,852\\,110\\,555\\,964\\,462\\,294\\,895\\,493\\,038\\,196 \end{align}$$
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-231-the-prime-factorisation-of-binomial-coefficients.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-231-the-prime-factorisation-of-binomial-coefficients.md
index cefd8fded72..2326f0ffeed 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-231-the-prime-factorisation-of-binomial-coefficients.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-231-the-prime-factorisation-of-binomial-coefficients.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4531000cf542c50ff66
-title: 'Problem 231: The prime factorisation of binomial coefficients'
+title: 'Завдання 231: розклад біноміальних коефіцієнтів на прості множники'
 challengeType: 1
 forumTopicId: 301875
 dashedName: problem-231-the-prime-factorisation-of-binomial-coefficients
@@ -8,13 +8,13 @@ dashedName: problem-231-the-prime-factorisation-of-binomial-coefficients
 
 # --description--
 
-The binomial coefficient $\displaystyle\binom{10}{3} = 120$.
+Біноміальний коефіцієнт $\displaystyle\binom{10}{3} = 120$.
 
-$120 = 2^3 × 3 × 5 = 2 × 2 × 2 × 3 × 5$, and $2 + 2 + 2 + 3 + 5 = 14$.
+$120 = 2^3 × 3 × 5 = 2 × 2 × 2 × 3 × 5$ та $2 + 2 + 2 + 3 + 5 = 14$.
 
-So the sum of the terms in the prime factorisation of $\displaystyle\binom{10}{3}$ is $14$.
+Тож сумою членів розкладу на прості множники $\displaystyle\binom{10}{3}$ є $14$.
 
-Find the sum of the terms in the prime factorisation of $\binom{20\\,000\\,000}{15\\,000\\,000}$.
+Знайдіть суму членів розкладу на прості множники $\binom{20\\,000\\,000}{15\\,000\\,000}$.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-232-the-race.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-232-the-race.md
index f9dcba95419..d70bd8b4120 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-232-the-race.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-232-the-race.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4551000cf542c50ff67
-title: 'Problem 232: The Race'
+title: 'Завдання 232: перегони'
 challengeType: 1
 forumTopicId: 301876
 dashedName: problem-232-the-race
@@ -8,17 +8,17 @@ dashedName: problem-232-the-race
 
 # --description--
 
-Two players share an unbiased coin and take it in turns to play "The Race".
+Двоє гравців мають симетричну монетку і по черзі використовують її під час свого ходу в грі «Перегони».
 
-On Player 1's turn, he tosses the coin once: if it comes up Heads, he scores one point; if it comes up Tails, he scores nothing.
+Гравець 1 кидає монетку один раз. Якщо випадає орел, то гравець отримує бал, а якщо решка — нічого.
 
-On Player 2's turn, she chooses a positive integer $T$ and tosses the coin $T$ times: if it comes up all Heads, she scores $2^{T - 1}$ points; otherwise, she scores nothing.
+Гравець 2 обирає додатне число $T$ і кидає монету $T$ рази. Якщо кожен раз випадає орел, гравець отримує $2^{T - 1}$ балів, а якщо решка — нічого.
 
-Player 1 goes first. The winner is the first to 100 or more points.
+Гравець 1 ходить першим. Переможе той, хто першим набере 100 або більше балів.
 
-On each turn Player 2 selects the number, $T$, of coin tosses that maximises the probability of her winning.
+Кожного разу гравець 2 обирає число спроб підкинути монету $T$, що збільшують ймовірність виграшу.
 
-What is the probability that Player 2 wins?
+Яка ймовірність того, що виграє гравець 2?
 
 Дайте відповідь, заокруглену до восьми знаків після коми у форматі 0.abcdefgh.
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-233-lattice-points-on-a-circle.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-233-lattice-points-on-a-circle.md
index 7c0e3f3bad2..a2f01c883fd 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-233-lattice-points-on-a-circle.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-233-lattice-points-on-a-circle.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4551000cf542c50ff68
-title: 'Problem 233: Lattice points on a circle'
+title: 'Завдання 233: точки сітки на колі'
 challengeType: 1
 forumTopicId: 301877
 dashedName: problem-233-lattice-points-on-a-circle
@@ -8,11 +8,11 @@ dashedName: problem-233-lattice-points-on-a-circle
 
 # --description--
 
-Let $f(N)$ be the number of points with integer coordinates that are on a circle passing through $(0,0)$, $(N,0)$,$(0,N)$, and $(N,N)$.
+Нехай $f(N)$ буде кількістю точок з цілочисельними координатами, які знаходяться на колі, що проходить через $(0,0)$, $(N,0)$,$(0,N)$ та $(N,N)$.
 
-It can be shown that $f(10000) = 36$.
+Можна зобразити, що $f(10000) = 36$.
 
-What is the sum of all positive integers $N ≤ {10}^{11}$ such that $f(N) = 420$?
+Якою буде сума всіх натуральних чисел $N ≤ {10}^{11}$, за яких $f(N) = 420$?
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-234-semidivisible-numbers.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-234-semidivisible-numbers.md
index 9e45d750fc7..11cd9cf4e2f 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-234-semidivisible-numbers.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-234-semidivisible-numbers.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4571000cf542c50ff69
-title: 'Problem 234: Semidivisible numbers'
+title: 'Завдання 234: напівподільні числа'
 challengeType: 1
 forumTopicId: 301878
 dashedName: problem-234-semidivisible-numbers
@@ -8,15 +8,15 @@ dashedName: problem-234-semidivisible-numbers
 
 # --description--
 
-For an integer $n ≥ 4$, we define the lower prime square root of $n$, denoted by $lps(n)$, as the $\text{largest prime} ≤ \sqrt{n}$ and the upper prime square root of $n$, $ups(n)$, as the $\text{smallest prime} ≥ \sqrt{n}$.
+Для цілого числа $n ≥ 4$, визначимо нижній простий квадратний корінь з $n$ як $lps(n)$, оскільки $\text{найбільше просте число} ≤ \sqrt{n}$, та верхній простий квадратний корінь з $n$ як $ups(n)$, оскільки $\text{найменше просте число} ≥ \sqrt{n}$.
 
-So, for example, $lps(4) = 2 = ups(4)$, $lps(1000) = 31$, $ups(1000) = 37$.
+Так, наприклад, $lps(4) = 2 = ups(4)$, $lps(1000) = 31$, $ups(1000) = 37$.
 
-Let us call an integer $n ≥ 4$ semidivisible, if one of $lps(n)$ and $ups(n)$ divides $n$, but not both.
+Назвемо ціле число $n ≥ 4$ напівподільним, якщо $n$ ділиться на $lps(n)$ або $ups(n)$, але не на обидва.
 
-The sum of the semidivisible numbers not exceeding 15 is 30, the numbers are 8, 10 and 12. 15 is not semidivisible because it is a multiple of both $lps(15) = 3$ and $ups(15) = 5$. As a further example, the sum of the 92 semidivisible numbers up to 1000 is 34825.
+Сума всіх напівподільних чисел не більших за 15 дорівнює 30 (це числа 8, 10 та 12). 15 не є напівподільним, оскільки воно кратне як $lps(15) = 3$, так $ups(15) = 5$. Також, наприклад, сума 92-ох напівподільних чисел до 1000 дорівнює 34825.
 
-What is the sum of all semidivisible numbers not exceeding 999966663333?
+Якою буде сума всіх напівподільних чисел не більших за 999966663333?
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-235-an-arithmetic-geometric-sequence.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-235-an-arithmetic-geometric-sequence.md
index ee862f989cb..3adb808d0ab 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-235-an-arithmetic-geometric-sequence.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-235-an-arithmetic-geometric-sequence.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4571000cf542c50ff6a
-title: 'Problem 235: An Arithmetic Geometric sequence'
+title: 'Завдання 235: арифметично-геометрична послідовність'
 challengeType: 1
 forumTopicId: 301879
 dashedName: problem-235-an-arithmetic-geometric-sequence
@@ -8,11 +8,11 @@ dashedName: problem-235-an-arithmetic-geometric-sequence
 
 # --description--
 
-Given is the arithmetic-geometric sequence $u(k) = (900 - 3k)r^{k - 1}$.
+Дано арифметично-геометричну послідовність $u(k) = (900 - 3k)r^{k - 1}$.
 
-Let $s(n) = \sum_{k=1 \ldots n} u(k)$.
+Нехай $s(n) = \sum_{k=1 \ldots n} u(k)$.
 
-Find the value of $r$ for which $s(5000) = -600\\,000\\,000\\,000$.
+Знайдіть значення $r$, за якого $s(5000) = -600\\,000\\,000\\,000$.
 
 Дайте відповідь, заокруглену до дванадцяти знаків після коми.
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-236-luxury-hampers.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-236-luxury-hampers.md
index 387fe499892..6a02634e085 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-236-luxury-hampers.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-236-luxury-hampers.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4591000cf542c50ff6b
-title: 'Problem 236: Luxury Hampers'
+title: 'Завдання 236: подарункові кошики'
 challengeType: 1
 forumTopicId: 301881
 dashedName: problem-236-luxury-hampers
@@ -8,17 +8,17 @@ dashedName: problem-236-luxury-hampers
 
 # --description--
 
-Suppliers 'A' and 'B' provided the following numbers of products for the luxury hamper market:
+Постачальники А та Б надали таку кількість продукції для ринку подарункових кошиків:
 
-| Product            | 'A'  | 'B'  |
-| ------------------ | ---- | ---- |
-| Beluga Caviar      | 5248 | 640  |
-| Christmas Cake     | 1312 | 1888 |
-| Gammon Joint       | 2624 | 3776 |
-| Vintage Port       | 5760 | 3776 |
-| Champagne Truffles | 3936 | 5664 |
+| Товар               | A    | Б    |
+| ------------------- | ---- | ---- |
+| Чорна ікра          | 5248 | 640  |
+| Різдвяний пиріг     | 1312 | 1888 |
+| Хамон               | 2624 | 3776 |
+| Витриманий портвейн | 5760 | 3776 |
+| Трюфелі             | 3936 | 5664 |
 
-Although the suppliers try very hard to ship their goods in perfect condition, there is inevitably some spoilage - i.e. products gone bad.
+Хоча постачальники дуже стараються доставити свій товар в ідеальному стані, псування неминуче. Продукти зіпсувались.
 
 The suppliers compare their performance using two types of statistic:
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-237-tours-on-a-4-x-n-playing-board.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-237-tours-on-a-4-x-n-playing-board.md
index 449af5d4392..a149871af14 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-237-tours-on-a-4-x-n-playing-board.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-237-tours-on-a-4-x-n-playing-board.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4591000cf542c50ff6c
-title: 'Problem 237: Tours on a 4 x n playing board'
+title: 'Завдання 237: маршрути на ігровій дошці 4 x n'
 challengeType: 1
 forumTopicId: 301882
 dashedName: problem-237-tours-on-a-4-x-n-playing-board
@@ -8,18 +8,18 @@ dashedName: problem-237-tours-on-a-4-x-n-playing-board
 
 # --description--
 
-Let $T(n)$ be the number of tours over a 4 × $n$ playing board such that:
+Нехай $T(n)$ буде кількістю маршрутів на ігровій дошці 4 × $n$ так, що:
 
-- The tour starts in the top left corner.
-- The tour consists of moves that are up, down, left, or right one square.
-- The tour visits each square exactly once.
-- The tour ends in the bottom left corner.
+- Маршрут починається у верхньому лівому куті.
+- Маршрут складається з ходів вгору, вниз, вліво або вправо на одну клітинку.
+- Маршрут проходить по кожному квадрату лише один раз.
+- Маршрут закінчується в нижньому лівому куті.
 
-The diagram shows one tour over a 4 × 10 board:
+На малюнку зображено один із маршрутів на дошці 4 × 10:
 
-<img class="img-responsive center-block" alt="one tour over 4 x 10 board" src="https://cdn.freecodecamp.org/curriculum/project-euler/tours-on-a-4-x-n-playing-board.gif" style="background-color: white; padding: 10px;" />
+<img class="img-responsive center-block" alt="один із маршрутів на дошці 4 х 10" src="https://cdn.freecodecamp.org/curriculum/project-euler/tours-on-a-4-x-n-playing-board.gif" style="background-color: white; padding: 10px;" />
 
-$T(10)$ is 2329. Чому дорівнює $T({10}^{12})$ modulo ${10}^8$?
+$T(10)$ дорівнює 2329. Чому дорівнює $T({10}^{12})$ modulo ${10}^8$?
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-238-infinite-string-tour.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-238-infinite-string-tour.md
index e70517aac32..405da5e602f 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-238-infinite-string-tour.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-238-infinite-string-tour.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f45b1000cf542c50ff6d
-title: 'Problem 238: Infinite string tour'
+title: 'Завдання 238: нескінченна подорож по рядках'
 challengeType: 1
 forumTopicId: 301883
 dashedName: problem-238-infinite-string-tour
@@ -8,26 +8,26 @@ dashedName: problem-238-infinite-string-tour
 
 # --description--
 
-Create a sequence of numbers using the "Blum Blum Shub" pseudo-random number generator:
+Створіть послідовність чисел, використовуючи генератор псевдовипадкових чисел Блум Блум Шуба:
 
 $$ s_0 = 14025256 \\\\
 s_{n + 1} = {s_n}^2 \\; mod \\; 20\\,300\\,713 $$
 
-Concatenate these numbers $s_0s_1s_2\ldots$ to create a string $w$ of infinite length. Then, $w = 14025256741014958470038053646\ldots$
+Об’єднайте ці числа $s_0s_1s_2\ldots$, щоб створити рядок $w$ нескінченної довжини. Тоді $w = 14025256741014958470038053646\ldots$
 
-For a positive integer $k$, if no substring of $w$ exists with a sum of digits equal to $k$, $p(k)$ is defined to be zero. If at least one substring of $w$ exists with a sum of digits equal to $k$, we define $p(k) = z$, where $z$ is the starting position of the earliest such substring.
+Якщо для $w$ не існує підрядка, сума цифр якого дорівнює натуральному числу $k$, то вважається, що $p(k)$ дорівнює нулю. Якщо для $w$ існує принаймні один підрядок, сума цифр якого дорівнює $k$, то $p(k) = z$, де $z$ є початковою позицією першого такого підрядка.
 
-For instance:
+Наприклад:
 
-The substrings 1, 14, 1402, … with respective sums of digits equal to 1, 5, 7, … start at position 1, hence $p(1) = p(5) = p(7) = \ldots = 1$.
+Підрядки 1, 14, 1402, … суми цифр яких дорівнюють 1, 5, 7, … починаються з позиції 1. Отже, $p(1) = p(5) = p(7) = \ldots = 1$.
 
-The substrings 4, 402, 4025, … with respective sums of digits equal to 4, 6, 11, … start at position 2, hence $p(4) = p(6) = p(11) = \ldots = 2$.
+Підрядки 4, 402, 4025, … суми цифр яких дорівнюють 4, 6, 11, … починаються з позиції 2. Отже, $p(4) = p(6) = p(11) = \ldots = 2$.
 
-The substrings 02, 0252, … with respective sums of digits equal to 2, 9, … start at position 3, hence $p(2) = p(9) = \ldots = 3$.
+Підрядки 02, 0252, … суми цифр яких дорівнюють 2, 9, … починаються з позиції 3. Отже, $p(2) = p(9) = \ldots = 3$.
 
-Note that substring 025 starting at position 3, has a sum of digits equal to 7, but there was an earlier substring (starting at position 1) with a sum of digits equal to 7, so $p(7) = 1$, not 3.
+Зауважте, що сума цифр підрядка 025, який починається з позиції 3, дорівнює 7, однак існує попередній підрядок (починається з позиції 1), сума цифр якого дорівнює 7, тому $p(7) = 1$, а не 3.
 
-We can verify that, for $0 &lt; k ≤ {10}^3$, $\sum p(k) = 4742$.
+Можна довести, що $\sum p(k) = 4742$ за умови $0 &lt; k ≤ {10}^3$.
 
 Знайдіть $\sum p(k)$ за умови $0 &lt; k ≤ 2 \times {10}^{15}$.
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-239-twenty-two-foolish-primes.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-239-twenty-two-foolish-primes.md
index 7538054068c..2f7435e5e7a 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-239-twenty-two-foolish-primes.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-239-twenty-two-foolish-primes.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f45c1000cf542c50ff6e
-title: 'Problem 239: Twenty-two Foolish Primes'
+title: 'Завдання 239: 22 безглуздих простих числа'
 challengeType: 1
 forumTopicId: 301884
 dashedName: problem-239-twenty-two-foolish-primes
@@ -8,9 +8,9 @@ dashedName: problem-239-twenty-two-foolish-primes
 
 # --description--
 
-A set of disks numbered 1 through 100 are placed in a line in random order.
+В ряді розміщено множину дисків з номерами від 1 до 100 у довільному порядку.
 
-What is the probability that we have a partial derangement such that exactly 22 prime number discs are found away from their natural positions? (Any number of non-prime disks may also be found in or out of their natural positions.)
+Яка ймовірність того, що ми зіткнемося з частковою перестановкою, у якій 22 диски з простими числами виявляться не на своїх місцях? (Будь-яка кількість дисків з непростими числами може перебувати на своєму або чужому місці).
 
 Дайте відповідь, заокруглену до дванадцяти знаків після коми у форматі 0.abcdefghijkl.
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-240-top-dice.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-240-top-dice.md
index 93d31eec8ca..2944c393ab2 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-240-top-dice.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-240-top-dice.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f45d1000cf542c50ff6f
-title: 'Problem 240: Top Dice'
+title: 'Завдання 240: кості з найбільшими числами'
 challengeType: 1
 forumTopicId: 301887
 dashedName: problem-240-top-dice
@@ -8,13 +8,13 @@ dashedName: problem-240-top-dice
 
 # --description--
 
-There are 1111 ways in which five 6-sided dice (sides numbered 1 to 6) can be rolled so that the top three sum to 15. Some examples are:
+Якщо кинути п’ять 6-гранних кубиків (грані пронумеровано від 1 до 6), у 1111 випадках сума трьох найбільших чисел дорівнюватиме 15. Ось декілька прикладів:
 
 $$\begin{align}   & D_1,D_2,D_3,D_4,D_5 = 4,3,6,3,5 \\\\
   & D_1,D_2,D_3,D_4,D_5 = 4,3,3,5,6 \\\\   & D_1,D_2,D_3,D_4,D_5 = 3,3,3,6,6 \\\\
   & D_1,D_2,D_3,D_4,D_5 = 6,6,3,3,3 \end{align}$$
 
-In how many ways can twenty 12-sided dice (sides numbered 1 to 12) be rolled so that the top ten sum to 70?
+У скількох випадках сума десятьох найбільших чисел дорівнюватиме 70, якщо кинути двадцять 12-гранних кубиків (грані пронумеровано від 1 до 12)?
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-241-perfection-quotients.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-241-perfection-quotients.md
index 970866d23d7..e8d16d9e4b7 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-241-perfection-quotients.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-241-perfection-quotients.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f45d1000cf542c50ff70
-title: 'Problem 241: Perfection Quotients'
+title: 'Завдання 241: коефіцієнт досконалості'
 challengeType: 1
 forumTopicId: 301888
 dashedName: problem-241-perfection-quotients
@@ -8,13 +8,13 @@ dashedName: problem-241-perfection-quotients
 
 # --description--
 
-For a positive integer $n$, let $σ(n)$ be the sum of all divisors of $n$, so e.g. $σ(6) = 1 + 2 + 3 + 6 = 12$.
+Нехай $σ(n)$ за натурального числа $n$ буде сумою всіх дільників $n$. Наприклад, $σ(6) = 1 + 2 + 3 + 6 = 12$.
 
-A perfect number, as you probably know, is a number with $σ(n) = 2n$.
+Досконале число, як ви, напевно, знаєте, — це число, у котрого $σ(n) = 2n$.
 
-Let us define the perfection quotient of a positive integer as $p(n) = \frac{σ(n)}{n}$.
+Визначимо коефіцієнт досконалості натурального числа як $p(n) = \frac{σ(n)}{n}$.
 
-Find the sum of all positive integers $n ≤ {10}^{18}$ for which $p(n)$ has the form $k + \frac{1}{2}$, where $k$ is an integer.
+Знайдіть суму всіх натуральних чисел $n ≤ {10}^{18}$, за яких $p(n)$ має вигляд $k + \frac{1}{2}$, де $k$ є цілим числом.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-242-odd-triplets.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-242-odd-triplets.md
index 6610132ee10..77c4b4b178d 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-242-odd-triplets.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-242-odd-triplets.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f45f1000cf542c50ff71
-title: 'Problem 242: Odd Triplets'
+title: 'Завдання 242: непарні трійки'
 challengeType: 1
 forumTopicId: 301889
 dashedName: problem-242-odd-triplets
@@ -8,13 +8,13 @@ dashedName: problem-242-odd-triplets
 
 # --description--
 
-Given the set {1,2,..., $n$}, we define $f(n, k)$ as the number of its $k$-element subsets with an odd sum of elements. For example, $f(5,3) = 4$, since the set {1,2,3,4,5} has four 3-element subsets having an odd sum of elements, i.e.: {1,2,4}, {1,3,5}, {2,3,4} and {2,4,5}.
+Дано множину {1,2,..., $n$}. Визначимо $f(n, k)$ як кількість її підмножин з $k$ елементів, що утворюють непарну суму. Наприклад, $f(5,3) = 4$, оскільки множина {1,2,3,4,5} містить чотири підмножини з 3 елементів, суми яких непарні: {1,2,4}, {1,3,5}, {2,3,4} та {2,4,5}.
 
-When all three values $n$, $k$ and $f(n, k)$ are odd, we say that they make an odd-triplet $[n, k, f(n, k)]$.
+Якщо усі три значення $n$, $k$ та $f(n, k)$ непарні, вони утворюють непарну трійку $[n, k, f(n, k)]$.
 
-There are exactly five odd-triplets with $n ≤ 10$, namely: $[1, 1, f(1, 1) = 1]$, $[5, 1, f(5, 1) = 3]$, $[5, 5, f(5, 5) = 1]$, $[9, 1, f(9, 1) = 5]$ and $[9, 9, f(9, 9) = 1]$.
+Існує лише п’ять непарних трійок за умови $n ≤ 10$, а саме: $[1, 1, f(1, 1) = 1]$, $[5, 1, f(5, 1) = 3]$, $[5, 5, f(5, 5) = 1]$, $[9, 1, f(9, 1) = 5]$ та $[9, 9, f(9, 9) = 1]$.
 
-How many odd-triplets are there with $n ≤ {10}^{12}$?
+Скільки існує непарних трійок за умови $n ≤ {10}^{12}$?
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-243-resilience.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-243-resilience.md
index 2dcd7f42a33..10d8d8e9709 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-243-resilience.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-243-resilience.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4601000cf542c50ff73
-title: 'Problem 243: Resilience'
+title: 'Завдання 243: стійкість'
 challengeType: 1
 forumTopicId: 301890
 dashedName: problem-243-resilience
@@ -8,19 +8,19 @@ dashedName: problem-243-resilience
 
 # --description--
 
-A positive fraction whose numerator is less than its denominator is called a proper fraction.
+Додатний дріб, у якого чисельник менший за знаменник, називається правильним.
 
-For any denominator, $d$, there will be $d−1$ proper fractions; for example, with $d = 12$:
+Для будь-якого знаменника $d$ існує $d−1$ правильних дробів. Наприклад, за умови $d = 12$:
 
 $$\frac{1}{12}, \frac{2}{12}, \frac{3}{12}, \frac{4}{12}, \frac{5}{12}, \frac{6}{12}, \frac{7}{12}, \frac{8}{12}, \frac{9}{12}, \frac{10}{12}, \frac{11}{12}$$
 
-We shall call a fraction that cannot be cancelled down a resilient fraction.
+Назвемо дріб, який неможливо скоротити, стійким.
 
-Furthermore we shall define the resilience of a denominator, $R(d)$, to be the ratio of its proper fractions that are resilient; for example, $R(12) = \frac{4}{11}$.
+Також визначимо стійкість знаменника $R(d)$ як відношення стійких правильних дробів до загальної кількості правильних дробів із цим знаменником. Наприклад, $R(12) = \frac{4}{11}$.
 
-In fact, $d = 12$ is the smallest denominator having a resilience $R(d) &lt; \frac{4}{10}$.
+Фактично, $d = 12$ є найменшим знаменником зі стійкістю $R(d) &lt; \frac{4}{10}$.
 
-Find the smallest denominator $d$, having a resilience $R(d) &lt; \frac{15\\,499}{94\\,744}$.
+Знайдіть найменший знаменник $d$ зі стійкістю $R(d) &lt; \frac{15\\,499}{94\\,744}$.
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-244-sliders.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-244-sliders.md
index 621ea9ad652..59004eadd44 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-244-sliders.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-244-sliders.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f4601000cf542c50ff72
-title: 'Problem 244: Sliders'
+title: 'Завдання 244: повзунки'
 challengeType: 1
 forumTopicId: 301891
 dashedName: problem-244-sliders
@@ -8,27 +8,27 @@ dashedName: problem-244-sliders
 
 # --description--
 
-You probably know the game Fifteen Puzzle. Here, instead of numbered tiles, we have seven red tiles and eight blue tiles.
+Мабуть, ви знаєте гру «П’ятнашки». У цьому завданні замість плиток з числами маємо сім червоних плиток та вісім синіх плиток.
 
-A move is denoted by the uppercase initial of the direction (Left, Right, Up, Down) in which the tile is slid, e.g. starting from configuration ($S$), by the sequence $LULUR$ we reach the configuration ($E$):
+Ходи позначаються першою буквою напрямку англійською мовою (вліво — L, вправо — R, вверх — U, вниз — D). Наприклад, починаючи з конфігурації $S$ та виконавши послідовність ходів $LULUR$, отримаємо конфігурацію $E$:
 
-($S$) <img class="img-responsive" alt="configuration S" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliders-1.gif" style="display: inline-block; background-color: white; padding: 10px;" />, ($E$) <img class="img-responsive" alt="configuration E" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliders-2.gif" style="display: inline-block; background-color: white; padding: 10px;" />
+($S$) <img class="img-responsive" alt="configuration S" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliders-1.gif" style="display: inline-block; background-color: white; padding: 10px;" />, ($E$) <img class="img-responsive" alt="конфігурація E" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliders-2.gif" style="display: inline-block; background-color: white; padding: 10px;" />
 
-For each path, its checksum is calculated by (pseudocode):
+Контрольна сума кожного шляху обчислюється так (псевдокод):
 
-$$\begin{align}   & \text{checksum} = 0 \\\\
-  & \text{checksum} = (\text{checksum} × 243 + m_1) \\; \text{mod} \\; 100\\,000\\,007 \\\\   & \text{checksum} = (\text{checksum} × 243 + m_2) \\; \text{mod} \\; 100\\,000\\,007 \\\\
-  & \ldots \\\\ & \text{checksum} = (\text{checksum} × 243 + m_n) \\; \text{mod} \\; 100\\,000\\,007 \end{align}$$
+$$\begin{align}   & \text{контрсума} = 0 \\\\
+  & \text{контрсума} = (\text{контрсума} × 243 + m_1) \\; \text{mod} \\; 100\\,000\\,007 \\\\   & \text{контрсума} = (\text{контрсума} × 243 + m_2) \\; \text{mod} \\; 100\\,000\\,007 \\\\
+  & \ldots \\\\ & \text{контрсума} = (\text{контрсума} × 243 + m_n) \\; \text{mod} \\; 100\\,000\\,007 \end{align}$$
 
-where $m_k$ is the ASCII value of the $k^{\text{th}}$ letter in the move sequence and the ASCII values for the moves are:
+де $m_k$ є ASCII кодом $k^{\text{-ної}}$ літери в послідовності ходів. Відповідні ASCII коди для ходів:
 
 $$\begin{array}{|c|c|} \hline L & 76 \\\\ \hline R & 82 \\\\ \hline U & 85 \\\\ \hline D & 68 \\\\ \hline \end{array}$$
 
-For the sequence $LULUR$ given above, the checksum would be 19761398. Now, starting from configuration ($S$), find all shortest ways to reach configuration ($T$).
+Для послідовності $LULUR$, зазначеної вище, контрольна сума становить 19761398. Тепер, починаючи з конфігурації $S$, знайдіть усі найкоротші шляхи, щоб досягти конфігурації $T$.
 
-($S$) <img class="img-responsive center-block" alt="configuration S" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliders-3.gif" style="display: inline-block; background-color: white; padding: 10px;" />, ($T$) <img class="img-responsive center-block" alt="configuration T" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliders-4.gif" style="display: inline-block; background-color: white; padding: 10px;" />
+($S$) <img class="img-responsive center-block" alt="configuration S" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliders-3.gif" style="display: inline-block; background-color: white; padding: 10px;" />, ($T$) <img class="img-responsive center-block" alt="конфігурація T" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliders-4.gif" style="display: inline-block; background-color: white; padding: 10px;" />
 
-What is the sum of all checksums for the paths having the minimal length?
+Якою буде загальна сума всіх контрольних сум найкоротших шляхів?
 
 # --hints--
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-258-a-lagged-fibonacci-sequence.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-258-a-lagged-fibonacci-sequence.md
index 0e3696e7e93..308c0679984 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-258-a-lagged-fibonacci-sequence.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-201-to-300/problem-258-a-lagged-fibonacci-sequence.md
@@ -1,6 +1,6 @@
 ---
 id: 5900f46e1000cf542c50ff81
-title: 'Problem 258: A lagged Fibonacci sequence'
+title: 'Завдання 258: послідовність Фібоначчі із запізнюваннями'
 challengeType: 1
 forumTopicId: 301906
 dashedName: problem-258-a-lagged-fibonacci-sequence
@@ -8,10 +8,10 @@ dashedName: problem-258-a-lagged-fibonacci-sequence
 
 # --description--
 
-A sequence is defined as:
+Послідовність визначається як:
 
-- $g_k = 1$, for $0 ≤ k ≤ 1999$
-- $g_k = g_{k - 2000} + g_{k - 1999}$, for $k ≥ 2000$.
+- $g_k = 1$, за умови $0 ≤ k ≤ 1999$
+- $g_k = g_{k - 2000} + g_{k - 1999}$, за умови $k ≥ 2000$.
 
 Знайдіть $g_k$ mod 20092010 за умови $k = {10}^{18}$.
 
diff --git a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-459-flipping-game.md b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-459-flipping-game.md
index 42349a3e439..2ec75566c68 100644
--- a/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-459-flipping-game.md
+++ b/curriculum/challenges/ukrainian/18-project-euler/project-euler-problems-401-to-480/problem-459-flipping-game.md
@@ -17,7 +17,7 @@ dashedName: problem-459-flipping-game
 За один хід перевертаються всі диски у прямокутнику із такими властивостями:
 
 - у верхньому правому куті прямокутника знаходиться білий диск
-- шириною прямокутника є ідеальний квадрат (1, 4, 9, 16, ...)
+- шириною прямокутника є повний квадрат (1, 4, 9, 16, ...)
 - висотою прямокутника є трикутне число (1, 3, 6, 10, ...)
 
 <img class="img-responsive center-block" alt="перевертання всіх дисків у прямокутнику 4х3 на дошці 5х5" src="https://cdn.freecodecamp.org/curriculum/project-euler/flipping-game-1.png" style="background-color: white; padding: 10px;" />