Daniel-Wiedemann/new_gist_file.html

## 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/irongrip_@2x.png);*/
            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>

	<!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/irongrip_@2x.png);/
	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>