JSFiddle - React, Tailwind, and code Playground

by Manpreet Singh

HTML

<div class="wheel" id="clock" numElements="5" >
      <div  id="0"  index = "-2" class="card position-1 ">1</div>
      <div id="1" index = "-1" class="card position-2">2</div>
      <div id="2"index = "0" class="card position-3">3</div>
      <div id="3" index = "1" class="card position-4">4</div>
      <div id="4" index = "2" class="card position-5" >5</div>
</div>

CSS

.position-1
{
  top :0px;
  font-size: 20px;
}
.position-2
{
  top :10px;
  font-size: 28px;
}
.position-3
{
  top :20px;
  font-size: 36px;
}
.position-4
{
  top 30px;
  font-size: 28px;
}
.position-5
{
  top :40px;
  font-size: 20px;
}
.container
{
    width:100px;
    height: 100px;
    overflow: hidden;
}
.card
{
    height: 50px;
    width: 100px;
    box-sizing: border-box;
    text-align : center;
    transition : all 1s
}

.moveTop
{
    transform: translateY(-100px);
    transition-duration: 3s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

JavaScript

document.getElementById("clock").addEventListener("click",wheelHandler);

function moveUp(clock, numElements, middlePoint, index) {
   
   var count = middlePoint - index;
   var i = numElements - count;
   
   var idCount = 0;
   
   var newClock = document.createElement("div");
    
   for ( ; i < numElements; i++) 
   { 
    	var node = document.getElementById(i);
      var adpNode = document.adoptNode(node);
           
      adpNode.id=idCount++;
           
      newClock.appendChild(adpNode);
		} 
    
    for ( i=0; i < numElements-count; i++) 
    {
        var node = document.getElementById(i);
        var adpNode = document.adoptNode(node);
        adpNode.id=idCount++;
        newClock.appendChild(adpNode);
    }
    
   newClock.id="clock";
   
   return newClock;

}

function moveDown(clock, numElements, middlePoint, index) {
   var count = index - middlePoint;
   
   var idCount = 0;
   
   var newClock = document.createElement("div");
        
   for ( i=count; i < numElements; i++) 
    {
        var node = document.getElementById(i);
        var adpNode = document.adoptNode(node);
        adpNode.id=idCount++;
        newClock.appendChild(adpNode);
    }
   
    for (  var i = 0;  i < count; i++) 
    { 
    	var node = document.getElementById(i);
         // alert(node.innerHTML);
        //  node.parentNode.removeChild(node);
       var adpNode = document.adoptNode(node);
           
       adpNode.id=idCount++;
           
       newClock.appendChild(adpNode);
		} 
   

     
   newClock.id="clock";
   
   return newClock;
}

function wheelHandler(e) {
	// e.target is our targetted element.
   var index = e.target.getAttribute('id');
	 var middlePoint  =4;
   var clock = document.getElementById("clock");
   var numElements = clock.getAttribute('numElements');
   
	 var newClock;
   if (index < middlePoint)
   {
	   newClock = moveUp(clock, numElements, middlePoint, index) ;
   }

   else if (index > middlePoint)
   {
     newClock =...