CPNT 262 Day 9 - Looping with objects

Housekeeping

• Tooltime: Install Postman
• Alternatives to Lorem Picsum

Trophies of the Day

• Upgraded Lorem Picsum gallery
• Fizzbuzz: See Section 4 below
• Mocking Sponge Bob function: See Section 4 below

1. Spoiler Demos

• Creating a comma-separated list of nouns
• Creating a gallery of Lorem Picsum images

2. Local images

While Lorem Picsum is a wonderful service for inserting placeholder images, it's not a practical solution for a production website.

In this session, you will refactor yesterday's Lorem Picsum gallery to use local images instead of placeholder links.

Materials

• Spoilers: Create a Lorem Picsum Gallery
• Animal Lorem Picsum Images

Activity: Refactor for local images

• Replace the placeholder links in the Lorem Picsum Gallery with local image links. For example,

  Instead of this:

  <img src="https://picsum.photos/id/237/300/300" alt="...">

  Use host your images locally like this:

  <img src="images/md/237.jpg" alt="...">

3. Arrays of objects

Materials

• Object basics
• Working_with_Objects

Activities

• Picsum gallery: Upgrade the gallery using an array of objects.

4. Stretch: for loops

Materials

• Looping code: The standard for loop
• Video: for Loop by Mosh Hamedani
• Examples:
  • Print 1-to-100 with a for Loop
  • Tony's Name Generator
    • method call in app.mjs on Line 16
    • for loop code in phraser.mjs on Lines 11-13

Activities

• FizzBuzz: Using conditional logic and 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.

• Using a for loop and your favourite mocking Sponge Bob meme, create a function that will turn a phrase like this:

  "Can I get some extra credit?"

  To sticky caps, like this:

  "cAn i GEt SomE eXtRa creDiT?"

Prep

Loops

• Looping code: The standard for loop
• Video: for Loop by Mosh Hamedani

Objects

• Object basics
• Working_with_Objects

Strings

• Review: Handling text - strings in Javascript
• Review: Useful string methods