Skip to content

Instantly share code, notes, and snippets.

@Daniel-Wiedemann

Daniel-Wiedemann/new_gist_file.html

Created April 24, 2015 16:52
Show Gist options
  • Save Daniel-Wiedemann/882b3b486cbe473542d5 to your computer and use it in GitHub Desktop.
Save Daniel-Wiedemann/882b3b486cbe473542d5 to your computer and use it in GitHub Desktop.
Download ZIP
lucky numbers
Raw
new_gist_file.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<title>No Luck</title>
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,100,200,300,800' rel='stylesheet' type='text/css'>
<style type="text/css">
html, body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.container{
position: relative;
width: 100%;
height: 100%;
/*background: radial-gradient(#1f1f1f 15%, transparent 16%) 0 0,
radial-gradient(#1f1f1f 15%, transparent 16%) 4px 4px,
radial-gradient(rgba(255,255,255,.05) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.05) 15%, transparent 20%) 4px 5px;
background-color:#282828;
background-size:8px 8px;*/
background: url(img/irongrip.png);
/*background: url(img/[email protected]);*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;
-moz-box-align: center;
display: box;
box-orient: vertical;
box-pack: center;
box-align: center;
}
.number-container{
display: block;
}
.number-item{
border: 1px solid tomato;
border-radius: 30px;
height: 60px;
width: 60px;
display: inline-block;
position: relative;
text-align: center;
margin-right: 10px;
}
.number-item:last-child{
margin-right: 0;
}
.number-item span{
position: relative;
display: inline-block;
font-family: 'Exo 2', sans-serif;
color: tomato;
line-height: 1.4;
font-weight: 100;
font-size: 42px;
}
.btn-generate{
border-radius: 22px;
border: 1px solid tomato;
display: inline-block;
position: relative;
margin-top: 30px;
background: transparent;
font-family: 'Exo 2', sans-serif;
color: tomato;
font-weight: 100;
font-size: 22px;
padding: 9px 15px;
outline: none;
}
</style>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="number-container">
<div class="number-item"><span>23</span></div>
<div class="number-item"><span>2</span></div>
<div class="number-item"><span>45</span></div>
<div class="number-item"><span>11</span></div>
<div class="number-item"><span>36</span></div>
<div class="number-item"><span>49</span></div>
</div>
<button class="btn-generate">get luck</button>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<script>
$(function() {
function getNumbers(value) {
value = value || 49;
// create list
var numbers = [],
resultArr = [],
i;
for (i = value - 1; i >= 0; i--) {
numbers.push(i+1);
};
// console.log('numbers: ', numbers);
numbers = _.shuffle(numbers);
// console.log('numbers shuffled: ', numbers);
// get random number
for (var i = 5; i >= 0; i--) {
var num = numbers[_.random(0,numbers.length)];
resultArr.push(num);
numbers = _.without(numbers, num);
};
// sort
resultArr = _.sortBy(resultArr);
return resultArr;
}
$('.btn-generate').on('click', function(event) {
var luckyNumbers = getNumbers(49);
console.log('### lucky numbers ###');
console.log('### ', luckyNumbers.toString());
console.log('#####################');
var compiled = _.template('<% _.forEach(luckyNumbers, function(numberItem) { %><li><%- numberItem %></li><% }); %>');
compiled({ 'luckyNumbers': ['fred', 'barney'] });
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment