<script>
const getMinutesUntilEventStart = (startDate) => {
let nowDate = new Date();
let eventStartDate = new Date(startDate);
let diffMilliseconds = eventStartDate.getTime() - nowDate.getTime();
let diffMinutes = (diffMilliseconds / 60000);
console.log("Difference in Minutes:", diffMinutes);
return diffMinutes;
}
window.addEventListener('load', () => {
let upcomingEvents = document.getElementById('scroll-section-1');
let upcomingCards = Array.from(upcomingEvents.getElementsByClassName('eventcard'));
for (let i = 0; i < upcomingCards.length; i++) {
let currCard = upcomingCards[i];
let currCardStart = currCard.dataset.startdate;
let minsTilStart = getMinutesUntilEventStart(currCardStart);
// comment this out later:
minsTilStart = 0;
if (minsTilStart <= 0) {
let liveEl = document.createElement("div");
liveEl.classList.add('live-circle');
liveEl.innerText = "LIVE";
currCard.insertAdjacentElement('afterbegin', liveEl);
}
}
});
</script>
<style>
/*
.live-circle {
font-size: 13px;
padding: 4px 14px;
text-transform: uppercase;
font-weight: bold;
background-color: #dc2e2e;
border-radius: 50px;
color: white;
position: absolute;
z-index: 2;
margin: 8px 8px;
border: 1px solid white;
box-shadow: 1px 1px 5px black;
}
*/
.live-circle {
font-size: 13px;
padding: 3px 13px;
text-transform: uppercase;
font-weight: bold;
background-color: #cc1f1f;
color: white;
position: absolute;
z-index: 2;
margin: 8px 8px;
box-shadow: 1px 1px 5px #00000054;
}
</style> | 
