-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (136 loc) · 6.07 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!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>Guess The Number - HarryUK</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<style>
body {
background-color: rgb(0, 222, 155);
background-image: url(https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fnetdna.webdesignerdepot.com%2Fuploads7%2Ffree-osx-mavericks-wallpaper%2Fosx_hero_2x.jpg&f=1);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
nav.navbar {
padding-top: 20px;
padding-bottom: 20px;
position: sticky;
top: 0px;
}
.jumbotron {
background-color:rgba(0,0,0,0.50);
color:white;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
-webkit-animation: zoomIn 1.2s ease;
animation: zoomIn 1.2s ease;
}
.ts {
background-color:rgba(0,0,0,0.50);
color:white;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
-webkit-animation: fadeInDown 1s ease;
animation: fadeInDown 1s ease;
border-bottom-width: 0px;
}
.st {
background-color:rgba(0,0,0,0.50);
color:white;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
-webkit-animation: fadeInUp 1s ease;
animation: fadeInUp 1s ease;
border:0px;
}
</style>
</head>
<body style="text-align:center">
<div class="page">
<nav style="padding-bottom" class="ts navbar-static-top navbar-default navbar">
<h1>HarryUK</h1>
<p>I'm hosted on GitHub</p>
</nav>
<div class="container">
<div class="jumbotron" style="margin-top:20px">
<noscript>
<h1>You're not using JS so this project wont work</h1>
</noscript>
<h1 style="margin-bottom:0px">Number Game</h1>
<p>A game for the bored.</p>
<form class="form-inline text-center" id="form" style="margin-top:40px">
<div class="form-group">
<label for="guess">Guess The Number:</label>
<input id="guess" autocomplete="off" placeholder="Number here" type="number" required class="form-control">
<button type="submit" onclick="yourGuess()" class="btn btn-default">Submit</button>
</div>
</form>
<div>
<h4 style="padding-bottom:20px">Answer:</h4>
<h5 id="output" name="output" rows="7" style="width: 50%;margin-left:25%">Submit Your Guess</h5>
</div>
</div>
<!--<div class="jumbotron">
<h1>Documentation</h1>
<p>Here is the Documentation for this project</p>
<a href="..." class="btn btn-primary">Documentation</a>
</div>
-->
</div>
<nav class="navbar-static-bottom navbar navbar-default st" style="margin-bottom: 0px;">
<p class="logo-brand">Guessing Game coded by Harry Carrigan with help from Samuel Thomas Elliott and Jared Farrish.<br />
<span style="font-weight:bolder">View on GitHub</span><a href="https://github.com/HarryUK/Guessing-Game"> <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn1.iconfinder.com%2Fdata%2Ficons%2Fsocial-media-and-logos-8%2F32%2Fgithub_social_media_online_logo-512.png&f=1" style="width:40px;" class="brand-logo"></a></p>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
var nmbr = 0;
function yourGuess() {
guess = document.getElementById("guess").value;
guesses = document.getElementById("output");
nmbr++;
if(guess > 20) {
document.getElementById("output").innerHTML = "Max is 20";
}
else if (guess == numToGuess) {
if(nmbr == 1){ guesses.textContent = guesses.textContent = "\n" + "You have guessed it correctly first time!" + " " + guess;
}
else if(nmbr > 20){ guesses.textContent = "\n...wow 20 guesses...well at least you got it: " + guess;
}
else if(nmbr > 10){ guesses.textContent = guesses.textContent = "\n" + "Took you a while but you got it" + " " + guess;
}
else {
guesses.textContent = guesses.textContent = "\n" + "You have guessed correctly" + " " + guess ;
}
} else if (guess > numToGuess) {
guesses.textContent = guesses.textContent = "\n" + "You're guessing too high" + " " + guess ;
} else {
guesses.textContent = guesses.textContent = "\n" + "You're guessing too low" + " " + guess ;
}
$("#output").animate({ scrollTop: $("#output")[0].scrollHeight })
}
function showNumberToGuess() {
if (document.getElementById('cheat').checked) {
document.getElementById('numberToGuess').value = numToGuess;
document.getElementById('cheatShow').style.display = 'inline';
}
}
function firsttry() {
alert
}
var numToGuess = Math.floor(Math.random()*20);
$("#form").on("submit", function(event) {
event.preventDefault();
return false;
});
$("#output").animate({ scrollTop: $("#output")[0].scrollHeight })
</script>
</div>
</div>
</div>
</body>
</html>