Create a Magic 8 Ball App with Vue 3 and JavaScript
Tags: codenewbie, beginners, webdev, javascript
Published: 2021-01-17 23:07:28

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a magic 8 ball app with Vue 3 and JavaScript.

### Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

```
npm install -g @vue/cli
```

with NPM or:

```
yarn global add @vue/cli
```

with Yarn.

Then we run:

```
vue create 8-ball
```

and select all the default options to create the project.

### Create the Magic 8 Ball

To create the magic 8 ball app, we write:

```
<template>
  <form @submit.prevent="getAnswer">
    <div>
      <label>question</label>
      <input v-model="question" />
    </div>
    <button type="submit">get answer</button>
  </form>
  <div class="circle">
    <p>{{ answer }}</p>
  </div>
</template>

<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",
  "Don't count on it",
  "My reply is no",
  "My sources say no",
  "Outlook not so good",
  "Very doubtful",
  "Reply hazy, try again",
  "Ask again later",
  "Better not tell you now",
  "Cannot predict now",
  "Concentrate and ask again",
];
export default {
  name: "App",
  data() {
    return {
      question: "",
      answer: "",
    };
  },
  methods: {
    getAnswer() {
      if (!this.question) {
        return;
      }
      const index = Math.floor(Math.random() * answers.length);
      this.answer = answers[index];
    },
  },
};
</script>

<style scoped>
.circle {
  border: 1px solid black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>



```

We have a form with a text input to let us enter a question into the box.

We bind the inputted value to the `question` reactive property with `v-model` .

And we listen to the `submit` event on the form with the `@submit` directive.

`prevent` lets us prevent server-side submission and do client-side submission instead.

Below that we have a div with class `circle` to create the 8 ball.

We’ll make it a circle and center the `answer` text inside in the `style` tag.

Next, we have the `answers` array with the standard answers for the magic 8 ball.

In the `data` method, we return an object with the initial values of the `question` and `answer` reactive properties.

The `getAnswer` method lets us get the value of the `answer` reactive property from the `answers` array by generating a random index to get the answer.

Before that, we check if we entered a `question` or not.

In the `style` tag, we make the div a circle by setting the `border-radius` and the `border` for the circle.

We also set the `width` and `height` to be the same to make it a circle.

`display` is set to `flex` so we can use `justify-content` to center align the text horizontally.

And we center align the text vertically with `align-items` .

### Conclusion

We can create a magic 8 ball app easily with Vue 3 and JavaScript.