Click Count Data Page: Spin/Vote

Code:

<!DOCTYPE html>

<head>

<title>Voting Page</title>

let candidates = {

candidate1: { votes: 0, currentGap: 1, prevGapHistory: [] },

candidate2: { votes: 0, currentGap: 1, prevGapHistory: [] },

candidate3: { votes: 0, currentGap: 1, prevGapHistory: [] },

candidate4: { votes: 0, currentGap: 1, prevGapHistory: [] },

candidate5: { votes: 0, currentGap: 1, prevGapHistory: [] },

candidate6: { votes: 0, currentGap: 1, prevGapHistory: [] } // New candidate "Other"

};

// Function to handle voting

function vote(candidate) {

const opponentCandidates = Object.keys(candidates).filter(c => c !== candidate);

// Store current gap in history if it’s greater than 1, then reset

if (candidates[candidate].currentGap > 1) {

const lastGap = candidates[candidate].currentGap - 1;

candidates[candidate].prevGapHistory.push(lastGap);

updatePreviousGap(candidate, lastGap);

updatePreviousGapHistory(candidate);

}

// Reset current gap to 1 and increment votes for selected candidate

candidates[candidate].currentGap = 1;

candidates[candidate].votes++;

// Update displayed votes

document.getElementById(candidate + '-count').innerText = candidates[candidate].votes;

// Increment current gap for other candidates

opponentCandidates.forEach(opponent => candidates[opponent].currentGap++);

// Update gaps and total votes

updateGaps();

updateTotalVotes();

}

// Function to update displayed current gaps for all candidates

function updateGaps() {

Object.keys(candidates).forEach(candidate => {

document.getElementById(candidate + '-current-gap').innerText = candidates[candidate].currentGap;

});

}

// Function to update the total votes display

function updateTotalVotes() {

const totalVotes = Object.values(candidates).reduce((acc, candidate) => acc + candidate.votes, 0);

document.getElementById('total-votes').innerText = totalVotes;

// Update total votes for each candidate row

Object.keys(candidates).forEach(candidate => {

document.getElementById(candidate + '-total').innerText = totalVotes;

});

}

// Function to update the latest previous gap display

function updatePreviousGap(candidate, lastGap) {

document.getElementById(candidate + '-prev-gap').innerText = lastGap;

}

// Function to update the full previous gap history

function updatePreviousGapHistory(candidate) {

const historyElement = document.getElementById(candidate + '-prev-gap-history');

historyElement.innerHTML = candidates[candidate].prevGapHistory.join(', ');

}

// Reset function to clear all votes, gaps, and histories

function reset() {

Object.keys(candidates).forEach(candidate => {

candidates[candidate] = { votes: 0, currentGap: 1, prevGapHistory: [] };

});

Object.keys(candidates).forEach(candidate => {

document.getElementById(candidate + '-count').innerText = 0;

document.getElementById(candidate + '-current-gap').innerText = 1;

document.getElementById(candidate + '-total').innerText = 0;

document.getElementById(candidate + '-prev-gap').innerText = 'N/A';

document.getElementById(candidate + '-prev-gap-history').innerText = '';

});

document.getElementById('total-votes').innerText = 0;

}

</script>

</head>

<h2 style="text-align: center; margin: 20px auto;">Click Count & Data Table</h2>

<div class="candidate-box" style="width: 15%; text-align: center;">Spins: <span id="candidate1-count">0</span></div>

<div class="candidate-box" style="background-color: #ffeb3b; width: 15%; padding:2px; text-align: center; border-radius: 6px;">Total Spin: <span id="candidate1-total">0</span></div>

<button onclick="vote('candidate1')" style="margin-left: 5px; border-radius: 6px;">Click For<br>🌏</button>

</div>

<div class="candidate-box" style="width: 15%; text-align: center;">Spins: <span id="candidate2-count">0</span></div>

<div class="candidate-box" style="background-color: #ffeb3b; width: 15%; padding:2px; text-align: center; border-radius: 6px;">Total Spin: <span id="candidate2-total">0</span></div>

<button onclick="vote('candidate2')" style="margin-left: 5px; border-radius: 6px;">Click For<br>🍕</b></button>

</div>

<div class="candidate-box" style="width: 15%; text-align: center;">Spins: <span id="candidate3-count">0</span></div>

<div class="candidate-box" style="background-color: #ffeb3b; width: 15%; padding:2px; text-align: center; border-radius: 6px;">Total Spin: <span id="candidate3-total">0</span></div>

<button onclick="vote('candidate3')" style="margin-left: 5px; border-radius: 6px;">Click For<br>🦊</button>

</div>

<div class="candidate-box" style="width: 15%; text-align: center;">Spins: <span id="candidate4-count">0</span></div>

<div class="candidate-box" style="background-color: #ffeb3b; width: 15%; padding:2px; text-align: center; border-radius: 6px;">Total Spin: <span id="candidate4-total">0</span></div>

<button onclick="vote('candidate4')" style="margin-left: 5px; border-radius: 6px;">Click For<br>💥</button>

</div>

<div class="candidate-box" style="width: 15%; text-align: center;">Spins: <span id="candidate5-count">0</span></div>

<div class="candidate-box" style="background-color: #ffeb3b; width: 15%; padding:2px; text-align: center; border-radius: 6px;">Total Spin: <span id="candidate5-total">0</span></div>

<button onclick="vote('candidate5')" style="margin-left: 5px; border-radius: 6px;">Click For<br>🛡️</button>

</div>

<div class="candidate-box" style="width: 15%; text-align: center;">Spins: <span id="candidate6-count">0</span></div>

<div class="candidate-box" style="background-color: #ffeb3b; width: 15%; padding:2px; text-align: center; border-radius: 6px;">Total Spin: <span id="candidate6-total">0</span></div>

<button onclick="vote('candidate6')" style="margin-left: 5px; border-radius: 6px;">Click For<br>❌</button>

</div>

<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 Spins: <span id="total-votes">0</span></div>

Reset

</button>

<h3 style="text-align: center; margin: 20px auto;">Previous Gap History</h3>

<h4>1.<br>🌏🌏🌏 <br>Previous Gaps:</h4>

</div>

<h4>2.<br>🍕🍕🍕 <br>Previous Gaps:</h4>

</div>

<h4>3. <br>🦊🦊🦊 <br>Previous Gaps:</h4>

</div>

<h4>4<br>💥💥💥 <br>Previous Gaps:</h4>

</div>

<h4>5. <br>🛡️🛡️🛡️ <br>Previous Gaps:</h4>

</div>

<h4>6. <br>⭕❌⭕ <br> Previous Gaps:</h4>

</div>

</body>

</html>

Output:

Click Count & Data Table

1.
🌏🌏🌏

Spins: 0

P-Gap: N/A

N-Gap: 1

Total Spin: 0

2.
🍕🍕🍕

Spins: 0

P-Gap: N/A

N-Gap: 1

Total Spin: 0

3.
🦊🦊🦊

Spins: 0

P-Gap: N/A

N-Gap: 1

Total Spin: 0

4.
💥💥💥

Spins: 0

P-Gap: N/A

N-Gap: 1

Total Spin: 0

5.
🛡️🛡️🛡️

Spins: 0

P-Gap: N/A

N-Gap: 1

Total Spin: 0

6.
⭕❌⭕

Spins: 0

P-Gap: N/A

N-Gap: 1

Total Spin: 0

Total Spins: 0

Search This Blog

Web Programming