Category: Vue 3 Projects

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 height converter 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 height-converter

and select all the default options to create the project.

Create the Height Convert App

To create the height converter app, we write:

<template>
  <form @submit.prevent="submit">
    <div>
      <label>feet</label>
      <input v-model.number="feet" />
    </div>
    <div>
      <label>inches</label>
      <input v-model.number="inches" />
    </div>
    <button type="submit">calculate</button>
  </form>
  <p>{{ centimeters }} cm</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      feet: 0,
      inches: 0,
      centimeters: 0,
    };
  },
  computed: {
    formValid() {
      const { feet, inches } = this;
      return +feet >= 0 && +inches >= 0;
    },
  },
  methods: {
    submit() {
      if (!this.formValid) {
        return;
      }
      const { feet, inches } = this;
      this.centimeters = (feet + inches / 12) * 12 * 2.54;
    },
  },
};
</script>

To create the height converter, we create a form with 2 inputs.

One input is for entering the number of feet.

The other one is for entering the number of inches.

We bind them to the feet and inches reactive properties with v-model .

number lets us convert the entered value to a number.

Then in the component object, we have the data method to return the reactive properties and their initial values.

We listen for the submit event with the @submit directive.

prevent lets us do client-side form submission instead of server-side submission.

The formValid computed property checks whether the feet and inches values are valid.

And in the submit method, we check if the entered values are valid with formValid .

Then we compute the centimeters from the feet and inches .

We convert everything to feet in the parentheses.

Then we multiply by 12 to get the inches.

And then we multiply that by 2.54 to get the centimeters.

Then we show the centimeters value in the template.

Conclusion

We can create a height converter with Vue 3 and JavaScript.

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 guess a number game 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 number-guessing-game

and select all the default options to create the project.

Create the Guess a Number Game

To create the guess a number game, we write:

<template>
  <div v-if="started">
    <form @submit.prevent="submit">
      <div>
        <label>answer</label>
        <input v-model.number="answer" />
      </div>
      <button type="submit">check</button>
    </form>
    <p>{{ status }}</p>
  </div>
  <div v-else>
    <button type="button" @click="start">start</button>
    <p>{{ status }}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      rightAnswer: undefined,
      answer: 0,
      status: "",
      started: false,
    };
  },
  computed: {
    formValid() {
      return +this.answer >= 0;
    },
  },
  methods: {
    start() {
      this.rightAnswer = Math.ceil(Math.random() * 10);
      console.log(this.rightAnswer);
      this.started = true;
    },
    submit() {
      if (!this.formValid) {
        return;
      }
      const { answer, rightAnswer } = this;
      if (answer === rightAnswer) {
        this.status = "you got it";
        this.started = false;
      } else if (answer < rightAnswer) {
        this.status = "too low";
      } else {
        this.status = "too high";
      }
    },
  },
};
</script>

We start by adding the form div that’s shown when the game is started.

It’s started when started is true .

Inside it, we have a form element.

We listen to the submit evbent with the @sumbit directive.

The prevent modifier prevents server-side submission and let us do client-side form submission.

We have an input to let the player enter the answer.

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

The number modifier automatically converts the entered value to a number.

Then we add a button with type set to submit to let the player submit the form.

We also display the status in the form.

If the game isn’t started, we display the status and a button to let us start the game.

Then we move on to adding the component options object.

Inside it, we have the data method to return the reactive properties and their initial values.

Next, we add the formValid to check the answer reactive property to see if it’s bigger than or equal to 0.

The start method lets us start the game by generating the rightAnswer and set started to true to start the game.

Next, we add the submit method to compareanswer with the rightAnswer .

First, we check if the value is a valid number with formValid .

If it’s not, then we stop running the function.

And we display different messages depending on whether answer is equal, less than, or bigger than the rightAnswer .

If the player got the right answer, then we set started to false to end the game.

Conclusion

We can create a guess the number game easily with Vue 3 and JavaScript.

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 balloon popping game 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 balloon-poppinng-game

and select all the default options to create the project.

Create the Balloon Popping Game

To create the balloon popping app, we write:

<template>
  <div v-for="(b, index) of balloons" :key="b.id" class="balloon-container">
    <div
      v-if="!b.popped"
      class="balloon"
      :style="{ 'background-color': b.color }"
      @mouseover="onPop(index)"
    ></div>
    <div v-else>popped</div>
  </div>
</template>

<script>
const colors = ["red", "green", "blue"];

const generateColor = () => {
  const index = Math.floor(Math.random() * colors.length);
  return colors[index];
};
export default {
  name: "App",
  data() {
    return {
      balloons: Array(25)
        .fill()
        .map((_, i) => ({ id: i, popped: false, color: generateColor() })),
    };
  },
  methods: {
    onPop(index) {
      this.balloons[index] = {
        ...this.balloons[index],
        popped: true,
      };
    },
  },
};
</script>

<style scoped>
.balloon-container {
  display: inline-block;
}

.balloon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid black;
}
</style>

In the template, we render the divs for the balloons with v-for .

b is the ballon object, index is the index of the balloon entry.

key has the unique ID for the ballon for Vue to keep track of the balloons.

Inside it, we have a div to render the ballon if b.popped is false , which indicates it’s not popped.

Otherwise, we show ‘popped’ with v-else .

In the script object, we have the genberateColor function to generate a random color for the balloon.

We set the style prop to the background-color to the balloon’s color property.

Also, we have the @mouseover directive to run the onPop method to pop the balloon.

