feat(curriculum): add interactive examples to JS Date object lesson (#63925)

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.