CS130: Spring 2020

Intro to the Web

CS130: Spring 2020

Lessons > Tutorial 6. Loops Practice

Week 7: Tutorial

Download Tutorial Files

In tutorial this week, we’re going to practice using for...of loops and templates to create “data-driven” interfaces that are responsive to the user. Part 1 is recommended. Part 2 is optional (if you’re interested in basic JavaScript animations), and is recommended for more experienced programmers.

Part 1: Required for Tutorial

01-list-of-strings

Using a for/of loop, print a greeting for each person in the names list.
starter

Use a for / of loop to generate a card for each photo in the list. You will also have to use a template variable.
starter

03-list-of-objects-and-a-template

Using a for/of loop, render a card for each person in the list that displays their avatar, name, and score.
starter

Study the index.js file and the way it “fetches” data from a remote server. Add comments to the file so that you understand what’s happening.
starter

Update the loadCars() and loadBikes() functions so that they loads photos from the cars and bikes data files (respectively).
starter

[Optional] Part 2: Indeterminate Loops

Indeterminate Loops are loops that can repeat any number of times (not constrained by the length of a list or collection). Please try and complete the following exercises (working from the starter files):

01-identical-icons

Using a while loop, print the message provided in js/index.js 100 times.
starter

02-icon-variety

Using a for…of loop, iterate through the classNames list and output an icon that corresponds to each font awesome class. Note that these icons are drawing from the FontAwesome icons. Feel free to switch them out.
starter

03-bubbles

Using a while loop, render 200 bubbles. Note: this code uses a third-party library called Paper.js, which makes it easier to use the html5 <canvas> tag.
starter

04-different-color-bubbles

Using any kind of loop, render 200 bubbles, but make the bubbles different colors by selecting a random color from the colors array. Your solution should render bubbles with all 5 colors. Hint, you’ll need to figure out how to change the colors array index as you loop.
starter

05-fish-left-right

Modify the code inside the onFrame event handler (lines 70-76) so that all of the fish move — not just the first 3. One thing to note here is that you can use canvas to add some whimsical effects w/o animation being the main event.
starter

If you want, you’re welcome to change the fish images, or to modify the number of fish that get created.

06-animated-bubbles

Similar code to the above. Please complete the following:

  1. Modify the createBubbles function so that it actually creates numBubbles bubbles (currently set to 100 bubbles).
  2. Make all the bubbles move by modifying the code inside the onFrame event handler (lines 56-60)

starter

Turn in your files via GitHub

  1. Ensure that your tutorial06 folder is inside of your repo folder.
  2. Check the status of your repo:
    $ git status
    It should say that your tutorial06 files are “untracked”
  3. Add all of your tutorial06 files to the list of files that are tracked by the repo:
    $ git add tutorial06
  4. Check the status of your repo again:
    $ git status
    It should now say that you tutorial06 files are being tracked.
  5. Now, commit your new tutorial06 files to the repo:
    $ git commit -m "Adding my tutorial06 to the repo"
  6. Finally, “push” your files to GitHub:
    $ git push
  7. Paste a link to your GitHub repo and to your GitHub pages