Web Page can be seen here.
https://ruoningtrail.neocities.org
If will be really grateful, if you could help me go through it.
type or paste code here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#input {position: sticky; top:0 ;width:16%; background-color: transparent;border:solid ;}
#bnt {position: sticky; top: 0;background-color: transparent; text-align: center;font-family:Futura;font-size: 1vw; width: 8%;}
#bnt:hover{background-color: rgb(0, 255, 255);}
#tab1 {border:transparent ;border-collapse: collapse; margin: 0 auto ; width: 100%;text-align: center;font-family:Futura;font-size: 1vw }
th {height: 7vw ;text-decoration-line: underline; }
tr:hover{background-color: rgb(0, 255, 255);}
td { height: 15vw;}
#bnt1 {border:transparent ;width: 50%; height: 15vw; margin: 0 auto; } /*button*/
#link {text-align: center; font-family: Futura; font-size: 3vw ; text-decoration:none; color: black;}
.flag {display: none; max-width: auto; max-height: 13vw; margin-left: auto;
margin-right: auto/* border-radius: 10px; border: solid white;*/ }
</style>
<script>
window.onload=function (){
var oBnt1=document.getElementById("bnt");
var oLink=document.getElementById("link")
var oTxt1=document.getElementById("input");
var oBnt=document.getElementById("bnt1");
var oTab=document.getElementById('tab1');
var aTxt=document.getElementsByClassName('txt1');
var aImg=document.getElementsByClassName('flag');
oBnt.onmouseover=function (){//button
oBnt.style.background="rgb(0, 255, 255)"
oBnt.value="click"
}
oBnt.onmouseout=function (){
oBnt.style.background="none"
oBnt.value="More Countries"
}
oLink.onmouseover=function (){//button text
oLink.innerHTML="click"
oLink.style.textDecorationLine="underline"
}
oLink.onmouseout=function (){
oLink.innerHTML="More Countries"
oLink.style.textDecorationLine="none"
}
oBnt1.onclick=function (){//search
for(let i=0;i<oTab.tBodies[0].rows.length;i++){
var sTab=oTab.tBodies[0].rows[i].innerHTML
if(sTab.search(oTxt1.value)!=-1){
alert(oTab.tBodies[0].rows[i].cells[0].innerHTML)
}
}
}
for (let i=0; i<aImg.length; i++){//flag
let timer=null
aImg[i].onmouseover=aTxt[i].onmouseover=function() {
clearTimeout(timer)
aImg[i].style.display="block"
aTxt[i].style.display="none"
}
aImg[i].onmouseout=aTxt[i].onmouseout=function() {
timer=setTimeout(function (){
aImg[i].style.display="none"
aTxt[i].style.display="block"},300)}
}
}
</script>
</head>
<body>
<input id="input" type="text" title="My speed">
<button id="bnt" title="Input you seppd">search</button>
<div overflow-x:auto><table id="tab1" border="1" item-width="300pxs">
<thead>
<tr>
<th>Country</th>
<th>Max Speed</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div> <img class="flag" src="au.svg"></div>
<span class="txt1">Australia</span>
</td>
<td style="font-size: 3vw">110</td>
</tr>
<tr>
<td>
<div> <img class="flag" src="at.svg"></div>
<span class="txt1">Austria</span>
</td>
<td style="font-size: 3vw">130</td>
</tr>
<tr>
<td>
<div> <img class="flag" src="be.svg"></div>
<span class="txt1">belgium</span>
</td>
<td style="font-size: 3vw">120</td>
</tr>
<td>Brazil</td>
<td style="font-size: 3vw">120</td>
</tr>
<tr>
<td>Bulgaria</td>
<td style="font-size: 3vw">140</td>
</tr>
<tr>
<td>Canada</td>
<td style="font-size: 3vw">120</td>
</tr>
<tr>
<td>China</td>
<td style="font-size: 3vw">120</td>
</tr>
<td></td>
<td style="font-size: 3vw"></td>
</tr>
</tr>
<td> </td>
<td style="font-size: 3vw"> </td>
</tr>
</tr>
<td> </td>
<td style="font-size: 3vw"> </td>
</tr>
</tr>
<td> </td>
<td style="font-size: 3vw"> </td>
</tr>
</tr>
<td> </td>
<td style="font-size: 3vw"> </td>
</tr>
</tr>
<td> </td>
<td style="font-size: 3vw"> </td>
</tr>
</tbody>
</table></div>
<div>
<button id="bnt1" title="wikipedia"><a id="link" href="https://en.wikipedia.org/wiki/Speed_limits_by_country#Countries">More Countries</a></button>
</div>
</body>
</html>