Responsive landing page, with JS UI elements

Solution retrospective
I quite like how I managed to get the countdown timer to reset its date to 3 months in future no matter what the date is it will always be 3 months. Here's the script on how I managed to get it working:
/* ------------------------------- */
/* Countdown Timer */
/* ------------------------------- */
const today = new Date();
const targetDate = today.getTime() + 90 * 24 * 60 * 60 * 1000;
// Define month names before using them
const monthNames = [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec',
];
// Cache countdown element references
const countdownHeading = document.querySelector('.countdown h2 span');
const countdownDay = document.getElementById('countdown-day');
const countdownHrs = document.getElementById('countdown-hrs');
const countdownMin = document.getElementById('countdown-min');
const countdownSec = document.getElementById('countdown-sec');
// Display the launch date in the countdown's
countdownHeading.textContent = formatDate(new Date(targetDate));
// Update the countdown every second
const countdownInterval = setInterval(updateCountdown, 1000);
function updateCountdown() {
const currentTime = Date.now(); // use Date.now() for efficiency
const timeRemaining = targetDate - currentTime;
if (timeRemaining ` look based off of the graphical mockup. This was achieved obviously with CSS and JS. While it is not ideal, I'm sure it could be wired up to be a functional component.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Stu Cowley's solution.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord