the-spellman/year-of-linux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add files via upload

Browse source
This commit is contained in:
Sam Sneed 2024-08-10 10:54:50 -05:00 committed by GitHub
parent 0c1ec5efdb
commit 1d7696c5b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 105 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
countdown.js Normal file
View file

@ -0,0 +1,30 @@
document.addEventListener('DOMContentLoaded', function () {
// Set the date for January 1st of the following year
const targetDate = new Date();
targetDate.setFullYear(targetDate.getFullYear() + 1);
targetDate.setMonth(0);
targetDate.setDate(1);
targetDate.setHours(0, 0, 0, 0);
// Update the countdown every second
setInterval(updateCountdown, 1000);
function updateCountdown() {
const currentDate = new Date();
const timeDifference = targetDate - currentDate;
const days = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeDifference % (1000 * 60)) / 1000);
document.getElementById('days').textContent = formatTime(days);
document.getElementById('hours').textContent = formatTime(hours);
document.getElementById('minutes').textContent = formatTime(minutes);
document.getElementById('seconds').textContent = formatTime(seconds);
}
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}
});

32
index.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Year of the Linux Desktop Countdown</title>
</head>
<body>
<header>
<h1>The year of the Linux desktop is coming soon!</h1>
</header>
<main>
<div id="countdown">
<div id="days" class="countdown-item">00</div>
<div class="countdown-label">Days</div>
<div id="hours" class="countdown-item">00</div>
<div class="countdown-label">Hours</div>
<div id="minutes" class="countdown-item">00</div>
<div class="countdown-label">Minutes</div>
<div id="seconds" class="countdown-item">00</div>
<div class="countdown-label">Seconds</div>
</div>
</main>
<script src="countdown.js"></script>
</body>
</html>

43
styles.css Normal file
View file

@ -0,0 +1,43 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #282c35;
color: white;
}
header {
text-align: center;
padding: 2rem;
background-color: #1e222b;
}
h1 {
font-size: 1.5em;
}
main {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}
#countdown {
display: flex;
justify-content: space-around;
align-items: center;
font-size: 2em;
}
.countdown-item {
background-color: #1e222b;
color: white;
padding: 0.5em;
border-radius: 5px;
margin: 0 0.3em;
}
.countdown-label {
text-align: center;
}