Build Vue.js Stopwatch Countdown Digital Alarm Clock in Browser Using Javascript Full Project For Beginners

Build Vue.js Stopwatch Countdown Digital Alarm Clock 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 vue.js stopwatch countdown digital alarm clock in browser using 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://fonts.googleapis.com/css?family=Share+Tech+Mono"/>
<div id="clock">
    <p class="date">{{ date }}</p>
    <p class="time">{{ time }}</p>
    <p class="text">DIGITAL CLOCK with Vue.js</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

 

 

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

 

style.css

 

html, body {
     height: 100%;
}
 body {
     background: #0f3854;
     background: radial-gradient(ellipse at center, #0a2e38 0%, #000 70%);
     background-size: 100%;
}
 p {
     margin: 0;
     padding: 0;
}
 #clock {
     font-family: 'Share Tech Mono', monospace;
     color: #fff;
     text-align: center;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     color: #daf6ff;
     text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
}
 #clock .time {
     letter-spacing: 0.05em;
     font-size: 80px;
     padding: 5px 0;
}
 #clock .date {
     letter-spacing: 0.1em;
     font-size: 24px;
}
 #clock .text {
     letter-spacing: 0.1em;
     font-size: 12px;
     padding: 20px 0 0;
}

 

See also  Vue.js Render PDF Document in PDF.js Using PDFjs-dist Library Full Tutorial For Beginners

 

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

 

script.js

 

var clock = new Vue({
    el: '#clock',
    data: {
        time: '',
        date: ''
    }
});

var week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
var timerID = setInterval(updateTime, 1000);
updateTime();
function updateTime() {
    var cd = new Date();
    clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
    clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth()+1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
};

function zeroPadding(num, digit) {
    var zero = '';
    for(var i = 0; i < digit; i++) {
        zero += '0';
    }
    return (zero + num).slice(-digit);
}

 

See also  Vue.js Nuxt.js Responsive Background Video Player Using vue-responsive-video-background-player Library in Javascript Full Project For Beginners

 

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

 

Leave a Reply