<!doctype html>
<head>
<meta charset="utf-8">
<title>The Lucky Number Game</title>
<link href="luckynumber.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$("button#lucky").click(function() {
var lucky_phrase = ['a great number, dude', 'a lovely number', 'my favorite number', 'a cool number','the best number', 'a weird number', 'my lucky number too', 'an awesome number','the coolest number on the planet', 'an amazing number man'];
var lucky_Number = $("input#lucky_number").val();
if(lucky_Number > 1) {
var lucky_message = (lucky_Number) % 10;
$("div#output").html("<h1>Your lucky number" + " "+ lucky_Number + " " + "is" + " " + " " + lucky_phrase[lucky_message] + "!</h1>");
} else {
$("div#output").html("<h2>Please enter a positive number.</h2>");
}
});
});
</script>
</head>
<body>
<h1>Lucky Number Game</h1>
<h2>Lucky Number Game in jQuery</h2>
<hr>
<p>Enter your lucky number.</p>
<input type="text" id="lucky_number">
<button id="lucky">Click here.</button>
<div id="output"></div>
<div class="footer">Created by Ovetta Sampson</div>
</body>
</html>
html {
background-image: url(luckseven.jpg);
background-repeat:repeat;
background-color: black;
}
h1 {
font-family:Papyrus;
font-size: 5em;
color: white;
text-align:center;
}
h2 {
font-family:Papyrus;
font-size: 2em;
color: white;
text-align:center;
}
p {
color: white;
}
.footer {
margin-top: 15%
padding-top: 15%
text-align: center;
color: white;
font-family:Papyrus;
font-size: 5em;
background-color: black;
}