feat: adding date formatter project for new JS curriculum #52088

jdwilkin4 · 2023-10-25T05:57:49Z

This PR is responsible for adding the date formatter project for the new JS curriuclum.
I took the changes from Joy's old PR and Kris' suggestion and incorporated them into this PR.
I also made a couple of small updates to the CSS to fix a couple of issues for smaller devices.

Checklist:

I have read and followed the contribution guidelines.
I have read and followed the how to open a pull request guide.
My pull request targets the main branch of freeCodeCamp.
I have tested these changes either locally on my machine, or GitPod.

codesee-maps · 2023-10-25T06:26:39Z

👀 Review this PR in a CodeSee Review Map

View the CodeSee Map of this change

Legend

...structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md

...structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md

...structures-22/learn-the-date-object-by-building-a-date-formatter/65388edfdf364fbb04e426f2.md

...structures-22/learn-the-date-object-by-building-a-date-formatter/65386e889dd615940cb3e042.md

...structures-22/learn-the-date-object-by-building-a-date-formatter/65387b440b5cb1aa35585820.md

...structures-22/learn-the-date-object-by-building-a-date-formatter/65388d61a57a00b9ad0d0817.md

...structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md

...structures-22/learn-the-date-object-by-building-a-date-formatter/653884e09dfb4eb01f1622ed.md

...structures-22/learn-the-date-object-by-building-a-date-formatter/653883da4a1fabaeb5f1f5e7.md

...structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md

...structures-22/learn-the-date-object-by-building-a-date-formatter/65388659a72663b27cde0699.md

Ksound22 · 2023-10-25T16:20:44Z

I left a few suggestions to fix some nitpicks.

I'll look into the tests tomorrow.

Co-authored-by: Kolade Chris <65571316+Ksound22@users.noreply.github.com> Co-authored-by: Sem Bauke <semboot699@gmail.com>

zairahira

Went through all the steps, they are easy to understand!

...structures-22/learn-the-date-object-by-building-a-date-formatter/653879d87bc55fa624280c77.md

Co-authored-by: Zaira <33151350+zairahira@users.noreply.github.com>

Ksound22 · 2023-10-26T16:28:52Z

This could be the most perfect project 😀

scissorsneedfoodtoo · 2023-10-26T06:35:30Z

...structures-22/learn-the-date-object-by-building-a-date-formatter/6538830e01ab66ade75b869e.md

+
+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:


Sorry, missed this the last time I looked at this step, but I figure we can treat the numbers returned by these methods similarly and wrap them all in inline code blocks:

Suggested change

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:

One of those is the `.getDate()` method, which returns a number between `1` and `31` that represents the day of the month for that date. For example:

scissorsneedfoodtoo · 2023-10-26T06:37:21Z

...structures-22/learn-the-date-object-by-building-a-date-formatter/6538855514cb16b10204e712.md

+
+# --description--
+
+The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.


Suggested change

The `.getMinutes()` method returns a number between 0 and 59 which represents the minutes for the provided date.

The `.getMinutes()` method returns a number between `0` and `59` which represents the minutes for the provided date.

scissorsneedfoodtoo · 2023-10-26T06:51:00Z

...structures-22/learn-the-date-object-by-building-a-date-formatter/653887098bdc39b3684a51c8.md

+
+# --hints--
+
+You will need to use the `month` constant inside the template literal after a dash.


I probably missed this in the other PR, but we could update the hint text here to use the "You should..." format. Maybe something like:

Suggested change

You will need to use the `month` constant inside the template literal after a dash.

You should add a dash followed by the `month` constant to the template literal.

scissorsneedfoodtoo · 2023-10-26T06:55:00Z

...structures-22/learn-the-date-object-by-building-a-date-formatter/65388762f61f44b3fd490a4a.md

+
+# --hints--
+
+You will need to use the `year` constant inside the template literal after a dash.


Suggested change

You will need to use the `year` constant inside the template literal after a dash.

You should add a dash followed by the `year` constant to the template literal.

scissorsneedfoodtoo · 2023-10-26T07:04:59Z

