Javascript, Round Two

Riley Redfern
2 min readApr 14, 2021

Just when I thought coding couldn’t get more challenging, I had to face the reality of tucking my tail and re-taking a unit in the Bootcamp.

Although it felt like a major take-down at the time and was something I was desperately hoping not to have to do, I quickly came to see that it was the best choice. My understanding of the Javascript language was deepened so much, and I started to actually have some fun doing it.

I’ve always been a massive X-files fan so I knew I’d stay engaged with a themed project. I also know my strengths lie in the design and front-end code. My goal was to create an X-files Monster Of The Week Trading Card game in which users can log in and create their own FBI badge, get issued a hand of five random cards and choose their favorites. Cards that were duplicated or had a low ‘rarity rating’ could be traded out for different ones, but only after a certain time had elapsed preventing anyone from amassing a too-powerful collection of monsters too quickly.

A challenge I encountered was that an API didn’t already exist with all of the X-files monsters! I couldn’t believe it! Ultimately, having to create the library myself gave me quite a bit of freedom to manipulate the data, which I think in the end was a win. This way I could assign them each a unique rarity and choose the photo I liked most for the cards.

Once I had a few monsters made I got to work on reaching MVP, user-creation, monster ownership, and some DOM manipulation. Then, I set to work on what I really wanted to do, designing the cards. I was able to dig into CSS a little bit and had an absolute blast. I found a card template that came from the Yu-Gi-Oh trading card game and replaced some of the icons on the card with custom ones. Once I had that set as the background image I was able to margin and pad the data rendered to each card. I also was able to animate them to make them holographic.

I learned quickly that once a project got underway it probably will never be totally finished. I have so many things I still want to do with it and I can see it becoming a passion project I continue to revisit for good vanilla JS practice. I’d like to have different categories have different holographic animation, figure out a way to design the ‘fav’ button a little more gracefully, the list is infinite.

I’m so happy to say that if I hadn’t chosen to stay back and re-take the class I would have no idea how much fun this could be. The lesson learned with this project is that it’s always okay to slow down and ask for help to make something properly instead of trying to cut corners and just have things ‘done’ for the sake of being ‘done’.

Never forget, The Truth is Out There!

--

--