DEV Community: Atif Iqbal

Get Real Time Date and Time using JavaScript

Atif Iqbal — Sun, 09 May 2021 17:20:25 +0000

So our topic is Get Real time date and Time using JavaScript. Real time date and time is same time and date that we see at our computer,mobile or watch screen. We just once set the time on our devices and they gave us updated time whenever we see.
So the question is how can we see such Real time date and Time on our web page.
Let’s get this...
First we will create a demo page using HTML and CSS to visualize how our time and date will look like...let’s create a beautiful demo page.



<!DOCTYPE html>
<html>
<head>
    <title>Time and Date</title>
</head>
<style type="text/css">
    @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
    p{
        display: inline;
        margin: 5px;
    }

    #time{
        font-size: 60px;
        color: #004AAD;
    }

    #day{
        font-size: 40px;
        color: #FF5757;
    }

    #date{
        font-size:20px;
        color: #FF5757;
    }
    div{
        font-family: 'Fredoka One', cursive;
    }


</style>
<body>

    <div>

        <p id="time">1:20PM</p>
        <p id="day">SUN</p>
        <p id="date">9 May 2021</p>

    </div>

</body>
</html>

If we run our code until now it will look like this on our browser window

We have just created a demo page. At this stage our current date and time will not change, it will always remain the same.
So how can we get the real time date and time or you can say Live time and date. This we can achieve using JavaScript.

Let’s understand JavaScript portion of the code with steps...

Step#1: Call new Date() constructor



let currentTimeDate = new Date();

We have currentTimeDate object that will help us to get time and date...just wait and see how we get time and date with the help of currentTimeDate Object.

Step#2: Create array for weekday



var weekday = new Array(7);
        weekday[0] = "SUN";
        weekday[1] = "MON";
        weekday[2] = "TUE";
        weekday[3] = "WED";
        weekday[4] = "THU";
        weekday[5] = "FRI";
        weekday[6] = "SAT";

Current day will be picked from weekday array.

Step#3: Create an array for month



var month = new Array();
        month[0] = "JAN";
        month[1] = "FEB";
        month[2] = "MAR";
        month[3] = "APR";
        month[4] = "May";
        month[5] = "JUN";
        month[6] = "JUL";
        month[7] = "AUG";
        month[8] = "SEP";
        month[9] = "OCT";
        month[10] = "NOV";
        month[11] = "DEC";

Current month will be picked from month array.

Step#4: Get current hours



var hours   =  currentTimeDate.getHours();

We had created currentTimeDate object previously in Step#1. And now we are using dot operator along with getHours() to get current hour of time.

Step#5: Get current minutes



var minutes =  currentTimeDate.getMinutes();

we are getting current minutes of time using currentTimeDate.getMinutes() and saving these minutes in minutes variable.



minutes = minutes < 10 ? '0'+minutes : minutes;

This line of code is just a way to properly organize our minutes because we don’t want to get 0,1,3 etc as minutes instead we want minutes as 00, 01, 03 etc.
This line of code just says, hey if minutes are less than 10then append 0 with minutes and save minutes in minutes variable but if minutes are greater than 10 then do nothing and just save minutes in minutes variable.
If this statement is confusing, you can use old approach that will be as



if(minutes < 10){
minutes = '0' + minutes;
}else{
minutes = minutes;
}

Step#6: Set AM and PM



var AMPM = hours >= 12 ? 'PM' : 'AM';

This statement just says, if hours are greater or equal to 12 then assign PM string to AMPM variable otherwise assign AM string to AMPM variable.

Step#7: Getting 12hr format



 if(hours === 12){
            hours=12;

    }else{

            hours = hours%12;

   }

Here, We have used the if else statement to get 12hr time format.If hours will be equal to 12 then 12 will be assign to hours variable otherwise we will fall into else part of the condition and will tackle expression hours = hours%12;
hours = hours%12===> here % is mod operator that will give us remainder. For example if hours are 13 then we will get 1,if hours are 14 then we will get 2, if hours will be 15 we will get 3 and so on.