In the data method, we return the ballons array with the balloon entries.

In the onPop method, we just set popped property of the balloon entry to true .

In the style tag, we make the ballon round and display side by side.

To make it display side by side, we set the balloon-container class to display: inline-block .

In the balloon class, we set the width and height of the balloon to the same dimensions.

border-radius is set to 50% to make it a circle.

And we add a border with the border property.

Now when we hover over a balloon with our mouse, we see the popped text displayed in place of the balloon.

Conclusion

We can create a balloon popping game easily with Vue 3 and JavaScript.

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 quiz game 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 quiz-game

and select all the default options to create the project.

Create the Quiz Game

To create the quiz app, we write:

<template>
  <form>
    <div v-if="questionIndex < questions.length">
      <label>{{ question.question }}</label>
      <div v-for="c of question.choices" :key="c">
        <input type="radio" name="choice" v-model="answer" :value="c" />
        {{ c }}
      </div>
    </div>
    <div v-else>
      <button type="button" @click="restart">restart</button>
    </div>
    <button type="button" @click="submit">check</button>
  </form>
  <p>score: {{ score }}</p>
</template>

<script>
const questions = [
  {
    question: "What is American football called in England?",
    choices: ["American football", "football", "Handball"],
    rightAnswer: "American football",
  },
  {
    question: "What is the largest country in the world?",
    choices: ["Russia", "Canada", "United States"],
    rightAnswer: "Russia",
  },
  {
    question: "What is the 100th digit of Pi?",
    choices: [9, 4, 7],
    rightAnswer: 9,
  },
];
export default {
  name: "App",
  data() {
    return {
      questions,
      score: 0,
      questionIndex: 0,
      question: questions[0],
      answer: "",
    };
  },
  methods: {
    submit() {
      const { answer, question, questions, questionIndex } = this;
      if (answer === question.rightAnswer) {
        this.score++;
      }

      if (questionIndex < questions.length) {
        this.questionIndex++;
        this.question = { ...questions[this.questionIndex] };
      }
    },
    restart() {
      this.question = questions[0];
      this.answer = "";
      this.questionIndex = 0;
      this.score = 0;
    },
  },
};
</script>

We have the form element with a div to display the question.

We display a question only if questionIndex is less than questions.length .

If questionIndex is equal to questions.length , then we ran out of questions to display.

To display the question, we render the question.question in the label.

And we render the question.choices entry in the div below it.

We render radio buttons by rendering an input with type set to radio .

The name attribute are all set to choice so that the browser knows that they’re in the same group.

This means we can only choose one of them.

v-model is also bound to the same value so the selected choice is bound to the answer reactive property.

Otherwise, we display the restart button so that the restart method is called when we click it.

We display the submit button below that to submit the answer.

And we display the score below that.

In the script tag, we have the question entries with the chocies and rightAnswer .

The data has all our reactive properties’ initial values.

The submit method is where we check out answer.

We get the answer and compare it to question.rightAnswer .

question has the current question.

If they’re the same, we increase score by 1.

And if questionIndex is less than questions.length , we move to the next question by increasing questionIndex by 1.

And then we set this.question to the new question after that.

Once we went through all the questions, restart is run.

We just reset the reactive variables to their initial values.

Conclusion

We can create a quiz game easily with Vue 3 and JavaScript.

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 an addition game program 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 addition-game

and select all the default options to create the project.

Create the Addition Game

To create the addition app, we write:

<template>
  <form @submit.prevent="submit">
    <div>
      <label>{{ num1 }} + {{ num2 }}</label>
      <input v-model.number="sum" />
    </div>

    <button type="submit">check</button>
  </form>
  <button type="button" @click="generateQuestion">start game</button>
  <p>score: {{ score }}</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      num1: 0,
      num2: 0,
      sum: 0,
      score: 0,
    };
  },
  computed: {
    formValid() {
      const { sum } = this;
      return +sum >= 0;
    },
  },
  methods: {
    submit() {
      if (!this.formValid) {
        return;
      }
      const { sum, num1, num2 } = this;
      if (num1 + num2 === sum) {
        this.score++;
      }
      this.generateQuestion();
    },
    generateQuestion() {
      this.num1 = Math.ceil(Math.random() * 10);
      this.num2 = Math.ceil(Math.random() * 10);
    },
  },
};
</script>

We create a form with the form element.

To listen for submissions, we listen to the submit event.

The prevent modifier lets us do client-side submission instead of server-side submission.

In the form, we have an input to let us enter our answer.

We bind the entered answer to the sum reactive property with v-model .

And we convert the entered value to a number automatically with the number modifier.

The button withn type set to submit lets us trigger form submissions by emitting the submit event.

In the component object, we have the data method to return an object with the initial values of all the reactive properties.

The formValid computed property lets us check if sum is bigger than 0.

In the submit method, we check if the form is valid with the formValid reactive property.

Then we get the num1 , num2 and sum values and check if num1 + num2 is equal to sum .

If they’re equal, then we increase score by 1.

We can assume they’re all numbers since num1 and num2 are generated with the Math.random method.

And we checked that sum is a number earlier with the formValid computed property.

We call generateQuestion to generate a num1 and num2 .

Math.random returns a number between 0 and 1, so we’ve to multiply it by a number we want to generate a larger range of numbers.

Math.ceil rounds the number up to the nearest integer.

generateQuestion is called when we click on the start game button and after we submitted an answer.

Conclusion

We can create an addition game program easily with Vue 3 and JavaScript.