Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                
              
            
!

JS

              
                ///////////////////////////////// Date Object and Methods ////////////////////////////////

///////////////////////////////// Date Object ////////////////////////////////

// A useful object in the JavaScript library is the Date object.

// We now know the difference between primative and reference types, and we know that JavaScript treats primative types as objects(aka reference types) when using methods.

// A date object, however, needs to be declared for us to work with dates.

// We declare a date object by simply saying:

let today = new Date();

// Setting the variable equal to new Date(); constructs a new date object that the today variable is a reference to.

// There may be an instance in which you wish to create a date object that does not represent the current time. In this case, we can construct date objects like so:

// within the parenthesis, we place: (Year, Month, Day, Hour, Minute, Seconds, and Milliseconds)
// we do not have to provide all of these parameters, however.
// For example, we can provide only the year, month, and day, like so:
let myBirthday = new Date(1997, 7, 29);

// Now we can apply the many date methods to our date object, 'today'.

///////////////////////////////// Date Methods ////////////////////////////////
// See all the date methods here:
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

// 1. getFullYear : this method returns the year of the date object in a 4 digit format
// syntax: .getFullYear()
// examples:
today = new Date();
console.log("The current year is " + today.getFullYear());

myBirthday = new Date(1997, 7, 29);
console.log("I was born in " + myBirthday.getFullYear());

// 2. getMonth : this method returns the month of the date object as a number. Months begin at 0, meaning January = 0 while December = 11
// syntax: .getMonth()
// examples:
today = new Date();
console.log("The current month is " + today.getMonth());

// instances like the print statement above allow us to program our own solutions. If I wanted to print the word form of the month, such as January, we could use an array, if-else statements, or a switch statement:

let months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"
];
let currentMonth = today.getMonth();
console.log("The current month is " + months[currentMonth]);

// 3. getDate : this method returns the day of the date object as a number from 1-31(out of the month)
// syntax: .getDate()
// examples:
today = new Date();
console.log("Today is " + today.getMonth() + " / " + today.getDate());

// 4. getDay : this method returns the day of the date object as a number from 0-6 (as a weekday)
// syntax: .getDay()
// examples:
today = new Date();
let days = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday"
];
console.log("Today is " + days[today.getDay()]);

// 5. getHours : this method returns the hours of the date object as a number from 0-23
// syntax: .getHours()
// examples:
today = new Date();
console.log("The current hour is " + today.getHours());

// 6. getMinutes : this method returns the minutes of the date object as a number from 0-59
// syntax: .getMinutes()
// examples:
today = new Date();
console.log("The current minute is " + today.getMinutes());

// 7. getSeconds : this method returns the seconds of the date object as a number from 0-59
// syntax: .getSeconds()
// examples:
today = new Date();
console.log("The current second is " + today.getSeconds());

console.log("The time is now " + today.getHours() + " : " + today.getMinutes());


// 8. setDate() : this method sets the day of the date object as a number from 1-31. You can use this method to add or subtract days from any Date
// syntax: .setDate()
// examples:
today = new Date();
console.log("The current date is " + today.toLocaleDateString());
today.setDate(today.getDate() + 7)
console.log("Next week would be " + today.toLocaleDateString());

// 9. setFullYear() : this method sets the year of the date object. You can use this method to add or subtract years from any Date
// syntax: .setFullYear()
// examples:
today = new Date();
console.log("The current date is " + today.toLocaleDateString());
today.setFullYear(today.getFullYear() - 50)
console.log("Fifty years ago is " + today.toLocaleDateString());

// 10. all of the Set Methods
//
// setDate()  Set the day as a number (1-31)
// setFullYear()	Set the year (optionally month and day)
// setHours()	Set the hour (0-23)
// setMilliseconds()	Set the milliseconds (0-999)
// setMinutes()	Set the minutes (0-59)
// setMonth()	Set the month (0-11)
// setSeconds()	Set the seconds (0-59)
// setTime()	Set the time (milliseconds since January 1, 1970)

///////////////////////// Exercises /////////////////////////
//1. Declare a new date object named "today"

