<!--
Description : A program that generates a random number from 1 to 1000 and asks the user to guess it.
Language(s) : HTML/Javascript
Author : Jun Y. Ercia
Date Written : 25 August 2016
Date Modified: 25 August 2016
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guess A Number</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
th, td {
text-align: center;
}
/* centered columns styles */
.row-centered {
text-align:center;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="panel-group col-sm-6 col-sm-offset-3 row-centered">
<div class = "panel panel-primary">
<div class="panel-heading">Guess the Number</div>
<div class="panel-body" id="formbody">
<form class="form-horizontal" role="form">
<div col-sm-12>
I have a number between 1 and 1000--can you guess my number?
</div>
<div col-sm-12>
Please enter your first guess.
</div>
<div class="form-group">
<input type="text" id="guessNumber" placeholder="" autofocus oninput="changebgcolor()">
<button class="btn btn-info btn-sm" id="guess" onclick="guessIt(event)">Guess It!</button>
<button class="btn btn-info btn-sm" id="play" onclick="playAgain(event)">Play Again</button>
</div>
</form>
</div>
</div>
<br/>
<div class="row">
<div class="col-sm-12" id="output"></div>
</div>
</div>
</div>
<script>
var play = document.getElementById("play");
var input = document.getElementById("guessNumber");
var currentColor = input.style.backgroundColor;
var numberToGuess = generateNumberToGuess();
play.style.visibility = "hidden";
input.focus();
var output = "";
function generateNumberToGuess() {
return Math.ceil(Math.random() * 1000);
}
function changebgcolor() {
var color = ["red", "blue"];
var colorindex = Math.floor(Math.random() * 2);
input.style.backgroundColor = color[colorindex];
}
function playAgain(event) {
numberToGuess = generateNumberToGuess();
output = "";
document.getElementById("output").innerHTML = output;
input.disabled = false;
document.getElementById("guess").disabled = false;
document.getElementById("formbody").style.backgroundColor = "white";
play.style.visibility = "hidden";
input.style.backgroundColor = currentColor;
input.value = "";
input.focus();
event.preventDefault();
}
function guessIt(event) {
if (!/./.test(input.value)) {
bootbox.alert("Error! Missing Entry");
$(document).on('hidden.bs.modal','.bootbox', function () {
$('#guessNumber').focus().select();
});
event.preventDefault();
return;
}
else if (/\D/.test(input.value)) {
bootbox.alert("Error! Not a number.");
$(document).on('hidden.bs.modal','.bootbox', function () {
$('#guessNumber').focus().select();
});
event.preventDefault();
return;
}
guessNumber = parseInt(input.value);
if (!(guessNumber >= 1 && guessNumber <= 1000)) {
bootbox.alert("Error! Number should be >= 1 and <= 1000.");
$(document).on('hidden.bs.modal','.bootbox', function () {
$('#guessNumber').focus().select();
});
event.preventDefault();
return;
}
if (guessNumber < numberToGuess)
output = "<p class='bg-danger'>" + guessNumber + " - Too Low! <p/>" + output;
else if (guessNumber > numberToGuess)
output = "<p class='bg-info'>" + guessNumber + " - Too High! <p/>" + output;
else {
output = "<h4 class='alert alert-info'><strong>Congratulations! You guessed the number.</strong></h4>" + output;
input.disabled = true;
document.getElementById("guess").disabled = true;
document.getElementById("formbody").style.backgroundColor = "#BFF5BF";
play.style.visibility = "visible";
}
input.style.backgroundColor = currentColor;
document.getElementById("output").innerHTML = output;
input.select();
event.preventDefault();
}
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootbox.min.js"></script>
</body>
</html>
No comments:
Post a Comment