February 1st 2018
Hello! At the ES6 course by Wes Bos we learned about arrow functions, how they used, and when not to use them. Arrow functions are shorter, they use implicit return, and it does not rebind the value of ‘this’
Arrow functions are always anonymous, they don't have names, but you can put them in variable
const fullNames4 = names.map(name =>${name} bos);
//implicit return, there is no "return"
const win = winners.map((winner,i) => ({name: winner, race, place:i + 1 }))
The parentheses show that you will return an object literal, and they are not for the functions block
Also, when you use an arrow function this is not rebounded it is just inherited from the parent scope, the window
box.addEventListener('click', function () {
this.classList.toggle('opening'); //this is equal to the box
setTimeout(function() {
console.log(this);
this.classList.toggle('open');
});
});
We entered a new function and this function has not been bound to anything.
We have to change it to an arrow functions because that inherits the value(this) from the parent function
Default function arguments
function calculateBill(total, tax = 0.13, tip = 0.15) {
return total + (total * tax) + (total * tip);
}
you can set the arguments as default
And you shouldn’t use the arrow functions when you need ‘this’, or when you have to bind a method to an object, add a prototype method, or add argument objects.
At the CSS grid course we learned about CSS grid alignment.
At the Web Development Bootcamp by Colt Steele I started a Color Game projects. There are six blocks of colors and the program generates a random rgb color with numbers and the player has to guess which color it is from the 6 given. We use the DOM to grab the elements as well as functions to make generate random colors and say if the player has guess right or wrong. When the players guesses wrong the color disappears. But if they guess right all the colors change to the correct color.
Cheers!
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + ", " + g + ", " + b + ")";
To generate a random color and make it into rgb, which we push into an array that will be shown on the page.