//2. Using the date object, print the current date with last year's year, in the format MM/DD/YYYY - you will need to add "/" between month, day, and year!

// 3. Declare two new date objects, named helloKittyBday and myBday
// Assign the helloKittyBday object to November 1st 1974, and the second to your birthday.

// 4. Write conditional statements to test if you were born before or after hello kitty.
// to do this you will need to check the year, then the month, then the date
// You will need to write nested conditional statements for this exercise.
// make sure this works for any date you enter in

//1. First we should test if Hello Kitty's year is less than our birthyear
//1.1 If so, we know we are younger than Hello Kitty. Print "Hello Kitty is your elder!" to the console.

//2. If Hello Kitty's year isn't less than ours, test to see if it is equal
// If Hello Kitty's year is equal to ours add a new nested if statment
// if it is not equal print "you were born in the same year but she's older by some months"

//2.1 in this new if statement test who has the smaller month. The smaller month is the older person.
// Implement the conditional statement to find the smaller month out of the two date objects
// if hello kittys month is less than ours print "hello kitty is your elder!"
// Implement an else if statemement that checks if the months are equal

//2.2 If the months are equal, we need to make another nested conditional statement to check if the day values are equal
//2.3 If these are equal, print "You and Hello Kitty share birthdays!!!"
//2.4 If Hello Kitty has a smaller day value, print "Hello Kitty is your elder!" to the console.
//2.5 Otherwise, print "You are Hello Kitty's elder!" to the console.
// If Hello Kitty's birthyear is not less than ours and is not equal to ours, 
// the only other possibility is that it is greater than ours, meaning we are older.
//3. In this case, print "You are Hello Kitty's elder!" to the console.
// Test the conditions by changing the values of the myBday date object

//////////Extra Exercises:

//1. Create a variable that stores a new date object using your birthday
// Create a second variable that stores the month of the birthday variable (using getMonth())
// Print out "My birthday month is" and add the second variable. 
// Create an array storing all the months of the year as strings written in order. 
// Print out "My birthday month is" and add the month from the array, using your second variable as the index. 

//2. Create a new Date object called today1. 
// Print out the day of the month that it is, using the getDate method. 
// Create an array that stores the days of the week (as strings). 
//Print out the day of week by printing out the element of the array using today1.getDay() as the index. 

//3. Create a variable that stores a new date object.
// Print out your new date object, beginning with the phrase "Today's date and time is", and then use toLocaleString() to format your date.

///4. Create a new date object variable.  
// Use the setDate() method your variable. Inside the setDate() method, get the current day using the getDate() method, and add 1 to it. 
// Print out "Tomorrow's date will be" with the date object, using the toLocaleDateString() method to format it. 
// Create a new date object that stores your birthday. 
// Create a variable called age that stores your age. 
// Use the setFullYear() method on your birthday date object. In the parentheses, use the getFullYear() method on that date, and then add your age variable. 
// Print out "I turned" then add the age variable, then add "on", then add the birthday date variable, using the toLocaleDateString() method to format it. 

//5. Create a date object that stores the date that Louisiana became the 18th State in the US. Print it out as a string. 

//6. Create a new date object variable, and set it to November 11, 2023
// Figure out how to print out "Today is Thu, Nov 11" using the getDay, getMonth, and getDate methods and the arrays. 

let month = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"];
let day = ["Sun", "Mon", "Tues", "Wed", "Thu", "Fri", "Sat"];

//7. Create a date object that stores your birthday 
//Create an conditional statement. Start with an if statment, and test the condition that your birthday month is less than or equal to 1, OR more than or equal to 11. If this is true, print "My Birthday is in Winter" to the console. 
//Create an else if statement that tests whether your bithday month is less than or equal to 4. If it is, print out "My Birthday is in Spring"
//Create another else if statement that tests whether your birthday month is less than or equal to 7. If it is, print out "My Birthday is in Summer"
//Create another else if statement that tests whether your birthday month is less than or equal to 10. If it is, print out "My Birthday is in Winter"
//Finally, create an else statement, and print out "I have no birthday". 
//Test your code to make sure it gives you the correct season!
              
            
!
999px

Console