Loops and Random Things

Housekeeping

• Lab Time shenanigans with Ash
• Achievement 5
  • Due: Friday, Feb 18 @ 11:59pm
  • Weight: 5% of the final mark

---

1. Spoiler Demos

Materials

• starter code from yesterday

Demo

• Add a second string field to the form and use String.replaceAll() to print a new phrase where the first string has been replaced with the second string.
• Using String.matchAll(), find all instances of string that occur in phrase.

2. for Loop

Materials

• MDN: for statement

Slides: for Loop

Demo: Output 1-100 as a bulleted list

• Starter Code: Print 1-to-100 with a for Loop

Breakout Activity

In groups of two or three, attempt the code-interview question listed under Activity of Print 1-to-100 with a for Loop.

3. Utility Function: Random integer

Materials

• Gist: Find a random item in an Array

Demo: Pick x number of random items

• Inspiration: Tony's Namor App (random phrase generator that uses a for loop)
• starter code

---

Lab Time

1. Classic interview question: using a for loop, print a series of numbers from 1 to 100 such that:
   • if the number is divisible by 3, print 'Fizz';
   • if the number is divisible by 5, print 'Buzz';
   • if the number is divisible by both 3 and 5, print 'FizzBuzz';
   • otherwise, print the number.
   • Example output: 1, 2, Fizz, 4, Buzz, 5, Fizz, ... , 13, 14, FizzBuzz, Fizz, 17, etc.
2. for Loop Activities:
   • Create a comma-separated list of nouns
   • Create a gallery of Lorem Picsum images from an array of image id's

Stretch Labs

Instead of a for loop, complete the above activities using a Array.forEach() loop:

• Array.forEach() - Create a comma-separated list of nouns
• Array.forEach() - Create a gallery of Lorem Picsum images from an array of image id's

See Basic loop with Array.prototype.forEach() to see an example of .forEach().

---

Prep

Example Project

• Tony's Namor App (random phrase generator that uses a for loop)

Math

• MDN Readings:
  • Math Builtin Object
    • Math.random()
    • Math.floor()
• Gist: Find a random item in an Array

Loops

• MDN: for statement
• Video: for Loop by Mosh Hamedani
• Gist: Print 1-to-100 with a for Loop

HTML Output

• MDN Readings:
  • Element.innerHTML
  • Addition assignment (+=) operator