• Magic 8 Ball •
Description:
The Magic 8-Ball is a plastic sphere, made to look like an eight-ball, that is used for fortune-telling or seeking
advice. It was invented in 1950 by Albert C. Carter and Abe Bookman and is currently manufactured by Mattel. The user
asks a yes–no question to the ball, then turns it over to reveal an answer in a window on the ball. We will use HTML,
CSS, and JavaScript to recreate this real world object as a functional website.
- Manipulate an exisiting script to understand how its parts are working.
- Gain experience with arrays, event handlers, and Math.random() functions.
Demo Files:
Download this folder containing a pre-written script to get started: [CD-Studio-JavaScript_Magic-8-Ball-Demo.zip].
Guidelines:
You may come up with your own set of responses or use the classic 8 Ball answers. Think about the design and typography
of the page and how you can expand upon the original format given the unique parameters of a website. You need not
adhere to the Magic 8 Ball aesthetic in any way, in fact I encourage you to stray far from it.
Incorporate at least one level of complication to the provided script. Examples of this could be including a visual change for affirmative, non-commital, or negative answers if(elem.classList.contains(‘negative’)){...}, or creating a button to load a new answer without reloading the page. Think outside of the box and see what kind of interventions you can come up with.