Sito na stronie

Algorytmy z egzaminu różnymi sposobami - JavaScript od podstaw: konsola (HTML/CSS/JS)

Sito Eratostenesa jako siatka 100 pól budowana z elementów `div` (CSS grid układa je po 10 w wierszu). Model liczy funkcja `isPrime`, a strona tylko pokazuje: pola liczb pierwszych dostają klasę `prime`. Pole przechowuje swoją liczbę w atrybucie `data-n` (w skrypcie `div.dataset.n`), a jeden nasłuchiwacz na siatce po kliknięciu wypisuje dzielniki klikniętej liczby.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Sito Eratostenesa</title>
  <style>
    body { font-family: sans-serif; max-width: 34em; }
    #grid { display: grid; grid-template-columns: repeat(10, 2.4em); gap: 4px; }
    #grid div { border: 1px solid #94a3b8; text-align: center; padding: 0.3em 0; cursor: pointer; }
    #grid .prime { background: #dcfce7; color: #166534; font-weight: bold; }
    input, button { font: inherit; padding: 0.3em; }
    .error { color: #b91c1c; }
  </style>
</head>
<body>
  <h1>Liczby pierwsze do 100</h1>
  <div id="grid"></div>
  <p id="info">Kliknij liczbę.</p>
  <script>
    function isPrime(n) {
      if (n < 2) return false;
      for (let d = 2; d * d <= n; d++) {
        if (n % d === 0) return false;
      }
      return true;
    }
    const grid = document.getElementById('grid');
    for (let n = 1; n <= 100; n++) {
      const cell = document.createElement('div');
      cell.textContent = n;
      cell.dataset.n = n;
      if (isPrime(n)) cell.classList.add('prime');
      grid.appendChild(cell);
    }

    grid.addEventListener('click', e => {
      const cell = e.target.closest('[data-n]');
      if (!cell) return;
      const n = Number(cell.dataset.n);
      const divisors = [];
      for (let d = 1; d <= n; d++) {
        if (n % d === 0) divisors.push(d);
      }
      document.getElementById('info').textContent =
        `Dzielniki ${n}: ${divisors.join(', ')}` + (isPrime(n) ? ' (pierwsza)' : '');
    });

    document.getElementById('info').textContent +=
      ' Pierwszych: ' + grid.querySelectorAll('.prime').length;
  </script>
</body>
</html>

Ładowanie interaktywnego edytora... Jeśli się nie pojawi, włącz JavaScript.

Wszystkie lekcje kursu JavaScript od podstaw: konsola·Zaloguj się, aby zapisać postęp na koncie.