Day #17 of Learning in Public

In today's project, I unveiled "Marvel Assemble," a dynamic carousel webpage born from HTML, CSS, and JavaScript synergy. Leveraging key codes and the keydown functionality, I crafted a seamless navigation experience. Users can effortlessly slide through a captivating array of Marvel heroes. HTML laid the foundation, CSS added style finesse, and JavaScript brought interactive life. The fusion resulted in an engaging digital showcase. This venture not only showcases technical prowess but also signifies the ongoing evolution of my web development skills. Eager to refine "Marvel Assemble" and explore more innovative features in the days ahead. ??♂????.

For left arrow keycode is 37.

For right arrow keycode is 39.

const slider = document.querySelector(".slider");
function flow(e) {
 const img = document.querySelectorAll(".img");

 if (e.keyCode === 37 || e.keyCode === 39) {
  if (e.keyCode == 37) {
   // If left arrow, move the last image to the beginning
   slider.prepend(img[img.length - 1]);
  } else if (e.keyCode == 39) {
   // If right arrow, move the first image to the end
   slider.append(img[0]);
  }
 }

 // Check if the click event happened on the next or prev elements
 if (e.target.matches(".next")) {
  slider.append(img[0]);
 } else if (e.target.matches(".prev")) {
  slider.prepend(img[img.length - 1]);
 }
}

document.addEventListener("click", flow, false);
document.addEventListener("keydown", flow, false);