Step#8: Get currentTime, currentDay, fullDate



var currentTime = `${hours}:${minutes}${AMPM}`;

Using JavaScript Template literals we are appending hours, minutes and AMPM values and saving whole string in currentTime variable.



var currentDay = weekday[currentTimeDate.getDay()];

currentTimeDate.getDay() gives us number value from 0-6, for example if current day is Sunday then currentTimeDate.getDay() will give us 0, if current day is Monday then currentTimeDate.getDay() will give us number 1 and so on for the rest of the days.
Now let’s say we get 0 by currentTimeDate.getDay(), let’s enter value 0 into our statement...
var currentDay = weekday[0]; Remember we have initialized weekday array before. So weekday[0] will give us value of 0index(value is SUN) and the value will be saved in the currentDay variable.



var currentDate  = currentTimeDate.getDate();

This statement will give current date.



var currentMonth = month[currentTimeDate.getMonth()];

Similar to currentDay here we will get a number as a result of currentTimeDate.getMonth() and will access value from a index of month array.



var CurrentYear = currentTimeDate.getFullYear();

Now here we will get current full year.



var fullDate = `${currentDate} ${currentMonth} ${CurrentYear}`;

Here we are appending currentDate, currentMonth, CurrentYear and making a complete string, this string then will be saved in fullDate variable.

Step#9: Change hard coded value of time, day and date using DOM



document.getElementById("time").innerHTML = currentTime;

Here value of currentTime variable is being saved into element that has id as time.



document.getElementById("day").innerHTML = currentDay;

Value of currentDay variable into element that has id as day.



document.getElementById("date").innerHTML = fullDate;

Save value of fullDate variable into element that has id as date.

Step#10: Get Real time Date and Time



setTimeout(getCurrentTimeDate, 500);

setTimeout function with value of 500 will change the value of our time after every minute by calling getCurrentTimeDate function.

Step#11: Enclose code from Step#1 to Step#10 into a function getCurrentTimeDate



const getCurrentTimeDate = () => {

//Code from Step#1 to Step#10 will be here

}

Step#12: Call function getCurrentTimeDate
getCurrentTimeDate();

Step#10 to Step#12 might be confusing, please see whole code below for proper flow.



<!DOCTYPE html>
<html>
<head>
    <title>Time and Date</title>
</head>
<style type="text/css">
    @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
    p{
        display: inline;
        margin: 5px;
    }

    #time{
        font-size: 60px;
        color: #004AAD;
    }

    #day{
        font-size: 40px;
        color: #FF5757;
    }

    #date{
        font-size:20px;
        color: #FF5757;
    }
    div{
        font-family: 'Fredoka One', cursive;
    }


</style>
<body>

    <div>

        <p id="time">1:20PM</p>
        <p id="day">SUN</p>
        <p id="date">9 May 2021</p>

    </div>

    <script type="text/javascript">

const getCurrentTimeDate = () => {
        let currentTimeDate = new Date();

        var weekday = new Array(7);
        weekday[0] = "SUN";
        weekday[1] = "MON";
        weekday[2] = "TUE";
        weekday[3] = "WED";
        weekday[4] = "THU";
        weekday[5] = "FRI";
        weekday[6] = "SAT";

        var month = new Array();
        month[0] = "JAN";
        month[1] = "FEB";
        month[2] = "MAR";
        month[3] = "APR";
        month[4] = "May";
        month[5] = "JUN";
        month[6] = "JUL";
        month[7] = "AUG";
        month[8] = "SEP";
        month[9] = "OCT";
        month[10] = "NOV";
        month[11] = "DEC";

        var hours   =  currentTimeDate.getHours();

        var minutes =  currentTimeDate.getMinutes();
        minutes = minutes < 10 ? '0'+minutes : minutes;

         var AMPM = hours >= 12 ? 'PM' : 'AM';

        if(hours === 12){
            hours=12;

        }else{

            hours = hours%12;

        }

        var currentTime = `${hours}:${minutes}${AMPM}`;
        var currentDay = weekday[currentTimeDate.getDay()];

        var currentDate  = currentTimeDate.getDate();
        var currentMonth = month[currentTimeDate.getMonth()];
        var CurrentYear = currentTimeDate.getFullYear();

        var fullDate = `${currentDate} ${currentMonth} ${CurrentYear}`;


        document.getElementById("time").innerHTML = currentTime;
        document.getElementById("day").innerHTML = currentDay;
        document.getElementById("date").innerHTML = fullDate;

        setTimeout(getCurrentTimeDate, 500);

    }
    getCurrentTimeDate();

    </script>

