JSFiddle - React, Tailwind, and code Playground

by Manpreet Singh

HTML

<div  id="clock" numElements="6" >
</div>

CSS

.container-item-1
{
  top : -24px;
  font-size: 8px;
  position: absolute;
  transition : top .15s
}

.container-item-2
{
  top : 0px;
  font-size: 16px;
  position: absolute;
  transition : top .15s
}

.container-item-3
{
  top : 24px;
  font-size: 24px;
  position: absolute;
  transition : top .15s
}
.container-item-4
{
  top : 58px;
  font-size: 32px;
  position: absolute;
  transition : top .15s
}
.container-item-5
{
  top : 98px;
  position: absolute;
  font-size: 24px;
  transition : top .15s
}
.container-item-6
{
  font-size: 16px;
  top :130px;
  position: absolute;
  transition : top .15s
}
.container-item-7
{
  font-size: 8px;
  top :146px;
  position: absolute;
  transition : top .15s
}
.container
{
    overflow: hidden;
    height: 146px;
    position: relative;
    outline : 0;
}

.card
{
    width: 168px;
    text-align : center;
    height : 20px;
}

JavaScript

function ScrollComponent()
{

}

ScrollComponent.prototype.createElementWithAttributes = function(elementName, attributesMap)
{
  var newElement = document.createElement(elementName);
 	for(var attribute in attributesMap)
  {
    var value = attributesMap[attribute];

    if (value != undefined)
    {
    		newElement.setAttribute(attribute,value);
    }
  }
  return newElement;
}

ScrollComponent.prototype.Init = function( listOfValues)
{
	this.numberOfElements = listOfValues.length
  this.listOfValues = listOfValues;
  this.middlePoint = parseInt(this.numberOfElements/2);
  var attrubutes = {"id" : "scrollComponent", "class" : "container"}
  this.domElement = this.createElementWithAttributes("div",attrubutes);
  this._displayWindowSize = 7;
  this._registerEventHandlers();
	this.startIndex = 1;
  if ( listOfValues.length <  this._displayWindowSize)
  {
  	this.startIndex = Math.ceil((this._displayWindowSize/2) - (listOfValues.length/2)) +1;
  }
  this._buildWheelItems(listOfValues);

}

ScrollComponent.prototype.getDomElement = function()
{
	return this.domElement;
}

ScrollComponent.prototype._buildWheelItems = function(listOfValues)
{
	var sIndex =  this.startIndex;
	for (var index= 0; index < listOfValues.length ; index++)
	{
		var className = "card container-item-"+ (sIndex);
  	var attrubutes = {"id" : index, "class" : className}
      
		var wheelItem = this.createElementWithAttributes("div",attrubutes)
    wheelItem.innerHTML = listOfValues[index];
    this.domElement.append(wheelItem);
    sIndex++;
   }			
}


ScrollComponent.prototype._registerEventHandlers = function()
{
  var scrollHandler = this.handleClick;
  this.domElement.addEventListener("click", scrollHandler.bind(this));
	
  var mouseScrollHandler = this.mouseScrollEventHandler;
  if (this.domElement.addEventListener)
        /** DOMMouseScroll is for mozilla. */
  this.domElement.addEventListener('DOMMouseScroll', mouseScrollHandler.bind(this), false);
	/** IE/Opera....