Question

I’m not asking for someone 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 experience building this or a countdown similar to this I would appreciate it. I’ve seen a few plugins but it seems overkill for my needs. All times will be less than an hour.

A few things; I’m 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 appreciated 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 interested in.

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);