January 28th 2018
Hello! At the JavaScript_30days we did another cool project. We added a vertical speed bar that we could we could use to manipulate the video’s speed by moving the mouse up or down. We have to offset the height this time to make sure the program know where the mouse is the window.
const y = e.pageY - this.offsetTop;
The playback rate was calculate the following way:
const percent = y / this.offsetHeight;
const min = 0.4;
const max = 4;
const height = Math.round(percent * 100) + "%";
const playbackRate = percent * (max - min) + min;
In the CSS Grid course I did the Grid-template area where we can give specific names.
At the Web Development Bootcamp we talked about getting and setting attributes with the help of the DOM.
.getAttribute() - gets the attribute
.setAttribute() - it takes two arguments, the name of the attribute, and what we want to change it into
you can change any attributes
And we also did Events. We attach an even listener to a selected element or function. We can add more than one listeners to an element
element.addEventListener(type, functionToCall);
button.addEventLister("click", function () {
some code;
});
document.querySelector("ul").addEventListener("click", function() {
console.log("YOU CLICKED THE UL!");
})
for (var i = 0; i<lis.length; i++) {
lis[i].addEventListener("click", function () {
this.style.color = "pink";
});
}
We can use a loop to manipulate multiple elements,
for (var i = 0; i<links.length; i++) {
links[i].style.border = "1px dashed purple";
links[i].style.color = "orange";
}
A lot of code today, and no text, sorry for that. The code is really nice and I like it so I thought I would add it in.
Cheers!