<!DOCTYPE html>
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>NRONLINE - Buckinghamshire Web Design, Digital Marketing Workshops and Kofax Consultancy</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
body {
background: #444;
font-family: sans-serif;
font-size: 18px;
font-weight: 100;
}
ul {
position: absolute;
padding: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
list-style-type: none;
width: 690px;
height: 100px;
}
ul li {
float: left;
width: 100px;
height: 100px;
border-radius: 50px;
margin-right: 10px;
color: white;
text-align: center;
line-height: 100px;
font-size: 36px;
}
ul li:nth-child(5n) {
margin-right: 40px;
}
.ball-placeholder {
background: #222222;
background: -moz-linear-gradient(-45deg, #222222 0%, black 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #222222), color-stop(100%, black));
background: -webkit-linear-gradient(-45deg, #222222 0%, black 100%);
background: -o-linear-gradient(-45deg, #222222 0%, black 100%);
background: -ms-linear-gradient(-45deg, #222222 0%, black 100%);
background: linear-gradient(135deg, #222222 0%, black 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=1 );
}
.next-ball, .play-again {
position: absolute;
right: 0;
left: 0;
margin: auto;
border: 0;
color: white;
}
.next-ball {
bottom: 20px;
width: 100px;
height: 40px;
font-size: 16px;
background: #7ac9ed;
}
.play-again {
display: none;
bottom: 20px;
width: 200px;
height: 80px;
font-size: 24px;
background: #d74d2f;
}
.white-ball {
background: #fff;
color:#101010;
}
.blue-ball {
background: #99ccff;
color:#101010;
}
.pink-ball {
background: #ffccff;
color:#101010;
}
.green-ball {
background: #00cc66;
color:#101010;
}
.yellow-ball {
background: #fac600;
color:#101010;
}
</style>
</head>
<body role="document">
<ul class="ball-placeholders">
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
<li class="ball-placeholder"></li>
</ul>
<ul class="lottery"></ul>
<button class="next-ball">Next Ball <? echo $num; ?></button>
<button class="play-again">Play Again!</button>
<div id="data_ajax"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var arr = new Array();
$('.next-ball').on('click', function(){
//generate random number between 1 and 50
var random = Math.floor(Math.random()*50 ) + 1;
// array to store css class references
var classList = ["white-ball", "blue-ball", "pink-ball", "green-ball", "yellow-ball"];
console.log(random);
//if index of random number is less than 50
if( arr.indexOf(random) == -1){
//generate random number
arr.push(random);
//add css class to lottery-ball class relevant to array value range
$('.lottery').append('<li class="lottery-ball ' + classList[Math.floor(random/10)] + '">' + random + '</li>');
}
// if the number already exists ignore and generate a new number
else {
console.log(random);
}
console.log(arr);
//if lottery number calls is greater than 5 then switch button classes and send an alert to the user
if ( $('.lottery').children().length > 5 ) {
$('.next-ball').hide();
$('.play-again').show();
alert('Did You Win?');
}
});
//If once the game is finished the user chooses to play again switch button classes
$('.play-again').on('click', function(){
$('.lottery').children().remove();
arr = [];
$('.next-ball').show();
$('.play-again').hide();
});
</script>
</body>
</html>
