JSFiddle - React, Tailwind, and code Playground

by midesowunmi

HTML

<div id="ship">Sailing</div>

CSS

#ship {
    width: 150px;
    height: 70px;
    background-color: #fdd;
    color: #fff;
    text-align: center;
    font-size: 18px;
    position: relative;
    
}

JavaScript

function animateShip(elemId){
         var elem = document.getElementById(elemId);
         var tick = 0;
         
         var timer = setInterval(function(){
           if(tick < 120) {
              elem.style.left = elem.style.top = tick + "px";
              tick++;
            } 
           else {
               clearInterval(timer);
               if(tick == 120) {
               alert("Tick was accessed via a closure");
               }
               if(elem && timer) {
               alert("Element elem and timer also accessed via a closure");
              }
            
           }
         }, 10); 
     }
animateShip("ship");