Visualizzare Colori

Traccia

Dividete la pagina html in due sezioni. Nella prima mettete una selezione di div colorati e la seconda lasciatela con un div vuoto. Passando sopra ai div colorati con il mouse dovete riempire il div vuoto con lo stesso colore.

Se ai div colorati applicate il background tramite classe potreste dover utilizzare getComputedStyle(elemento).backgroundColor anzichè elemento.style.backgroundColor per prenderne il valore.

⚠ Se il risultato è corretto, ogni soluzione è valida.

Soluzione

Pagina HTML

<!DOCTYPE html>
<html lang="it">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="flex">
      <div class="border-2 flex w-1/2 h-96">
        <div class="color-picker bg-red-500 w-1/4"></div>
        <div class="color-picker bg-orange-500 w-1/4"></div>
        <div class="color-picker bg-yellow-500 w-1/4"></div>
        <div class="color-picker bg-pink-500 w-1/4"></div>
      </div>

      <div
        id="preview"
        class="border-2 flex w-1/2 h-96 justify-center items-center">
        <h1>preview</h1>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

Pagina Script.js

const preview = document.getElementById("preview");
const colorPickers = document.querySelectorAll(".color-picker");

colorPickers.forEach((colorPicker) => {
  colorPicker.addEventListener("mouseover", (e) => {
    console.log(getComputedStyle(e.srcElement).backgroundColor);
    preview.style.backgroundColor = getComputedStyle(
      e.srcElement
    ).backgroundColor;
  });
});