Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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


Save Automatically?

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.






                ///////////////////////////////// Function Returns ////////////////////////////////

// As mentioned earlier, functions end with a return statement
// A return statement must begin with the keyword 'return'
// Whatever follows the return keyword is what is literally "returned" to us as a result of running the function
// We can place variables, equations, strings, concatenations, etc. as the return value for a function
// Unlike other popular languages, JavaScript does not require us to specify the type of data that is being returned

// I will provide a few examples of different types of functions and returns, so that you see the different possibilities for return statements, and gain greater understanding of functions:

// 1. Future Age Calculator
// This function simply returns the age the user will be in the year provided by the user.
// The function calculates the future age by subtracting the future year from the current year, and adding that value to the user's current age:
// We return this equation on line 26, meaning that when we invoke the function, it will give us the result of the equation on line 26.

let myAge = 20;
let futureYear = 2060;
  "I'm " +
    myAge +
    " now, but in " +
    futureYear +
    " I'll be " +
    futureAge(myAge, futureYear)

myAge = 32;
futureYear = 2047;
  "I'm " +
    myAge +
    " now, but in " +
    futureYear +
    " I'll be " +
    futureAge(myAge, futureYear)

function futureAge(currentAge, futureYear) {
  let now = new Date();
  let thisYear = now.getFullYear();
  return currentAge + (futureYear - thisYear);

// 2. Random Pet Generator
// The next type of return we're going to look at is returning new objects or properties of new objects
// This next function randomly selects different elements from different arrays and assigns these values to the property of a new pet object
// We return the randomly selected properties of the new pet object to the user.
// The function's return statement prints the randomly selected properties of the object to the console in a specified format.

//line 38 is invoking the petGenerator() function

function petGenerator() {
  let petNames = [
  let animalTypes = [
  let animalColors = [
    "black and white",

  let randomNumber = Math.floor(Math.random() * 7);

  let newPet = {
    name: petNames[randomNumber],
    type: animalTypes[randomNumber],
    color: animalColors[randomNumber]

  return (
    "Your new pet is a " +
    newPet.color +
    " " +
    newPet.type +
    " named " + +

// 3. Different Return Possibilities:

// This example is a fully functioning state sales tax calculator for all 50 states.
// The taxCalculator function takes two parameters: the price of the product and the state to calculate the sales tax for
// The return value not only depends on the arguments, but also whether or not we are able to calculate the product price with sales tax. Events that would prevent us from doing so include the state not having sales tax, or the user passing in an invalid argument for the state parameter.
// We have to account for these possibilities, so we will program 3 possible return statements.
// To invoke this function, we simply declare a new variable equal to the functions invocation, or just print it to the console, like so:

console.log(taxCalculator(5.5, "pq"));
console.log(taxCalculator(17.38, "LA"));

function taxCalculator(productPrice, state) {
  // the array, stateSalesTax, is a 2D array that stores the abbreviation for all 50 states and their respective sales tax in decimal form:
  stateSalesTax = [
    ["AK", 0],
    ["AL", 0.04],
    ["AR", 0.065],
    ["AZ", 0.056],
    ["CA", 0.0725],
    ["CO", 0.029],
    ["CT", 0.0635],
    ["DC", 0.0575],
    ["DE", 0],
    ["FL", 0.06],
    ["GA", 0.04],
    ["HI", 0.04],
    ["IA", 0.06],
    ["ID", 0.06],
    ["IL", 0.0625],
    ["IN", 0.07],
    ["KS", 0.065],
    ["KY", 0.06],
    ["LA", 0.05],
    ["MA", 0.0625],
    ["MD", 0.06],
    ["ME", 0.055],
    ["MI", 0.06],
    ["MN", 0.06875],
    ["MO", 0.04225],
    ["MS", 0.07],
    ["MT", 0],
    ["NC", 0.0475],
    ["ND", 0.05],
    ["NE", 0.055],
    ["NH", 0],
    ["NJ", 0.06625],
    ["NM", 0.05125],
    ["NV", 0.0685],
    ["NY", 0.04],
    ["OH", 0.0575],
    ["OK", 0.045],
    ["OR", 0],
    ["PA", 0.06],
    ["RI", 0.07],
    ["SC", 0.06],
    ["SD", 0.045],
    ["TN", 0.07],
    ["TX", 0.0625],
    ["UT", 0.0595],
    ["VA", 0.053],
    ["VT", 0.06],
    ["WA", 0.065],
    ["WI", 0.05],
    ["WV", 0.06],
    ["WY", 0.04]

  // add the resulting sales tax if it exists or just pass the value if
  // there is no tax
  // this is better than having two return statements
  let result = "";
  // we have not covered for loops yet, but this loop is visiting each element in the array
  for (let i = 0; i < stateSalesTax.length; i++) {
    // the next line checks to see that the argument we passed in for the state
    // parameter exists in the stateSalesTax array

    if (stateSalesTax[i][0] == state) {
      // if the state argument DOES exist in the array, we are now going to check
      // that the state has a sales tax that isn't 0:
      if (stateSalesTax[i][1] != 0) {
        // if the state both exists in the array and does not have a 0 sales tax,
        // then we arrive at the next line of code

        // the next line of code uses concatenation to print the statement
        // "The price of your product with sales tax in __ is $____" where the
        // first blank is the value of state, and the second blank is the
        // calculated price with sales tax

        // we actually calculate the sales tax by multiplying the argument
        // passed in for the product price by the sales tax for that state.

        // the method .toFixed() is used to trim the calculated value to 2
        // decimal places, since US currency goes to 2 decimal places.

        result =
          "The price of your product with sales tax in " +
          state +
          " is $" +
          (productPrice + productPrice * stateSalesTax[i][1]).toFixed(2);
      } else {
        //this else is included in the event that the state doesn't have sales
        // tax, such as Montana and Oregon, the product price will not change so
        // it is simply returned.
        result = stateSalesTax[i][0] + " has no sales tax: " + productPrice;
    } else {
      result = "That state does not exist ";
  return result;

///////////////////////// Exercises /////////////////////////
// 1. Write a function named averageScore that takes in an array of test
// scores as a parameter.
let scores = [
// The function will calculate the average of all of the scores, 
// and return this value.
// Print this value to the console in this format:
// "The average test score is __(returned value)__" with 2 decimal places.
// because we have not covered for loops, I will provide the code to loop 
// through the array of test scores:
for (i = 0; i < parameterArrayName.length; i++) {
  // code goes here. Remember that elements are accessed like so: parameterArrayName[i]