Today, I wanted to mess around with something I’ve been seeing all over the Genshin Impact community: those cool banner history visualizations. So, I decided to create my own “genshin impact banners” display. Here’s how it went down.
The Idea
First, I needed a clear picture of what I was aiming for. Basically, I wanted a simple, clean way to see all the past and current banners in Genshin, preferably in chronological order. Think of it like a visual timeline of all the characters and weapons that have been featured.
Getting the Data
This was the first real hurdle. I needed the data! I started by hunting around online for any existing lists or databases of Genshin banners. I spent time and I found the data from the third-party websites.
Choosing the Tools
With the data question, I can show them on the website.
I am not a coder. Then I realized, wait a minute, I need a tool to do that. My friend once told me that I can do this. Then I decide to use JavaScript.
Building the Thing
This is where the real “fun” began. It was time to code. And I found some JavaScript code snippets online that helped me.
I create the HTML file, make a simple structure, and add style and JavaScript files to it.
After a few hours of copy-pasting and editing, it worked!
The Result
After all that work, I had something to be a little bit proud of. A simple, but functional, display of Genshin Impact banners. It wasn’t perfect, some of the images didn’t load up right. And I had a lot more I wanted to add, like maybe little icons for each character or weapon. But, for a first shot, it was pretty satisfying to see it all come together!
