View on GitHub

JS30

a bunch of vanilla JS practice projects based on JavaScript 30 by WesBos.

22-flashlight

demo gif

Back to home page

User stories

Notes

We want to layer a span with class flashlight under the link that the cursor touches.

In CSS:

.flashlight {
 transition: all 0.2s;
 border-bottom: 2px solid white;
 position: absolute;
 top: 0;
 background: white;
 left: 0;
 z-index: -1;
 border-radius: 10px;
 display: block;
}

In JavaScript:

//select all the links
const links = document.querySelectorAll("a");
//create a span with class "flashlight and append to body"
const flashlight = document.createElement("span");
flashlight.classList.add("flashlight");
document.body.append(flashlight);

function flashlightOn() {
 //get the coordinate of the link
 const linkCoords = this.getBoundingClientRect();
 //when scroll, update the top and left
 const coords = {
  width: linkCoords.width,
  height: linkCoords.height,
  top: linkCoords.top + window.scrollY,
  left: linkCoords.left + window.screenX
 };
 //layer the span under the link
 flashlight.style.width = `${coords.width}px`;
 flashlight.style.height = `${coords.height}px`;
 flashlight.style.transform = `translate(${coords.left}px,${coords.top}px)`;
}

links.forEach(link => link.addEventListener("mouseenter", flashlightOn));