Categories
Vue 3 Projects

Create an Addition Game Program 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.

Categories
Vue 3 Projects

Create a Contact Form 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 contact form 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 contact-form

and select all the default options to create the project.

Create the Contact Form

To create the contact form app, we write:

<template>
  <form @submit.prevent="submit" @reset="onReset">
    <div>
      <label>name</label>
      <input v-model="name" />
    </div>

    <div>
      <label>email</label>
      <input v-model="email" />
    </div>

    <div>
      <label>message</label>
      <textarea v-model="message"></textarea>
    </div>

    <button type="submit">submit</button>
    <button type="reset">reset</button>
  </form>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      name: "",
      email: "",
      message: "",
    };
  },
  computed: {
    formValid() {
      const { name, email, message } = this;
      return (
        name.length > 0 &&
        /(.+)@(.+){2,}.(.+){2,}/.test(email) &&
        message.length > 0
      );
    },
  },
  methods: {
    onReset() {
      this.name = "";
      this.email = "";
      this.message = "";
    },
    submit() {
      if (!this.formValid) {
        return;
      }
      if (!localStorage.getItem("messages")) {
        localStorage.setItem("messages", JSON.stringify([]));
      }
      const messages = JSON.parse(localStorage.getItem("messages"));
      const { name, email, message } = this;
      messages.push({
        name,
        email,
        message,
      });
      localStorage.setItem("messages", JSON.stringify(messages));
    },
  },
};
</script>

We create a form with the form element.

And we add the submit event handler with the @submit directive.

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

The @reset directive listens to the reset event which is emitted when we click on a button with the type attribute set to reset .

So when we click on the reset button, the reset event is emitted.

We add the inputs with v-model to bind the inputted values to the reactive properties.

The reactive properties are defined in the object we return in the data method.

The button withn type attribute set to submit runs the submit event handler when we click it.

We have the formValid compuyed property to check if each value is valid.

We check the name and message have length bigger than 0.

And that email is an email.

The onReset method resets the reactive properties to empty strings.

The submit method checks if all the values are valid with tyhe formValid computed property.

Then we store the entered form values in local storage.

We check if the local storage entry with key messages is present.

Otherwise, we create it with the initial value being an empty array.

Then we push a new item in it after getting the value with localStorage.getItem and parsing it into an object with JSON.parse .

Then we store the messages array with the message entry pushed into local storage with localStorate.setItem .

Conclusion

We can create a contact form easily with Vue 3 and JavaScript.

Categories
Vue 3 Projects

Create a Tip Calculator App 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 tip calculator 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 tip-calculator

and select all the default options to create the project.

Create a Tip Calculator App

To create the tip calculator app, we write:

<template>
  <form @submit.prevent="calculate">
    <div>
      <label>bill amount</label>
      <input v-model.number="billAmount" />
    </div>

    <div>
      <label>percentage tip</label>
      <input v-model.number="percentageTip" />
    </div>

    <button type="submit">calculate</button>
  </form>
  <p>tip amount: {{ tipAmount.toFixed(2) }}</p>
  <p>total: {{ total.toFixed(2) }}</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      billAmount: 0,
      percentageTip: 0,
      tipAmount: 0,
      total: 0,
    };
  },
  computed: {
    formValid() {
      const { billAmount, percentageTip } = this;
      return +billAmount > 0 && +percentageTip > 0;
    },
  },
  methods: {
    calculate() {
      const { billAmount, percentageTip } = this;
      this.tipAmount = billAmount * (percentageTip / 100);
      this.total = billAmount * (1 + percentageTip / 100);
    },
  },
};
</script>

We add a form element into the template.

Then we listen to the submit event with the @submit directive.

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

Inside the form, we have inputs to let us enter bill amount and percentage tip.

The v-model directive lets us bind the entered value to a reactive property.

number lets us convert the entered value to a number automatically.

Then we show tipAmount and total .

toFixed converts the numbers to 2 decimal places.

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

We check if the entered values are valid with the formValid reactive property.

In it, we check if billAmount and percentageTip are bigger than 0.

And in the calculate method, we get the billAmount and percentageTip and calculate the tipAmount and total .

They’re converted to numbers automatically with number so we don’t have to convert them again.

And we already know the values are valid, so they must be numbers.

Now when we type in the values and click calculate, we see the tip amount and total.

Conclusion

We can create a tip calculator with Vue 3 and JavaScript.

Categories
Vue 3 Projects

Create a Weight Converter App with Vue 3 and JavaScript

ttps%3A%2F%2Funsplash.com%3Futm_source%3Dmedium%26utm_medium%3Dreferral)

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

and select all the default options to create the project.

Create the Weight Converter App

To create the weight converter app, we write:

<template>
  <form>
    <div>
      <label>weight in pounds</label>
      <input v-model.number="weightInLb" />
    </div>
  </form>
  <p>{{ weightInKg }} kg</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      weightInLb: 0,
    };
  },
  computed: {
    weightInKg() {
      const { weightInLb } = this;
      return +weightInLb * 0.453592;
    },
  },
};
</script>

We add the form with input to let users enter the weight in pounds/

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

The number modifier lets us prevent server-side submission.

In the data method, we return an object with the weightInLb reactive property.

Then we create the weightInKg computed property to convert the weight in pounds to the equivalent weight in kilograms.

Then we display weightInKg in the template.

Now when we type in the weight in pounds, we see the weight in kilograms automatically.

weightInKg is a reactive property, so weightInKg updates automatically when it changes.

Conclusion

We can create a weight calculator app easily with Vue 3 and JavaScript.

Categories
Vue 3 Projects

Create a BMI Calculator App 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 BMI calculator 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 bmi-calculator

and select all the default options to create the project.

Create the BMI Calculator App

To create the BMI calculator, we write:

<template>
  <form @submit.prevent="calculate">
    <div>
      <label>height in meters</label>
      <input v-model.number="height" />
    </div>

    <div>
      <label>mass in kg</label>
      <input v-model.number="mass" />
    </div>

    <button type="submit">calculate</button>
  </form>
  <p>bmi: {{ bmi }}</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      height: 0,
      mass: 0,
      bmi: 0,
    };
  },
  computed: {
    formValid() {
      const { height, mass } = this;
      return +height > 0 && +mass > 0;
    },
  },
  methods: {
    calculate() {
      if (!this.formValid) {
        return;
      }
      const { height, mass } = this;
      this.bmi = mass / height ** 2;
    },
  },
};
</script>

We create a form and add the submit event listener with the @submit directive.

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

Then we add the input boxes into the divs.

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

The number modifier lets us convert entered the value to a number automatically.

In the component object, we have the data method.

It returns an object with the height , mass and bmi reactive properties.

Then we create the formValid computed property to check if the enteredheight and mass are bigger than 0.

We use this in the calculate method to check if the entered values are valid.

If they are, then we compute the bmi with the height and mass .

The ** operator is the exponentiation operator.

Conclusion

We can create a BMI calculator app easily with Vue 3 and JavaScript.