Hi i want to highlight the row that's next based on current time so if "a" is at 7 and it is now 7:10 i want "b" to be highlighted.
And if "f" is at 1800 and it is 18:10 i want to highlight nothing till 00:00 then i want to highlight a again.
Thank you so much.
<html>
<div id='timeTable'></div>
</html>
<script>
const days = ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'];
const months = ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'];
let month = new Date().getMonth() + 1;
let d = new Date();
let day = d.getDay();
let date = new Date().getDate();
fetch('https://izaachen.de/api/times/2021/Belgien/Antwerpen%20(Fl%C3%A4mische%20Region).txt/json')
.then(data => data.json())
.then(r => fillData(r));
let prayerTimes = [];
let prayerNames = ['a', 'b', 'c', 'd', 'e', 'f'];
let table = document.createElement('table');
let tableBody = document.createElement('tbody');
function fillData(data) {
let today = data.times[month][date];
let i = 0;
for (let [key, value] of Object.entries(today)) {
prayerTimes[i] = value.t;
i++
}
fillView();
}
function fillView() {
for (let i = 0; i < 6; i++) {
let tr = document.createElement('tr');
let name = document.createElement('td');
let time = document.createElement('td');
name.innerHTML = prayerNames[i];
time.innerHTML = prayerTimes[i];
tr.appendChild(name);
tr.appendChild(time);
tableBody.appendChild(tr);
table.appendChild(tableBody);
}
let element = document.getElementById('timeTable').appendChild(table);
}
</script>
I believe the example below does what you need, it runs a function every 3 seconds to check whether the cells with the class .time are in the past or not.
Make sure you change the setInterval timer to something more sensible, it sounds like you wouldn't need to run it every seconds but perhaps every minute would provide more than enough sensitivity?
The highlighting is then all done using CSS, namely the classes .past and .future. The next session is highlighted using the + selector, which finds the first incidence of a class that immediately follows the preceding class, i.e. .past + .future applies styles to the first element with a class .future that is a sibling and immediately following an element with class .past.
Styles are applied to the parent tr using the jquery selector .closest("tr").
// Create table dynamically
setupTable();
// Set the function to run every 3 seconds
checkTime();
v = setInterval(checkTime, 3000);
// Check time function
function checkTime() {
// Get current time
const d = new Date();
h = d.getHours();
m = d.getMinutes();
// Print the latest time
$("#time-now").text(twoDigits(h)+":"+twoDigits(m)+"." + twoDigits(d.getSeconds()));
// Cycle through each time cell
$(".time").each(function() {
// Get the time from the cell
cellTimes = $(this).text().split(":");
cellH = parseInt(cellTimes[0]);
cellM = parseInt(cellTimes[1]);
// Check if it is in the past
if (cellH < h || (cellH == h && cellM < m)) {
// Add past classes, remove future classes
$(this).closest("tr").addClass("past").removeClass("future");
} else {
// Add future class
$(this).closest("tr").addClass("future");
}
});
}
// Standardise times
function twoDigits(inNumber) {
return inNumber.toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false
})
}
// Setup table
function setupTable() {
d = new Date();
let hour = d.getHours();
min = d.getMinutes() - 2;
while (min < d.getMinutes() + 2) {
$("#times").append("<tr><td class='time'>" + twoDigits(hour) + ":" + twoDigits(min) + "</td></tr>");
min = min + 1;
}
}.past {
color: red;
}
.past+.future {
background: blue;
color: white;
}
.future {
color: green;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="time-now"></div>
<table id="times">
<tr>
<th>Time</th>
</tr>
</table>