This project was unusual in that I decided I would style it first and then write the logic for it.
I began by walking through a Tailwind course over the holiday break and found I enjoyed using their shortcuts to make mobile responsive elements. Having everything on one page so I could visualize what it would look like as I created it went a long way towards preventing any frustration with CSS.
Once I had a working page I could pull bits and pieces from, I went back to my approved idea. I’d chosen several APIs that didn’t require an API key and settled on a simple concept I knew I could execute after the APIs brought to mind a big top circus “guess your age/weight/name” game.
Using the Tailwind course as a base allowed me to show/hide elements and update the class name to change the styling instead of hopping from html to html page when I wanted something changed. In the end, the most challenging part of the project was the creation of two side by side buttons with links in JavaScript, and even though they don’t do exactly what I’d envisioned, I spent so much time on them I reworked my idea just so could keep them.
Although I ended up with seven HTML pages (two which gave fun facts from a number), after uploading to GitHub an odd bug showed up where the innterText didn't update on those two pages. It would be visible through LiveServer, but not Replit or Pages so I ended up pivoting and removing both.
Since all my code was based on the same general structure, I just shuffled the fortune teller section from one function to another, removed the two pages, and it worked on the first try.
Looking back, choosing to use Tailwind, key-free APIs, and an un-obscure theme at the beginning saved me time and headaches with styling and logic. The more projects I do the more I understand how important it is to spend time on editing your idea, then confirming your data, before ever sitting down to code.
The code:
https://github.com/Meg-Div/ItsACircus
Play it:
https://meg-div.github.io/ItsACircus
Top comments (0)