⇦ Back

WDX-180

Web Development X

Week 18 | Intermediate JavaScript

Week 18 - Day 1 | Recreate Countries of the World Quiz Game

Schedule

Watch the lectures
Study the suggested material
Practice on the topics and share your questions

Study Plan

In these lectures, we are going to try and recreate an online quiz game entitled Countries of the World Quiz.

You can find the online quiz game on this link_blank.

Your instructor will share the video lectures with you. Here are the topics covered:

Part 1: Q&A. Recreating Countries of the World Quiz game (Part 1)
Part 2: Recreating Countries of the World Quiz game (Part 2)

You can find the lecture code here

Lecture Notes & Questions:

Reminder: […document.querySelectorAll(“td”)] => document.querySelectorAll("td")
- There is a difference between NodeList and HTMLCollection
  - NodeList => @@iterator => for..of
console.dir( HTMLElement objects ) for a different view on the console
HTMLDivElement <= HTMLElement
HTMLCollection does not support forEach (you’ll need to convert to array)
Convert array-like objects (HTMLCollection, NodeList, arguments,etc.) to Arrays:
- Array.from (check the MD)
- […someArrayLikeObjectHere]
NodeList supports forEach
DOM API:
- document.getElementById // A single HTMLElement
- document.querySelector // A single HTMLElement
- document.getElementsByClassName // HTMLCollection
- document.getElementsByTagName // HTMLCollection
- document.querySelectorAll // NodeList
2 big categories of graphics in computers: Bitmaps (or Raster) vs Vectors
Include a folder in VSCode workspace: code -a .
Search for “json countries github” to find resources for use in JS
Array some()

References & Resources:

Free SVG World Map
Color this sofa! – SVG + Blend Mode trick
Undraw (free vector illustrations)
SVG Editors:
- https://boxy-svg.com/app
- https://www.vectorpea.com
Free Vectors:

Exercises

Complete the quiz game and make sure to implement the following requirements:

Enable case-insensitive input
Clear input value once we have the correct input
Update count of found countries
Add some styling to the game so that it looks like the original game
Find out how to properly center and display an SVG
- Learn about the width, height and viewbox attributes
Deal with cases/values like Curaçao
Deal with cases like “St. Eustatius (Netherlands)”
Question/Study: What are some use cases for submit vs change vs input events?
- For example, Google search input uses the “input” event

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week18/progress/progress.draft.w18.d01.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Extra Resources

Photo by Monstera Production

Week 18 - Day 2 | The Observer Pattern

Schedule

Watch the lecture
Study the suggested material
Practice on the topics and share your questions

Study Plan

Watch our lecture on: Intro to Design Patterns: A Simple Implementation of the Observer Pattern in JavaScript

The lecture code can be found here.

References and resources for further study:

Exercises

Your task for today is to try and complete all the challenges in the email app that we started developing during the lecture and implement all the required features (delete messages, display messages, star messages, mark messages as unread/read, etc.)

It would be even better to try and work with one of these really cool email client clones:

If you have some time left, you can take a look at the next challenge for this week, which is to try and replicate all the features of the Countries Quiz game that we’ve covered on Week 18, Day 01:

Star quiz button
Timer
List of Continents and countries found (and not found)
Pause timer button
Disable timer button
Help box
Give up button
Guesses counter
Advanced: show missing countries
Your extra features!?

You can find the lecture code here

Perhaps you can try using the Observer pattern on the quiz game? That would definitely be a great challenge. Give it a try!

The original game can be found here.

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 18 - Day 3 | Intermediate JavaScript

Schedule

Watch the lectures
Study the suggested material
Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

Part 1: Q&A on several topics such how JSON.stringify deals with functions, what are Circular References, the difference between null and undefined, CSS pseudo-elements and the attr() rule, debugging a search box algorithm and more!
Part 2: We continue debugging and improving the search algorithm, learn about Number.isInteger method and isNaN, and also learn some cool advanced DOM manipulation methods and properties.

You can find the lecture code here

Lecture Notes & Questions:

