# Magic 8 Ball

by [kirupa](https://www.kirupa.com/about/whatiskirupa.htm) | filed under [Coding Exercises](https://www.kirupa.com/codingexercises/index.htm)

Facing a tough decision? Before there were apps for everything, many of us turned to the ***Magic 8 Ball***. We would ask it a yes or no question, give it a good shake, and an answer would mysteriously float up into a little window. Inside the ball is a 20-sided die with a different answer printed on each side. Ten of those answers are positive, five are noncommittal, and five are negative.

In this exercise, we are going to build our own Magic 8 Ball. Ask it something below (or [open it in a new window](https://www.kirupa.com/codingexercises/examples/magic_8_ball.htm)):

Your version needs to do the following:

1. Provide a text field where we can type in a question
2. When a question is asked, display one of the 20 classic answers at random. These answers are already provided in the starting code
3. If the question is empty, ask the user to type something in first instead of giving an answer
4. Style the page so that it looks like an 8 ball. This is a visual exercise, so have fun with it!

For extra credit, make the ball shake for a moment before the answer appears. You can also take a page from the real thing and display the answer inside a blue triangle.

Onwards!

## Starting Point

Create a new HTML document in your favorite code editor (like Visual Studio Code) and copy/paste the following starting content into it:

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Magic 8 Ball</title>
  <style>
    
  </style>
</head>
<body>
  <h1>Magic 8 Ball</h1>

  <form id="questionForm">
    <input id="question" type="text" placeholder="Ask a yes or no question...">
    <button type="submit">Shake</button>
  </form>

  <div class="ball">
    <div class="window">
      <p id="answer">8</p>
    </div>
  </div>

  <script>
    const answers = [
      "It is certain.",
      "It is decidedly so.",
      "Without a doubt.",
      "Yes, definitely.",
      "You may rely on it.",
      "As I see it, yes.",
      "Most likely.",
      "Outlook good.",
      "Yes.",
      "Signs point to yes.",
      "Reply hazy, try again.",
      "Ask again later.",
      "Better not tell you now.",
      "Cannot predict now.",
      "Concentrate and ask again.",
      "Don't count on it.",
      "My reply is no.",
      "My sources say no.",
      "Outlook not so good.",
      "Very doubtful."
    ];

  </script>
</body>
</html>
```

This gives us a form for asking our question, the markup for our ball, and the full list of 20 answers our ball can pick from. One thing to watch out for: because our question lives inside a `form`, submitting it will reload the page by default. We'll want to stop that from happening. The styling and the JavaScript to bring it all together are what you will add entirely on your own!

#### Hint: Some Learning Resources

The following tutorials may provide some helpful tips and techniques to help you with this exercise: [Events in JavaScript](https://www.kirupa.com/html5/javascript_events.htm), [Picking a Random Item from an Array](https://www.kirupa.com/html5/picking_random_item_from_array.htm), [Strings in JavaScript](https://www.kirupa.com/html5/strings_in_javascript.htm), [Introduction to CSS Animations](https://www.kirupa.com/html5/introduction_css_animations.htm), [Using the classList API](https://www.kirupa.com/html5/using_the_classlist_api.htm)

## Getting Your Badge

Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to [your collection](https://forum.kirupa.com/badges/):

![Magic 8 Ball badge](https://www.kirupa.com/codingexercises/images/magic_8_ball_badge.png)

To claim it, head over to the forums and respond in the [Magic 8 Ball topic](https://forum.kirupa.com/t/magic-8-ball-frontend-coding-exercise/683594). **Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:**

![](https://www.kirupa.com/codingexercises/images/create_forum_topic.webp)

Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.

## Stuck? Need Help? Want a Code Review?

We want to make this a fun learning activity. If you are stuck and need help, please [ask on the forums](https://forum.kirupa.com). Please explain your problem in detail and one of the many helpful forum members will help you out.

Similarly, if you want feedback on your code, please also ask in the forums. This would be an excellent chance for you to learn how you can improve your solution from other web developers!