birthday game template

Inspiration

My roommate's birthday is today, so I wanted to make something that would be a little more fun and personal than a traditional gift card. I thought something fun with confetti and whimsical music also kind of fit the theme of the hackathon

What it does

The user (presumably the birthday person) first has to guess a number. The number is the age that they're turning. Once they are able to do so, they are taken to another page with a word/phrase unscrambling puzzle. When the user correctly decodes the phrase, they are taken to a photo gallery. They can then move onto the last puzzle where they have to solve a riddle. Upon solving the riddle, they are taken to a heartfelt happy birthday message as written by the sender. The code provides a template that the sender is supposed to modify before sending to a recipient.

How we built it

The website is constructed entirely in JavaScript, HTML, and CSS. Each of the puzzles is featured on a different HTML file with a corresponding JavaScript file that accounts for the consequences of the buttons, collects user input, and switches between the pages. Royalty-free music was downloaded from Pixabay and the Confetti effect was taken from OpenReplay.

Challenges we ran into

Being pretty new to web development overall, it was challenging to use the CSS file in an efficient manner. There were many instances where I realized I could've made things a lot easier for myself by grouping common objects under the same classes or using different IDs. In the interest of time, I was not able to really clean this file up much, so it is pretty long and messy.

Accomplishments that we're proud of

The website is fully functional, user-friendly, and pretty cute. I was most proud of the confetti effect and successfully integrating the music since those concepts were a little more challenging for me as well.

What we learned

I learned a lot of JavaScript. Before this, I had written about one short function in JavaScript (it described the behavior of a button that, when clicked, automatically brings the user back up to the page). In other words, I basically had no experience. I also learned how to format things with CSS and how important it is to write clean neat code. If I had been more thorough with naming elements, variables, and files, my code would probably be more readable.

What's next for birthday game template

With more time, I would like to clean up the code overall and make it more readable. I would like to go through all my files and rethink the logic behind how I assigned classes and ID's. I would also like to try adding more puzzles/games including some little games coded in python (something more within my comfort zone) and some interactive elements and graphics with react. I would also like to make the template easier for other people to edit by creating another interface where a user can input data that can be retrieved, formatted, and automatically put into the code. It could even possibly be fun experimenting with generative AI to generate some riddles or scrambled phrases and their solutions.