Simple Digital Clock with Date using VueJS

Simple Digital Clock with Date using VueJS

Today, We want to share with you Simple Digital Clock with Date using VueJS.
In this post we will show you Digital Clock with Vue.js, hear for vuejs digital clock with date we will give you demo and example for implement.
In this post, we will learn about Simple digital clock built with Vue with an example.

Simple Digital Clock with Date using VueJS
Simple Digital Clock with Date using VueJS

Getting Started for Digital Clock with Vue.js

We have used CDN(libes) for vuejs so you must need Your internet Data connection for them to work on Digital Clock with Vue.js
.

index.html

This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(Digital Clock with Vue.js) dependencies and the HTML Elements that we have created.

Read Also:  Date filtering and formatting in VueJS with Example

<div id="liveclck">
    <p class="date">{{ date }}</p>
    <p class="pakatime">{{ pakatime }}</p>
    <p class="text">Simple DIGITAL CLOCK with Vue.js</p>
</div>

index.js

This data contains our simple custom index.js files Add Like as javascript, vuejs scripts

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

var custom_date = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
var timerID = setInterval(activeUpdateDateTime, 1000);
activeUpdateDateTime();
function activeUpdateDateTime() {
    var mycurrentDate = new Date();
    liveclck.pakatime = sysPaddingZro(mycurrentDate.getHours(), 2) + ':' + sysPaddingZro(mycurrentDate.getMinutes(), 2) + ':' + sysPaddingZro(mycurrentDate.getSeconds(), 2);
    liveclck.date = sysPaddingZro(mycurrentDate.getFullYear(), 4) + '-' + sysPaddingZro(mycurrentDate.getMonth()+1, 2) + '-' + sysPaddingZro(mycurrentDate.getDate(), 2) + ' ' + custom_date[mycurrentDate.getDay()];
};

function sysPaddingZro(lnum, mydgt) {
    var clckzro = '';
    for(var i = 0; i < mydgt; i++) {
        clckzro += '0';
    }
    return (clckzro + lnum).slice(-mydgt);
}

style.css

Last step, we have add the Following CSS styles for our simple Digital Clock with Vue.js and our Custom styling.

Read Also:  Laravel Many to many relationships with itself

html,body {
    height: 100%;
}
body {
    background: #0f3854;
    background: radial-gradient(ellipse at center,  #0a2e38  0%, #000000 70%);
    background-size: 100%;
}
p {
    margin: 0;
    padding: 0;
}
#liveclck {
    font-family: 'Share Tech Mono', monospace;
    color: #3d3d3d;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #c60000;
    text-shadow: 0 0 20px rgba(10, 175, 230, 1),  0 0 20px rgba(10, 175, 230, 0);
    .pakatime {
        letter-spacing: 0.05em;
        font-size: 80px;
        padding: 6px 0;
    }
    .date {
        letter-spacing: 0.1em;
        font-size: 28px;
    }
    .text {
        letter-spacing: 0.1em;
        font-size: 13px;
        padding: 21px 0 0;
    }
}

Digital Clock with Vue.js

Read Also:  PHP curl Http authentication header from Client

We hope you get an idea about Simple Digital Clock with Date using VueJS
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP utf8ize Encode with json_encode Example
  2. Read Also:  Angular 4 Grid with CRUD operations | Angular 4 insert update delete
  3. Read Also:  How To Create a Portfolio Gallery with Filtering?
  4. Read Also:  PHP Laravel 5 Class Form HTML not found Resolve Error
  5. Read Also:  Wordpress Next Previous Article/post using CSS
  6. Read Also:  Loop Binding in Vue.js With V-for
  7. Read Also:  jquery remove last comma from Array Example
  8. Read Also:  jquery remove last comma from Array Example
  9. Read Also:  Loop Binding in Vue.js With V-for
  10. Read Also:  Angular 4 Grid with CRUD operations | Angular 4 insert update delete