@allensulzen/countdown-timer
Version:
A Web Component that displays a timer counting down to a specified date.
101 lines (88 loc) • 3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<script src="countdown-timer.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<style>
body {
font-family: Poppins, sans-serif;
}
body.theme--dark {
color: white;
background-color: black;
}
#theme {
position: fixed;
right: 1rem;
top: 1rem;
display: flex;
gap: 0.5rem;
align-items: center;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
background-color: rgba(255, 255, 255, 0.85);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
body.theme--dark #theme {
background-color: rgba(0, 0, 0, 0.75);
}
#theme label {
font-size: 14px;
font-weight: 500;
}
#theme select {
font: inherit;
}
main {
display: block;
width: 80%;
max-width: 965px;
margin: 3rem auto;
}
h1 {
text-align: center;
}
</style>
</head>
<body class="theme--light">
<div id="theme">
<label for="theme-select">Theme</label>
<select id="theme-select" name="theme">
<option value="light" selected>Light</option>
<option value="dark">Dark</option>
<option value="none">None</option>
</select>
</div>
<main>
<h1>Countdown Timer</h1>
<script>
window.addEventListener('startTimer', (e) => {
console.log(e);
});
</script>
<countdown-timer theme="light" heading="Coming Soon!" subheading="Until the big event!" link="#"
linktext="Get Tickets"></countdown-timer>
</main>
<script>
const countdownTimer = document.querySelector('countdown-timer');
const themeSelect = document.querySelector('#theme-select');
const applyTheme = (theme) => {
countdownTimer.setAttribute('theme', theme);
document.body.classList.toggle('theme--dark', theme === 'dark');
document.body.classList.toggle('theme--light', theme === 'light');
};
countdownTimer.date = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString();
themeSelect.addEventListener('change', (e) => {
applyTheme(e.target.value);
});
applyTheme(themeSelect.value);
</script>
</body>
</html>