Entity_101

Hello,

I'm trying to make a spinner that spins randomly on click (see example below).

I've been messing around with this for hours, but I just cannot make this work like I want it to.

This is my code, but it is unfinished and buggy:

var myArray = ['360', '330', '300', '270', '240', '210', '180', '150', '120', '90', '60', '30'];
var Spinner1 = sym.$('Spinner1');
// spinner 1 = wheel.jpg

Spinner1.click(function(){
// randomize the degree of spin.
var mySpin = myArray[Math.floor(Math.random() * myArray.length)];

sym.getSymbol('Spinner1').play();
        Spinner1.css({
'-webkit-transform': 'rotate(' + mySpin + 'deg)',
'-moz-transform': 'rotate(' + mySpin + 'deg)',
'-ms-transform': 'rotate(' + mySpin + 'deg)',
'-o-transform': 'rotate(' + mySpin + 'deg)',
'transform': 'rotate(' + mySpin + 'deg)',
});

Spinner1.css('-webkit-transition','all 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000)');

// calling alert pop-up on number
if (mySpin > 330 && mySpin < 360) {
alert("Winner is number 1!");
}
}); 

What I am actually trying to achieve is the following:

• The spinner only spins clockwise (not clockwise and counter-clockwise)
• The spinner always spins 360 degrees + the random number/degrees defined in myArray (added on top of 360deg)
• The spinner randomly picks a number/degrees from myArray - but does not repeat that number again until all numbers have been spinned (resets after all spins)
• The spinner calls an alert pop-up when the pointer has landed on a number (between 1-12)

If anyone can help me out or perhaps make my code work properly, I would be very happy.

I really want to know what I am doing wrong so I can learn from it in the future.

Help is sincerely appreciated!

Regards,

Entity_101

TestSpinner.zip