0

I'm currently working on a project that will display the amount of time left in a certain time period based on the users current time. Here is the code.

var periods = [
  [ '07:45' , '08:34' ],
  [ '08:38' , '09:30' ],
  [ '09:34' , '10:23' ],
  [ '10:27' , '11:16' ],
  [ '11:20' , '12:38' ],
  [ '12:42' , '15:55' ],
  [ '07:00' , ]

];


updateTimePeriods();
setInterval(updateTimePeriods, 1000); // Update every second

function updateTimePeriods() {
var listEl = document.getElementById('periods');
  var now = new Date();
  var count = periods.length;
 listEl.innerHTML='';
  
  for (var i = 0; i < count; i++) {

   if(formatTimeRemaining(timeLeft(now, periods[i][1])).charAt(0)!='–') {
   child=listEl.appendChild(document.createElement('LI'));
    child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
        + ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
       + ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
       
  } 
  
  }
 }
 
 
function duration(start, end) {
  var startTime = parseTime(start);
  var endTime = parseTime(end);
  return endTime.getTime() - startTime.getTime();
}
function timeLeft(now, end) {
  var nowTime = parseTime(formatTime(now));
  var endTime = parseTime(end);
  return endTime.getTime() - nowTime.getTime();
}
function parseTime(timeStr) {
  var tokens = timeStr.split(':');
  return new Date(1970, 0, 1, parseInt(tokens[0], 10), parseInt(tokens[1], 10));
}
function formatUTCTime(time) {
  var date = new Date(time);
  return padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes());
}
function formatTime(time) {
  var date = new Date(time);
  return padZero(date.getHours()) + ':' + padZero(date.getMinutes());
}
function formatTimeRemaining(time) {
  var sign = '+';
  if (time < 0) { time *= -1; sign = '–'; }
  var date = new Date(time);
  return sign + padZero(date.getUTCHours()) + ':' + padZero(date.getUTCMinutes())  + ':' + padZero(date.getUTCSeconds());
}
function padZero(n) { return ('00' + n).substr(-2); }
body {
  background-color: #A00000;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.outer-box {
  border: 3px solid black;
  height: true;
  width: 75%;
  padding: 10px;
  margin: 10px auto 10px auto;
  border-radius: 10px;
  background-color: white;
  text-align:center;
}
#periods {
  border-radius: 5px;
  margin: 20px auto 20px auto;
  padding: 5px;
  font-weight: bold; 
  text-align: center;
  list-style-type: none;
}
<div class="outer-box">
  <ul id="periods"></ul>
</div>

My goal is only display to the user the amount of time left in the current time period instead of all of them. And if its in between a time period it shows the amount of time until the next one occurs. The issue is once all the times occur I need to tell him much time until the start of the next time which occurs on a different day. To elaborate, currently if all the time periods occur it displays a blank space because there is nothing to display and all the times are negative. I want to display the amount of time until the next days starting time.

1
  • All you need is someone will do it for you?
    – KAngel7
    Commented Dec 26, 2016 at 2:48

1 Answer 1

0

You should break the for loop as you create the new LI element. This way it should only show the actual time period.

for (var i = 0; i < count; i++) {
 if(formatTimeRemaining(timeLeft(now, periods[i][1])).charAt(0)!='–') {
  child=listEl.appendChild(document.createElement('LI'));
  child.innerHTML = periods[i][0] + ' — ' + periods[i][1]
     + ' => Duration: ' + formatUTCTime(duration(periods[i][0], periods[i][1]))
     + ', Remaining: ' + formatTimeRemaining(timeLeft(now, periods[i][1]));
  break;  
 }
} 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.