I am trying to create a coin of chance (heads or tails) that rotates before giving me the random result, I have the following code of js that creates the elements and assigns the corresponding div the function giroVoneda, in the public folder I have saved the two images corresponding to heads or tails. You can lend me a hand with the following code to complete the two cases of the giroCoin. Is that I have no idea how to create it to make the spin effect while I lasted the seconds I have in the SetTimeout. I also add that I have it with two if to do the same functionality.
$(document).on('change', '#elegirHerramienta', function(event) {
var seleccionado = $('#elegirHerramienta').val();
var ui_dado = document.getElementById('ui_dado');
if(ui_dado.hasChildNodes())
{
while(ui_dado.childNodes.length != 0)
{
ui_dado.removeChild(ui_dado.firstChild);
}
}
switch(seleccionado){
case 'moneda':{
// $(ui_dado).append('<p id="result" style="margin-top:20px !important;"></p>');
$(ui_dado).append('<div id="platform2"></div>')
var platform = document.getElementById('platform2');
var array = ["<div class='flip-box' onclick='girarMoneda()'><div class='flip-box-inner' ><div id='cara' class='flip-box-front'><img src='../img/cara.png'/></div><div id='cruz' class='flip-box-back'><img src='../img/cruz.png'/></div></div></div>"]
var dice = $("<div ></div>"); // Create with jQuery
for (let index = 0; index < array.length; index++) {
$(dice).append(array[index]);
}
$(platform).append(dice);
}
break;
}
});
function girarMoneda()
{
setTimeout(function(){
var number = Math.floor(Math.random() * 2) + 1;
switch(number){
case 1:
{
}
break;
case 2:
{
}
break;
}
if( number == 1)
{
}
else{
if(number == 2)
{
}
}
}, 1120);
}