Lidt om koden

Koden er udviklet via DuckDuckGos AI. Jeg bad AI’en om at skrive en kode som laver Kusama-agtige polkaprikker i det <canvas>-tag, der igen kunne placeres i WP blokken “Tilpasset HTML”.

---

Herover har jeg tilføjet denne kode med blokken "Tilpasset HTML". Læg mærke til at HTML kommer først, så CSS og til sidst JavaScript.

Koden

<div id="wp-polka-canvas">
  <canvas width="800" height="500"></canvas>
  <button type="button" class="wp-polka-button">
    Lav nye polkaprikker
  </button>
</div>

<style>
  #wp-polka-canvas {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    text-align: center;
  }

  #wp-polka-canvas canvas {
    display: block;
    width: 100%;
    height: auto;
    background: #ffffff;
    border: 2px solid #222222;
    border-radius: 8px;
  }

  #wp-polka-canvas .wp-polka-button {
    margin-top: 14px;
    padding: 10px 18px;
    border: 0;
    border-radius: 6px;
    background: #222222;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
  }

  #wp-polka-canvas .wp-polka-button:hover {
    background: #444444;
  }
</style>

<script>
(function () {
  const container = document.getElementById("wp-polka-canvas");

  if (!container) {
    return;
  }

  const canvas = container.querySelector("canvas");
  const button = container.querySelector(".wp-polka-button");
  const ctx = canvas.getContext("2d");

  const farver = [
    "#e63946",
    "#f1fa8c",
    "#457b9d",
    "#2a9d8f",
    "#f4a261",
    "#9b5de5",
    "#ff66c4"
  ];

  function tilfældigtTal(min, max) {
    return Math.random() * (max - min) + min;
  }

  function tilfældigFarve() {
    const index = Math.floor(Math.random() * farver.length);
    return farver[index];
  }

  function tegnPolkaprikker(antal) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Baggrund
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < antal; i++) {
      const radius = tilfældigtTal(8, 45);

      const x = tilfældigtTal(
        radius,
        canvas.width - radius
      );

      const y = tilfældigtTal(
        radius,
        canvas.height - radius
      );

      ctx.beginPath();
      ctx.arc(x, y, radius, 0, Math.PI * 2);

      ctx.fillStyle = tilfældigFarve();
      ctx.fill();

      ctx.strokeStyle = "rgba(0, 0, 0, 0.15)";
      ctx.lineWidth = 1;
      ctx.stroke();
    }
  }

  tegnPolkaprikker(45);

  button.addEventListener("click", function () {
    tegnPolkaprikker(45);
  });
})();
</script>