JSFiddle - React, Tailwind, and code Playground

by Bharath Kumaar

HTML

<div>
  <span id="1" class="value"></span>
  <span id="left" index=1> < </span>
  <span id="2" class="value"></span>
  <span id="right" index=3> > </span>
  <span id="3" class="value"></span>
</div>

CSS

div {
      width: 200px;
      text-align: center;
          margin-top: 40px;
    }
    
    span.value {
          background: rgba(15, 114, 185, 0.69);
    padding: 12px;
    color: #fff;
    }
    
    span#left, span#right {
      background: rgba(15, 114, 185, 0.69);
    padding: 3px 6px;
    color: #fff;
    cursor:pointer;
      
    }
    
    span {
      margin-right : 3px;
    }

JavaScript

var a = [1, 2, 3, 4, 5];
var l = a.length;

var one = document.getElementById('1')
var two = document.getElementById('2');
var three = document.getElementById('3');

one.innerHTML	= 2;
two.innerHTML	= 3;
three.innerHTML	= 4;

var left  = document.getElementById('left');
var right = document.getElementById('right');

left.onclick	=	function (index)
                {         
                  index = parseInt(this.getAttribute('index'))-1;
                  
                  if(index < 0)
                    left.style.display = 'none';

                  if(index+2 <= l)
                    right.style.display = 'inline-block'; 
                    
                    if(a[index])
                    {
                   		one.innerHTML = a[index];
                      one.style.display = 'inline-block';
                    }
                    else
                      one.style.display = 'none';
                    
                    two.innerHTML = a[index+1];
                    
                    if(a[index+2])
                    {
                   		three.innerHTML = a[index+2];
                      three.style.display = 'inline-block';
                    }
                    else
                      three.style.display = 'none';
                    
                    left.setAttribute('index', index);
                    right.setAttribute('index', index+2);
                }
                
                
 right.onclick	=	function (index)
                {         
                  index = parseInt(this.getAttribute('index'))+1;
                  
                  if(index >= l)
                    right.style.display = 'none';

                  if(index-2 >= 0)
                    left.style.display = 'inline-block'; 
                    
                    if(a[index])
                    {
                   		three.innerHTML = a[index];
                      three.style.display = 'inline-block';
                    }
        ...