Vue.js Digital Clock With Current Time Using Moment.js and CSS Bulma Framework in Browser Using Javascript Full Project For Beginners

Vue.js Digital Clock With Current Time Using Moment.js and CSS Bulma Framework in Browser Using Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a digital clock in vue.js using moment.js and css bulma framework in html5 css3 and javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css"/>
<section id="app" class="section">
    <h3 class="title is-3 shadow" v-text="message"></h3>
    <p class="time shadow" v-text="currentTime"></p>
</section>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>

 

 

Now make a style.css file and copy paste the following code

 

style.css

 

body, html {
     width: 100%;
     height: 100%;
}
 body {
     background: -webkit-linear-gradient(LightSteelBlue, LightSalmon);
     background: -o-linear-gradient(LightSteelBlue, LightSalmon);
     background: -moz-linear-gradient(LightSteelBlue, LightSalmon);
     background: linear-gradient(LightSteelBlue, LightSalmon);
}
 section.section {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding-top: 140px;
     background: transparent;
}
 h3.is-3, p.time {
     color: white;
}
 h3.is-3:not(:last-child) {
     margin: 0;
     padding: 0;
}
 .time {
     font-size: 7em;
}
 .shadow {
     text-shadow: 0 0 15px rgba(100, 100, 100, .35);
}

 

READ  Vue.js Vuetify Swipe Gesture List Cards Slider Using Swiper Library in Javascript Full Project For Beginners

 

Now make a script.js file and copy paste the following code

 

script.js

 

 

"use strict";

new Vue({
  el: "#app",
  data: {
    message: "Current Time:",
    currentTime: null
  },
  methods: {
    updateCurrentTime() {
      this.currentTime = moment().format("LTS");
    }

  },

  created() {
    this.currentTime = moment().format("LTS");
    setInterval(() => this.updateCurrentTime(), 1 * 1000);
  }

});

 

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

Leave a Reply