<div id="poll-container">
  <h2>Contoh Polling Pilpres 2024</h2>
  <div id="pool-inner">
    <div id="pool-card">
      <img src="https://budiharyono.id/wp-content/uploads/2024/01/ps.webp" alt="">
    </div>
    <div id="paslon-1" class="poll-option" data-paslon="1">Paslon 1</div>
    <div id="paslon-2" class="poll-option" data-paslon="2">Paslon 2</div>
    <div id="paslon-3" class="poll-option" data-paslon="3">Paslon 3</div>
  </div>
  <div id="poll-result"></div>
</div>
#poll-container {
  width: 600px;
  max-width: 100%;
  margin: auto;
  text-align: center;
  font-family: Arial, sans-serif;
  background-color: #45a049;
  aspect-ratio: 1/1;
}

.pool-inner {
  background-color: salmon;
  border: 1px solid #ddd;
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#pool-card {
  width: 600px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: darkred;
}
#pool-card img {
  width: 100%;
  margin: auto;
  object-fit: contain;
  background-color: red;
}

.poll-option {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  margin: 10px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.poll-option:hover {
  background-color: #45a049;
}

#poll-result {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  display: none;
}

jQuery(document).ready(function ($) {
  $(".poll-option").click(function () {
    var paslon = $(this).data("paslon");
    var dummyVotes = { 1: "52.3%", 2: "36.2%", 3: "11.5%" }; // Dummy vote counts

    var totalVotes = dummyVotes[paslon];
    $("#poll-result")
      .html("Total Suara untuk Paslon " + paslon + ": " + totalVotes + " suara")
      .show();
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js