stuff/index.html

<!DOCTYPE html>
<html>
<head>
<title>WlodekM's website</title>
<link rel="stylesheet" href="mycss.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Rubik:wght@400;500&display=swap" rel="stylesheet">
<div class="topnav">
   <a href="" class="logo">&lt;WlodekM&gt;</a>
   <div class="spacer" align="right"><!--align="" is so old vscode thinks it doesn't exist-->
   <!-- <a href="/98/" class="link">/98/</a> -->
   <a><!--href="https://scratch.mit.edu/users/WlodekM"> --><img src="https://wlodekm.github.io/icons/MWR-ICO.svg"></a>
   <a href="https://scratch.mit.edu/users/WlodekM"><img src="https://wlodekm.github.io/icons/SC-ICO.svg"></a>
   <a href="https://github.com/WlodekM"><img src="https://wlodekm.github.io/icons/GH-ICO.svg"></a>
   <a href="https://discordapp.com/users/750565290009559112"><img src="https://wlodekm.github.io/icons/DS-ICO.svg"></a>
   <a href="https://t.me/WlodekM"><img src="https://wlodekm.github.io/icons/TG-ICO.svg"></a>
 </div></div>
</head>
<!-- <div id="blob"></div>
<div id="blur"></div> -->
<body>
   <div class="content" id="full" style="height: 77.75vh">
        <h1>Other links</h1>
            <p>Other links</p>
        </div>

</body>
</html>
<script>const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnop";

   let interval = null;
   
   document.querySelector("coollink").onmouseover = event => {  
   let iteration = 0;
   
   clearInterval(interval);
   
   interval = setInterval(() => {
   event.target.innerText = event.target.innerText
   .split("")
   .map((letter, index) => {
   if(index < iteration) {
     return event.target.dataset.value[index];
   }
   
   return letters[Math.floor(Math.random() * 26)]
   })
   .join("");
   
   if(iteration >= event.target.dataset.value.length){ 
   clearInterval(interval);
   }
   
   iteration += 1 / 3;
   }, 30);
   }</script>