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 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 += '<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 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;
}

<table id="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)
})

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

<table style="width:600px"> 
    <tr> 
        <th>TEXT</th> 
        <th>COUNTDOWN</th> 
    </tr> 
    <tr> 
        <td><a href="www.google.com">TBA</a></td>
        <td><input class="countdown"></td> 
    </tr>     
    <tr> 
        <td><a href="www.google.com">TBA</a></td>
        <td><input class="countdown"></td> 
    </tr>     
</table>