Voting Page: Individual Vote Count, Individual Voting Gap Count, Total Vote Count
Voting Page:
Candidate Name, Individual Vote Count, Total Vote Count
6 Candidate:
Total Vote Count Big Box-bottom :
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voting Page</title>
<script>
// Initial vote counts
let votes = {
option1: 0,
option2: 0
};
// Function to handle voting
function vote(option) {
votes[option]++;
document.getElementById(option + '-count').innerText = votes[option];
updateTotalVotes();
}
// Function to update total votes
function updateTotalVotes() {
const totalVotes = votes.option1 + votes.option2;
document.getElementById('total-votes').innerText = totalVotes;
}
</script>
</head>
<body style="display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; font-family: Arial, sans-serif;">
<div class="container" style="width: 95%; margin-top: 20px;">
<!-- Candidate Rows -->
<div class="candidate-row" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
<div class="candidate-box" style="display: flex; flex-direction: column; align-items: center; padding: 10px; text-align: center; border-radius: 5px; font-weight: bold; background-color: #f0f0f0; width: 15%;">Candidate 1</div>
<div class="candidate-box" style="display: flex; flex-direction: column; align-items: center; padding: 10px; text-align: center; border-radius: 5px; font-weight: bold; background-color: #c8e6c9; width: 15%;">Votes: <span id="option1-count">0</span></div>
<button onclick="vote('option1')" style="margin-left: 10px;">Vote</button>
</div>
<div class="candidate-row" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 5px;">
<div class="candidate-box" style="display: flex; flex-direction: column; align-items: center; padding: 10px; text-align: center; border-radius: 5px; font-weight: bold; background-color: #f0f0f0; width: 15%;">Candidate 2</div>
<div class="candidate-box" style="display: flex; flex-direction: column; align-items: center; padding: 10px; text-align: center; border-radius: 5px; font-weight: bold; background-color: #c8e6c9; width: 15%;">Votes: <span id="option2-count">0</span></div>
<button onclick="vote('option2')" style="margin-left: 10px;">Vote</button>
</div>
<!-- Total Vote Count Big Box -->
<div class="total-vote-box" style="background-color: #ffeb3b; padding: 20px; margin-top: 20px; font-size: 1.5em; text-align: center; font-weight: bold; border-radius: 5px;">Total Votes: <span id="total-votes">0</span></div>
</div>
</body>
</html>
Output:
Candidate 1
Votes: 0
Candidate 2
Votes: 0
Total Votes: 0
Comments
Post a Comment