
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>
Top comments(0)
Subscribe
For further actions, you may consider blocking this person and/orreporting abuse