What Trader Joe’s Sauce Matches Your Zodiac Sign?

Web Scripting

Tools: Html, Css, JavaScript

I designed and developed this interactive web experience entirely from scratch. The site invites users to enter their birthday, which reveals their zodiac sign and the Trader Joe’s sauce that best represents them. Each zodiac card flips to reveal its matching sauce and personality description, enhanced with custom animations and sound effects.

Using JavaScript, I built all the site logic, from calculating zodiac signs based on user input to animating image transitions and dynamically displaying results. I also included a help pop-up modal to guide users through the experience. All layout and styling were created with HTML and CSS, using a bold color palette and custom typography (Oswald and DM Sans) for a clean, energetic interface.

This project highlights my ability to build a fully functional, interactive experience that combines playful concept development with strong front-end design and coding skills. You can view the final application below or at https://idm231-igb34.netlify.app/.