January 22nd 2018
Hello! Over at Javacript_30days we did a project where the links in a text are highlighted as the mouse hovers over them, but the fun part is that the highlight follows the mouse and it moves around the body. The consts are used to get all the ’ a’ elements and to append a span with a style of highlight. The event listeners listens to the mouseenter on the links (forEach(a => a) and does the function. In the function the key is the
const linkCoords = this.getBoundingClientRect();
which “method returns the size of an element and its position relative to the viewport” (Mozilla Development Network). It works really nice. The coordinates have to be adjusted and some more template literals used, which I need to look into more.
I also started to the new css-grid course by WesBos and it is really cool too. The div gets a “container” class in the style part, and we say display:grid, which will initialize the grid system and then if we add grid-template-row/columns we can manipulate these factors. The auto makes the line responsive. Also, the grid has tracks which show the parts of the grid exactly.
At the Web Development Bootcamp we looked as more exercise with arrays. I see now who you can use the forEach method instead of for to loop over an array.
var nums = [1,2,3,4,5];
nums.forEarch(function (num) {
console.log(num)
}
or the es6 one nums.forEach(num => console.log(num));
but I still have to learn more about es6.
Also the splice() method is useful for cutting out a part of an array and it takes two arguments.
Cheers!