...structures-22/learn-the-date-object-by-building-a-date-formatter/65388bbcbf6928b83fc424d1.md

+
+# --description--
+
+In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.


Another thing I missed in my original review. Very minor, though:

Suggested change

In JavaScript, the `change` event is used to detect when the value of an HTML element has changed.

In JavaScript, the `change` event is used to detect when the value of an HTML element has changed:

scissorsneedfoodtoo · 2023-10-26T07:39:54Z

...structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md

+
+# --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.


Suggested change

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.

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:

scissorsneedfoodtoo · 2023-10-26T07:42:51Z

...structures-22/learn-the-date-object-by-building-a-date-formatter/65389211a8d86bbd876a2a74.md

+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' ]


Looking at this again, we might want to add another example of splitting on a space character, and consider capitalizing the strings since they're brand names:

Suggested change

"coca-cola".split("-"); // [ 'coca', 'cola' ]

"Coca-Cola".split("-"); // [ 'Coca', 'Cola' ]

"Diet Coke".split(" "); // [ 'Diet', 'Coke' ]

scissorsneedfoodtoo · 2023-10-26T07:50:08Z

...structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md

+
+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`.


Suggested change

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`.

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`:

scissorsneedfoodtoo · 2023-10-26T07:54:42Z

...structures-22/learn-the-date-object-by-building-a-date-formatter/653898fa7eee37c57b960e35.md

+You should add a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));


It's possible to add the break statement before all the other logic for this case clause and pass the test.

We could probably check that break comes after `.join("-"), and zero or more spaces:

Suggested change

assert(code.match(/break/g));

assert(code.match(/\.join$(['"])-\1$\;?\n+\s*break/g));

scissorsneedfoodtoo · 2023-10-26T08:03:04Z

...structures-22/learn-the-date-object-by-building-a-date-formatter/65389a63d3b1d6c764c0e10e.md

+You should include a `break` statement within the `case` after your logic.
+
+```js
+assert(code.match(/break/g));


This test currently catches the break statement that was added in the last step.

We could make it a bit more specific, since we know that this new break statement should come after the new logic:

Suggested change

assert(code.match(/break/g));

assert(code.match(/currentDateParagraph.textContent\s*=\s*``\;?\n+\s*break/g));

scissorsneedfoodtoo · 2023-10-31T04:25:15Z

...structures-22/learn-the-date-object-by-building-a-date-formatter/65389de504d0f2ca10e92a57.md

+
+# --hints--
+
+You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.


Suggested change

You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` inside the `textContent` property of the `currentDateParagraph` constant.

You should assign `${month}-${day}-${year} ${hours} Hours ${minutes} Minutes` to the `textContent` property of `currentDateParagraph`.

scissorsneedfoodtoo · 2023-10-31T04:28:40Z

...structures-22/learn-the-date-object-by-building-a-date-formatter/65389eff4893facbbe6eae67.md

+
+# --hints--
+
+You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.


Suggested change

You should use the `default` case to set the `textContent` property of `currentDateParagraph` equal to the constant `formattedDate`.

You should use the `default` case to set the `textContent` property of `currentDateParagraph` to the value of `formattedDate`.

jdwilkin4 · 2023-10-31T12:46:39Z

Hey @scissorsneedfoodtoo !

Since this PR is already closed and merged in we can just open up a new one to apply these changes 👍

feat: adding date formatter project

21b87f1

jdwilkin4 self-assigned this Oct 25, 2023

jdwilkin4 requested a review from a team as a code owner October 25, 2023 05:57

jdwilkin4 requested review from scissorsneedfoodtoo and naomi-lgbt October 25, 2023 05:58

jdwilkin4 added scope: curriculum Lessons, Challenges, Projects and other Curricular Content in curriculum directory. front 3 2023 labels Oct 25, 2023

github-actions bot added platform: learn UI side of the client application that needs familiarity with React, Gatsby etc. scope: i18n language translation/internationalization. Often combined with language type label labels Oct 25, 2023

Sembauke requested changes Oct 25, 2023

View reviewed changes