Progress Bar Component for US Election Calculator

I’ve been working on a US Election calculator app to visually track electoral votes for each party (Democrats and Republicans) as users simulate voting outcomes. This app includes a progress bar feature that dynamically shows each party’s progress as they get closer to the 270-vote threshold needed to win the election. Here, I’ll break down the HTML, CSS, and JavaScript components behind this progress bar feature, explaining each part to ensure clarity for beginners.

You may check out the app here: https://notoolsnocraft.tech/2024-us-election-calculator/

Overview of the Progress Bar Structure

The progress bar’s main purpose is to give a visual representation of each party’s progress toward reaching the 270 votes required to win. The bar shows two colored sections: blue for Democrats and red for Republicans. As states are assigned to either party, the bar fills proportionally to the total electoral votes accumulated by each party.

Step-by-Step Breakdown of HTML, CSS, and JavaScript

1. HTML Structure

Here’s the core HTML structure for our progress bar:

<!-- Electoral Progress Bar -->
<div class="progress-bar-container">
  <div class="progress-bar" id="democratProgress"></div>
  <div class="progress-bar" id="republicanProgress"></div>
  <div class="separator">
    <span>270 Votes to Win</span>
  </div>
</div>

Explanation:

• <div class="progress-bar-container">: This is the container that holds both progress bars and the separator line. It sets the full width of the bar, allowing us to fill it based on votes.
• <div class="progress-bar" id="democratProgress"> and <div class="progress-bar" id="republicanProgress">: Each of these divs represents a progress bar for each party. We use ids here to uniquely style and update each bar in JavaScript.
• <div class="separator">: This element adds a separator line with the text “270 Votes to Win,” indicating the required threshold. It remains static as the bars fill up on each side.

2. CSS Styling

The CSS styles are essential for visually differentiating the parties and making the bar look interactive. Here’s the relevant CSS code:

.progress-bar-container {
    position: relative;
    width: 80%;
    height: 30px;
    background-color: lightgray;
    margin: 20px auto;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    position: absolute;
    height: 100%;
}

#democratProgress {
    background-color: blue;
    width: 0;
    left: 0;
}

#republicanProgress {
    background-color: red;
    width: 0;
    right: 0;
}

.separator {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 2px solid black;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: black;
}

Explanation:

• Container Styling (.progress-bar-container): This sets the dimensions of the main progress bar container. The overflow: hidden ensures that the progress bars stay within the container’s bounds as they fill up.
• Individual Bars (#democratProgress and #republicanProgress): Each bar starts at 0% width. The blue bar starts from the left, while the red one starts from the right, creating a visually opposing effect as they fill.
• Separator Styling (.separator): The separator line, centered in the container, visually splits the bar. We’ve used border-left to create a line and added text to show the target vote count.

3. JavaScript Functionality

The JavaScript code handles the dynamic updates to the progress bars based on the vote count for each party. Here’s the core functionality:

// Track selected party and votes
let democratVotes = 0;
let republicanVotes = 0;

// Function to update the progress bars based on votes
function updateProgressBar() {
    const democratProgress = document.getElementById('democratProgress');
    const republicanProgress = document.getElementById('republicanProgress');
    
    // Calculate percentage for each bar based on a 538-vote total
    const democratPercentage = (democratVotes / 538) * 100;
    const republicanPercentage = (republicanVotes / 538) * 100;
    
    // Update the width of each bar to reflect the percentage
    democratProgress.style.width = `${democratPercentage}%`;
    republicanProgress.style.width = `${republicanPercentage}%`;
}

// Simulate adding votes to each party and call the update function
function addVotesToParty(party, votes) {
    if (party === 'democrat') {
        democratVotes += votes;
    } else if (party === 'republican') {
        republicanVotes += votes;
    }
    updateProgressBar(); // Refresh the progress bar with updated values
}

Explanation:

• updateProgressBar(): This function calculates the percentage each party’s bar should fill based on the electoral votes they’ve earned. It then updates the CSS width of each bar to visually reflect the vote count.
• addVotesToParty(party, votes): This function is triggered whenever new votes are added to either party. It increases the vote count for the specified party and then calls updateProgressBar() to refresh the bar.

How It All Works Together

Each time a state’s votes are assigned, the addVotesToParty() function updates the vote counts and recalculates the progress bar. As more states are added, users can visually track how close each party is to the 270-vote goal. The bars dynamically expand toward the separator, providing a clear and real-time view of the election simulation’s status.

This progress bar feature enhances the app’s usability and makes it interactive and easy to understand, even for users unfamiliar with electoral votes.