A specialized countdown timer application designed for GCSE (General Certificate of Secondary Education) exam preparation. Features a visually appealing progress bar with real-time countdown to the 2024 GCSE exam period, providing students with multiple time units for comprehensive time awareness.
GCSEcountdown/
└── index.html # Complete self-contained countdown application
/* Apple-inspired aesthetic */
body {
font-family: 'SF-Pro-Text-Semibold', sans-serif;
background-color: #F5F5F7; /* Apple system background */
margin-top: 25vh; /* Centered vertical positioning */
}
/* Google color scheme progress bar */
.countdown-bar {
background-image: linear-gradient(to right, #34a853, #fbbc05, #ea4335);
border: 3px solid black;
border-radius: 33px;
height: 60px;
}
/* Crosshatch pattern overlay showing elapsed time */
.progress {
background-color: rgba(128, 128, 128, 0.6);
background-image:
linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.4) 25%),
linear-gradient(-45deg, transparent 25%, rgba(255, 255, 255, 0.4) 25%);
background-size: 10px 10px;
border-radius: 33px;
position: absolute;
opacity: 1;
z-index: 1;
}
// GCSE 2024 exam period definition
const endDate = new Date("2024-05-10T09:00:00").getTime(); // GCSE start
const startDate = new Date("2023-06-21T00:00:00").getTime(); // Academic year start
const totalTime = endDate - startDate;
function updateCountdown() {
const now = new Date().getTime();
const timeLeft = endDate - now;
// Calculate multiple time units
const totalSecondsLeft = Math.floor(timeLeft / 1000);
const daysLeft = Math.floor(totalSecondsLeft / (60 * 60 * 24));
const weeksLeft = Math.floor(daysLeft / 7);
const monthsLeft = (daysLeft / 30).toFixed(2);
// Calculate progress percentage
const percentageLeft = ((1 - (timeLeft / totalTime)) * 100).toFixed(2);
document.getElementById("days-progress").style.width = percentageLeft + "%";
}
// Comprehensive time breakdown
document.getElementById("months-left").textContent = monthsLeft;
document.getElementById("weeks-left").textContent = weeksLeft.toLocaleString();
document.getElementById("days-left").textContent = daysLeft.toLocaleString();
document.getElementById("hours-left").textContent = Math.floor(totalSecondsLeft / (60 * 60)).toLocaleString();
document.getElementById("minutes-left").textContent = Math.floor(totalSecondsLeft / 60).toLocaleString();
document.getElementById("seconds-left").textContent = totalSecondsLeft.toLocaleString();
// Efficient 1-second interval updates
document.addEventListener("DOMContentLoaded", function () {
updateCountdown(); // Initial calculation
setInterval(updateCountdown, 1000); // Real-time updates
});
// Smooth progress bar width updates
const percentageLeft = ((1 - (timeLeft / totalTime)) * 100).toFixed(2);
document.getElementById("days-progress").style.width = percentageLeft + "%";
<!-- Six time unit displays for comprehensive awareness -->
<div class="countdown-info">
<div><span id="months-left"></span> Months left</div>
<div><span id="weeks-left"></span> Weeks left</div>
<div><span id="days-left"></span> Days left</div>
<div><span id="hours-left"></span> Hours left</div>
<div><span id="minutes-left"></span> Minutes left</div>
<div><span id="seconds-left"></span> Seconds left</div>
</div>
<!-- Clear start and end date indicators -->
<div class="countdown-bar-container">
<div class="start-date">21/06/23</div> <!-- Academic year start -->
<div class="countdown-bar">
<div class="progress" id="days-progress"></div>
</div>
<div class="end-date">10/05/24</div> <!-- GCSE exam start -->
</div>
/* Responsive breakpoint for mobile devices */
@media (max-width: 600px) {
h1 {
font-size: 20px;
}
.countdown-bar {
height: 40px; /* Reduced height for mobile */
}
}
// Comprehensive usage analytics
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WPNF0DNSMX');
// Efficient number formatting with locale support
daysLeft.toLocaleString() // Adds thousands separators
monthsLeft.replace(/\B(?=(\d{3})+(?!\d))/g, ",") // Custom formatting
/* Color psychology in progress indication */
background-image: linear-gradient(to right, #34a853, #fbbc05, #ea4335);
/* Green (safe/early) → Yellow (caution) → Red (urgent) */
The GCSE Countdown Timer represents a focused, purpose-built educational tool that successfully combines visual appeal with practical functionality. The application demonstrates understanding of both technical implementation and educational psychology, creating an effective motivation tool for exam preparation.
Technical Rating: 8.2/10
The application successfully serves its intended purpose of providing GCSE students with a constant, visually appealing reminder of their approaching exams while maintaining technical excellence.