Okay, so I wanted to make a countdown timer for Honkai Star Rail’s 2.1 update. Here’s how I went about it:
First, I figured out the release date. Luckily, that was pretty easy to find online.
Next, I decided to use JavaScript. It seemed like the simplest way to do it, and I could easily put it on a webpage later if I wanted to.
I started by getting the current date and time. You know, the basic stuff.
- I used
new Date()to get the current date. Simple enough. - Then, I needed to calculate the time difference between now and the 2.1 release.
That’s where it got a little tricky. I had to convert everything to milliseconds to make the math work. I remember struggling with timezones at first, but then i remembered to do it all in UTC. This helped get rid of my headache.
Once I had the time difference in milliseconds, I divided it up into days, hours, minutes, and seconds. Basic math, really.
Then, I created a little function that would update the countdown every second. I used setInterval() for that. It just calls the function that recalculates the time difference and updates the display.
For the display, I initially just used to see the numbers in the browser’s developer console. It was raw, but it worked!
Making it Look Decent
After I got the basic countdown working, I wanted to make it look a bit nicer. So, I created some simple HTML elements: a few <div> tags to hold the days, hours, minutes, and seconds.
Then, I added some JavaScript to update the text content of those <div> tags with the calculated values. I used to grab the elements and .textContent to update them.
I played around with a little CSS to make it look not to boring. I added it inside of the style tags. I am not really a designer, but I found something that worked!
Finally, I tested everything to see that is was going smooth, and it worked out pretty well, give or take some minor problems!
