• the "Back-up" talk
  • user accounts
  • meet the lab, lab rules
  • meet the computers
  • exactly what does "monitors OFF!" mean?
  • printing

Students are responsible for saving back-up copies of all their work. It is useful to have a GMail account and a USB drive.

Topics to be Covered
PWA Development
Google Maps API
More Advanced Programming in JS

Design and create a CSS animation from scratch.

  • Effort (/5) - how much effort did you put in?
  • CSS Animation (/5) - CSS Animation demonstrates originality
  • Extra Functionality (/5) - At least one event affects the animation, additional JS Functionality, use of SVG etc
  • Design (/5) - follows principles of modern design

Step 1: Watch Ms. Wear's Video Lesson on How to Write a Hexadecimal Color Code Game.

Step 2: Add functionality so that the game asks exactly 10 questions.

Step 3: Add functionality so that the game there are 3 levels: Level 1 - two choices for the correct answer, Level 2 - four choices for the correct answer, Level 3 - eight choices for the correct answer. Redesign the interface so that it works with all 3 options.

Step 4: Add functionality so that the game has two options: the one shown in the video AND another one where the color code is shown, and the user has to click on the correct color.

Step 5: Turn it into a PWA using the instructions from Unit 3 in Web Dev 11. Host it on Glitch. Hand in on Google Classroom.


  • Game From Video Finished (/5)
  • Game Asks 10 Questions (/5)
  • Game Has 3 Levels As Describes (/5)
  • Second Game Created (Step 4) (/5)
  • Passed PWA Test (Lighthouse) (/5)
  • RWD works on Phone and Laptop (/5)

Step 1: Set up an account with Google Cloud and get a Maps API Key:Watch Setting Up a Google Maps API. You will need to add billing information to be able to use it. I suggest also following along in the Google Documentation that the video is following: Google Maps JS API Overview.

Note:Google recommends restricting your API key instead of hiding it: API Best Practices.

Step 2: Watch Ms. Wear's Video Lesson for the Google Maps Project. See a working example of the example project I will teach: Get Outside!

Links used in the video

Step 3: Add functionality: let the user change the search radius

Step 4: Turn it into a PWA. Submit link on Google Classroom.


  • App From Video Finished (/5)
  • Passed PWA Test (Lighthouse) (/5)
  • Added Functionality (/5)
Level 1: Using the Google Maps API, show a map of your local area, with your location as a red marker, and any restaurant in a 3km radius with a yellow marker.
Level 2: Show the 3 restaurants in a 3km radius with the highest star rating with a yellow marker.
Level 3: Add a button for each restaurant that shows directions from you to the restaurant.
Level 4: Add a button that toggles the route between driving and bussing.
Level 5: Add your own feature(s) to the program. Suggestions: vary the radius, change the number of results, allow other types of places to be searched for etc.
All levels: Turn into a PWA and validate code. Submit link on Google Classroom.

Here are some links that will help you with various requirments of the project.
  1. Initializing the map:
  2. When you receive a response for your search request it will look like this: This is where you can access the "Rating" of the restaurant.
  3. When searching for the restaurants, the API has a built in service called "nearby search" learn about it here:
  4. You will NEED to add &libraries=places in between your API_KEY and &callback=initMap in the script link at the bottom of your HTML file. Example
  5. Lighthouse failing? Online PWA checker, Online Performance Checker


  • Level 1 Achieved (/4)
  • Additional Level Achieved: 2(+1-2), 3(+1-2), 4(+1-2), 5(+1-2) (/8)
  • Passed PWA Test (Lighthouse), HTML and CSS Validate, No JS errors (/4)

An interval timer allows you to set two (or more) periods of time of different lengths. One period is for work (high intensity) and one period is for rest or active recovery (low intensity). By alternating these two time periods, you've set up the intervals of your workout.

