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 percentage calculator 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 percentage-calculator

and select all the default options to create the project.

Create the Percentage Calculator

To create the percentage calculator, we write:

<template>
  <form @submit.prevent="calculate">
    <div>
      <label>points given</label>
      <input v-model.number="pointsGiven" />
    </div>

    <div>
      <label>points possible</label>
      <input v-model.number="pointsPossible" />
    </div>
    <button type="submit">calculate</button>
  </form>
  <div>percentage:{{ percentage }}</div>
</template>

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

We have a form that has the @submit directive to let us listen to the submit event emitted when clicking the button with type submit .

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

Then we have the inputs for entering the points given and points possible values.

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

The number modifier converts the inputted values to numbers automatically.

Then we have the calculate button which we click to submit the form.

Below that, we have the div to display the calculated percentage .

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

In the formValid computed property, we check if pointsGiven and pointsPossible are valid values.

pointsPossible should be bigger than 0 since we can’t divide by 0.

Then below that, we have the calculate method, which checks if the formValid property is true .

If it’s true , then we calculate the percentage.

Conclusion

We can create a percentage calculator 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 grade calculator 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 grade-calculator

and select all the default options to create the project.

We also need to install the uuid package so that we can generate unique IDs for each grade entry.

To install it, we run:

npm i uuid

Create the Grade Calculator

To create the grade calculator, we write:

<template>
  <form @submit.prevent="calculate">
    <div v-for="(grade, index) of grades" :key="grade.id">
      <label>grade</label>
      <input v-model.number="grade.value" />
      <button type="button" @click="deleteGrade(index)">delete grade</button>
    </div>
    <button type="button" @click="addGrade">add grade</button>
    <button type="submit">calculate average</button>
  </form>
  <div>Your average grade is {{ average }}</div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  name: "App",
  data() {
    return {
      grades: [{ id: uuidv4(), value: 0 }],
      average: 0,
    };
  },
  computed: {
    formValid() {
      return this.grades.every(({ value }) => !isNaN(+value));
    },
  },
  methods: {
    addGrade() {
      this.grades.push({ id: uuidv4(), value: 0 });
    },
    deleteGrade(index) {
      this.grades.splice(index, 1);
    },
    calculate() {
      if (!this.formValid) {
        return;
      }
      this.average =
        this.grades.map(({ value }) => value).reduce((a, b) => a + b, 0) /
        this.grades.length;
    },
  },
};
</script>

We have a form with the @submit directive to let us handle form submissions with the calculate method.

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

Inside it, we render divs with v-for for each grade entry.

Inside each div, we have an input field that binds to the grade.value property with v-model .

The number modifier converts the input value to a nmber.

The delete grade button is set to type button so that it doesn’t submit the form when we click it.

It calls deleteGrade to delete the grade entry at the given index .

Below that, we have the add grade button to add a grade by calling addGrade when we click it.

And below that, we have the button to submit the form.

The div is used to display the average grade.

In the script tag, we have the data method that returns the grades array and average .

They’re both reactive properties.

The formValid computed property checks if every grades entry’s value property is a number with the isNaN function.

Below that, we have the methods we call.

The addGrade method calls push to add a new entry into the this.grades array.

uuidv4 returns a UUID string so we can add an ID to the entry.

We need the unique ID so that Vue 3 can discern the entries that are rendered.

We set that as the key prop’s value to make it a unique identifier for the row.

The deleteGrade method calls splice to remove an item with the index and 1 to remove the entry with the given index .

The calculate method calls map to return an array with the value s of each grades entry.

Then it calls reduce to add the numbers together. The 0 in the 2nd argument is the initial value.

And then the total is divided by this.grades.length to get the average.

Conclusion

We can create a grade calculator 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 temperature converter 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 temperature-converter

and select all the default options to create the project.

Create the Temperature Converter

To create the temperature converter, we write:

<template>
  <form @submit.prevent="convert">
    <div>
      <label>temperature in celsius</label>
      <input v-model.number="celsius" />
    </div>
    <button type="submit">convert</button>
  </form>
  <div>{{ celsius }}c is {{ fahrenheit }}f</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      celsius: 0,
      fahrenheit: 0,
    };
  },
  computed: {
    formValid() {
      return !isNaN(+this.celsius);
    },
  },
  methods: {
    convert() {
      if (!this.formValid) {
        return;
      }
      this.fahrenheit = this.celsius * (9 / 5) + 32;
    },
  },
};
</script>

We create the form with an input that takes the temperature in celsius.

We bind the input value to the celsius reactive with v-model .

The number modifier lets us convert it to a number automatically.

