Multiple Countdown Timers On A Cell Table

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 b

Solution 1:

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 5minvar 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 += '<tr><td><a href="' + arr[i][1] + '">' + arr[i][2] + '</a></td><td id="' + 'demo' + (i + 1) + '"></td></tr>'// Invokes the function by passing as arguments Date and IDnewmyTimers(arr[i][0], 'demo' + (i + 1));
    }
}

functioncheckDate(tim) {
    var countDownDate = newDate(tim).getTime();
    var now = newDate().getTime();
    var distance = countDownDate - now;
    if (distance > -60 * 1000 * remAft) { returntrue; } else { returnfalse; }
}

functionmyTimers(tim, ele) {
    // Set the date we're counting down tovar countDownDate = newDate(tim).getTime();

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

        // Get today's date and timevar now = newDate().getTime();

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

        // Time calculations for days, hours, minutes and secondsvar 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 textif (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;
}

#timertrth,
#timertrtd {
    width: 50%;
}

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

#timer.dropped {
    color: red;
}

#timer.endsoon {
    color: orangered;
}

<tableid="timer"><tbody><tr><th>TITLE</th><th>COUNTDOWN</th></tr></tbody></table>

Solution 2:

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

functionsetupCountdown(field){
  field.addEventListener("change",function(){
    field.disabled = truevar countDownDate = newDate(field.value).getTime();
    console.log(countDownDate)
    var x = setInterval(function() {
      // Get today's date and timevar now = newDate().getTime();

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

      // Time calculations for days, hours, minutes and secondsvar 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 textif (distance < 0) {
        clearInterval(x);
        field.value = "DROPPED";
      }
    }, 1000);
  })
}

<tablestyle="width:600px"><tr><th>TEXT</th><th>COUNTDOWN</th></tr><tr><td><ahref="www.google.com">TBA</a></td><td><inputclass="countdown"></td></tr><tr><td><ahref="www.google.com">TBA</a></td><td><inputclass="countdown"></td></tr></table>