From 285a49a10cc8113539e82e57c5c8e02ff1792db0 Mon Sep 17 00:00:00 2001 From: Zaira <33151350+zairahira@users.noreply.github.com> Date: Wed, 2 Oct 2024 20:22:51 +0500 Subject: [PATCH] feat(curriculum): date conversion lab (#56332) Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> --- client/i18n/locales/english/intro.json | 7 +- .../lab-date-conversion/index.md | 9 ++ .../_meta/lab-date-conversion/meta.json | 11 ++ .../66f686b8ebdb982fa8e14330.md | 149 ++++++++++++++++++ 4 files changed, 175 insertions(+), 1 deletion(-) create mode 100644 client/src/pages/learn/front-end-development/lab-date-conversion/index.md create mode 100644 curriculum/challenges/_meta/lab-date-conversion/meta.json create mode 100644 curriculum/challenges/english/25-front-end-development/lab-date-conversion/66f686b8ebdb982fa8e14330.md diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 65a1bb7ff06..aa0020d03a2 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2337,7 +2337,12 @@ ] }, "lupt": { "title": "218", "intro": [] }, - "yvqn": { "title": "219", "intro": [] }, + "lab-date-conversion": { + "title": "Build a Date Conversion Program", + "intro": [ + "In this lab, you will build a program to convert a date from one format to another." + ] + }, "xtfk": { "title": "220", "intro": [] }, "quiz-javascript-dates": { "title": "JavaScript Dates Quiz", diff --git a/client/src/pages/learn/front-end-development/lab-date-conversion/index.md b/client/src/pages/learn/front-end-development/lab-date-conversion/index.md new file mode 100644 index 00000000000..128dadebb66 --- /dev/null +++ b/client/src/pages/learn/front-end-development/lab-date-conversion/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Build a Date Conversion Program +block: lab-date-conversion +superBlock: front-end-development +--- + +## Introduction to the Build a Date Conversion Program + +In this lab, you will build a program to convert a date from one format to another. diff --git a/curriculum/challenges/_meta/lab-date-conversion/meta.json b/curriculum/challenges/_meta/lab-date-conversion/meta.json new file mode 100644 index 00000000000..ee60741ffde --- /dev/null +++ b/curriculum/challenges/_meta/lab-date-conversion/meta.json @@ -0,0 +1,11 @@ +{ + "name": "Build a Date Conversion Program", + "isUpcomingChange": true, + "usesMultifileEditor": true, + "dashedName": "lab-date-conversion", + "order": 219, + "superBlock": "front-end-development", + "challengeOrder": [{ "id": "66f686b8ebdb982fa8e14330", "title": "Build a Date Conversion Program" }], + "helpCategory": "JavaScript", + "blockType": "lab" +} diff --git a/curriculum/challenges/english/25-front-end-development/lab-date-conversion/66f686b8ebdb982fa8e14330.md b/curriculum/challenges/english/25-front-end-development/lab-date-conversion/66f686b8ebdb982fa8e14330.md new file mode 100644 index 00000000000..1cdd9939acc --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lab-date-conversion/66f686b8ebdb982fa8e14330.md @@ -0,0 +1,149 @@ +--- +id: 66f686b8ebdb982fa8e14330 +title: Build a Date Conversion Program +challengeType: 14 +dashedName: lab-date-conversion +--- + +# --description-- + +In this lab, you will code a date conversion program that converts a given date to different formats. For example, the current date `Fri Sep 27 2024 16:04:43 GMT+0500 (Pakistan Standard Time)` would be formatted in the following 2 ways: + +- `(MM/DD/YYYY): 9/27/2024`. +- `(Month Day, Year): September 27, 2024`. + +**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. + +**User Stories:** + +1. You should create a variable named `currentDate` and assign it the current date and time using the `Date` object. +2. You should create a variable named `currentDateFormat` and assign it the string `Current Date and Time: [current date]`. Replace `[current date]` with the result of the `currentDate` variable. +3. You should log the value of `currentDateFormat` to the console. +4. You should create a function named `formatDateMMDDYYYY` that takes the date object as a parameter. You can name this parameter whatever you like. +5. Your `formatDateMMDDYYYY` function should convert the current date to `month/day/year` format and return the string `Formatted Date (MM/DD/YYYY): [month]/[day]/[year]`. +6. You should create a function named `formatDateLong` that takes the date object as a parameter. +7. Your `formatDateLong` function should convert the current date to `Month Day, Year` format and return the string `Formatted Date (Month Day, Year): [formatted date]`. + +**Note:** For the tests to pass, make sure that you use `en-US` for the locale when formatting the dates. + +# --hints-- + +You should have a variable named `currentDate` that holds the current date and time using the `Date` object. + +```js +// excluded timestamps +const expectedDate = new Date(); +const expectedDateOnly = new Date(expectedDate.getFullYear(), expectedDate.getMonth(), expectedDate.getDate()); + +const currentDateOnly = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate()); + +assert.equal(currentDateOnly.toString(), expectedDateOnly.toString()); +``` + +You should have a variable named `currentDateFormat` that holds the current date in the format `Current Date and Time: [current date]`. + +```js +const expectedDate = new Date(); +const expectedDateFormat = `Current Date and Time: ${expectedDate}`; + +assert.equal(currentDateFormat, expectedDateFormat); +``` + +You should log the value of `currentDateFormat` to the console. + +```js +assert.match(code, /console\.log\(\s*currentDateFormat\s*\)/); +``` + +You should have a function `formatDateMMDDYYYY` + +```js +assert.isFunction(formatDateMMDDYYYY); +``` + +The function`formatDateMMDDYYYY` should take a single parameter. + +```js +assert.lengthOf(formatDateMMDDYYYY, 1); +``` + +When the date object holds `Fri Sep 27 2024 16:16:11 GMT+0500 (Pakistan Standard Time)`, the function `formatDateMMDDYYYY` should return `Formatted Date (MM/DD/YYYY): 9/27/2024`. + +```js +let dateString = "Fri Sep 27 2024 16:21:18 GMT+0500 (Pakistan Standard Time)"; +let dateObject = new Date(dateString); + +assert.equal(formatDateMMDDYYYY(dateObject).toString(), "Formatted Date (MM/DD/YYYY): 9/27/2024"); + +// prevent hardcoding + +dateString = "Fri Sep 28 2024 18:31:18 GMT+0500 (Pakistan Standard Time)"; +dateObject = new Date(dateString); + +assert.strictEqual(formatDateMMDDYYYY(dateObject).toString(), "Formatted Date (MM/DD/YYYY): 9/28/2024"); +``` + +You should have a function `formatDateLong` + +```js +assert.isFunction(formatDateLong); +``` + +The function`formatDateLong` should take a single a parameter. + +```js +assert.lengthOf(formatDateLong, 1); +``` + +When the date object holds `Fri Sep 27 2024 16:16:11 GMT+0500 (Pakistan Standard Time)`, the function `formatDateLong` should return `Formatted Date (Month Day, Year): September 27, 2024`. + +```js +let testDate = new Date('Fri Sep 27 2024 16:21:18 GMT+0500 (Pakistan Standard Time)'); +let result = formatDateLong(testDate); + +assert.strictEqual(result,'Formatted Date (Month Day, Year): September 27, 2024', `Test failed: ${result}`); + +// prevent hardcoding + +testDate = new Date('Fri Sep 28 2024 18:31:18 GMT+0500 (Pakistan Standard Time)'); +result = formatDateLong(testDate); +assert.strictEqual(result, 'Formatted Date (Month Day, Year): September 28, 2024'); +``` + +# --seed-- + +## --seed-contents-- + +```js + +``` + +# --solutions-- + +```js +const currentDate = new Date(); +const currentDateFormat = `Current Date and Time: ${currentDate}`; +console.log(currentDateFormat); + +function formatDateMMDDYYYY(date) { + const month = date.getMonth() + 1; + const day = date.getDate(); + const year = date.getFullYear(); + return `Formatted Date (MM/DD/YYYY): ${month}/${day}/${year}`; +} + +function formatDateLong(date) { + const longDateFormat = date.toLocaleDateString('en-US', { + year: 'numeric', + month: 'long', + day: 'numeric' + }); + return `Formatted Date (Month Day, Year): ${longDateFormat}`; +} + +// usage +console.log(formatDateMMDDYYYY(currentDate)); +console.log(formatDateLong(currentDate)); + +``` +