Lotto

by jeffgw

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="container fifty"style="padding-top:20px;"></div>

<div class="container ten"style="padding-top:20px;"></div>
<br>
<div class="container"></div>
<br>
<div class="container" align="center">
<button class="btn btn-block btn-warning btn-lg" style="width:50%" onClick="re()">Reset</button>
</div>

CSS

.fifty > div {
    float: left;
    line-height: 30px;
    width: 30px;
    text-align: center;
    background-color: steelblue;
    color: #fff;
    border-radius: 2px;
    margin: 3px;
	cursor:pointer;
}
.fifty {
    max-width: 390px;
}

.ten > div {
    float: left;
    line-height: 30px;
    width: 30px;
    text-align: center;
    background-color: #090;
    color: #fff;
    border-radius: 2px;
    margin: 3px;
	cursor:pointer;
}
.ten {
    max-width: 390px;
}

JavaScript

$(function () {
	for (i = 1; i < 51; i++) { 
   		$('.fifty').append('<div id='+i+' class="number">&nbsp;</div>');
	}
	for (i = 1; i < 11; i++) { 
   		$('.ten').append('<div id='+i+' class="number">&nbsp;</div>');
	}
    var parent = $(".fifty");
    var divs = parent.children();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
	var parent = $(".ten");
    var divs = parent.children();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
	
	
});

function re() {
	
	$('.fifty').html('');
	$('.ten').html('');
	
	for (i = 1; i < 51; i++) { 
   		$('.fifty').append('<div id='+i+' class="number">&nbsp;</div>');
	}
	for (i = 1; i < 11; i++) { 
   		$('.ten').append('<div id='+i+' class="number">&nbsp;</div>');
	}
	
	var parent = $(".fifty");
    var divs = parent.children();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
	var parent = $(".ten");
    var divs = parent.children();
    while (divs.length) {
        parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
    }
}



$('.container').on('click', '.number', function (){
   	var value = $(this).attr('id');
  	$(this).html(value);
});