mdinfotech.net  



Create a new HTML file, with a new CSS file, and a new Javascript file. Use the w3Schools tutorials to learn basic JavaScript.
  1. w3 JavaScript Tutorials
  2. JS Events, DOM Event Reference
  3. Variables
  4. if..else
  5. for loop
  6. Dates, Date Get Methods
  7. Arrays
  8. Random Numbers
  9. Operators
  10. Objects

Assignment 2: JS Quiz Assignment

Using the QuizTemplate.html file provided by Ms. Wear, build a JavaScript Quiz that asks at least 10 questions, and give a final assessment.


Marking Criteria (/37)

  • Iterates through 10+ questions /10
  • Appropriate good quality images used for each question. /5
  • Makes an assessment based on final score or selected answers /5
  • Executes through entire quiz with NO Javascript errors on the console /5
  • CSS Validates /2
  • HTML Validates /2
  • Responsive: works on wide screen and phone emulator /2
  • Byte Size of Entire Folder < 3 MB /2
  • Additional Features /4
    Each feature worth 2 marks, up to 6 marks total (2 bonus)
  • Bugs & Usability Issues -1 for each usability issue or bug found
  • Resources
    Countdown Timer:
      var timeleft = 10;
      var downloadTimer = setInterval(function(){
      document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
      timeleft -= 1;
      if(timeleft <= 0){
        clearInterval(downloadTimer);
        document.getElementById("countdown").innerHTML = "Finished";
      }
    }, 1000);
    will work in a div tag with id "countdown".
  • Copy WeatherAppStarterCode.zip from Student Shared > Assignments > Web Development to your H: Drive
  • We will go through the code in class, and add functionality to get a working Weather App that gives the forecast for Victoria from a static JSON file.
  • New concepts:
    1. cloneNode()
    2. textContent In summary, innerHTML parses content as HTML, so it takes longer. textContent uses straight text, does not parse HTML, and is faster.
    3. querySelector
    4. setAttribute
  • Apply your skills: You may notice the temperature is in Fahrenheit and the wind speed is mph. Write two functions: fahrenheitToCelcisus() and mphToKmh() in client.js. Now use them to display the values in Canadian :) units.
  1. Create an account on Glitch.com
  2. Create a new project. Under New Project, select "Clone from Github repo" and paste this url into it: https://github.com/lwear/weatherAppv0.0.3.studentcode.git.
  3. Rename your new project WeatherApp0.0.3.
  4. Your will need to copy and paste your code from Weather App 0.0.1 as follows:
    1. Copy all the code from index.html to index.html
    2. Copy all the code from styles.css to style.css
    3. Copy all the code from weatherapp.js to client.js
  5. Modifiy index.html to access style.css instead of styles.css, and client.js instead of weatherapp.js
  6. In class you will
    1. Go over the code in server.js
    2. Create a secret API_KEY on Dark Sky API
    3. Set up the secret key on Glitch in a .env file at the server level
    4. Modify the app to get real time data from the Dark Sky API instead of static data from weatherdata.js
New code will be added so you can Add/Remove cities.
Design an app that uses an API to get content. It CANNOT BE A WEATHER APP.

Resources
  • Use the Fetch API to Get Data
  • Create a Glitch project with Ms. Wear's API Examples Repository: https://github.com/lwear/APIexamples.git
  • Ms Wear's Petfinder Example (uses accesstokens): https://github.com/lwear/petfinder-attempt.git
  • cURL to fetch converter
  • Cat Facts API Example: https://github.com/lwear/catfactsapi.git

  • Milestone 1 Monday Nov 25:
    Complete a responsive design template that validates OR display a sample card containing json data as you will display it in your app.

    Milestone 2 Thursday Nov 28:
    Complete one of the following: User input generates page content (like a search) OR Final Webpage design, valid, responsive, with fake data.

    Final Project due: Tuesday Dec 3:
    Completed app.

    Marking Criteria (/50):
  • Milestone 1 (/10)
  • Milestone 2 (/10)
  • App-ability (/10): would someone care to download this as an app? does it have modern, attractive, and responsive design?
  • Complexity (/10): what coding level was required to write this app?
    1 = No JS
    2-5 = some JS
    6-7 = User input modifies request made to API
    8-9 = User input searches JSON data
    10 = Wow, just wow!
  • Code (/10) HTML Validates, CSS Validates, No JS errors on server or client.
  • In class lesson and demonstration on the client server model.

    Demo: ERR_NAME_NOT_RESOLVED error, IP addresses (via ping), Linux

    Watch the following video and answer the questions below in a Google docs document.
  • Watch The Client Server Model - Clients and Servers
    1. Define client.
    2. Give examples of a client computer.
    3. Give examples of a client program.
    4. What is a server?
    5. What is a virtual server?
    6. Who makes requests?
    7. Who provides repsonses?
    8. What is the client-server model?
    Watch the following videos and answer the questions below in a Google docs document.
  • Watch TCP/IP
  • Questions to answer
    1. Define protocol (Google it).
    2. Define TCP
    3. Define IP
    4. Define HTTP
    5. Define FTP (Google it)
    6. Define SSH (Google it)
    Quiz on questions answers under these topics.