JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div id = "nums">
    
</div>
<button id="vz">По возрастинию</button>
<button id= "yb">По убыванию</button>

CSS

#nums{
    font-size:3em;
    font-weight:bold;
}
.num{
    margin-left:10px;
    float: right;
    color:#222;
    height: 80px;
    font-size: 70px;
    background:  linear-gradient(to bottom,rgb(255,255,255), rgb(200,200,200));
    border-radius:10px;
    text-align:center;
    border: 1px solid #000;
    border-bottom: 7px solid #000;
    box-shadow:0 15px 15px rgba(0,0,0,0.1);
}

JavaScript

var numbers = [6,5,11,10,3,2,1,0];
var speed = 500;
var out = document.getElementById("nums");
var par = "toHight";
var timeout;
show(numbers,out);
document.getElementById("vz").addEventListener("click",function(){
    par = "toHight";
    handler();
},false);
document.getElementById("yb").addEventListener("click",function(){
    par = "toLow";
    handler();
},false);
function handler(){
    var n = sort(numbers,par);
    if(n == -1){
        show(numbers,out);        
        return;
    }
    show(numbers,out,n);
    clearTimeout(timeout);
    timeout = setTimeout(handler,speed);
}
function sort(arr,param){
    switch(param){
        case "toLow":
            for(var i = 0; i < arr.length-1; i++){
                if(arr[i] < arr[i+1]){
                   var tmp = arr[i];
                    arr[i] = arr[i+1];
                    arr[i+1] = tmp;
                    return i;
                }
            }
            break;
        case "toHigh":default:
            for(var i = 0; i < arr.length-1; i++){
                if(arr[i] > arr[i+1]){
                   var tmp = arr[i];
                    arr[i] = arr[i+1];
                    arr[i+1] = tmp;
                    return i;
                }
            }
    }
    return -1;
}

function show(numbers,out,paintN){
    out.innerHTML = "";
    for(var i = numbers.length -1; i >= 0; i--)
        if(i == paintN)
            out.innerHTML += "<span style='color:#F00' class = 'num'>"+numbers[i]+"</span>";
        else
            out.innerHTML += "<span class = 'num'>"+numbers[i]+"</span>";
}