JSFiddle - React, Tailwind, and code Playground

by qustosh

JavaScript

//get body
var body = $("body");

// width = odstep miedzy slupkami, szerokosc slupkow, ilosc slupkow 
var bars = {
    num: 7,
    gap: 10,
    width: 30,
    unit: "px",
    scaleOfEach: [80,90,10,30,40,20,15]
    
}
    
function Main(){
    
     this.div = $("<div></div>");
     this.init = function(){
        this.div.css({
            "background-color":"black",
            "position":"absolute",
            "left":"0px",
            "top":"0px",
            "width":this.width + "px",
            "height":this.height + "px"
        }).appendTo(body);
     }  
 
     this.bgCol = "black";
     this.barCol = "white";
     this.width = ( bars.width * bars.num ) + ( bars.gap * (bars.num+1) );
     this.height = 200;
    
     this.$bars = $();
    
     this.drawBars = function(){
         
         var that = this;    
         
         $.each(bars.scaleOfEach, function(i, el){
          
         var d = $("<div></div>").css({
             "background-color":"white",
             "position":"absolute",
             "left": ( (i+1) * bars.gap ) + ( i * bars.width ) + "px",
             "top": that.height - el + bars.unit,
             "width": bars.width + bars.unit,
             "height": el + bars.unit            
        }).appendTo(that.div);
             
        that.$bars = that.$bars.add(d);     
        
        });
            
     }
         
     this.mod = function(eq){
         
         var eq = eq;
         var that = this;
         var side = "up"; 
         setTimeout(function(){
                 
             var ct = parseInt( that.$bars.eq(eq).css("top"), 10 );
             var ch = that.$bars.eq(eq).height();
             
             
             if(ch == 180){
                 side = "down";
                 that.$bars.eq(eq).css({
                     "height": ch - 5 + "px",
                     "top": ct + 5 + "px"
                 })
             }else if(ch == 0){
                 side = "up";
                ...