In the form , we add the @submit directive to listen for clicks on the button with type submit .

The prevent modifier prevents server-side submissions and lets us do client-side submissions.

Then in the component object, we have the data method that returns the celsius and fahrenheit reactive properties.

We have the formValid computed property that checks if the celsius reactive property is a number.

Then in the convert method,. we check the formValid computed property to see if the form is valid.

Then if it is, we compute the fahrenheit value from the celsius value.

And finally, in the template, we display the results of the convert in the div.

Conclusion

We can create a temperature 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 palindrome checker 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 palindrome-checker

and select all the default options to create the project.

Create the Palindrome Checker

To create the palindrome checker, we write:

<template>
  <form>
    <div>
      <label>word to check</label>
      <input v-model="word" />
    </div>
  </form>
  <div>Is Palindrome:{{ isPalindrome ? "Yes" : "No" }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      word: "",
    };
  },
  computed: {
    isPalindrome() {
      const { word } = this;
      return word === word.split("").reverse().join("");
    },
  },
};
</script>

We have the input field in the form.

And we bind the inputted value to the word reactive property with v-model .

Then below that, we have the data method that returns the word reactive property.

Then we add the isPalindrome computed property to check if this.word is a palindrome.

We check if it’s a palindrome by checking if the reversed string is the same as the original.

We call split to split it into an array of characters.

Then we call reverse to reverse the array.

And then we call join to join the characters back into a string.

Then we display that value in the template.

Conclusion

We can create a palindrome checker 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 video player 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 audio-player

and select all the default options to create the project.

Create the Audio Player

We can create the audio player by writing:

<template>
  <input
    type="range"
    min="0"
    max="100"
    step="1"
    v-model="seekValue"
    @change="onSeek"
  />
  <audio
    src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"
    ref="audioPlayer"
    @timeupdate="onPlaying"
  >
    Your browser does not support the
    <code>audio</code> element.
  </audio>
  <p>{{ currentTime }}</p>
  <div>
    <button @click="play">play</button>
    <button @click="pause">pause</button>
    <button @click="stop">stop</button>
    <button @click="setSpeed(0.5)">0.5x</button>
    <button @click="setSpeed(1)">1x</button>
    <button @click="setSpeed(1.5)">1.5x</button>
    <button @click="setSpeed(2)">2x</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      currentTime: 0,
      seekValue: 0,
    };
  },
  methods: {
    play() {
      this.$refs.audioPlayer.play();
    },
    pause() {
      this.$refs.audioPlayer.pause();
    },
    stop() {
      const { audioPlayer } = this.$refs;
      audioPlayer.pause();
      audioPlayer.currentTime = 0;
    },
    setSpeed(speed) {
      this.$refs.audioPlayer.playbackRate = speed;
    },
    onPlaying() {
      const { audioPlayer } = this.$refs;
      if (!audioPlayer) {
        return;
      }
      this.currentTime = audioPlayer.currentTime;
      this.seekValue = (audioPlayer.currentTime / audioPlayer.duration) * 100;
    },
    onSeek() {
      const { audioPlayer } = this.$refs;
      const seekto = audioPlayer.duration * (this.seekValue / 100);
      audioPlayer.currentTime = seekto;
    },
  },
};
</script>

We have a range input that we can slide around to change the seekValue ,

We bound it to seekValue with v-model .

Also, we attach a change event handler to the input that changes the currentTime of the audio element to seek the audio.

The audio element has the audio we want to play.

We listen to the timeUpdate event so we can get the current time.

We assign a ref to it so we can manipulate it later.

Below that, we display the currentTime .

And then we have a few buttons to let us play, pause, stop, and change the speed of the audio.

Below the template, we have the data method with the currentTime and seekValue reactive properties returned.

The play method gets the audio player element from the ref and call play to play the audio.

The pause method gets the audio player element from the ref and call pause to pause the audio.

The stop method pauses the audio and set the currentTime to 0 to reset the audio playback back to the beginning.

setSpeed lets us set the speed by changing the playbackRate property.

The onPlaying method is called when the timeUpdate event is emitted.

We set the this.currentTime reactive property to the currentTime property of the audioPlayer .

Also, we update the seekValue so that it’s in sync with the currentTime .

This will update the range slider to be in sync with the currentTime .

Finally, we have the onSeek method that’s run when the change event is emitted by the range input, which is done when we’re done moving the slider.

We get the seekValue reactive property and to compute the seekTo value by multiplying that by the duration and dividing by 100.

Then we set that to the currentTime to change the current time.

Conclusion

We can add an audio player with Vue 3 and JavaScript.