Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for 🚨 Made a LIVE 2024 election counter! Enjoy
Asadbek Karimov
Asadbek Karimov

Posted on

🚨 Made a LIVE 2024 election counter! Enjoy

Live2024

Built a quick live 2024 Trump vs. Harrison counter. Pulling data from CNN’s live tracker into a simple, clean card. Most live trackers I found were cluttered with unnecessary components and text, so I created a streamlined version in just 5-10 minutes. Feel free to grab the code!

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>2024 US Election Counter</title><style>body{font-family:Arial,sans-serif;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background-color:#f0f0f0;}.card{background-color:white;border-radius:8px;box-shadow:04px6pxrgba(0,0,0,0.1);padding:20px;text-align:center;max-width:400px;width:100%;}h1{color:#333;font-size:24px;margin-bottom:10px;}p{color:#666;font-size:14px;margin-bottom:20px;}.counter-container{display:flex;justify-content:space-around;}.counter{text-align:center;}.counterh2{font-size:18px;margin-bottom:10px;}.count{font-size:36px;font-weight:bold;transition:all0.5sease;}.democrats{color:#0015bc;}.republicans{color:#ff0000;}.loading,.error{text-align:center;font-size:18px;color:#666;}.error{color:#ff0000;}.vote-info{font-size:14px;color:#555;}@keyframespulse{0%{transform:scale(1);}50%{transform:scale(1.05);}100%{transform:scale(1);}}.banner{position:fixed;left:0;right:0;bottom:0;background-color:#f8f8f8;text-align:center;border-top:1pxsolid#ddd;padding-top:6px;padding-bottom:6px;font-size:x-large;font-weight:500;color:#171717;}.bannera{text-decoration:underline;}</style></head><body><divclass="card"><h1>2024 US Election Counter</h1><p>Live results updated every 10 seconds</p><divid="content"><divclass="loading">Loading...</div></div></div><!-- Google tag (gtag.js) --><scriptasyncsrc="https://www.googletagmanager.com/gtag/js?id=G-W16Z0D8BJ7"></script><script>window.dataLayer=window.dataLayer||[];functiongtag(){dataLayer.push(arguments);}gtag('js',newDate());gtag('config','G-W16Z0D8BJ7');</script><script>constcontent=document.getElementById('content');functionupdateCounter(party,count,percentage,votes){constcountElement=document.getElementById(`${party}-count`);if(countElement){countElement.textContent=count;document.getElementById(`${party}-percentage`).textContent=`${percentage}%`;document.getElementById(`${party}-votes`).textContent=`Votes:${votes}`;countElement.style.animation='pulse 0.5s ease';setTimeout(()=>{countElement.style.animation='';},500);}}functionrenderCounters(democratsCount,republicansCount,demPercentage,repPercentage,demVotes,repVotes){content.innerHTML=`                <div>                    <div>                        <h2>Democrats</h2>                        <div>${democratsCount}</div>                        <div>${demPercentage}%</div>                        <div>Votes:${demVotes}</div>                    </div>                    <div>                        <h2>Republicans</h2>                        <div>${republicansCount}</div>                        <div>${repPercentage}%</div>                        <div>Votes:${repVotes}</div>                    </div>                </div>            `;}asyncfunctionfetchElectionData(){try{constresponse=awaitfetch('https://politics.api.cnn.io/results/bop/2024-PG-US.json',{headers:{'accept':'*/*','accept-language':'en-US,en;q=0.9','user-agent':'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36','x-api-key':'TtGlrrOrcdJNvE5U9t4XulVZuwk68Ecru3UIgtnr'}});if(!response.ok){thrownewError('Failed to fetch election data');}constdata=awaitresponse.json();// Extract the relevant counts, percentages, and vote numbersconstdemocratsData=data.meta.candidates.DEM;constrepublicansData=data.meta.candidates.REP;constdemocratsCount=democratsData.count;constrepublicansCount=republicansData.count;constdemocratsPercentage=democratsData.votePercentStr;constrepublicansPercentage=republicansData.votePercentStr;constdemocratsVotes=democratsData.voteStr;constrepublicansVotes=republicansData.voteStr;// Render the counters or update them if they already existif(content.querySelector('.counter-container')){updateCounter('democrats',democratsCount,democratsPercentage,democratsVotes);updateCounter('republicans',republicansCount,republicansPercentage,republicansVotes);}else{renderCounters(democratsCount,republicansCount,democratsPercentage,republicansPercentage,democratsVotes,republicansVotes);}}catch(error){console.error('Error:',error);content.innerHTML='<div>Error fetching election data</div>';}}functionstartPolling(){fetchElectionData();// Initial fetch on loadsetInterval(fetchElectionData,10000);// Poll every 10 seconds}startPolling();</script><divclass="banner">        Sponsored by<ahref="https://mylinx.cc/"target="_blank">Mylinx</a></div></body></html>
Enter fullscreen modeExit fullscreen mode

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Software Engineer 📊 at http://sheetjs.com | R&D, docs & integrations | http://mylinx.cc creator 🔗 | Data science in JS? mylinx.cc/asad
  • Location
    NYC
  • Education
    Queens College, City University of New York
  • Work
    SheetJS
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp