magic_8_ball.md

Create an HTML element for the magic 8 ball

Each HTML element should be defined with an appropriate class to facilitate styling & UI A section element will hold the larger 8 ball circle Two articles will be within this section:

• The first will contain the front of the ball (the 8) that will display upon load.
• The second will contain the back which will activate upon clicking the ball and show the fortune. (will begin with hidden in class name). The second article will contain another child element, maybe a small heading (h3 or h4), that will display the fortune. Add a default fortune or a quick word on how the interface works This should get us started, come back and add any additional elements as deemed necessary.

Create CSS Element

Take larger 8 ball section and style it:

• Define the size of the section element, a little larger than you expect, but it should cover plenty of the window.
• Define the color of the 8 ball, probably black.
• Give it the proper border radius to create the circle.
• Center it on the page. The two articles elements will share some properties:
• Define their size.
• Define their color (optional).
• Define the border radius to create a circle.
• Center them within the larger 8 ball. The fortune article should have the following properties:
• A unique color if desired. Add a hidden selector to hide either of these articles. Give the heading it's style:
• color
• size
• centered within housing element This should get us started, again check back and add any seletcors as deemed necessary.

JavaScript

Approprietly name and assing querySelectors to variables. Assign a variable with an array containing all the desired fortunes. Define a function to get a random index number:

• Make use of built in Math.random() function (generates a float between 0 and 1)
• Mutiply by the length of array
• Round Down
• return value, this will be the random Index. Add an event listener to the larger 8 ball section. Define the callback function:
• it should add the hidden class to article 1 (the 8)
• it should also remove it from the fortune article. Add another event listener with for the same element/s but different event ('dblclick' for example) The call back function should return the random fortune Define the callback function for the random fortune:
• Invoke our random index function; store result in variable
• Assign a varible to store the fortune at the resulting index number
• The fortune should be passed to the be displayed within the heading element (within the fortune article) Go back refactor and think about any other functionality that may be useful.