This is a solution to the challenge Creative agency single-page site.
This project was a great challenge to put JavaScript into practice, and deepen my knowledge in HTML, CSS
- I learned to use the keydown event to use the keyboard arrows to move the slide with short circuit
// Slide with keydown
document.addEventListener("keydown", function (e) {
// short circuit
e.key === "ArrowRight" && nextSlide();
e.key === "ArrowLeft" && prevSlide();
});-
I developed my first mobile menu in this project
-
Revealing Elements on Scroll with IntersectionObserver
-
Implementing Smooth Scrolling with scrollIntoView
-
Menu mobile setTimeout, bubble and events
-
Menu fade animation with Closures, closest() and Math strategy, mouseover, mouseout
-
Revealing Elements on Scroll with new IntersectionObserver
-
Building a Slider Component with Events and quite logica.
-
I used grid area, so that the elements were in the same row and in the same column, with that I just positioned inside the grid. this is only possible by defining the parent element with display:grid and the children grid-area: 1/1, for that I also used reusable class, and in HTML I put the class where it should
.grid-layout {
display: grid;
}
.grid-area {
grid-area: 1 / 1;
}- The function created inside the menuAnimation function, will have access to the parameter of the parent function (opacity), even after it is executed, this happens because of the closure
const menuAnimation = function (opacity) {
return function (e) {
const clicked = e.target.closest(".nav__link");
if (!clicked) return;
if (clicked.classList.contains("nav__link")) {
const link = e.target;
const sibling = document.querySelectorAll(".nav__link");
const logo = nav.closest(".header-box").querySelector(".header__logo");
sibling.forEach((el) => {
if (el !== link) el.style.opacity = opacity;
});
logo.style.opacity = opacity;
}
};
};
nav.addEventListener("mouseover", menuAnimation(0.5));
nav.addEventListener("mouseout", menuAnimation(1));
