HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
///////////////////////////////// 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!
Also see: Tab Triggers