Code: [ Select all ]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Lets call upon the jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Lets add some styling -->
<style type="text/css">
body {
background-color:#333;
color: #FFF;
text-align: center;
}
div {
font-size: 18px;
}
div.winner {
font-size: 48px !important;
}
.button {
border: none;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1, .button1:focus, .button1:active{
background-color: #CCC;
color: #000;
font-weight:600;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<!-- Lets preload the audio -->
<audio class="audios" id="tada" preload="none">
<source src="./files/coRpSE/tada.mp3" type="audio/mpeg">
</audio>
<audio class="audios" id="haha" preload="none">
<source src="./files/coRpSE/haha.mp3" type="audio/mpeg">
</audio>
<!-- Lets Design the simple page -->
<h1>Pizza Place Decider</h1>
<h3>Let me decide where to get your pizza.</h3>
<button class="button button1" id="random">Choose Pizza Place</button>
<br /><br />
<div id="pplace">
</div>
<!-- Time for the jQuery -->
<script>
//Setting the vaiable of the pizza shops in the area that I can tolerate.
//Did multiple and randomized them on my own a bit to make the rolling through the name last longer.
var pizzaplaces = [
{ 'Pizza_ID': 0, 'Pizza_Shops': "Dominos" },
{ 'Pizza_ID': 1, 'Pizza_Shops': "Little Ceasers" },
{ 'Pizza_ID': 2, 'Pizza_Shops': "Market Basket" },
{ 'Pizza_ID': 3, 'Pizza_Shops': "Somewhere New" },
{ 'Pizza_ID': 4, 'Pizza_Shops': "Up to the person<br />to my right!" },
{ 'Pizza_ID': 5, 'Pizza_Shops': "Dominos" },
{ 'Pizza_ID': 6, 'Pizza_Shops': "Little Ceasers" },
{ 'Pizza_ID': 7, 'Pizza_Shops': "Dominos" },
{ 'Pizza_ID': 8, 'Pizza_Shops': "Market Basket" },
{ 'Pizza_ID': 9, 'Pizza_Shops': "Market Basket!" },
{ 'Pizza_ID': 10, 'Pizza_Shops': "Dominos" },
{ 'Pizza_ID': 11, 'Pizza_Shops': "Little Ceasers" },
{ 'Pizza_ID': 12, 'Pizza_Shops': "Market Basket" },
{ 'Pizza_ID': 13, 'Pizza_Shops': "Somewhere New" },
{ 'Pizza_ID': 14, 'Pizza_Shops': "Up to the person<br />to the right!" },
];
var $pplace = $("#pplace");
$('#random').click(function(){
var total = pizzaplaces.length,
selected = Math.floor( Math.random() * total),
i = 0;
console.log( "selected", selected );
$pplace.removeClass( "winner" );
for (i=0; i<total; i++) {
console.log( "for", i );
setTimeout((function(i){
return function(){
console.log( "timeout", i );
$pplace.html( pizzaplaces[i].Pizza_Shops.toUpperCase() );
if( i === selected ) {
$pplace.addClass( "winner" );
var haha_arr = [4,14]; //Array to play the haha sound.
if (jQuery.inArray(i, haha_arr) !== -1){
$('#haha').trigger('play');
} else {
$('#tada').trigger('play');
}
}
};
}(i)), i*200); //200ms for it to scroll from 1 name to the other.
if( i === selected ) {
break;
}
}
});
</script>
</body>
</html>