
Submitted 4 months ago
Responsive landing page, with JS UI elements
#sass/scss
@frontendstu
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
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.
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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