IxD Navigation: Fortune Teller

View project on browser

For this project, I decided to do a fortune teller. When I was looking through the choices for this project, I knew I wanted to do one of the fortune teller choices, but I wanted one that will challenge my design skills. I decided to go with my own rendition of Zoltar, a fortune teller machine, that gives the same responses as a magic 8 ball.

The target audience of this are teenagers and young adults. It is for entertainment purposes, but it can also help those who are having a hard time making a decision.

Below are pictures of Zoltar for inspiration.

I decided to name my fortune teller Morgana, based on a character from the game Avalon.

My final design for Morgana:


To start my project, I first coded the basic HTML elements. Then I coded the JS functions to tell the fortune.

Whenever I clicked the button, the page quickly refreshed and I did not get a chance to see the result. To fix this, I added the prevent default action.

When I first coded, it kept giving me the same answer.  

So I added the formula (see var fortuneTold) to give 20 responses in random order. The code worked!

While testing, I realized that even if there is nothing in the form, it still gave an answer.

So I added an if/else statement to only give a fortune if there is text in the form.

When I was designing, I noticed there was always a margin around my body. So I used the * selector to make the default padding and margin 0, and the white border disappeared.

I also noticed that the CSS animation played whether or not there was text in the box, so I added the same if/else statement to the animation  toggle function. I also changed the style colour of the text to be red if there is no text in the form.


The hardest challenge from this project was the animation of the arms. I needed the arms to rotate on the corner, not the middle of the picture. After research, I found that transform-origin moves the anchor point, and the arms rotated on the origin point I gave it.