Ankieta z paskami procentów

Projekt w stylu arkusza INF.03 - JavaScript na stronach WWW (HTML/CSS/JS)

Głosy są w obiekcie `votes` (klucz = opcja z `data-option`). Po każdym głosie `render` liczy sumę, a dla każdej opcji procent (`Math.round`) i ustawia szerokość paska przez `style.width`. Jedna funkcja rysująca obsługuje dowolną liczbę opcji.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Ankieta</title>
  <style>
    body { font-family: sans-serif; max-width: 36em; line-height: 1.4; }
    input, select, button, textarea { font: inherit; padding: 0.2em 0.4em; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #94a3b8; padding: 0.2em 0.6em; }

    .row { display: flex; align-items: center; gap: 0.5em; margin: 0.3em 0; }
    .row span { width: 6em; }
    .track { width: 12em; height: 1em; background: #e2e8f0; }
    .bar { height: 1em; width: 0; background: #4f46e5; }
  </style>
</head>
<body>
  <h1>Ulubiony język</h1>
  <p>
    <button class="vote" data-option="js">JavaScript</button>
    <button class="vote" data-option="py">Python</button>
    <button class="vote" data-option="php">PHP</button>
  </p>
  <div class="row"><span>JavaScript</span><div class="track"><div class="bar" id="bar-js"></div></div><b id="pct-js">0%</b></div>
  <div class="row"><span>Python</span><div class="track"><div class="bar" id="bar-py"></div></div><b id="pct-py">0%</b></div>
  <div class="row"><span>PHP</span><div class="track"><div class="bar" id="bar-php"></div></div><b id="pct-php">0%</b></div>
  <p id="votes">Głosów: 0</p>
  <script>
    const votes = { js: 0, py: 0, php: 0 };

    function render() {
      const total = Object.values(votes).reduce((a, b) => a + b, 0);
      for (const [option, count] of Object.entries(votes)) {
        const pct = total ? Math.round(count / total * 100) : 0;
        document.getElementById('bar-' + option).style.width = pct + '%';
        document.getElementById('pct-' + option).textContent = pct + '%';
      }
      document.getElementById('votes').textContent = 'Głosów: ' + total;
    }

    for (const button of document.querySelectorAll('.vote')) {
      button.addEventListener('click', () => {
        votes[button.dataset.option]++;
        render();
      });
    }
    render();
  </script>
</body>
</html>

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

Wszystkie lekcje kursu JavaScript na stronach WWW·Zaloguj się, aby zapisać postęp na koncie.