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;
}
.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');
}
count=1;
}
switch (count) {
case 1:
flag=true;
one = +(target.getAttribute('data-num'));
target.classList.add('active');
break;
case 2:
flag=false;
two = +(target.getAttribute('data-num'));
target.classList.add('active');
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');
}
}
else {
if(reverse) {
for (var i=0; i<elements.length; i++) {
elements[i].classList.remove('hover');
}
...