Okay, so I wanted to make a countdown timer for Genshin Impact’s 5.0 update. I’m a huge Genshin fan, and I’m always hyped for the new versions. I figured a countdown would be a fun little project, and it’d help me keep track of the days, you know?

Getting Started
First things first, I needed to figure out the release date. Now, miHoYo hasn’t officially announced it yet, but based on their usual update schedule (every six weeks or so), I guessed it would be sometime around late August/early September 2024. I picked a date based on the pattern – let’s say, August 28th, 2024, just to have something concrete to work with.
Setting Up the Basics
I decided to keep it simple, just some HTML and JavaScript. I’m not a pro coder or anything, just a regular guy who likes to tinker. I started by creating a basic HTML structure:
- Created an HTML file (*).
- Added a
<div>
with an ID to display the countdown. - Linked a separate JavaScript file (*).
That part was the easy.
The JavaScript Part
This is where the real stuff happens. I needed JavaScript to do the actual countdown calculations.
- I grabbed the current date and time using
new Date()
. - Then I set the target date (August 28th, 2024) also using
new Date()
.
The Calculation
I needed the time different. Subtracted target date from current date.

I wanted to show days, hours, minutes, and seconds. Used, * to round each one.
Making it Update
I needed the countdown to update every second, right? So, I used setInterval()
.
- I wrapped the calculation code inside a function.
- Then, I called that function using
setInterval()
, making it run every 1000 milliseconds (which is 1 second).
Displaying the Countdown
Finally, I needed to actually show the countdown on the page. I used some basic string formatting.
- I put it all text inside the
<div>
from my HTML.
Final Touches!
And that’s pretty much it! I now have a working countdown timer for Genshin Impact 5.0. Of course, the release date is just an educated guess for now, so I’ll probably need to adjust it later once miHoYo makes the official announcement. But the core of the countdown is there, and it was a fun little project to work on. Keeps me hyped for the new version, that’s for sure!