JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


<div id="wrapper">
            
        <div id="wheel">
            <div id="inner-wheel">
                <div class="sec"><span class="fa fa-bell-o"></span></div>
                <div class="sec"><span class="fa fa-comment-o"></span></div>
                <div class="sec"><span class="fa fa-smile-o"></span></div>
                <div class="sec"><span class="fa fa-heart-o"></span></div>
                <div class="sec"><span class="fa fa-star-o"></span></div>
                <div class="sec"><span class="fa fa-lightbulb-o"></span></div>
            </div>       
           
            <div id="spin">
                <div id="inner-spin"></div>
            </div>
            
            <div id="shine"></div>
        </div>
        
        
        <div id="txt"></div>
  </div>

CSS

*{	margin:0;	padding:0; }

body{
	background:#eaeaea;
	color:#fff;
	font-size:18px;
	font-family: 'Exo 2', sans-serif;
}

a{
	color:#34495e;	
}




/*WRAPPER*/
#wrapper{ 
	margin: 40px auto 0;	
	width:266px; 
	position:relative;
}

#txt{
	color:#eaeaea;	
}


/*WHEEL*/
#wheel{
	width:250px;
	height:250px;
	border-radius:50%;	
	position:relative;
	overflow:hidden;
	border:8px solid #fff;
	box-shadow:rgba(0,0,0,0.2) 0px 0px 10px, rgba(0,0,0,0.05) 0px 3px 0px;
	transform: rotate(0deg);
}

#wheel:before{
	content:'';
	position:absolute;
	border:4px solid rgba(0,0,0,0.1);
	width:242px;
	height:242px;
	border-radius:50%;
	z-index:1000;	
}

#inner-wheel{
	width:100%;
	height:100%;
	
	-webkit-transition: all 6s cubic-bezier(0,.99,.44,.99);
	-moz-transition:    all 6 cubic-bezier(0,.99,.44,.99);
	-o-transition:      all 6s cubic-bezier(0,.99,.44,.99);
	-ms-transition:     all 6s cubic-bezier(0,.99,.44,.99);
	transition:         all 6s cubic-bezier(0,.99,.44,.99);	
}

#wheel div.sec{
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 130px 75px 0;
	border-color: #19c transparent;
	transform-origin: 75px 129px;
	left:50px;
	top:-4px;	
	opacity:1;
}

#wheel div.sec:nth-child(1){
	transform: rotate(60deg);
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	border-color: #16a085 transparent;	
}
#wheel div.sec:nth-child(2){
	transform: rotate(120deg);
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	-o-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	border-color: #2980b9 transparent;	
}
#wheel div.sec:nth-child(3){
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	border-color: #34495e transparent;	
}
#wheel div.sec:nth-child(4){
	transform: rotate(240deg);
	-webkit-transform: rotate(240deg);
	-moz-transform:...

JavaScript

//set default degree (360*5)
var degree = 1800;
//number of clicks = 0
var clicks = 0;

$(document).ready(function(){
	
	/*WHEEL SPIN FUNCTION*/
	$('#spin').click(function(){
		
		//add 1 every click
		clicks ++;
		
		/*multiply the degree by number of clicks
	  generate random number between 1 - 360, 
    then add to the new degree*/
		var newDegree = degree*clicks;
		var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
		totalDegree = newDegree+extraDegree;
    console.log('newDegree = '+newDegree);
    console.log('extraDegree = '+extraDegree);
    console.log('totalDegree = '+totalDegree);
		
		/*let's make the spin btn to tilt every
		time the edge of the section hits 
		the indicator*/
		$('#wheel .sec').each(function(){
			var t = $(this);
			var noY = 0;
			console.log(t);
			
			var c = 0;
			var n = 2;	
			var interval = setInterval(function () {
				c++;		
				console.log('c = '+c);
				if (c === n) { 
					clearInterval(interval);				
				}	
					
				var aoY = t.offset().top;
				$("#txt").html(aoY);
				console.log(aoY);
				
				/*23.7 is the minumum offset number that 
				each section can get, in a 30 angle degree.
				So, if the offset reaches 23.7, then we know
				that it has a 30 degree angle and therefore, 
				exactly aligned with the spin btn*/

			}, 10);
			
			$('#inner-wheel').css({
				'transform' : 'rotate(' + totalDegree + 'deg)'			
			});
		 
			noY = t.offset().top;
			
		});
	});
	
	
	
});//DOCUMENT READY