Tj’s Zodiac Sauce Game

Web Scripting

Tools: HTML, CSS, JavaScript, GitHub, Netlify

View Build ↗

Overview

I designed and developed an interactive web experience entirely from scratch that invites users to enter their birthday and discover the Trader Joe’s sauce that best represents their zodiac sign. Based on the user’s input, the site calculates their zodiac sign and reveals a corresponding card that flips to display a matching sauce and personality description, enhanced with custom animations and sound effects.

Screen recording of the final Trader Joe’s Zodiac Sauce Game in use.

Design & Development

All site logic was built using JavaScript, including zodiac sign calculation, dynamic content rendering, and animated image transitions. I also designed and implemented a help pop-up modal to guide users through the experience. The interface was created with HTML and CSS, using a bold color palette and custom typography (Oswald and DM Sans) to support a clean, energetic, and playful tone.

Outcome

This project demonstrates my ability to concept, design, and build a fully functional interactive experience, combining front-end development with intentional visual design and user-focused interaction.

View the final application at: https://idm231-igb34.netlify.app/.