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.
///////////////////////////////// Function Syntax ////////////////////////////////
// Remember that syntax tells us how to set up(declare) and use something. The syntax for JavaScript functions is:
function functionName(parameter1, parameter2) {
// function's code
}
// The syntax of a function has four major parts:
// 1. The "function" keyword
// 2. The function's name
// 3. The function's parameters
// 4. The code the function executes
// 1. The "function" keyword
// As in any declaration in JavaScript, the declaration of a function must begin with the function keyword. Just as the declaration of new variables starts with "var".
// 2. The function name
// Following the "function" keyword is the function's name. The naming conventions for functions are the same as those for variables, which we discussed in the variables section.
// 3. The function's parameters
// Parameters are a more complex concept than the simple function keyword and function name, but they are not a difficult concept to grasp.
// Parameters are values that the function needs in order to perform its job.
// Consider a function calculating the circumference of a circle.
// The function waits for us to give it a radius, and then calculates the circumference using the radius.
// The function wouldn't be able to give us the value of the circumference if we did not first provide it with a value for the circle's radius.
// Thus, the radius is a parameter for this function.
// The value we provide the function with that takes the place of a parameter is called an argument.
// Providing the function with the value that takes the place of a parameter is called passing in an argument to the function.
// Parameters are found in the code the function executes, in addition to the parenthesis after the function's name.
// This is because the parameters act as a place holder for the different values that the function plugs in for us using the arguments we pass in. This allows functions to be reusable.
// Functions can also have no parameters, multiple parameters, and the parameters can be of different data types.
// Functions without parameters are typically used to return an attribute of a variable, or perform tasks without changing variables, like printing the current time.
// 4. The code the function executes
// Finally, the last portion of the function is the code that the function actually executes.
// This is where the task you want the function to perform is generalized or abstracted so that the code is reusable.
// To generalize the task the function is performing, we simply replace the changing variable(s) in the code with parameters, so that we can later pass in arguments to these parameters, and retrive the desired result.
// Example:
// Say we have 20 circles, with the following radiuses: 3,7,12,5,9,42,8,60,45,21,6,9,14,27,84,32,52,37,36,15
// We want to find the circumference of all 20 circles.
// First, lets begin calculating this without the use of functions.
// The first step would be to declare our radiuses as variables. This means declaring 20 different variables, or creating an array with 20 elements.
let radius1 = 3;
let radius2 = 7;
let radius3 = 12;
// etc, etc, etc. ....
let radius20 = 15;
// OR:
let radiuses = [
3,
7,
12,
5,
9,
42,
8,
60,
45,
21,
6,
9,
14,
27,
84,
32,
52,
37,
36,
15
];
// Next we would save the circumference of each circle to a variable, or print each circumference to the console.
let circumference1 = 2 * Math.PI * radius1; // or, with use of an array, var circumference1 = 2*Math.PI*radiuses[0];
let circumference2 = 2 * Math.PI * radius2; // or, with use of an array, var circumference2 = 2*Math.PI*radiuses[1];
let circumference3 = 2 * Math.PI * radius3; // or, with use of an array, var circumference3 = 2*Math.PI*radiuses[2];
// ....................................
let circumference20 = 2 * Math.PI * radius20; // or, with use of an array, var circumference20 = 2*Math.PI*radiuses[19];
// Finally, we would print these values to the console:
console.log(circumference1);
console.log(circumference2);
console.log(circumference3);
// ...
console.log(circumference20);
// This code was shortened to only four values out of the 20, and still requires more effort than the use of a function.
// Now, lets complete this task with the use of a function.
// First we will declare the function. We will name it "circumferenceCalculator" and it will take one parameter, the radius of a circle:
function circumferenceCalculator(radius) {
// ...
}
// Next, we simply add the code the function will execute within the curly brackets.
// Remember that we are generalizing the code by using parameters in place of changing variables:
function circumferenceCalculator(radius) {
console.log(
"My function found that the circumference of a circle with a radius of " +
radius +
" is " +
2 * Math.PI * radius
);
}
// We know from our knowledge of concatenating strings that the function will return this value: "My function found that the circumference of a circle with a radius of _____ is ____________" where the first blank is the radius we provided the function with, and the second blank is the value of the circumference that the function is calculating for us.
// Finally, to run our function, we invoke it by calling the function name and giving the function an argument for the radius. Invoking functions will be covered in depth in the next section.
// To calculate all of the circumferences, we can pass in the radius argument by either inputting the radius's actual value, or the variable or element storing the radius.
circumferenceCalculator(3); //passing in the radius value directly for the first circle
circumferenceCalculator(radius2); //passing in the variable storing the radius value for the second circle
circumferenceCalculator(radiuses[2]); //passing in the element in the radiuses array that stores the radius value for the third circle (remember that it is radiuses[2] because the index of an array begins at 0 rather than 1.)
// Now, if you check your console, you will see this printed out:
//"My function found that the circumference of a circle with a radius of 3 is 18.84955592153876"
//"My function found that the circumference of a circle with a radius of 7 is 43.982297150257104"
//"My function found that the circumference of a circle with a radius of 12 is 75.39822368615503"
///////////////////////// Exercises /////////////////////////
// 1. Declare a new function named "welcome" that takes no parameters.
// The function will print "Welcome, user!" to the console. Add the code within the function to achieve this.
// 2. Declare a new function named "userWelcome" that takes one parameter called "name". The function will print
// The function will print "Welcome, Name!" to the console, where "Name" is the value of the argument passed into the function.
// Add the code within the function to achieve this.
// 3. Declare a new function named "fullWelcome" that takes three parameters: firstName, middleName, and lastName
// The function will print "Welcome, First Middle Last!" to the console, replacing First, Middle, and Last with the arguments passed into the function.
////////////Extra Exercises:
//1. Create an array called radii, store four different numbers that represent the radii of different circles.
// Declare a function called circumferenceCalculator, and give it the parameter radius.
// Within your function, create a console log that prints out "My function found that the circumference of a circle with a radius of" then add the radius parameter, then add "is", then add 2 * Math.PI * radius.
// Invoke the function four times, and each time, pass an element of the array into the function by putting it in the parentheses.
Also see: Tab Triggers