JSFiddle - React, Tailwind, and code Playground

by Gulam Jilani

HTML

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
 <div id="wrapper">

        <div id="wheel">
            <div id="inner-wheel">
                <div class="sec"><span class="fa fa-bell-o"><img src="https://static.thenounproject.com/png/551931-200.png" /></span></div>
                <div class="sec"><span class="fa fa-comment-o"><img src="https://static.thenounproject.com/png/1844922-200.png" /></span></span></div>
                <div class="sec"><span class="fa fa-smile-o"><img src="https://static.thenounproject.com/png/1314324-200.png" /></span></span></div>
                <div class="sec"><span class="fa fa-heart-o"><img src="https://static.thenounproject.com/png/1163535-200.png" /></span></span></div>
                <div class="sec"><span class="fa fa-star-o"><img src="https://static.thenounproject.com/png/1388091-200.png" /></span></span></div>
                <div class="sec"><span class="fa fa-lightbulb-o"><img src="https://static.thenounproject.com/png/948436-200.png" /></span></span></div>
            </div>

            <div id="spin">
                <div id="inner-spin"></div>
            </div>

            <div id="shine"></div>
        </div>


        <div id="txt"></div>
        <div id="result"></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);
        ...

JavaScript

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


        var firstDone = false;


        /*WHEEL SPIN FUNCTION*/
            $('#spin').click(function () {
                $(this).addClass("clicked");
                if (firstDone === true)
                    return;
                firstDone = true;
                /*setInterval(function(){
                    alert("");
                },1000)*/

                $("#wheel").addClass("clicked");
                //add 1 every click
                clicks++;
                setTimeout(function () {
                    $("#result").html("You won car");
                }, 6200)

                /*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(1 * (360 - 1 + 1));

                totalDegree = newDegree + extraDegree;

                /*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;

                    var c = 0;
                    var n = 700;
                    var interval = setInterval(function () {

                        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,
                   ...