JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<div id="feedback">
    <div class="arrow buttonleft">
    </div>
    <div class="section">
    	<div id="floater_time">
            <span class="countdown countdown-small" id="clkTimer">20:11</span>
        </div>  
    </div>
</div>

CSS

#feedback{
	background-color:#F5F5F5;
	width:267px;
	position:fixed;
	top:0;
	right:-210px;
	float: right;
	margin-top:200px;
	z-index:10000;
	box-shadow: 0px 1px 6px 0px  #999;
	border: solid 1px #f5f5f5;
	border-radius: 103px 0 0 103px;


}
#feedback .{
	background:url('feedback/img/bg.png') repeat-x top left;
	border:1px solid #808f81;
	border-bottom:none;
	padding:10px 25px 25px;
}
#feedback .section {
	float: right;
}
#feedback .color{
	float:left;
	height:10px;
	width:4px;
	overflow:hidden;
}
#feedback .arrow{
	float:left;
	left: 10px;
	width: 30px;
	height:30px;
	position:relative;
	top:10px;
	cursor:pointer;
}
#feedback h6{
	background:url("feedback/img/feedback.png") no-repeat;
	height:38px;
	margin:5px 0 12px;
	text-indent:-99999px;
	cursor:pointer;
}

#feedback .buttonright{
	background: url("../images_v2.8/arrows_press.gif") blue;
	
}

#feedback .buttonleft{
	background: url("../images_v2.8/arrows.gif") red;
	
}

#floater_time {
	color: #646464;
	font: 11px/22px "Lucida Sans",Tahoma,sans-serif;
	right: 0;
	top: 68px;
	width: 210px;
	z-index: 100;
	background:#fbfbfb;
	/*padding: 10px;*/
	line-height:50px;
	
}



.countdown-small {
	clear: both;
	display: block;
	float: right;
	font-size: 20px;
	font-weight: bold;
	margin-right: 15px;

}


.countdown_icon {
	background: url("https://s3.amazonaws.com/sc-images-checkout/clock_icon.png") repeat scroll 0 0 transparent;
	float: left;
	height: 26px;
	margin-left: 20px;
	width: 25px;
}

JavaScript

var leave = 200;
            if(leave > 0)
            {
                CounterTimer();
            }
            function CounterTimer() 
            {
            var minute = Math.floor(leave / 60);
            var second = Math.floor(leave) - (minute*60);            
            minute=minute<10 ? "0" + minute : minute; 
            second=second<10 ? "0" + second : second;
            
            var remain = minute + ":" + second;
            leave = leave-1 ;
            document.getElementById("clkTimer").innerHTML = remain;            
            
           
            if(leave >= 0)
              {
                  setTimeout(CounterTimer,1000);
              }
            else
              {
                alert("Your cart is expired!")
                window.location = "#";                
              }
            }
$(document).ready(function(){

	// The relative URL of the submit.php script.
	// You will probably have to change	it.

	// Caching the feedback object:	
	var feedback = $('#feedback');

	$('#feedback').click(function(){

		// We are storing the values of the animated
		// properties in a separate object:
				
		var anim	= {		
			mb : 207,			// Margin Bottom
			pt : 0			// Padding Top
		};
		
		var el = $(this).find('.arrow');
		
		if(el.hasClass('buttonright')){
			anim = {
				mb : 0,
				pt : 0
			};
		}

		// The first animation moves the form up or down, and the second one 
		// moves the "Feedback heading" so it fits in the minimized version
		
		feedback.stop().animate({marginRight: anim.mb});
		
		feedback.find('.section').stop().animate({paddingTop:anim.pt},function(){
			el.toggleClass('buttonright buttonleft');
		});
	});
	
});