B
Obviously I am beginner especially with javascript.
Anyway I enclose the code I made. In the table there are three columns, the first reserved for the links to visit, the second reserved for the time that must pass before the next visit, the third reserved for the countdown. Then by clicking on the link in col.1 you should be redirected to the corresponding web page (in a new tab) while, at the same time, a countdown starts which takes the time indicated in col.2 and shows it in col.3 (expressed in hh : mm: ss); when it reaches 0, the word "ready" should appear, but it is also okay that it remains at 0.
I think my script needs some help with adding event listeners to each link, and getting the countdown to start and show up in column 3.
Thanks in advance to those who will help me.
Anyway I enclose the code I made. In the table there are three columns, the first reserved for the links to visit, the second reserved for the time that must pass before the next visit, the third reserved for the countdown. Then by clicking on the link in col.1 you should be redirected to the corresponding web page (in a new tab) while, at the same time, a countdown starts which takes the time indicated in col.2 and shows it in col.3 (expressed in hh : mm: ss); when it reaches 0, the word "ready" should appear, but it is also okay that it remains at 0.
I think my script needs some help with adding event listeners to each link, and getting the countdown to start and show up in column 3.
Thanks in advance to those who will help me.
HTML:
<html>
<head>
<style type="text/css">
body {
background-color:#7B68EE;
font-family: "Arial Rounded MT","Liberation Serif", "School Times","Times New Roman";
color:black;
font-weight:200;
font-size:110%
}
.centered table {
margin: 0 auto;
}
table {
width: 750px;
border: 4px solid #000000;
border-collapse: collapse
}
td {
width: 250px;
height: 40px;
border:1px solid black;
padding: .1em
}
td:nth-child(2) {
text-align:center
}
td:nth-child(3) {
text-align:center
}
a:link{
color:black;
text-decoration:none;
font-weight:bolder
}
a:visited {
color: black;
text-decoration:none;
}
a:hover {
color: red;
text-decoration:blink
}
a:active{
color: green;
text-decoration:underline
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<table>
<tbody>
<tr>
<th>site
</th>
<th>time
</th>
<th>countdown
</th>
</tr>
<tr>
<td>
<a href="http://www.google.com" id="url" onclick="startTimer()" target="_blank">
Google
</a>
</td>
<td class="time">01:30
</td>
<td class="countdown">
</td>
</tr>
<tr>
<td>
<a href="http://www.apple.com" id="url" onclick="startTimer()" target="_blank">
Apple
</a>
</td>
<td class="time">00:30
</td>
<td class="countdown">
</td>
</tr>
<tr>
<td>
<a href="http://www.microsoft.com" id="url" onclick="startTimer()" target="_blank">
Microsoft
</a>
</td>
<td class="time">02:15
</td>
<td class="countdown">
</td>
</tr>
</tbody>
</table>
</body>
</html>
JavaScript:
document.querySelectorAll('table td a').forEach(link => {
link.addEventListener('click', event => {
event.preventDefault();
const row = link.parentNode.parentNode;
const url = link.href;
const time = row.querySelector('.time');
const countdown = row.querySelector('.countdown');
console.log(url, time.classList, countdown.classList);
})
});
startTimer = () => {
window.open(url.href, '_blank');
let tiks = setInterval(countdown, 1000);
link.style.color = 'red';
count.style.color = 'red';
function countdown() {
if (secs == -1) {
clearInterval(tiks)
link.style.color = 'green';
time.style.color = 'green';
count.style.color = 'green';
} else {
count.innerHTML = secs; secs–;
}
}
}
