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.






                ///////////////////////////////// Nested Loops ////////////////////////////////

// You may recall the idea of nesting from the lesson on conditional statements.

// Nesting simply means placing something within another instance of the same type.

// With nested conditional statements, we wrote an if statement that had an if or if-else statement within it.

// The same idea applies to all loops.

// We can nest for loops inside of for loops, while loops inside of while loops, do while loops inside of do while loops, etc.

// We can also nest any loop type within a loop of a different type. For example, placing a while loop inside of a forloop, or a for loop inside of a do-while loop.

// We are also able to place conditional statements within loops, and vice versa

// The purpose of nesting is to execute code depending on further conditions.

// For example, imagine you just woke up and are getting dressed for the day.

// What do you take into consideration when you're getting dressed?

// You probably take a look at the weather to know how best to dress

// If its cold, you bundle up. If its warm, you put on shorts and a shirt.

// But what other factors alter our outfit of the day? What about if the weather app tells us its raining today?

// Does this change your outfit of choice? You might choose to wear rainboots or a rain jacket instead or in addition to your original choices.

// First, our outfit was dependent on the temperature outside. Then we considered the weather. Our outfit was then dependent on further conditions.

// Therefore, if we were to see this scenario programmed via conditional statements or perhaps using loops, there would be nesting at some point to include a test for the weather, since this factor can alter the outfit we choose.

// Lets model this scenario using nested conditional statements, which we have had practice with before:

let temperature = 75;
let weather = "rainy";
if (temperature < 45) {
  if (weather == "sunny") {
    let clothes = "warm clothes with a hat or some sunglasses";
  } else if (weather == "rainy") {
    let clothes = "warm, dry clothes with a rain jacket or rain boots";
  } else {
    let clothes = "bundle up in warm clothes";
} else if (temperature < 65) {
  if (weather == "sunny") {
    let clothes = "layered clothes with a hat or some sunglasses";
  } else if (weather == "rainy") {
    let clothes = "layered clothes clothes with a rain jacket or rain boots";
  } else {
    let clothes =
      "wear layered clothes to adapt to the chilly and warm parts of the day";
} else {
  if (weather == "sunny") {
    let clothes = "light & breathable clothes with a hat or some sunglasses";
  } else if (weather == "rainy") {
    let clothes = "light & breathable clothes with a rain jacket or rain boots";
  } else {
    let clothes = "wear light & breathable clothes because it is hawt outside";

// We've had plenty of practice with nested conditional statements, so lets start looking at nested loops:

// Nested for loops can be used to accomplish a variety of goals. One of the most common uses for nested for loops is accessing elements within 2D arrays

// Consider the following 2D array "breakfasts", created by declaring arrays within an array:

var breakfasts = [
  // each of these arrays are elements of the breakfasts array, though they are arrays with elements themselves.
  ["biscuits", "sausage"],
  ["pancakes", "syrup"],
  ["kolache", "jelly"]

// Using a single forloop, we can access the second element in each array. The second elements include sausage, syrup, and jelly.

// We can accomplish this pretty easily by specifying that the element we want to access is the second element in each array, like so:

for (let i = 0; i < breakfasts.length; i++) {
  // the element is accessed by accessing the i-th element of the breakfasts array, which we know is an array itself, so we specify which element of this array we want to access:
  // remember that the second element of an array has an index of 1

// Checking the console, you'll see that the second elements were printed out

// What about scenarios in which there are multiple elements in a 2D array and we want to traverse through all of them, instead of accessing a single element?

// In this instance, we implement nested for loops:

var newBreakfasts = [
  ["biscuits", "sausage", "OJ", "cheese grits", "grapes"],
  ["pancakes", "syrup", "strawberries", "apple juice", "ham"],
  ["kolache", "jelly", "bacon", "mango", "chocolate milk"]

// Using the same methodology as the forloop on line 38 would only result in the second element within each array being printed.

// We want to print each item related to each breakfast, however, so we will implement a nested for loop like so:

for (let i = 0; i < newBreakfasts.length; i++) {
  // this line is simply printing "Breakfast Option N: " to the console to keep the print statements organized
  console.log("Breakfast Option " + (i + 1) + " : ");
  // pay special attention to the second for loop's statement 2. It says it will loop as long as j is less than the length of the array ***located at element i***
  for (let j = 0; j < newBreakfasts[i].length; j++) {

// For loops are the best loop to iterate through arrays of one or more dimensions, but the same concept of nested loops applies to other types of loops as well

// Below is an example of nested while loops:

// The loops are printing 99 through 00 to the console, one by one

// The first while loop executes WHILE the statement "tens is greater than or equal to 0" is TRUE.

// Looking at the declaration of the tens variable on line 136, we see that tens is initialized to 9. This means that the outer loop will loop 10 times total

// The second while loop executes WHILE the statement "ones is greater than or equal to 0" is TRUE.

// On line 74, we initialized ones to equal 9. We place this withIN the first while loop because of the fact that the second while loop is decrementing the ones variable.

// If we failed to place "ones = 9" within the first while loop, the ones variable would not be reset to 9 after having printed the ten values, and the rest of the values would not be printed.

// Nested while loop example:
let tens = 9;
let ones;
while (tens >= 0) {
  ones = 9;
  while (ones >= 0) {
    console.log(tens + "" + ones);
    // here we ensure to decrement the ones variable so that we are not caught in an infinite loop
  // here we ensure to decrement the tens variable so that we are not caught in an infinite loop

// Below are a few examples of different nested loops:

//Do while:
do {
  let count = 10;
  console.log("doin the first thing");
  do {
    console.log("doin the second thing within the first thing");
  } while (count + 1 > 2);
} while (count > 0);

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

// 1. For this exercise, you will determine what lunch you can afford.
// Declare a new variable named "checkingAccount" and set it equal to some number between 1 and 100.
// Write a nested conditional statement that checks if the account holds less than $50.
// if it holds more than 50 print "you can afford a very nice restaurant for lunch"
// If so, check if the account holds more than $25.
// If so, print "You can afford a nice restaurant for lunch."
// If the account holds more than 15 but less than 25, print "You can afford a trip to a taco truck for lunch."
// If the account holds $7 or more but less than 15, print "You can afford Canes for lunch"
// If the account holds $5 or $6, print "You can afford a $5 footlong"
// Otherwise, print "You can afford ___ items off of the dollar menu" where the blank is filled in with the amount of money left in the account.

// 2. Write a nested for loop that traverses through an array, whose elements contain the letters of your name. Ex: [['B','O','B']['R', 'O', 'S', 'S']];