Build Your Own Magic 8 Ball App Using Vue 3 and JavaScript
Written on
Creating the Magic 8 Ball Project
In this guide, we will explore how to develop a Magic 8 Ball application using Vue 3, the latest iteration of the user-friendly Vue JavaScript framework designed for crafting front-end applications.
Setting Up Your Project
To initiate our Vue project, we will utilize the Vue CLI. The installation can be performed through NPM or Yarn with the following commands:
npm install -g @vue/cli
or
yarn global add @vue/cli
After the installation, create your project by running:
vue create 8-ball
Select the default configuration options to set up your project.
Constructing the Magic 8 Ball App
To build the Magic 8 Ball application, we will create the following structure:
<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>
In this template, we have a form that allows users to input their question. The v-model directive connects the input value to a reactive property called question. The form submission is handled by the @submit directive, which prevents the default action, allowing us to manage the submission on the client side.
Within the form, there's a div styled as a circle that represents the Magic 8 Ball. The answer will be displayed in this circle.
Answer Logic
The answers array includes a variety of standard Magic 8 Ball responses. In the data method, we declare our initial state, containing both question and answer properties.
The getAnswer method is responsible for assigning a random answer from the answers array to the answer property. It first checks to ensure that a question has been entered.
The styles applied to the circle ensure it appears round, with equal width and height, and use flexbox to center the text both vertically and horizontally.
Conclusion
Creating a Magic 8 Ball application with Vue 3 and JavaScript is straightforward and enjoyable. If you found this guide helpful, consider subscribing to our YouTube channel for more content!
More content at plainenglish.io
Explore how to build the Magic 8 Ball app step-by-step with this video tutorial.
A beginner's guide to coding a Magic 8 Ball application in JavaScript.