From ecbd075b210c72567443683264cedd41e310981c Mon Sep 17 00:00:00 2001
From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Date: Fri, 5 Apr 2024 09:18:32 -0700
Subject: [PATCH] refactor(curriculum): expand split, reverse and join method
lessons for date formatter project (#54256)
---
.../meta.json | 34 ++-
.../65389211a8d86bbd876a2a74.md | 8 +-
.../65389306578c34be5c93bc35.md | 16 +-
.../6538935e2ab721beedb137c4.md | 8 +-
.../653898fa7eee37c57b960e35.md | 4 +-
.../65389a63d3b1d6c764c0e10e.md | 4 +-
.../65389de504d0f2ca10e92a57.md | 4 +-
.../65389eff4893facbbe6eae67.md | 4 +-
.../6607343c7909e562a2e3d94c.md | 285 ++++++++++++++++++
.../660736bde759eb64c3bd15c3.md | 263 ++++++++++++++++
.../66074463e8cc156e18142dbe.md | 272 +++++++++++++++++
.../660746a665a61c7075a0f457.md | 263 ++++++++++++++++
.../66074af5d2b4f373cb140d6a.md | 258 ++++++++++++++++
13 files changed, 1389 insertions(+), 34 deletions(-)
create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6607343c7909e562a2e3d94c.md
create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/660736bde759eb64c3bd15c3.md
create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/66074463e8cc156e18142dbe.md
create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/660746a665a61c7075a0f457.md
create mode 100644 curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/66074af5d2b4f373cb140d6a.md
diff --git a/curriculum/challenges/_meta/learn-the-date-object-by-building-a-date-formatter/meta.json b/curriculum/challenges/_meta/learn-the-date-object-by-building-a-date-formatter/meta.json
index 7577a06555b..4177ffbdfc4 100644
--- a/curriculum/challenges/_meta/learn-the-date-object-by-building-a-date-formatter/meta.json
+++ b/curriculum/challenges/_meta/learn-the-date-object-by-building-a-date-formatter/meta.json
@@ -81,32 +81,52 @@
"title": "Step 17"
},
{
- "id": "65389211a8d86bbd876a2a74",
+ "id": "6607343c7909e562a2e3d94c",
"title": "Step 18"
},
{
- "id": "65389306578c34be5c93bc35",
+ "id": "660736bde759eb64c3bd15c3",
"title": "Step 19"
},
{
- "id": "6538935e2ab721beedb137c4",
+ "id": "66074463e8cc156e18142dbe",
"title": "Step 20"
},
{
- "id": "653898fa7eee37c57b960e35",
+ "id": "660746a665a61c7075a0f457",
"title": "Step 21"
},
{
- "id": "65389a63d3b1d6c764c0e10e",
+ "id": "66074af5d2b4f373cb140d6a",
"title": "Step 22"
},
{
- "id": "65389de504d0f2ca10e92a57",
+ "id": "65389211a8d86bbd876a2a74",
"title": "Step 23"
},
{
- "id": "65389eff4893facbbe6eae67",
+ "id": "65389306578c34be5c93bc35",
"title": "Step 24"
+ },
+ {
+ "id": "6538935e2ab721beedb137c4",
+ "title": "Step 25"
+ },
+ {
+ "id": "653898fa7eee37c57b960e35",
+ "title": "Step 26"
+ },
+ {
+ "id": "65389a63d3b1d6c764c0e10e",
+ "title": "Step 27"
+ },
+ {
+ "id": "65389de504d0f2ca10e92a57",
+ "title": "Step 28"
+ },
+ {
+ "id": "65389eff4893facbbe6eae67",
+ "title": "Step 29"
}
],
"helpCategory": "JavaScript"
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
index ae0de7e0f49..0b500c14bca 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md
@@ -1,13 +1,15 @@
---
id: 65389211a8d86bbd876a2a74
-title: Step 18
+title: Step 23
challengeType: 0
-dashedName: step-18
+dashedName: step-23
---
# --description--
-Split `formattedDate` into an array of substrings with the `.split()` method and use a `"-"` as the separator.
+Now it is time to apply what you learned in the previous steps.
+
+Split the `formattedDate` string into an array of substrings. Use a `"-"` for the separator.
# --hints--
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
index 8a2d1658ddb..982a6c784e2 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389306578c34be5c93bc35.md
@@ -1,25 +1,17 @@
---
id: 65389306578c34be5c93bc35
-title: Step 19
+title: Step 24
challengeType: 0
-dashedName: step-19
+dashedName: step-24
---
# --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.
+Next, reverse the `formattedDate` array. Make sure to use method chaining.
# --hints--
-You should use the `.reverse()` method to reverse the order of the array returned by `.split()`.
+You should chain the `.reverse()` method to your `.split()` method.
```js
assert(code.match(/\.reverse\(\s*\)/g));
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
index e04fe176fea..918a6df714b 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6538935e2ab721beedb137c4.md
@@ -1,15 +1,15 @@
---
id: 6538935e2ab721beedb137c4
-title: Step 20
+title: Step 25
challengeType: 0
-dashedName: step-20
+dashedName: step-25
---
# --description--
-Finally, you need to create a string with the reversed array elements separated by dash (`-`) character.
+Finally, join the results from the array reversal. Use a `"-"` as the separator. Remember to use method chaining.
-Use the `.join()` method to join the reversed array elements into a string and use a `"-"` for the separator.
+Test out your changes by selecting the `Year, Month, Day` option from the dropdown menu. The date should now be displayed in the format `yyyy-mm-dd`.
# --hints--
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
index d01f5650f13..09062d66b24 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md
@@ -1,8 +1,8 @@
---
id: 653898fa7eee37c57b960e35
-title: Step 21
+title: Step 26
challengeType: 0
-dashedName: step-21
+dashedName: step-26
---
# --description--
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
index 4990dd330a9..32c3b681c4e 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md
@@ -1,8 +1,8 @@
---
id: 65389a63d3b1d6c764c0e10e
-title: Step 22
+title: Step 27
challengeType: 0
-dashedName: step-22
+dashedName: step-27
---
# --description--
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
index 2fe1b6fccfa..541734d4e68 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md
@@ -1,8 +1,8 @@
---
id: 65389de504d0f2ca10e92a57
-title: Step 23
+title: Step 28
challengeType: 0
-dashedName: step-23
+dashedName: step-28
---
# --description--
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
index 350cb14ac90..71f10669083 100644
--- a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md
@@ -1,8 +1,8 @@
---
id: 65389eff4893facbbe6eae67
-title: Step 24
+title: Step 29
challengeType: 0
-dashedName: step-24
+dashedName: step-29
---
# --description--
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6607343c7909e562a2e3d94c.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6607343c7909e562a2e3d94c.md
new file mode 100644
index 00000000000..5aa44842d8e
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/6607343c7909e562a2e3d94c.md
@@ -0,0 +1,285 @@
+---
+id: 6607343c7909e562a2e3d94c
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+To format the date into `yyyy-mm-dd`, you will need to use the split, reverse, and join methods. But first, you will need to go through a few practice examples so you can better understand how to use them in the context of this project.
+
+The `split()` method is used to divide a string into substrings based on a specified separator. It then returns these substrings as elements of an array.
+
+Here is an example of taking the words `"Hello World"` and returning an array of one element:
+
+```js
+const greeting = "Hello World";
+greeting.split(); // ["Hello World"]
+```
+
+Create a new `const` variable called `exampleSentence` and assign it the result of `"selur pmaCedoCeerf".split()`.
+
+Then add a console statement to log the value of `exampleSentence`. Open up the console to see the result.
+
+# --hints--
+
+You should have a `const` variable called `exampleSentence`.
+
+```js
+assert.match(code, /const\s+exampleSentence\s*=/);
+```
+
+You should assign `"selur pmaCedoCeerf".split()` to your `exampleSentence` variable.
+
+```js
+assert.match(code, /const\s+exampleSentence\s*=\s*('|"|`)selur\s+pmaCedoCeerf\1\.split\(\)/);
+```
+
+You should have a `console.log` statement that logs the value of `exampleSentence`.
+
+```js
+assert.match(code, /console\.log\(\s*exampleSentence\s*\)/);
+```
+
+Your console statement should be below the `exampleSentence` variable assignment.
+
+```js
+const consoleStatementIndex = code.indexOf("console.log(exampleSentence)");
+const exampleSentenceIndex = code.indexOf("const exampleSentence");
+
+assert.isBelow(exampleSentenceIndex, consoleStatementIndex);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Learn the Date Object by Building a Date Formatter
+
+
+
+
+
+
Today's Date
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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--
+dateOptionsSelectElement.addEventListener("change", () => {
+ switch (dateOptionsSelectElement.value) {
+ case "yyyy-mm-dd":
+ currentDateParagraph.textContent = formattedDate
+ }
+});
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/660736bde759eb64c3bd15c3.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/660736bde759eb64c3bd15c3.md
new file mode 100644
index 00000000000..f6ac3ea307d
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/660736bde759eb64c3bd15c3.md
@@ -0,0 +1,263 @@
+---
+id: 660736bde759eb64c3bd15c3
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+The `split` method takes in a parameter known as a separator. The separator is used to tell the computer where each split should occur.
+
+Here is an example of using an empty string as a separator:
+
+```js
+const str = "hello";
+str.split(""); // returns ["h", "e", "l", "l", "o"]
+```
+
+Other examples of separators can include a space `" "`, or a hyphen `"-"`. If you don't provide a separator, the method will return an array with the original string as the only element.
+
+Update your `split` method, to use an empty string as a separator. Open up the console again to see the result.
+
+# --hints--
+
+Your `split` method should take in an empty string as a separator.
+
+```js
+assert.match(code, /const\s+exampleSentence\s*=\s*('|")selur\s+pmaCedoCeerf\1\.split\(\s*('|")\2\);?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Learn the Date Object by Building a Date Formatter
+
+
+
+
+
+
Today's Date
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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--
+const exampleSentence = "selur pmaCedoCeerf".split();
+console.log(exampleSentence);
+--fcc-editable-region--
+dateOptionsSelectElement.addEventListener("change", () => {
+ switch (dateOptionsSelectElement.value) {
+ case "yyyy-mm-dd":
+ currentDateParagraph.textContent = formattedDate
+ }
+});
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/66074463e8cc156e18142dbe.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/66074463e8cc156e18142dbe.md
new file mode 100644
index 00000000000..7afee858b44
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/66074463e8cc156e18142dbe.md
@@ -0,0 +1,272 @@
+---
+id: 66074463e8cc156e18142dbe
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+To reverse an array of elements, you can use the `reverse` method. This method reverses the order of the elements in the array in place. The first element becomes the last, and the last element becomes the first.
+
+Here is an example of using the `reverse` method:
+
+```js
+// returns [5, 4, 3, 2, 1]
+[1, 2, 3, 4, 5].reverse();
+```
+
+Chain the `reverse` method to your `split` method. Open up the console again to see the result.
+
+Remember that you learned how to chain methods in the previous project like this:
+
+```js
+method1().method2().method3();
+```
+
+# --hints--
+
+You should chain the `reverse` method to your `"selur pmaCedoCeerf".split("")` method.
+
+```js
+assert.deepEqual(exampleSentence, [
+ 'f', 'r', 'e', 'e', 'C',
+ 'o', 'd', 'e', 'C', 'a',
+ 'm', 'p', ' ', 'r', 'u',
+ 'l', 'e', 's'
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Learn the Date Object by Building a Date Formatter
+
+
+
+
+
+
Today's Date
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```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--
+const exampleSentence = "selur pmaCedoCeerf".split("");
+console.log(exampleSentence);
+--fcc-editable-region--
+dateOptionsSelectElement.addEventListener("change", () => {
+ switch (dateOptionsSelectElement.value) {
+ case "yyyy-mm-dd":
+ currentDateParagraph.textContent = formattedDate
+ }
+});
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/660746a665a61c7075a0f457.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/660746a665a61c7075a0f457.md
new file mode 100644
index 00000000000..b217584ff15
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-the-date-object-by-building-a-date-formatter/660746a665a61c7075a0f457.md
@@ -0,0 +1,263 @@
+---
+id: 660746a665a61c7075a0f457
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+In the previous project, you learned how to work with the `join` method. This method takes an array of elements and joins them into a string. Similar to the `split` method, the `join` method also takes an optional separator. If you don't provide a separator, the default separator is a comma.
+
+Here is an example of using the `join` method:
+
+```js
+// returns "1-2-3-4-5"
+[1, 2, 3, 4, 5].join("-");
+```
+
+Chain the `join` method to your `reverse` method. Pass in an empty string as the separator.
+
+Open up the console and see the output.
+
+# --hints--
+
+You should chain `join('')` to the `reverse` method.
+
+```js
+assert.strictEqual(exampleSentence, 'freeCodeCamp rules');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+
+ Learn the Date Object by Building a Date Formatter
+
+
+
+
+