JSFiddle - React, Tailwind, and code Playground

by manoj jasti

HTML

<div class="actions">
<div class="actions_bar">
    <div class="dots">
       <span class="dot dot1"></span>
       <span class="dot dot2"></span>
       <span class="dot dot3"></span>
       <span class="dot dot4"></span>
    </div>
    <div class="icon_container">
        <div class="button_left">left</div>
        <div class="alert_icon_item_Station"></div>
        <div class="alert_icon_item_Station"></div>
       <div class="alert_icon_item_Station"></div>
        <div class="alert_icon_item_Station"></div>
        <div class="alert_icon_item_Station"></div>
       <div class="alert_icon_item_Station"></div>
           <div class="alert_icon_item_Station"></div>
    <div class="button_right">right</div>
    </div>
    
</div>

CSS

.actions{
    width:100%;
}

.dots{
    text-align:center;
    margin:0 auto;
    display:table;
    padding-top:12px;
    height:2.3em;
}
.dot {
    display: inline-block;
    width:10px;height:10px;
    border-radius:6px;
    background-color:#fff;
    cursor:pointer;
    float:left;
    margin-left:10px;
    border:1px solid #fff;
}
.actions_bar{
    background-color: #ff6600;
    height:2.3em;
    text-align:left;
    box-shadow:0px 6px 5px -3px rgba(0,0,0,0.5);
}
.alert_icon_item_Station{
    top: 2.3em;      
	left: 1em;	
	width: 10em;
	height: 6em;	
 display:inline-block;
	cursor: pointer;
	z-index: 500; 
    background-color:#6b6b6b;
    margin-right:-3px;
}
.icon_container{
    display:inline-block;
    white-space:nowrap;
    position:relative;
        
}
.left{
    left:-500px;
}
.button_left, .button_right{
    display:none;
}
.icon_container:hover .button_left{
    position:absolute;
    left:0;
    display:inline-block;
    height:6em;
    z-index:1000;
    background-color:silver;
    cursor:pointer;
}
.icon_container:hover .button_right{
     position:absolute;
    display:inline-block;
    height:6em;
    z-index:1000;
    background-color:silver;
    cursor:pointer;
}
.button_right{
   display:none;
}

JavaScript

var me= me|| {};
me.main = (function(){

})();

me.main.util = function(){
    var mm = {}; 
    "use strict";
    mm.init = (function(){
    mm.winSize = parseInt($(window).width());
    mm.dotConstructor();
    })();
    mm.dotConstructor = function(){
   alert("Hey Dude");
        
        var noOfDivs =parseFloat($(".alert_icon_item_Station").length *       161)/parseFloat(winSize) ;
       if noOfDivs> Math.round(noOfDivs) && noOfDivs< Math.round(noOfDivs +1)
           noOfDivs = noOfDivs++;
        else 
            noOfDivs= noOfDivs;
       
        for(int i=0; i< noOfDivs; i++){
       var dotElement= $(".dots");
            var dotNode = "";
            dotNode += "<span class='dot dot"+i +"'></span>";    
            dotElement.append(dotNode);            
        }         
    };
};

$(document).ready(function(){
    $(".icon_container").hover(function(){
        debugger;
         $(".button_right").css("left","'"+ winSize + "' px");
        $(".button_right").css("display","inline-block");
     });
 
    $(".dot2").on("click",function(){
        $(".icon_container").addClass("left");
        });
    me.main.util();
});