JSFiddle - React, Tailwind, and code Playground

by Daniil Khanin

HTML

<div id='box'></div>

CSS

#box {
  
  padding:50px;
  
  background:#56bddc;
  
  position:relative;
  
  text-align:center;
  
}

.boxes {
  
  display:inline-block;
  
  font-size:20px;
  
  padding:10px;
  
  background:white;
  
}

.active{
  
  background:orange;!important
}

.boxes:hover {
  
  cursor:pointer;
  
}

.start {
  
  background:green;
  
}

.end {
  
  background:red;
  
}


.hover{
  
  background:blue;
}

JavaScript

var flag;

var count=0;

var one;

var two;

var index=0;

var reverse;

function createNumbers (start,end) {

		for (var i=start; i<=end; i++) {
      
    	box.innerHTML+='<div class="boxes" data-num='+index+'>'+i+'</div>';
      index++;
    }
	

};

createNumbers(40,60);


 box.addEventListener('click',handler);
 box.addEventListener('mouseover',hover);
 
 var elements = document.querySelectorAll('.boxes');
 
 
 function handler (e) {
 
 	var target = e.target;
  
  if (!(target.classList.contains('boxes')) || count>3) return;
  
  count++;
  
  if (count==3) {
  
  	for (var i=0; i<elements.length; i++) {
      
      	elements[i].classList.remove('active');
        elements[i].classList.remove('start');
        elements[i].classList.remove('end');
      
     }
     
     count=1;
  
  }

  switch (count) {
  
  	case 1:
    flag=true;
    one = +(target.getAttribute('data-num'));
    target.classList.add('start');

    break;
    
    case 2:
    flag=false;
    two = +(target.getAttribute('data-num'));
		target.classList.add('end');
    
      for (var i=0; i<elements.length; i++) {

        elements[i].classList.remove('hover');

        } 
        
    if (two>one) {
    
    	for (var i=one; i<two+1; i++) {
      
      	elements[i].classList.add('active');
        
      }
    
    }
    
    else {
    
    	for (var i=two; i<=one; i++) {
      
      	elements[i].classList.add('active');
       
      }
      
    }
    
    break;

  }


 }
 
 function hover(e) {
 
 	var target = e.target;
  
  if (!(target.classList.contains('boxes')) || !flag) return;
  
  var end = +(target.getAttribute('data-num'));
  
  if (end>one) {
  
  		if (!reverse) {
    
        for (var i=0; i<elements.length; i++) {

        elements[i].classList.remove('hover');

        } 
    
    }
    
    reverse=true;
  	
    for (var i=one+1; i<end+1; i++) {
  
  		elements[i].classList.add('hover');
  
  	}
    
    
        for (var i=end+1; i<elements.length; i++) {

     ...