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

              
                ///////////////////////////////// Number Methods ////////////////////////////////

  // 1. to String : this method converts a numeric value to a string
      // syntax: .toString()
      // examples:
          let randomNumber = 3124325454352;
          console.log(randomNumber);
          console.log(randomNumber.toString());

          console.log((21414 + 234234).toString());
          
          // if you look at the console, you'll see that before we converted it to a string, randomNumber was printed as a numeric value, without quotation marks.
          // Remember that when numbers are concatenated to strings, they become strings themselves. So, there is no reason to use the .toString method during string to number concatenation.
          // This method comes in handy when using functions or methods that require a string parameter and thus the number needs to be converted to a string.

  // 2. to Exponential : this method converts a numeric value to a string that contains the exponential notation of the value
        // syntax: .toExponential(n)
        // examples:
            let x = 3.2526;
            console.log(x);
            console.log(x.toExponential(2));
            console.log(x.toExponential(4));


  // 3. to Fixed : this method converts a numeric value to the same numeric value with the specified number of decimal places included. This is useful when dealing with values such as money or scores.
        // syntax: .toFixed(n)
        // examples:
            let payCheck = 3000;
            let groceries = 240.247;
            let utilityBill = 139.26;
            let cellPhone = 45.206;
            let savings = 1000;
            let spendingMoney = payCheck - groceries - utilityBill - cellPhone - savings;
            console.log("This is how much money I have left: $" + spendingMoney);
            console.log("But it makes more sense to round money to two decimal places, like this : $" + spendingMoney.toFixed(2));


// 4. to Precision : this method converts a numeric value to a string with a specified length. It is essentially the same as the .toFixed() method, but the return type is a string. And instead of specifying the number of decimal places, we are specifying the number of characters in total, or the length of the string:
      // syntax: .toPrecision(n)
      // examples:


          let grade = 87.2267;
          console.log("My grade is " + grade.toPrecision(4));
          console.log("My grade is " + grade.toPrecision(3));
          console.log("My grade is " + grade.toPrecision(2));



 ///////////////////////// Exercises /////////////////////////

//1. Declare two variables named phoneNum1 and phoneNum2. 
  // Assign phoneNum1 to a 10 digit phone number with no spaces or dashes; ex: 1234567890
  // Assign phoneNum2 to the same number as phoneNum1, but in quotation marks

//2. Write a conditional statement that prints "Phone numbers matching at first" to the console if phoneNum1 and phoneNum2 have equal values and data types
  // If they do not, convert phoneNum1 to a string and check if the values and data types are equal in the else if statement
  // If so, print "Phone numbers now matching" to the console
  // Otherwise, print "Phone numbers do not match"

// 3. Use the precision method to print the pi variable to the console with the following lengths: 3, 8, 14, 18, 29, 36, 47, and 50
  let pi = Math.PI;

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

//1.This is roughtly the number of people living in East Baton Rouge Parish
let eBRPopulation = 443158

//The percentage of people under 18 is 22.7 percent. Create a new variable called youngPeople and in it, calculate the number of people under 18 living in Baton Rouge. (You will need to figure out what 22.7 percent of 443158 is!) 

//Print out the sentence "the percentage of young people in Baton Rouge is" and then add the variable youngPeople, using the toFixed() method to make sure there are no decimal places!
              
            
!
999px

Console