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 digital clock 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 digital-clock

and select all the default options to create the project.

Create the Digital Clock App

We can create a digital clock app with the following code:

<template>
  <div>{{ dateTime.hours }}:{{ dateTime.minutes }}:{{ dateTime.seconds }}</div>
</template>

<script>
const date = new Date();
export default {
  name: "App",
  data() {
    return {
      dateTime: {
        hours: date.getHours(),
        minutes: date.getMinutes(),
        seconds: date.getSeconds(),
      },
      timer: undefined,
    };
  },
  methods: {
    setDateTime() {
      const date = new Date();
      this.dateTime = {
        hours: date.getHours(),
        minutes: date.getMinutes(),
        seconds: date.getSeconds(),
      };
    },
  },
  beforeMount() {
    this.timer = setInterval(this.setDateTime, 1000);
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

In the template, we display the hours, minutes, and seconds with dateTime.hours , dateTime.minutes and dateTime.seconds respectively.

In the data method, we return the dateTime object with the hours , minutes , and seconds property.

new Date() returns an object the current date and time.

getHours returns the hour of the date.

getMinutes returns the minutes of the date.

getSeconds returns the seconds of the date.

In the setDateTime method, we get the current date with new Date() .

And we call getHours , getMinutes , and getSeconds to get the time parts.

In the beforeMount hook, we call setInterval with the this.setDateTime method to run it every second.

The 2nd argument specifies that it runs every 1000 milliseconds, which is 1 second.

It returns the timer object which we assign to the timer reactive property.

beforeMount runs when the component is mounting.

beforeUnmount calls the clearIntrval method with the timer reactive property to clear the timer when the component unmounts.

In the template, we show the time and it updates every second.

Conclusion

We can create a digital clock 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 background color switcher 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 background-switcher

and select all the default options to create the project.

Create the Background Color Switcher App

To create the background color switcher app, we create 4 circles.

When we click on a circle, the background color switches to the background color of the circle we clicked on.

To do this, we write:

<template>
  <div id="screen" :style="{ 'background-color': backgroundColor }">
    <div
      v-for="c of colors"
      :key="c"
      :style="{
        'background-color': c,
      }"
      class="circle"
      @click="backgroundColor = c"
    ></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      colors: ["red", "green", "blue", "yellow"],
      backgroundColor: undefined,
    };
  },
  methods: {},
};
</script>

<style>
.circle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  cursor: pointer;
}

#screen {
  width: 100vw;
  height: 100vh;
}
</style>

We have the colors reactive property array that we use to render into circles with v-for in the template.

We set the background color each circle with the style prop.

The key prop is set to the color, which is the unique ID of the array.

We add a click listener to each circle to set the backgroundColor to the color c .

The div with ID screen is has the style prop to set the background-color CSS property to the backgroundColkor reactive property.

In the style tag, we make the divs with class circle circles by setting the border-radius to 50%.

Width and height are set to 50px.

border is set to a black border 1px thick.

display is set to inline-block to make the divs display side by side.

cursor is set to pointer so that we see the hand when we hover over the div.

Now when we click on the circles, we see the color changes as we click on the circle.

Conclusion

We can create a background color switcher app 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 quote of the day 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 quote-of-the-day-app

and select all the default options to create the project.

Create the Quote of the Day App

We can create our quote of the day app by writing:

<template>
  <button @click="getRandomQuote">get quote</button>
  <p>{{ quoteOfTheDay }}</p>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      quotes: [],
      quoteOfTheDay: "",
    };
  },

  methods: {
    async getQuotes() {
      const res = await fetch(`https://type.fit/api/quotes`);
      const quotes = await res.json();
      this.quotes = quotes;
    },
    getRandomQuote() {
      const index = Math.floor(Math.random() * this.quotes.length);
      const quoteOfTheDay = this.quotes[index];
      this.quoteOfTheDay = quoteOfTheDay.text;
    },
  },
  async beforeMount() {
    await this.getQuotes();
    this.getRandomQuote();
  },
};
</script>

In the component object, we have the data method to return an object with the quotes and qyoteOfTheDay reactive properties.

quotes have an array of quotes.

quoteOfTheDay has the quote picked randomly from the quotes array.

In the methods property, we have the getQuotes method that calls fetch to get the quotes from the URL.

Then we call res.json() to get the JSON from the response.

Each line returns a promise, so we need to add await to wait for each line to return the result.

And then we assign the quotes JSON array to thre this.quotes reactive property.

getRandomQuotes randomly generates the index of the quotes array.

Then we set the quoteOfTheDay to get the route.

And then we can the text property to get the quote text.

In the beforeMount hook, we run the getQuotes method and getRandomQuote method to get the quote.

beforeMount is run when the component mounts, so we’ll get the quotes when the component loads.

In the template, we have a button to get the quote with getRandomQuote and we display the result in the p element.

Conclusion

We can create a quote of the day app 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 loan 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 loan-calculator

and select all the default options to create the project.

Create the Loan Calculator App

We can create our loan calculator app by writing:

<template>
  <form @submit.prevent="calculate">
    <div>
      <label>loan amount</label>
      <input v-model.number="loanAmount" />
    </div>
    <div>
      <label>interest rate</label>
      <input v-model.number="interestRate" />
    </div>
    <div>
      <label>number of months to pay off loan</label>
      <input v-model.number="numMonths" />
    </div>
    <button type="submit">calculate monthly payment</button>
  </form>
  <p>monthly payment: {{ monthlyPayment.toFixed(2) }}</p>
</template>

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

We create a form with the loan amount, interest rate, and the number of months to pay off loan fields.

They all bind to a reactive with the v-model directive.

And they all have the number modifier to automatically convert the inputted value to a number.

We also have the submit button to let us trigger the submit event to run the calculate method.

prevent lets us prevent the default server-side submission behavior.

The data method returns an object with the reactive properties and their initial values.

We also have the formValid computed property to return the condition where the form is valid.

loanAmount must be 0 or larger.

interestRate must be between 0 and 100.

And numMonths must be bigger than 0.

We use the + sign to let us convert them to numbers easily.

And the calculate method checks the formValid computed property to see if the form is valid.

And then makes the calculation for the monthly payment with the last line of the method.

In the template, we display the monthly payment rounded to 2 decimal places.

The toFixed method does the rounding and returns the string form of the value.

Conclusion

We can create a loan calculator 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 random joke 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 joke-app

and select all the default options to create the project.

Create the Random Joke App

We can create our random joke app by writing:

<template>
  <div>
    <p>{{ joke }}</p>
    <button @click="getJoke">get new joke</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      joke: "",
    };
  },
  methods: {
    async getJoke() {
      const res = await fetch("https://api.chucknorris.io/jokes/random");
      const data = await res.json();
      this.joke = data.value;
    },
  },
  beforeMount() {
    this.getJoke();
  },
};
</script>

We display the joke value in the p element.

The button lets us get the joke when we click on it

It calls getJoke to get a new joke.

In the getJoke method, we call fetch to get the joke value.

It makes a GET request to get the joke from the URL.

The URL is the Chuck Norris API.

It returns a promise with an object with the json method that returns the JSON object from the response.

Then we get the value property from the JSON object to set the joke reactive property.

In the beforeMount method, we call getJoke so that we display the joke when the page loads.

Conclusion

We can create a random joke app easily with Vue 3 and JavaScript.