Frontend Development: JavaScript

🚀 ReDI Fall 2020 🚀

Lecture

Practice: The new beginning

What we will do today

  • FCC QA
  • Practice

FCC QA

Let's see what we've got :)

Which one(s) of those are good names for variable?

  1. var myVariable;
  2. var age;
  3. var colorOfTheLeftDoorOnBMW;

Which one(s) is a number in JS?

  1. var age = 23;
  2. var postIndex = '123';
  3. var weight = 75.43;

Which one() is a string in JS?

  1. var name = "Vasja";
  2. var surname = 'Pupkin';
  3. var address = `address is unknown`;
  4. var city = munich;

What would be the outcome of following code?


            var name = 'jack';
            console.log(name[1]);

How to find last element in following array?


            var strangeNumbers = [1, 4, 7, 12, 99, 0, 12, -1, 4];

Ok, let's practice now :)

Let's build something similar to that:

Specification:

  1. Create a button element on a page
  2. Can react on click event
  3. Change background on mouseover event
  4. Resctore initial background on mouseleave event

TIPS:

  1. event names: mouseover, mouseleave, onclick
  2. to add class to an element: el.classList.add('classname')
  3. to remove class from an element: el.classList.remove('classname')

Homework

  • Continue FCC section from "Shopping List" till "Golf Code"
  • Create issues according to your wireframes and create 1-2 PRs with page layout