oliverbooth/oliverbooth.dev
oliverbooth/oliverbooth.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

style: improve appearance of the american countdown

Browse Source
This commit is contained in:
Oliver Booth 2024-02-21 18:27:32 +00:00
parent f0aa1c0ae9
commit c7cd016baf
Signed by: oliverbooth
GPG Key ID: E60B570D1B7557B5
4 changed files with 52 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
OliverBooth/Pages/Shared/_Layout.cshtml
View File

@ -95,7 +95,12 @@
<div style="margin:50px 0;"></div>
<div id="usa-countdown" class="container">
<p>00 : 00 : 00 : 00</p>
<div class="row">
<div class="col-3 usa-countdown-element" id="usa-countdown-days">00</div>
<div class="col-3 usa-countdown-element" id="usa-countdown-hours">00</div>
<div class="col-3 usa-countdown-element" id="usa-countdown-minutes">00</div>
<div class="col-3 usa-countdown-element" id="usa-countdown-seconds">00</div>
</div>
</div>
<div style="margin:50px 0;"></div>

26
src/scss/app.scss
View File

@ -365,25 +365,27 @@ td.trim-p p:last-child {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 10px;
cursor: pointer;
* {
cursor: pointer;
}
p {
.usa-countdown-element {
margin: 10px 0;
padding: 5px;
font-family: "Gabarito", sans-serif;
font-weight: 500;
text-align: center;
font-size: 3em;
margin: 0;
padding: 0;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
a {
transition: color 250ms;
&:first-child {
border-left: none;
}
a:link, a:visited, a:active {
color: #fff;
}
a:hover {
color: #03A9F4;
&:last-child {
border-right: none;
}
}
}

27
src/ts/UI.ts
View File

@ -82,6 +82,33 @@ class UI {
UI.updateProjectCards(element);
}
public static updateUsaCountdown(element?: Element){
element = element || document.getElementById("usa-countdown");
const daysElement = element.querySelector("#usa-countdown-days");
const hoursElement = element.querySelector("#usa-countdown-hours");
const minutesElement = element.querySelector("#usa-countdown-minutes");
const secondsElement = element.querySelector("#usa-countdown-seconds");
const start = new Date().getTime();
const end = Date.UTC(2024, 2, 7, 13, 20);
const diff = end - start;
let days = Math.floor(diff / (1000 * 60 * 60 * 24));
let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((diff % (1000 * 60)) / 1000);
if (days < 0) days = 0
if (hours < 0) hours = 0;
if (minutes < 0) minutes = 0;
if (seconds < 0) seconds = 0;
daysElement.innerHTML = days.toString().padStart(2, '0');
hoursElement.innerHTML = hours.toString().padStart(2, '0');
minutesElement.innerHTML = minutes.toString().padStart(2, '0');
secondsElement.innerHTML = seconds.toString().padStart(2, '0');
}
/**
* Adds Bootstrap tooltips to all elements with a title attribute.
* @param element The element to search for elements with a title attribute in.

26
src/ts/app.ts
View File

@ -98,26 +98,8 @@ declare const Prism: any;
UI.updateUI();
setInterval(() => {
const countdown = document.querySelector("#usa-countdown p");
const start = new Date().getTime();
const end = Date.UTC(2024, 2, 7, 13, 20);
const diff = end - start;
let days = Math.floor(diff / (1000 * 60 * 60 * 24));
let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((diff % (1000 * 60)) / 1000);
if (days < 0) days = 0
if (hours < 0) hours = 0;
if (minutes < 0) minutes = 0;
if (seconds < 0) seconds = 0;
const blogUrl = '/blog/2024/02/19/the-american';
const dayStr = days.toString().padStart(2, '0');
const hourStr = hours.toString().padStart(2, '0');
const minuteStr = minutes.toString().padStart(2, '0');
const secondStr = seconds.toString().padStart(2, '0');
countdown.innerHTML = `<a href="${blogUrl}">${dayStr} : ${hourStr} : ${minuteStr} : ${secondStr}</a>`;
}, 1000);
const usaCountdown = document.getElementById("usa-countdown");
usaCountdown.addEventListener("click", () => window.location.href = "/blog/2024/02/19/the-american");
UI.updateUsaCountdown(usaCountdown);
setInterval(() => UI.updateUsaCountdown(usaCountdown), 1000);
})();