I am making a website for a school project. My idea is to have a table with multiple countdowns counting down (yes) to different cricket tournaments. I got the multiple countdowns in table code from another thread but it won't display for me when I load my site.
Here is my HTML:
<!DOCTYPE html>
<Html>
<head>
<title>CCC</title>
<link rel="stylesheet" href="cccstyle.css">
<link href="https://fonts.googleapis.com/css2?family=Mr+De+Haviland&display=swap" rel="stylesheet">
</head>
<body>
<!--top of the page title-->
<div id="title">
<h1>The CTC</h1>
<h3>Cricket Tournament Countdown</h3>
</div id="title">
<noscript id="countdown">Sorry, you need JavaScript enabled to view the count
downs</noscript>
<script src="table.js"></script>
</body>
</html>
Javascript:
// data is an array of objects, each representing one of your categories.
// Each category has a .title to store its title and a .counters that
// stores an object for each counter in that category.
var data = [
{
title: 'LEAGUES',
counters: [
// Each counter has a .title and a .date that is parsed by new Date()
{
title: 'IPL',
date: 'September 19, 2020'
},
{
title: 'BBL',
date: 'December 3, 2020'
}
{
title: 'CPL',
date: 'December 3, 2020'
}
]
},
{
title: 'ICC TOURNAMENTS',
counters: [
{
title: "Women's Cricket World Cup",
date: 'February 6, 2021'
}
]
},
{
];
// this reduce generates the table
let table = data.reduce((acc, category, categoryIndex) => {
return acc + `<tr><td colspan="6" class="category">${category.title}</td></tr>` +
category.counters.reduce((acc, counter, index) => {
return acc + `<tr id="counter-${categoryIndex}-${index}">
<td>${counter.title}</td>
<td>${counter.date}</td>
<td class="days"></td>
<td class="hours"></td>
<td class="minutes"></td>
<td class="seconds"></td>
</tr>`;
}, '');
}, '<table class="countdown"><tr><th>Event</th><th>Date</th><th>Days</th><th>Hours</th><th>Minutes</th><th>Seconds</th></tr>');
table += '</table>';
// insert the table after the noscript tag
document.getElementById('countdown').insertAdjacentHTML('afterend', table);
// generate a flat list of counters
let counters = data.reduce((acc, category, categoryIndex) => {
return acc.concat(category.counters.reduce((counterAcc, counter, index) => {
return counterAcc.concat([{
// counters will be an array of the objects we generate here.
// node contains a reference to the tr element for this counter
node: document.getElementById(`counter-${categoryIndex}-${index}`),
// date is the date for this counter parsed by Date and then converted
// into a timestamp
date: (new Date(counter.date)).getTime()
}]);
}, []));
}, []);
const msSecond = 1000,
msMinute = msSecond * 60,
msHour = msMinute * 60,
msDay = msHour * 24;
let intervalId;
function updateCounters () {
counters.forEach((counter, counterIndex) => {
let remaining = counter.date - Date.now(),
node = counter.node;
let setText = (selector, text) => node.querySelector(selector).textContent = text;
if (remaining > 0) {
setText('.days', Math.floor(remaining / msDay));
remaining %= msDay;
setText('.hours', Math.floor(remaining / msHour));
remaining %= msHour;
setText('.minutes', Math.floor(remaining / msMinute));
remaining %= msMinute;
setText('.seconds', Math.floor(remaining / msSecond));
} else {
// make sure we don't accidentally display negative numbers if a timer
// firing late returns a past timestamp (or the data contains a past date)
setText('.days', 0);
setText('.hours', 0);
setText('.minutes', 0);
setText('.seconds', 0);
// This countdown has reached 0 seconds, stop updating it.
counters.splice(counterIndex, 1);
// no more counters? Stop the timer
if (counters.length === 0) {
clearInterval(intervalId);
}
}
});
}
// display counters right away without waiting a second
updateCounters();
intervalId = setInterval(updateCounters, 1000);
CSS:
body
{
background-color: #00002e;
}
div.title
{
text-align: center;
}
script {
display: inline;
}
table {
border-collapse: collapse;
}
tr:nth-child(even) {
background-color: #edf;
}
.category {
font-weight: bold;
}
td, th {
padding: .5em;
}
.days, .hours, .minutes, .seconds {
text-align: right;
}
Help is very much appreciated.
Aucun commentaire:
Enregistrer un commentaire