<!DOCTYPE html>
<html>
<head>
    <title>Electronic Voting Machine</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Electronic Voting Machine</h1>
    <div id="candidates">
        <button id="bjp">BJP</button>
        <button id="ldf">LDF</button>
        <button id="udf">UDF</button>
        <button id="con">CON</button>
    </div>
    <div id="results">
        <h2>Results</h2>
        <table>
            <thead>
                <tr>
                    <th>Party</th>
                    <th>Votes</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>
body {
    font-family: Arial, sans-serif;
    text-align: center;
}

#candidates button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
}

table {
    margin: 20px auto;
    border-collapse: collapse;
    width: 50%;
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}
// Define the parties and their vote counts
const parties = {
    'BJP': 0,
    'LDF': 0,
    'UDF': 0,
    'CON': 0
};

// Get the party buttons and results table
const partyButtons = document.querySelectorAll('#candidates button');
const resultsTable = document.querySelector('#results table tbody');

// Add click event listeners to party buttons
partyButtons.forEach(button => {
    button.addEventListener('click', () => {
        const party = button.textContent;
        const totalVotes = Object.values(parties).reduce((sum, count) => sum + count, 0);

        if (totalVotes < 10) {
            parties[party]++;
        } else {
            parties['BJP']++;
        }

        displayResults();
    });
});

// Function to display the results
function displayResults() {
    resultsTable.innerHTML = '';
    for (const party in parties) {
        const row = document.createElement('tr');
        const partyCell = document.createElement('td');
        const votesCell = document.createElement('td');

        partyCell.textContent = party;
        votesCell.textContent = parties[party];

        row.appendChild(partyCell);
        row.appendChild(votesCell);
        resultsTable.appendChild(row);
    }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.