A typical HIIT timer has a set number of high intensity intervals separated by low intensity intervals. Optionally, you can provide a warmup and cooldown period by including a duration.

  1. Read Principle of Design
  2. Learn about HIIT Training
  3. Design and write an extremely easy to use responsive HIIT interval timer in JavaScript.
  4. Appearance, usability, flexibility, robustness, and application will be considered in the assessment.
  5. Turn it into a PWA. Eliminate all red dots on the Lighthouse test. Submit link on Google Classroom.
  • Lighthouse failing? Online PWA checker, Online Performance Checker
  • Deadlines:

    • Prototype 1 - Real User Test tba
    • Final Project Due tba


    1. Interval Timer Created working interval timer as defined above (/5)
    2. Usability as a HIIT Timer for a Specific HIIT Workout - create a HIIT Timer as defined above. Usability refers to ease of programming a specific workout and use during workout . Ms Wear will try and program in a specific workout and do the workout to your timer(/5)
    3. Application of Principles of Design to Interface (/5)
    4. HTML and CSS Validate, no JS Errors (/5)
    5. No Red Dots/Triangles on Lighthouse Test (/5)

    Write a multiuser Tic Tac Toe game using Firebase.

    Note: to do this project, you will need to set up a billing account with Google API. This means you must provide a credit card number. No charges will actually be billed unless you "enable billing." If you are not comfortable creating a billing account with Google, it may be possible for me to set up a Firebase database for you to use, however, you will not be able to log in to Google to access it, or modify it, and it may make learning to use Firebase more difficult.

    1. Read about Google's Firebase Realtime Database
    2. Complete the assignment outlined at my Multiplayer Tic Tac Toe Github repository.
    3. Follow the instructions on the README of the Github
    4. Turn it into a realtime two player PWA.
    5. Once it works, you can deploy it live on the firebase servers. Firebase Deploy Instructions. At school: C:\Users\lwear\AppData\Roaming\npm\firebase deploy
    Read about some capabilities of service workers:

    Make your final project work offline by storing any previously fetch requests.

    Bonus: set up a push notification that occurs 10 minutes after installing the app

    Read What Makes A Great App?. Design and build an original app that implements the skills you have learned in this course.

    Minimum technical criteria for assignment:

    1. requires JavaScript coding
    2. interface with an API (Maps, or any other API)
    3. store data in a cloud database (Firebase, or another cloud storage system)
    4. have a responsive design
    5. be deployed to the web (Firebase Deploy, Heroku, maybe Glitch?)
    6. Include some form of user input with full error checking/security
    7. Get green on all Lighthouse criteria and get no red triangles on PWA status
    8. Works offline by caching all key resources, and all recent fetches that are made
    9. Bonus - sends a push notification 10 minutes after being installed.
    1) Come up with 2 ideas for an app Submit your 2 ideas on Google Classroom. For inspiration: Watch Coming up with APP ideas. For fun: App Idea Generator.

    2) Prototype 1: Build an app that is online and interacts with your selected API. Get feedback from Ms. Wear.

    3) Prototype 2: Modify the app according to feedback and testing.

    4) Hand into Google Classroom by including:
    1. Screenshot of your HTML validator,
    2. Screenshot of your CSS validator,
    3. Screenshot of your Lighthouse Audit
    4. Screenshot of the Firebase database with data in it
    5. Link(s) to the homepage for the API(s) you are using
    6. Link to the actual app
    Marking Criteria: Marking Criteria Web Dev 12 Final Project

    Ms. Wear's Secure API Key Example on Glitch
    CORS Errors
    To prevent CORS Errors from API's being accessed from server.js running Express on Node
    // needed to prevent CORS errors
    app.use((req, res, next) => {
      console.log("CORS Error Check");
      res.header('Access-Control-Allow-Origin', '*');

    Agile design is a set of principles that can be applied to the software development process. Agile practices approach discovering requirements and developing solutions through the collaborative effort of self-organizing and cross-functional teams and their customer(s)/end user(s). It advocates adaptive planning, evolutionary development, early delivery, and continual improvement, and it encourages flexible responses to change.

    Scrum is a process that applies Scrum principles. This specific framework revolves around three fundamental principles:

    • transparency: each team members must have access to all information regarding the product to deliver;
    • inspection: regular evaluations are essential to readjust the project if necessary;
    • adaptation: the implementation of new measures is necessary when inspection shows deviations from the measured results.

    A Sprint is a short, time-boxed period when a scrum team works to complete a set amount of work. Sprint planning is a collaborative event where the team answers two basic questions: What work can get done in this sprint and how will the chosen work get done?

    The final project is to be developed using a process that implements the principles and ideas above.

    Understand Scrum in 10 minutes
    Scrum Sprints