Multiple countdown timers on a cell table

Question

I'm trying to make a 2 column table cell, with countdown timers on the right side, and titles on the left column, i can only figure out how to do one countdown timer for one cell but i need to have multiple countdown timers for all the cells.

So i can just type a Date in the right side and javascript makes it count down until that date is reached. the only thing i managed to do is a single countdown timer and have an ID it refers too, but i do not know how to make it on several more.

The dates will be different on each column.

heres the javascript code

// Set the date we're counting down to
var countDownDate = new Date("Dec 10, 2020 21:41:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "DROPPED";
  }
}, 1000);


and heres the html code


 
 

 

 

     
         
            TEXT 
            COUNTDOWN 
            
         
         
            TBA
             
            
         
         
            TBA
            DATE 
            
         
         
            TBA
             DATE  
            
         
         
            TBA
            DATE 
            
         
         
            TBA
            DATE 
            
         
         
            TBA
             DATE 
            
         
        
     
 



Kind regards.

user_10968134 · Answer

This example information is taken from Array and directed to items with demo ID and serial number.

Enter the date, link and title in the Array. And the timers themselves will be added to the table.

In the JS I added a check that adds a class if the remaining days are 0 .endsoon A class of graduates is also added .dropped In css I set values to make basic stylization of the table so that the fields do not move during the countdown

Edit: While the table is being created, the function checkDate() checks the dates. If the date has passed, it is not added to the table.

After the time expires, the inscription "DROPPED" will remain for 5 minutes after which this row of the table will be removed. The time can be changed from this line in the code var remAft = 5;

var arr = [
    // Date...................Link..............Title
    ['Dec 10, 2021 23:26:25', 'www.google.com', 'TBA'],
    ['Dec 8, 2021 21:41:25', 'www.google.com', 'TBA'],
    ['Dec 10, 2021 21:41:25', 'www.google.com', 'TBA'],
    ['Dec 11, 2021 21:41:25', 'www.google.com', 'TBA'],
    ['Jan 15, 2022 21:41:25', 'www.google.com', 'TBA'],
    ['Dec 20, 2022 21:41:25', 'www.google.com', 'TBA']
];

// Remove after 5min
var remAft = 5;

// Get element with ID "timer"
var wrap = document.querySelector('#timer tbody');
// For loop Array "arr"
for (var i = 0; i < arr.length; i++) {
    if (checkDate(arr[i][0])) {
        // Adds the elements of the table with filled in information
        wrap.innerHTML += '' + arr[i][2] + ''
        // Invokes the function by passing as arguments Date and ID
        new myTimers(arr[i][0], 'demo' + (i + 1));
    }
}

function checkDate(tim) {
    var countDownDate = new Date(tim).getTime();
    var now = new Date().getTime();
    var distance = countDownDate - now;
    if (distance > -60 * 1000 * remAft) { return true; } else { return false; }
}

function myTimers(tim, ele) {
    // Set the date we're counting down to
    var countDownDate = new Date(tim).getTime();

    // Update the count down every 1 second
    var x = setInterval(function () {

        // Get today's date and time
        var now = new Date().getTime();

        // Find the distance between now and the count down date
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        var seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result in the element with id="demo"
        document.getElementById(ele).innerHTML = days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ";

        // If the count down is finished, write some text
        if (distance < 0) {
            if (distance > -60 * 1000 * remAft) {
                document.getElementById(ele).innerHTML = "DROPPED";
                document.getElementById(ele).classList.add('dropped');
            } else {
                clearInterval(x);
                var chekEl = document.getElementById(ele);
                if (chekEl) {
                    chekEl.parentElement.remove();
                }
            }
        }

        // If days is 0 add class 'endsoon'
        if (days === 0) {
            document.getElementById(ele).classList.add('endsoon');
        }

    }, 1000);

}

#timer {
    width: 500px;
    text-align: left;
}

#timer tr th,
#timer tr td {
    width: 50%;
}

#timer tr {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

#timer .dropped {
    color: red;
}

#timer .endsoon {
    color: orangered;
}


    
        
            TITLE
            COUNTDOWN

user_219661 · Answer

You can do this by giving each field a class, and finding all of those fields using querySelectorAll then applying an event listener to listen for a change event.

Beyond that he code is almost identical to what you had (other than to set the value of the field use .value not .innerHTML).

Disclaimer: No validation that what you type in is a valid date.

document.querySelectorAll(".countdown").forEach(cd => {
  setupCountdown(cd)
})

function setupCountdown(field){
  field.addEventListener("change",function(){
    field.disabled = true
    var countDownDate = new Date(field.value).getTime();
    console.log(countDownDate)
    var x = setInterval(function() {
      // Get today's date and time
      var now = new Date().getTime();

      // Find the distance between now and the count down date
      var distance = countDownDate - now;

      // Time calculations for days, hours, minutes and seconds
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      // Display the result 
      field.value = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

      // If the count down is finished, write some text
      if (distance < 0) {
        clearInterval(x);
        field.value = "DROPPED";
      }
    }, 1000);
  })
}

Multiple countdown timers on a cell table

2 Answers