This Studio Ghibli zodiac generator is inspired by the zodiac chart; rather than 12 zodiac signs, there are 12 characters that correlate with the dates. By entering their birthdays, users can find which Studio Ghibli character there are and read a fun little description!
I was responsible for designing and coding the site using HTML, CSS, and Javascript. This was my introduction to Javascript but by the end of the process, I was able to program a functional zodiac algorithm that computes the proper character according to the birthday selected.
I spent a lot of time brainstorming potential themes for this zodiac chart, such as Dim Sum dishes, Asian snacks, Avatar characters, etc. I eventually decided on Studio Ghibli characters since the Studio Ghibli films hold a special place in my heart growing up. I chose popular characters from various movies and wrote up short descriptions based on their personalities. I tried matching up the zodiac signs best as I could with the characters' personalities.
As for the UI layout, I wanted to stay true to Studio Ghibli's aesthetic, which includes a lot of nature and greenery. For the background, I chose a nature background that was inspired by Ghibli movie scenery. As for displaying the character buttons and information, I decided on a wood panel background.
Clicking on the mute button unmutes the background music. Clicking again to change it back to its muted state, the music will pause.
Clicking on the info button will bring up a modal that tells the user directions for inputting their birthday and getting their Studio Ghibli character.
After a lot of troubleshooting with the Javascript to make the function work properly, I ended up with a fun interactive webpage. Submitting a birthday or clicking on a character button will bring up the modal with the character description and a sound of the character speaking will play simultaneously. If the user inputs an invalid date, an error modal will pop up to inform them to re-enter a date. Although learning Javascript was a daunting task initially, I ended up having a lot of fun designing and making the application functional.
