CODEWITHSUNDEEP
javascriptjquery
carpenumidium
carpenumidium

Reputation: 1203

Live update of content inside html element according to time of day

I'm trying to update content inside an html element based on the time of day, I'm doing something similar to this: Updating div content according to time but I want the content to update without a page refresh.

code:

function schoolPeriod() {
    var date = new Date();
    var h = date.getHours();
    var m = date.getMinutes();

    // prepend minutes with 0 if < 10
    if (m < 10) {
      m = "0" + m;
    }

    h = h.toString();
    m = m.toString();

    var t = h + m;

    var periods = [
        "school assembly",
        "first period",
        "second period",
        ];

        var currentPeriod = document.querySelector('.current-period');

        if (t >= 600) {
            currentPeriod.innerHTML = "new school day";
        }  
        else if (t >= 900) {
            currentPeriod.innerHTML = periods[0];
        }
        else if (t >= 940) {
            currentPeriod.innerHTML = periods[1];
        }
        else if (t >= 1020) {
            currentPeriod.innerHTML = periods[2];
        }

    setTimeout(schoolPeriod, 1000);
}
schoolPeriod();

codepen: http://codepen.io/carpenumidium/pen/grRYoN?editors=1011

What am I doing wrong? Appreciate the help!

Upvotes: 0

Views: 87

Answers (4)

nnnnnn
nnnnnn

Reputation: 150010

You need to reverse the order of your if/else if/else if/else if tests.

Why? Lets say t is 1020. The current if condition of t >= 600 will be true, so that block will be executed rather than any of the else ifs. (Even if the if were skipped, 1020 is also greater than 900 and greater than 940...) If testing a series of >= conditions you need to start by testing the highest possibility. (You may also want to think about adding a final else statement for when it is not yet 6:00 am.)

Also, t = h + m doesn't do what you expect, because it doesn't allow for single-digit minutes (if the time is, say, 10:03 am then h + m will be 103). Instead of converting the hours and minutes to strings, multiple the hours by 100:

var t = h * 100 + m;

Note that multiplying by 100 doesn't give you a number of minutes, it just makes it easy for you to do comparisons with 600 for 6am, etc.

(There are other things you could do to make the function shorter and more extensible, but the issues I've covered are the things stopping it working in its current form.)

Upvotes: 1

ElDoRado1239
ElDoRado1239

Reputation: 4048

Try something like this, the periods are set in minutes - 360 = 6:00

var periods = [
 ['period 1',360,365],
 ['period 2',365,400],
 ['period 3',400,460],
 ['period 4',460,520]
];
function getPeriod(){
 var period = 'School is closed';
 var minutes = new Date().getHours()*60 + new Date().getMinutes();
 for(var i=0;i<periods.length;i++){
  if(minutes>=periods[i][1] && minutes<periods[i][2]){
   period = periods[i][0];
   break;
  }
 }
 document.getElementById('period').innerHTML = period;
 setTimeout(getPeriod,1000);
}
<html>
<head>
</head>
<body onload="getPeriod();">
<div id="period"></div>
</body>
</html>

Upvotes: 1

AhmadReza Payan
AhmadReza Payan

Reputation: 2271

Your if then else statements are wrong. It's always check (t >= 600)

Replace this with yours:

function schoolPeriod() {
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();

h = h.toString();
m = m.toString();

var t = h + m;

var periods = [
    "school assembly",
    "first period",
    "second period",
    ];

    var currentPeriod = document.querySelector('.current-period');

    if (t >= 600 && t< 900) {
        currentPeriod.innerHTML = "new school day";
    }  
    else if (t >= 900 && t<940) {
        currentPeriod.innerHTML = periods[0];
    }
    else if (t >= 940 & t<1020) {
        currentPeriod.innerHTML = periods[1];
    }
    else if (t >= 1020) {
        currentPeriod.innerHTML = periods[2];
    }

 setTimeout(schoolPeriod, 1000);
}

// Call the function
schoolPeriod();

Hope this will help you :)

Upvotes: 1

Ali Mottaghi Pour
Ali Mottaghi Pour

Reputation: 297

Try this:

function schoolPeriod() {
        var date = new Date();
        var h = date.getHours();
        var m = date.getMinutes();

        var t = (h * 60) + m;

        var selectedIndex = 0;

        if (t >= 620) {
            selectedIndex = 3;
        }
        else if (t >= 580) {
            selectedIndex = 2;
        }
        else if (t >= 540) {
            selectedIndex = 1;
        }

        var periods = [
            "new school day",
            "school assembly",
            "first period",
            "second period",
        ];

        document.querySelector('.current-period').innerHTML = periods[selectedIndex];

        setTimeout(schoolPeriod, 1000);
    }

    schoolPeriod();

Upvotes: 1

Related Questions