January 26th 2018
Hello! From the JavaScript_30days course recreated the Stripe nav that follows along. It is really interesting because when you hover over different navs it appears as the same nav goes under it. We have to make a function for adding and removing classes which appear when triggered, which is the mouseenter. We also get information where the dropdown item and the nav is. We do that with the .getBoundingClientRect();
const dropdownCoords = dropdown.getBoundingClientRect();
const navCoords = nav.getBoundingClientRect();
Furthermore when you hover over the element it has to know how wide and high the list element is.
background.style.setProperty('width', ${coords.width}px);
background.style.setProperty('height', ${coords.height}px);
background.style.setProperty('transform', translate(${coords.left}px, ${coords.top}px));
For that we have to set the property of the background which is how we selected the dropdown css.
In the CSS grid course we had a spanning and placing cardio day, which means we covered all the previous lessons and practiced them.
And at the Web development bootcamp we looked at object methods, and the use of “this” keyword. Method in this case is a ”function inside a property of an object”. Also, the way we use the “this” keyword is. take some data, put it in an object, and take associated functions and add them to the same object, and use the keyword this to access the data that we predefined.
Cheers!