Skip to content

Instantly share code, notes, and snippets.

@WarrenPJ

WarrenPJ/megaMillions.html

Last active February 23, 2016 16:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save WarrenPJ/9021e67548fddfa6dca0 to your computer and use it in GitHub Desktop.
Save WarrenPJ/9021e67548fddfa6dca0 to your computer and use it in GitHub Desktop.
Download ZIP
A lottery number generator
Raw
megaMillions.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">
<title>Pascals' Mega Millions Winning Numbers!</title>
<meta name="description" content="Pascal Warren JS Tests">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
// FOGGY JS
// Foggy, v1.1.1
//
// Description: jQuery plugin for blurring page elements
// Homepage: http://nbartlomiej.github.com/foggy
// Author: nbartlomiej@gmail.com
(function(e){e.fn.foggy=function(t){var n={opacity:.8,blurRadius:2,quality:16,cssFilterSupport:true};var r= {opacity:1,blurRadius:0};var i;if(t==false){i=e.extend(n,r)}else{i=e.extend(n,t)}var s=function(e,t,n,r){this.content=e;this.position=t;this.offset=n;this.opacity=r};s.prototype.render=function(t){e("<div/>",{html:this.content,"class":"foggy-pass-"+this.position}).css({position:this.position,opacity:this.opacity,top:this.offset[0],left:this.offset[1]}).appendTo(t)};var o=function(e){this.radius=e};o.prototype.includes=function(e,t){if(Math.pow(e,2)+Math.pow(t,2)<=Math.pow(this.radius,2)){return true}else{return false}};o.prototype.points=function(){var e=[];for(var t=-this.radius;t<=this.radius;t++){for(var n=-this.radius;n<=this.radius;n++){if(this.includes(t,n)){e.push([t,n])}}}return e};var u=function(e,t){this.element=e;this.settings=t};u.prototype.calculateOffsets=function(t,n){var r=e.grep((new o(t)).points(),function(e){return e[0]!=0||e[1]!=0});var i;if(r.length<=n){i=r}else{var s=r.length-n;var u=[];for(var a=0;a<s;a++){u.push(Math.round(a*(r.length/s)))}i=e.grep(r,function(t,n){if(e.inArray(n,u)>=0){return false}else{return true}})}return i};u.prototype.getContent=function(){var t=e(this.element).find(".foggy-pass-relative")[0];if(t){return e(t).html()}else{return e(this.element).html()}};u.prototype.render=function(){var t=this.getContent();e(this.element).empty();var n=e("<div/>").css({position:"relative"});var r=this.calculateOffsets(this.settings.blurRadius*2,this.settings.quality);var i=this.settings.opacity*1.2/(r.length+1);(new s(t,"relative",[0,0],i)).render(n);e(r).each(function(e,r){(new s(t,"absolute",r,i)).render(n)});n.appendTo(this.element)};var a=function(e,t){this.element=e;this.settings=t};a.prototype.render=function(){var t=(""+i.opacity).slice(2,4);var n=this.settings.blurRadius;e(this.element).css({"-webkit-filter":"blur("+n+"px)",opacity:i.opacity})};return this.each(function(e,t){if(i.cssFilterSupport&&"-webkit-filter"in document.body.style){(new a(t,i)).render()}else{(new u(t,i)).render()}})}})(jQuery)
</script>
<script>
// CUSTOM JS
function myNum() { //Lottery random number generator
document.getElementById('demo').innerHTML = ""; //clear before initializing
for(var i = 1; i <= 5; i++) {
var num1, num2, num3, num4, num5, ball;
num1 = Math.round(Math.random() * (75 - 1) + 1);
ball = Math.round(Math.random() * (15 - 1) + 1);
do {
num2 = Math.round(Math.random() * (75 - 1) + 1);
} while(num2 == num1);
do {
num3 = Math.round(Math.random() * (75 - 1) + 1);
} while(num3 == num1 || num3 == num2);
do {
num4 = Math.round(Math.random() * (75 - 1) + 1);
} while(num4 == num1 || num4 == num2 || num4 == num3);
do {
num5 = Math.round(Math.random() * (75 - 1) + 1);
} while(num5 == num1 || num5 == num2 || num5 == num3 || num5 == num4);
// ORDER NUMBERS
do {
if(num1 > num2) {
temp = num1;
num1 = num2;
num2 = temp;
}
if(num2 > num3) {
temp = num2;
num2 = num3;
num3 = temp;
}
if(num3 > num4) {
temp = num3;
num3 = num4;
num4 = temp;
}
if(num4 > num5) {
temp = num4;
num4 = num5;
num5 = temp;
}
} while(num1 > num2 || num2 > num3 || num3 > num4 || num4 > num5);
var winners = num1 + ", " + num2 + ", " + num3 + ", " + num4 + ", " + num5 + " " + '<span class="ball text-left">' + ball + '</span>';
var x = document.getElementById("demo");
x.innerHTML += winners + "<br />";
}
}
// OVERLAY EFFECTS
$(document).ready( function() {
$('#demo, #are, #you, #ready').hide();
$('.btn').click(function(e){
$(document).off("click");// Turn 'CLICKING' the page off
$("button[type='submit']").prop('disabled',true); // Turn .btn off
$('.btn').css('pointer-events', 'none'); // Remove pointer events on .btn
$('.btn, .press-text, .foot').foggy();
$('#are').fadeIn(500).fadeOut(500, function() {
$('#you').fadeIn(500).fadeOut(500, function(){
$('#ready').fadeIn(1000).fadeOut(2000, function(){
$('.btn, .press-text').animate({opacity:0}, 1000);
$('#demo').css("display", "block").animate({top: '50%', opacity: 1}, 2000, function() {
$(document).on("click"); // Turn 'CLICKING' back on
$(document).click(function(e) {
$('#demo').animate({opacity: 0}, 1000, function() {
$('#demo').css({"display":"none", "top":"0"});
});
$('.btn, .press-text').animate({opacity:1}, 1000, function(){
$('.btn, .press-text, .foot').foggy(false);
});
$("button[type='submit']").prop('disabled',false); // Renable .btn
$('.btn').css('pointer-events', 'auto'); // Turn .btn back on
$(document).off("click");// Reset 'CLICKING' the page to 'off'
e.preventDefault();
e.stopPropagation();
});
});
});
});
});
e.preventDefault();
e.stopPropagation();
});
});
</script>
<!--link rel="stylesheet" href="main.css"-->
<style>
html, body{
max-width: 100vw;
max-height:100vh;
}
html {
background-color: #25383C;
}
body {
margin: 0 auto;
max-width: 1200px;
font-family: 'Oswald', sans-serif;
font-size: 22px;
text-align: center;
background:transparent;
color: limegreen;
cursor:default;
/*pointer-events: none; */
}
.container{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.wrap {
max-width:810px;
position:absolute;
top:50%;
left:50%;
margin-left:-405px;
margin-top:-85px;
z-index: 1;
}
.press-text,.btn {
position:relative;
}
.btn{
font-size:25px;
padding:5px 40px;
color:palegreen;
background-color: seagreen;
margin-top:20px;
/*pointer-events: auto;*/
}
.btn:hover, .btn:focus {
background-color:limegreen;
color:seagreen;
}
#demo{
display: block;
z-index: 3;
font-size: 3.5em;
line-height: 1.5em;
font-weight: 600;
color: #fff;
position: absolute;
top: 0;
left: 50%;
margin-top: -280px;
margin-left: -320px;
opacity: 0;
}
#are, #you {
display: block;
z-index: 3;
font-size: 3.5em;
line-height: 4em;
font-weight: 600;
color: #fff;
position: fixed;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -55px;
}
#ready {
display: block;
z-index: 3;
font-size: 5em;
line-height: 1.5em;
font-weight: 600;
color: #fff;
position: fixed;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -150px;
}
.ball {
position: relative;
display:inline-block;
height: 110px;
width: 110px;
line-height: 110px;
-moz-border-radius: 50%; /* or 50% */
border-radius: 50%; /* or 50% */
background-color: seagreen;
text-align: center;
margin:10px 0;
}
.foot{
position: absolute;
top: auto;
left: 0;
right: 0;
bottom: 10%;
color:#505f62;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<p id="are">ARE</p>
<p id="you">YOU</p>
<p id="ready">READY!</p>
<p id="demo"></p>
<div class="wrap">
<h1 class="press-text">Press the button to get your lucky Mega Millions numbers!</h1>
<button class="btn" type="submit" onclick="myNum()">$</button>
</div>
<span class="foot">&lt; Pascal Warren /&gt;</span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment