Creating a custom jQuery countdown table.

Question

Hi guys, before you reply or downvote - I'm not asking for somone to code this for me, I just want a bit of advice and guidance.

Basically, I started learning jquery last week and for my first project I want to make a countdown table. e.g.

=====================
Time|Desc
---------------------
1.03|Item 1
---------------------
0.50|Item 2
=====================

Once the user starts the countdown the first item should be retrieved and used as a countdown, ie 1.03,1.02,1.01,1,0.59 in seconds (and should be updated live). Once that reaches zero, the row should be removed and the next item should be started as a countdown.

If anyone has had any eperience building this or a countdown similar to this I would apriciate it. I've seen a few plugins but it seems overkill for my needs. All times will be less than an hour.

A few thinks im struggling to understand is how I could initialize the second countdown as obviously the first row will take a few seconds to animate or remove.

Any feedback, links, reading is apricaited I'm currently learning using a video course and will be finished in the next few days, but this is something outside of the class that I'm intrested in.

Thanks, Jamie.

Answer 1

Preview and Source

var position = 0;
var countdowns = $(".time");

var interval = setInterval( function()
{
  if (countdowns [position].innerHTML == 0)
  {
    $(countdowns [position]).parent().hide();
    position ++;
  }
  if (position >= countdowns.length)
  {
    clearInterval(interval);
  }
  else
  {
    countdowns[position].innerHTML --;
  }

},1000);

Answer 2

I have some time ago helped out making a jQuery timer. The functionality is as a stop watch instead of doing a countdown (I'm using it for a timetracker web app). You might find that helpful, since you possible only need to change a few things to make it into what you need. I have it on Github which is a bit flaky these days with the recent server move. You can take a look at this and just use it as inspiration if you want to implement this yourself from the ground up.