From 30e76f9bc3ecf74ff2d6626bddeed9a81732c062 Mon Sep 17 00:00:00 2001 From: nancytwwongutoronto Date: Mon, 17 Nov 2025 19:45:12 -0500 Subject: [PATCH] feat(curriculum): add interactive examples to JS Date object lesson (#63925) --- .../6733aafb9c0802f66cc1e056.md | 34 ++++++++++++++----- 1 file changed, 25 insertions(+), 9 deletions(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-dates/6733aafb9c0802f66cc1e056.md b/curriculum/challenges/english/blocks/lecture-working-with-dates/6733aafb9c0802f66cc1e056.md index a633843ee4b..b24be318eda 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-dates/6733aafb9c0802f66cc1e056.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-dates/6733aafb9c0802f66cc1e056.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: how-does-the-javascript-data-object-work-and-what-are-some-common-methods --- -# --description-- +# --interactive-- Dates and times in JavaScript have not always been easy to work with. In a professional codebase, you will probably be using a library that has solved a lot of those issues for you. @@ -23,25 +23,31 @@ The `new` keyword is used to create a new instance of the `Date` object, and the Here is an example response you would see if you logged the value of `now` to the console: +:::interactive_editor + ```js const now = new Date(); console.log(now); -// Mon Mar 15 2024 14:30:00 GMT-0700 (Pacific Daylight Time) ``` +::: + For the time, it is using the military time format, so `14:30` is `2:30 PM`. `GMT-0700` is the timezone offset, and `Pacific Daylight Time` is the timezone name. You can also pass in a specific date and time to the `Date` object by providing the year, month, day, hour, minute, second, and millisecond values as arguments. Here is an example of creating a new `Date` object with a specific date and time: +:::interactive_editor + ```js const specificDate = new Date("July 4, 1776 12:00:00"); console.log(specificDate); -// Wed Jul 04 1776 12:00:00 GMT-0700 (Pacific Daylight Time) ``` +::: + This is useful when you need to work with a specific date and time rather than the current date and time. The input always needs to be a string, and the format should be recognizable by the `Date` object. To get the current date and time, you can use the `Date.now()` method, which returns the number of milliseconds since `January 1, 1970, 00:00:00 UTC`. This is known as the Unix epoch time. @@ -50,37 +56,47 @@ Unix epoch time is a common way to represent dates and times in computer systems If you need to get a day of the month based on the current date, you can use the `getDate` method. Here is an example of using the `getDate` method: +:::interactive_editor + ```js const now = new Date(); const date = now.getDate(); -console.log(date); // 15 +console.log(date); ``` +::: + In this example, we create a new date instance using the `Date` object and assign it to the variable `now`. We then call the `getDate` method on the `now` object to get the day of the month and assign it to the variable `date`. Finally, we log the value of `date` to the console, which will output the current day of the month. `getDate` will return an integer value between `1` and `31`, depending on the day of the month. If the date is invalid, it will return `NaN` (Not a Number). To get the month, you can use the `getMonth` method like this: +:::interactive_editor + ```js const now = new Date(); const month = now.getMonth(); console.log(month); -// 2 ``` -The month is zero-based, so `January` is `0`, `February` is `1`, and so on. In this example, the output is `2`, which corresponds to `March`. If the month is invalid, it will return `NaN`. +::: + +The month is zero-based, so `January` is `0`, `February` is `1`, and so on. If the month is invalid, it will return `NaN`. If you need to get the full year, then you can use the `getFullYear` method like this: +:::interactive_editor + ```js const now = new Date(); const year = now.getFullYear(); -console.log(year); -// Output: 2024 +console.log(year); ``` -In this example, the output is `2024`, which is the current year. If the year is invalid, it will return `NaN`. +::: + +If the year is invalid, it will return `NaN`. There are many more methods available on the `Date` object including `getHours`, `getMinutes`, `getSeconds`, and so on. I encourage you to explore some more on your own through Mozilla's documentation or other resources.