Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Paul Neumyer
Paul Neumyer
15,301 Points

Trying to turn a single time countdown clock into a multiple times countdown clock using an array.

I am trying to convert a single time countdown clock into a multiple times countdown clock using an array, and I need a little help.

The idea behind this is that once the first time hits zero, it would show a "WATCH" button for an hour, before moving to the next time in the array. Most of the work has been down on a previous project. Here is the code:

http://codepen.io/AwakenStudio/pen/PzLvxb

5 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

If you move the button outside of clockdiv (but still within clock-wrapper), it's simple enough to hide the clock and expose the button when the timer reaches 0, and also start a timer for an hour:

    if (t.total <= 0) {
      clearInterval(timeinterval);
      clock.style.display = "none";      // hide the clock
      button.style.display = "block";    // show the button
      setTimeout(nextClock(), 3600000);  // start another clock in an hour
    }

At the end of the hour, nextClock would pull the next endtime from the array and call initializeClock with it. But two additional concerns should be accommodated:

Since you don't know when the page will be opened, the first task will be to step through the array and discard times that have already passed.

Then, if the last time discarded is less than an hour ago (from "now"), the watch live button should be displayed for the remainder of that hour before the next clock is started. Otherwise, the next clock is started now.

It's a cute project, consider posting again with the revised version.

Paul Neumyer
Paul Neumyer
15,301 Points

Can you show me how to walk through an array of times?

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Do you recall the JavaScript Loops, Arrays and Objects course you took last year? It can be done simply with a for loop.

But you might not even need an array. Are you just going to reset the timer for the same time next week? If so, just recalculate the end time and restart the clock.

Paul Neumyer
Paul Neumyer
15,301 Points
Paul Neumyer
Paul Neumyer
15,301 Points

I do remember a little bit. I guess the real problem is how it would be laid out logically. I started an array and it is giving me negative numbers. I thought I would also include the date.js library to assist with dates, however whenever I include it in the DOM all the numbers are zero. Not sure if this is because the date.js Date object is replaced with the browser Date object. Here is what I have so far. Any assistance would be greatly appreciated. I am not too experienced with working with dates. thanks.

http://codepen.io/AwakenStudio/pen/PzLvxb/

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

I saw this in setServiceTimes:

  for (var service in serviceTimes) {
    var serviceTime = getServiceTimes(service, 9);

Since there's only one array item, service will be 0. Did you mean to write "var service of serviceTimes"? Otherwise, you'd probably want to pass "serviceTimes[service]" as the first argument to getServiceTimes.

I think date.js is mainly for when dates are being entered in the UI.

Paul Neumyer
Paul Neumyer
15,301 Points
Paul Neumyer
Paul Neumyer
15,301 Points

I got a little farther, and I got Date.js to work, however I am still getting zero's on the clock. Not sure why. Here is the modified version, and the original clock. Here is the documentation on Date.js if you are a little confused by the methods being called: http://www.datejs.com/.

Modified: http://codepen.io/AwakenStudio/pen/PzLvxb

Original: http://codepen.io/AwakenStudio/pen/rLKOyk

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

You may be confusing yourself with all the refactoring.

The "original" version seems to work, and displays a time counting down.

The "modified" version shows a 0 clock, and has at least two issues:

  • The getTimeRemaining function is passing non-string arguments to Date.parse, which then returns null.
  • The initializeClock function has an internal updateClock function which references an undefined variable "now".

This is getting a bit far afield from the original question, it may be a good time to select a "best answer" to indicate the original question is closed.