</body>
</html>

When our html page will load, we will get Real Time Date and Time. Just keep looking the page the time will increment automatically.
See live demo at https://atif-dev.github.io/javaScriptRealTimeDateTime/
Or at
https://codepen.io/Atitemp/pen/xxqGXOO
💻🙂👍

for , forEach , for of and for in loops in JavaScript

Atif Iqbal — Fri, 03 Apr 2020 13:33:28 +0000

You probably know the for and forEach loop but you may not know about for of and for in loops🤔. for of and for in are actually new in JavaScript and their usage is not so frequent yet.
Let’s talk about all of these four loops one by one.

for loop
Let’s make a simple array of fruits.

fruitsArray = ["apples", "bananas", "oranges", "peaches", "berries"]

We have made an array called fruitsArray having five items, right? Let’s print out all items through for loop.

for(let i = 0; i < fruitsArray.length; i++){
console.log(fruitsArray[i]);
}

Above for loop give us following output.(checked for chrome console)

apples
bananas
oranges
peaches
berries

forEach loop
In our for loop we got all the items(that were fruits) one by one. Now let’s head over to forEach loop to know how it is handling things.

fruitsArray.forEach(item => {
console.log(item);
})

forEach loop is iterating on all items present in fruitsArray and printing them out using console.log(item) after each iteration. Word item is just a parameter that represents value of an index in fruitsArray. This is not fixed, you can use any other of your own instead of this.
Here is the output(same as our previous for loop);

apples
bananas
oranges
peaches
berries

Now let’s talk about the new loops (I guess you’re waiting for this!)

for of loop

for(item of fruitsArray){
console.log(item);
}

On first iteration, this loop is saying, hey give me first item of fruitsArray then after first iteration give me second item and so on this iteration process continues until last item of fruitsArray.
It has same output as for previous for and forEach loop.

for in loop
for in loop is such loop that is not for arrays, it is for objects. Actually it is used to print out properties of objects. Let’s take an example;

const fruitsQuantity = {
apples:5,
oranges:10,
grapes:20
}

We have an object called fruitsQuantity that has properties as different fruit names. Along with every property there is corresponding number that shows the quantity of each property.
Now let’s print out all properties of this object.

for(items in fruitsQuantity){
console.log(items);
}

This loop give us all properties of fruitsQuantity object. See output below.

apples
oranges
grapes

For in loop has not kind of iterating process. Because we never heard iteration on objects, we heard iteration on arrays or strings. For me it seems okay for understanding.

After all this discussion, we were just talking about how these loops were working. Now lets talk about some differences.
for loop takes more time and space while writing code and its Syntax is confusing if we have many lines of code.
forEach loop seems okay to write while we are saying that hey give me all items or indexes on each iteration. This seems nice.
for of loop is actually better than for each loop while tracing the code for understanding, it is just saying hey give me items of an array one by one. And also it takes less space while writing. A beginner or novice doesn’t feel confusion while reading for of loop.
for in loop working is similar to for of loop. Difference is, for of loop is used for arrays and strings whereas for in loop is used for objects. for in again is simplified version to comprehend the code.

Conclusion

See, the Conclusion here is that with the passage of time languages syntax is becoming user friendly so that when a person write or trace the code he or she can easily comprehend it.

(Note: This is my first post on DEV, if there is any mistake let me know. I like DEV community and will learn from you people how to write good stuff.)
That's it.

Always Learn Right and Carry on the Learning Process!🙂🥦💻