Lab and Assignments, instructions, starter code and some solutions

Lectures if missing from this google drive directory then they are embedded in moodle

korra all code examples used in the lectures & some extras, live on a web server

Lab 02-02 week 2

Topic: Using events on html elements, adding static data to the DOM (adding own html)

• instructions dom manipulation
• creating my solution youtube video
• my solution

Dev Tools - debugging intro

Topic: using dev tools in Firefox to debug your javascript

• Using Dev tools console.log youtube video
• Using Dev tools unconditional breakpoints youtube video
• code used in the videos

Lab 03-01 week 3

Topic: Using events and input from the html page add data to the DOM (input data is added to list)

• instructions dom manipulation using input
• starter code download the zip
• my solution

Assignment 1 week 4

Lab 04-01 week 4

Topic: review of controls, forms and HTML5, data validation with regex, 3 short exercises using events & dom manipulation

• instructions review, regex, events
• starter code download the zip

Lab 05 week 5

Topic: Arrays + higher order functions

• forms & validation
• array methods practice
• functions & arrays
• reducer challenge

Lab 06 week 6

Topic: Using Map object and JSON

• practice using Map object
• practice using JSON & Map
• practice using JSON (has webstorage code)

Topic: using webstorage

• practice webstorage
• practice webstorage session vs local

Project 1 week 6

Lab 08 Week 8 Deployment & CI/CD

Topic: Deployment & CI/CD

Part 1 web app deployment using file transfer

• instructions
• Submit your URL

Part 2 web app deployment using gitlab ci <<<<< STILL WAITING FOR GITLAB EDU LICENSES

• instructions
• Submit your URL

Lab 09 Week 9

Topic: Cooperative asynchronous JavaScript: Timeouts and intervals

• Monday & Tuesday stop watch instructions
• Wednesday & Thursday
  • I need to give you permissions on a group in Gitlab in order to allow you to use shared runners for your CI please fill out the form
  • continue with the stopwatch if it's incomplete
  • review past labs & test #1, make sure you understand what you missed
  • try out the examples see Promise objects
  • optional take the example and modify it to put everything from the json object onto the html, your choice UL & LI, paragraphs, divs etc.
    • take this example read json
    • the code running on korra

Topic: Promise objects

• try out the examples in promises.js (the same file is on korra)

Lab 10 Week 10

• more examples in promises2.js

Topic: Using the Fetch API

• Use reqres.in to make simple requests & populate a page instructions

Topic: Using the Fetch API with HTTP GET & POST

Assignment 2 week 10

Lab 11 Week 11

Topic: XmlHTTPRequest
Topic: more on functions, use of this

Part 1 XHR to Fetch API

Part 2 Complete part 2 from Week 8

If you did not complete part 1 go back to week 8

I had to set up an education organization in order for you to use the CI free runners. You are now able to do this lab, (provided you gave me your gitlab id in week9.) I have changed the instructions because you have to use a Gitlab Group, DawsonStudents, to which I added your gitlab id. If I don't have it you will have to contact me to set up permissions for you.

Part 2 web app deployment using gitlab ci <<<<< FIXED NOW HAVE GITLAB EDU LICENSES

• instructions
• Submit your URL

Part 3 Work on Assignment 2

Lab 12 Week 12

Topic: Prototypes and Objects in JavaScript

• instructions using class keyword syntax

Topic: extra practice exercises

• more practice using the fetch api
• more practice array functions Added 2021-11-12
• more practice class syntax functions Added 2021-11-15

Test 2 & JSX Week 13

Project 2 Week 14

Lab 15 Week 15 React lab exercises

• Full demo of building a React app korra start to finish