Okay, so I’ve been hyped for Acheron’s banner in Honkai Star Rail, and I needed a way to keep track of the days. I’m not the most organized person, so I figured a visual countdown would be super helpful. I’m no coding expert, but I thought, “Hey, I can probably cobble something together, right?”
The Brainstorm
First, I needed to figure out what I actually wanted. Just a simple webpage with the number of days, hours, minutes, and seconds until the banner drops. I also wanted it to look decent, you know, not like some Geocities page from the 90s. I have seen some people doing countdown before, I have 0 experince with this.
The Setup
I decided to go with plain HTML, CSS, and JavaScript. I didn’t want to get bogged down with any fancy frameworks or libraries. Just the basics. I created three files: , , and .
The HTML Structure
The HTML was pretty straightforward. I just needed some containers to hold the countdown numbers and labels.
- I Used div elements with classes like “days”, “hours”, “minutes”, and “seconds” to hold the number values.
- Added some span elements for the labels (“Days”, “Hours”, “Minutes”, “Seconds”).
- Wrapped everything in a main div with a class of “countdown-container” to style it nicely.
The CSS Styling
I’m not a design wizard, but I wanted it to look clean and modern. I spent some time on Google, to find a nice color palette and font, added background color and rounded the element corners. Nothing too fancy, just enough to make it visually appealing.
- Center Everything is always nice.
- Give it some color.
- Adjust the font size to make it readable.
The JavaScript Logic
This was the trickiest part, since I’m not a JavaScript pro. The core idea was to:
- Get the target date (Acheron’s banner release). I had to look this up, obviously!
- Get the current date and time.
- Calculate the difference between the two.
- Convert that difference into days, hours, minutes, and seconds.
- Update the HTML elements with those values.
- Do all of this repeatedly, every second, so it’s a live countdown.
I found some helpful code snippets online and modified them to fit my needs. The setInterval function was key here, to make the countdown update every second. There were a few hiccups, figuring out the date formats and how to calculate the time difference correctly, but after some trial and error, I got it working! It took me a couple of hours to make the calculation work correctly.
The Result
It’s not perfect, but it works! I have a simple, functional countdown timer for Acheron’s banner. Every time I open a new tab in my browser, I see it, and it keeps me hyped. It’s satisfying to see something I built from scratch actually doing what I intended. Plus, I learned a bit more about JavaScript along the way, which is always a win. Now I don’t have to be confused about the time!
