Build this https://imgur.com/a/eLeU2

Question

Utilisateur anonyme · Accepted Answer

import "./styles.css";

(function() {
  const box = document.createElement("div");
  const boxes = document.querySelectorAll(".box");
  box.classList.add("selector");
  let initPos = null;
  let currentPos = null;

  function overlaps(rect1, rect2) {
    if (rect1.right  rect2.right) return false;
    if (rect1.bottom  rect2.bottom) return false;
    return true;
  }

  function onMouseup() {
    // removes box...associated event handlers
    document.body.removeChild(box);
    document.body.removeEventListener("mouseup", onMouseup);
    document.body.removeEventListener("mousemove", onDrag);
    console.log("mouse up");
    box.style.top = `0`;
    box.style.left = `0`;
    box.style.height = `0`;
    box.style.width = `0`;
    initPos = null;
    currentPos = null;
    document.querySelectorAll(".box.selected").forEach(_box => {
      _box.classList.remove("selected");
    });
  }

  function onMousedown(e) {
    // initiate box
    document.body.appendChild(box);
    document.body.addEventListener("mouseup", onMouseup);
    document.body.addEventListener("mousemove", onDrag);
    initPos = [e.clientX, e.clientY];
    currentPos = [e.clientX, e.clientY];
    console.log("mouse down");
  }

  function onDrag(e) {
    // draw box according initial
    // click and current mouse position
    console.log(e);
    currentPos = [e.clientX, e.clientY];
    box.style.top = `${Math.min(initPos[1], currentPos[1])}px`;
    box.style.left = `${Math.min(initPos[0], currentPos[0])}px`;
    box.style.height = `${Math.abs(currentPos[1] - initPos[1])}px`;
    box.style.width = `${Math.abs(currentPos[0] - initPos[0])}px`;
    boxes.forEach(_box => {
      if (overlaps(box.getBoundingClientRect(), _box.getBoundingClientRect())) {
        _box.classList.add("selected");
      } else {
        _box.classList.remove("selected");
      }
    });
  }

  document.body.addEventListener("mousedown", onMousedown);
})();

Lyft

Question d’entretien chez Lyft

Réponse à la question d'entretien

Entreprises suivies

Recherche d’emplois