📚 TestFirst JavaScript Overview

TestFirst JavaScript is a multi-part series that provides practice to intermediate to advanced javascript concepts. The majority of concepts introduced in TestFirst have practice exercises. However, there will be new concepts introduced in TestFirst that you will need to learn on your own by reading documentation (it's important to begin learning how to read documentation efficiently!)

1. Create Calendar for study plan

• This is a sample calendar for the JS-Foundation course. You can use this template to create a customized study schedule that fits your needs. The plan consists 5 days a week, with Saturday and Sunday off.

• Recommended Study Plan: Dedicate at least 8 hours per day to each topic: 2 hours for studying lecture notes and 6 hours for practicing exercises. By following this plan, you can complete all exercises in approximately 16 days (2 weeks).

• Alternative Study Plan-1 (4 Hours Per Day): If you can only commit to 4 hours a day, allocate 2 hour for studying the lecture notes and 2 hours for exercises. In this case, you will need around 32 days(approximately 1 month) to finish all exercises.

• Alternative Study Plan-2 (1 Day Per Week): If you prefer studying only one day per week, dedicate 8 hours on that day. With this schedule, you can complete the one part testcases in two weeks, finishing all exercises in around of 16 weeks(approximately 4 month) to complete the exercises.

• You can use this spreadsheet to track your JS-Foundation progress. Save a copy of the spreadsheet to your account. Then, in the Timeline sheet, enter your start date and the number of hours you plan to study each week. As you finish each course, update the Actual End Date column in the Curriculum Data sheet, without changing the Planned Start Date or Planned End Date columns. The spreadsheet will automatically update and provide revised completion estimates based on the dates you enter.

---

Suggested sample schedule

Day	8-Hours Daily Plan(2 Weeks)	4-Hours Daily Plan(1 Month)	1-Day Weekly Plan(4 Months)
Day 1	Test first part-1: Lecture Notes & Exercises	Test first part-1: Lecture Notes & Exercises	Test first part-1: Lecture Notes & Exercises
Day 2	Test first part-1: Exercises	Test first part-1: Exercises	-
Day 3	Test first part-2: Lecture Notes & Exercises	Test first part-1: Exercises	-
Day 4	Test first part-2: Exercises	Test first part-1: Exercises	-
Day 5	Test first part-2: Exercises	Test first part-2: Lecture Notes & Exercises	-
Day 6	Weekend activity: Check point test first part-1	Weekend activity: Check point test first part-1	Weekend activity: Check point test first part-1
Day 7	Weekend activity: Check point test first part-1	Weekend activity: Check point test first part-1	Weekend activity: Check point test first part-1
Day 8	Test first part-3: Lecture Notes & Exercises	Test first part-2: Exercises	Test first part-1: Exercises
Day 9	Test first part-3: Exercises	Test first part-2: Exercises	-
Day 10	Test first part-3: Exercises	Test first part-2: Exercises	-
Day 11	Introduction: Html, Css, Dom & Exercises	Test first part-2: Exercises	-
Day 12	Whack a mole: Lecture Notes & Exercises	Test first part-3: Lecture Notes & Exercises	-
Day 13	Weekend activity: check point test first part-2	Weekend activity: Check point test first part-1	Weekend activity: check point test first part-2
Day 14	Weekend activity: check point test first part-3	Weekend activity: Check point test first part-1	Weekend activity: check point test first part-3
Day 15	Pixelate: Lecture Notes & Exercises	Test first part-3: Exercises	Test first part-2: Lecture Notes & Exercises
Day 16	Pixelate: Exercises	Test first part-3: Exercises	-
Day 17	Game of life: Lecture Notes & Exercises	Test first part-3: Exercises	-
Day 18	Game of life: Exercises	Test first part-3: Exercises	-
Day 19	Coffee clicker: Lecture Notes & Exercises	Introduction: Html, Css, Dom & Exercises	-
Day 20	-	Weekend activity: check point test first part-2	-
Day 21	-	Weekend activity: check point test first part-2	-
Day 22	Coffee clicker: Exercises	Introduction: Exercises	Test first part-2: Exercises
Day 23	-	Whack a mole: Lecture Notes & Exercises	-
Day 24	-	Whack a mole: Exercises	-
Day 25	-	Pixelate: Lecture Notes & Exercises	-
Day 26	-	Pixelate: Exercises	-
Day 27	-	Weekend activity: check point test first part-3	-
Day 28	-	Weekend activity: check point test first part-3	-
Day 29	-	Pixelate: Exercises	Test first part-2: Exercises
Day 30	-	Pixelate: Exercises	-
Day 31	-	Game of life: Lecture Notes & Exercises	-
Day 32	-	Game of life: Exercises	-
Day 33	-	Game of life: Exercises	-
Day 34	-	-	-
Day 35	-	-	-
Day 36	-	Game of life: Exercises	Test first part-3: Lecture Notes & Exercises
Day 37	-	Coffee clicker: Lecture Notes & Exercises	-
Day 38	-	Coffee clicker: Exercises	-
Day 39	-	Coffee clicker: Exercises	-
Day 40	-	Coffee clicker: Exercises	-
...	-	-	-
...	-	-	-
Day 43	-	-	Test first part-3: Exercises
...	-	-	...
Day 50	-	-	Test first part-3: Exercises
...	-	-	...
Day 57	-	-	Introduction: Html, Css, Dom & Exercises
...	-	-	...
Day 64	-	-	Whack a mole: Lecture Notes & Exercises
...	-	-	...
Day 71	-	-	Pixelate: Lecture Notes & Exercises
...	-	-	...
Day 78	-	-	Pixelate: Exercises
...	-	-	...
Day 85	-	-	Game of life: Lecture Notes & Exercises
...	-	-	...
Day 92	-	-	Game of life: Exercises
...	-	-	...
Day 99	-	-	Coffee clicker: Lecture Notes & Exercises
...	-	-	...
106	-	-	Coffee clicker: Exercises

---

2. Follow the course guide

i. Setting up the repository

Before beginning your assignment, make sure you have completed these steps:

1. Forked & cloned the TestFirst repository.
2. Installed node and a text editor.

Setup Test First

• Fork the repository to your personal GitHub Account
• Clone the repository to your local machine
• Install the VSCode ESLint and Prettier Extensions (if they aren't already installed)
• Run the command npm install inside each of the numbered directories inside the 'tests' directory (e.g. tests/1-testfirst-part-1)
• Run testem with the npm run test command or npx testem command

Run Testem with npx testem

In your TestFirst directory run the command:

$ npm run test

OR

$ npx testem

After testem initiates, connect to http//localhost:7357 in your web browser and your test specs will load.

---

ii. Foundations

testfirst-part-1

Click to expand

TO STUDY: Click to expand

• Object creation

  • Object.assign()

  let clone = Object.assign({}, objToClone)
  

  • Object.create()

  let parentObject = {name: "niru", grade:"masters"}
  let childObject = Object.create(parentObject)
  

  • Factory functions

  function makeStudent(name, grade) {
    let newStudent = {name, grade}
    return newStudent
  }
  let niru = makeStudent('niru', 'masters')
  

• New syntax / shortcuts

  • Spread syntax (for arrays & objects)

  let arrA = [1, [2,3], 4]
  let arrB = [4, 5, 6]
  let arrC = [20, ...arrA, arrB]
  
  let objA = {name: 'niru', grade: 'masters'}
  let objB = {age: 25}
  let objC = {age: 22, ...objA, objC}
  

  • Shorthand object notations

  let name = "niru"
  let grade = "masters"
  
  let niru = {name, grade}
  

• Preview

  • __proto__

LECTURE NOTES: Click to expand

• Object assign / Factory functions
• Object create / proto

TODO: Click to expand

• testfirst part 1
• checkpoint part 1 (optional)

SOLUTIONS (only look if needed): Click to expand

• testfirst part 1

testfirst-part-2

Click to expand

TO STUDY: Click to expand

• Arrow Function

const sayHello = (name) => `hello ${name}!`
console.log(sayHello('Pitamber'))

• Constructor function

function FourWheeler(fwType) {
    this.numberOfWheels = 4
    this.type = fwType
}

let car = new FourWheeler('car')

• Adding a prototype function to the constructor function

FourWheeler.prototype.honk = () => console.log('honk');
FourWheeler.prototype.setType = (newType) => this.type = newType;

• the arguments parameter

function someFunc() {
  console.log(arguments);
}

someFunc('hello', 'there', 'you');

Array methods (functional)

• forEach
• Map
• Filter
• Reduce
• Some
• Every
• Includes

LECTURE NOTES: Click to expand

• Arrow function
• Array methods / arguments

TODO: Click to expand

• testfirst part 2
• checkpoint part 2 (optional)

SOLUTIONS (only look if needed): Click to expand

• testfirst part 2

testfirst-part-3

Click to expand

TO STUDY: Click to expand

• Class

class Student {
  constructor(name, grade) {
    this.name = name;
    this.grade = grade;
  }

  sayHello() {
    return `My name is ${this.name}`;
  }
}

let newStudent = new Student('niru', 'masters')

• Extending a class

class TEJstudent extends Student {
  constructor(name, grade) {
    super(name, grade);

    this.isTEJfellow = true;
  }

  schoolLocation() {
    return "The school is in Pasayard"
  }
}

• this.constructor.name: will print the name of class that the instance was created from

LECTURE NOTES: Click to expand

• testfirst part 3

TODO: Click to expand

• testfirst part 3
• vanishing man
  • string methods: be familiar with methods such as split
  • array methods: be familiar with array methods mentioned above
• testfirst review
• checkpoint final (optional)

SOLUTIONS (only look if needed): Click to expand

• testfirst part 3
• vanishing man
• testfirst review

HTML / CSS

Click to expand

TO STUDY: Click to expand

• HTML / CSS

LECTURE NOTES: Click to expand

TODO: Click to expand

• PART 1 (HTML / CSS) of guessing game

SOLUTIONS (only look if needed): Click to expand

• guessing game

DOM

Click to expand

TO STUDY: Click to expand

Concepts to know for this exercise

• DOM
• Math.random()
• Math.ceil()
• Math.abs()
• For shuffle, you can copy paste the final function here

LECTURE NOTES: Click to expand

TODO: Click to expand

• PART 2 (DOM) of guessing game

SOLUTIONS (only look if needed): Click to expand

• guessing game

---

iii. Vanilla JavaScript projects

WHACK-A-MOLE

Click to expand

TO STUDY: Click to expand

Concepts to learn for this exercise

• addEventlistener will pass the event as argument to it's function in

myElement.addEventlistener("click", function (e) {
  console.dir(e);
});

• event propagation
  • event bubbling
  • event capture
• event delegation

Advanced concepts

• clearInterval
• removeEventListener

Methods you will need to use

• document.querySelectorAll
• element.classList
• element.classList.toggle(className)
• setInterval(function, time in milliseconds)

LECTURE NOTES: Click to expand

• Whack a mole

TODO: Click to expand

• Instructions for whack-a-mole
• please fork this repository to start your solution

SOLUTIONS (only look if needed): Click to expand

• the basic solution is in the solution branch
• the solution with timer is in the solution with timer branch

PIXELATE

Click to expand

TO STUDY: Click to expand

Concepts to know for this exercise

• styling - height, width, background-color
• document.createElement
• parentElement.appendChild(newElement)
• HTML elements tr and td

LECTURE NOTES: Click to expand

Pixelate lecture notes

TODO: Click to expand

• Instructions for pixelate
• please fork this repository to start your solution

SOLUTIONS (only look if needed): Click to expand

• Solution for pixelate

GAME-OF-LIFE

Click to expand

TO STUDY: Click to expand

Concepts to know for this exercise

• what is 'game of life'?
• Element.dataset attribute
• how can we include js script at the top of our index.html? what does the keyword defer do?

LECTURE NOTES: Click to expand

TODO: Click to expand

• See what you will be building
• Instructions for game-of-life
• please fork this repository to start your project

SOLUTIONS (only look if needed): Click to expand

• Solution for game-of-life

COFFEE-CLICKER

Click to expand

TO STUDY: Click to expand

• String.split
• Removing all children from an element
• Using localStorage

LECTURE NOTES: Click to expand

TODO: Click to expand

• See what you will be building
• Instructions for coffee-clicker
• please fork this repository to start your project

SOLUTIONS (only look if needed): Click to expand

• Solution for coffee-clicker