Example of a Circular reference:

  const obj = {  
    name: "Dillion",  
    isDev: true,  
    hobbies: ["singing", "writing"],  
    age: 100,  
  }  
  obj.prop = obj; 
  // (Cannot be stringified due to the infinite reference to itself)    

JSON.stringify: “Arrays are serialized as arrays (enclosed by square brackets). Only array indices between 0 and length - 1 (inclusive) are serialized; other properties are ignored.”
Best Practices:
- Object rule: dynamic property names ALWAYS inside [ brackets ]. Don’t use the . notation. Tip: name your objects like, studentsObj, productsObject, etc.
- Prefer isSomething conditionals than !isSomething (is NOT something)
- ALWAYS handle error cases in development
  - BREAK THE CODE intentionally, handle it and ALWAYS give some user-friendly feedback to the users
JSON.stringify will discard functions
- In the case of an Array containing functions, they are converted to null to avoid breaking the Array length and indices.
Study and understand the following code:

  const list = [ 10, 20, 30 ];  
  function reducer(accumulator, arrayValue, arrayIndex){  
      console.log(accumulator, arrayValue, arrayIndex);  
        // Try: debugger;  
      // Change the accumulator:  
      accumulator.count = arrayIndex;  
      return accumulator;  
  }   
  const initialAcc = {}  
  list.reduce( reducer, initialAcc );  

References & Resources:

Study the calc()
Check for compatibility on caniuse.com
- the attr()
Try: for..of with index:
- Adding an Index to the for…of Loop
Circular Reference Error in JavaScript – Meaning and How to Fix It
Function Constructor
Number.isInteger
JSON.stringify()
attr()
https://www.fruityvice.com/

Exercises

Solve the TextNode Challenge
- ELEMENT.querySelector targets HTML <elements>
- We need something different for targeting the text inside those elements

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 18 - Day 4 | Deconstructing Array reduce

Schedule

Watch the lecture
Study the suggested material
Practice on the topics and share your questions

Study Plan

It’s time to take a deep dive and deconstruct the notorious reduce Array function in JavaScript. It’s probably one of the most difficult array methods to grasp and at the same time one of the most powerful and flexible ones. You can replace and recreate almost all other array methods with Array.prototype.reduce so pay close attention!

Watch the video (74min)

Here’s a link to a nice, animated visualization of Array.prototype.reduce by the amazing Joshua Comeau. Please give his GitHub repo a star!

References and resources for further study:

Week 18 - Day 5 | ES6 Classes & Web Components

Schedule

Watch the lectures
Study the suggested material
Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

Function constructors and Prototype
ES6 Classes and extending them via the extends keyword
Native Web Components

You can find the lecture code here

Lecture Notes & Questions:

What is a function constructor:
- 1) Defining and calling a function with the new keyword, e.g. new MyFunction(). Any function called with the new keyword will create custom new objects.
- 2) new Function(), new Object(), new Promise(), new Array(), new String(), new Number() => they create new objects of a specific type.
Remember: Don’t put a return statement inside a Function constructor
Classes: just a new syntax for the Function constructor and the prototype mechanism for creating multiple objects
- class keyword is lowercase, the class Name is always in PascalCase:
  - class MyCoolClass {}
  - class Car{}
All HTML element objects (in JS) extend the HTMLElement class:
- class HTMLDivElement extends HTMLElement {}
- class HTMLParagraphElement extends HTMLElement {}
- class HTMLHeadingElement extends HTMLElement {}

References & Resources:

Exercises

Practice by building Classes and your own custom Web Components.
Find an extensive article about function constructor and learn about the return statement.

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham

WDX-180

Week 18 | Intermediate JavaScript

Week 17 ⇦

⇨ Week 19

Week 18 - Day 1 | Recreate Countries of the World Quiz Game

Schedule

Study Plan

Exercises

Extra Resources

Week 18 - Day 2 | The Observer Pattern

Schedule

Study Plan

Exercises

Week 18 - Day 3 | Intermediate JavaScript

Schedule

Study Plan

Exercises

Week 18 - Day 4 | Deconstructing Array reduce

Schedule

Study Plan

Week 18 - Day 5 | ES6 Classes & Web Components

Schedule

Study Plan

Exercises