Almost There! Honkai 2.1 Countdown! (What to expect for new update?)

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!