Hangman/index.html at master · dinhnerz/Hangman · GitHub

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
<!-- dinhnluong@gmail.com
	last updated : 08.31.2018 -->

	<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"></link>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/main.css"></link>
		<title>LinkedIn Reach Program Coding Challenge 2018</title>
	</head>
		<body>
			<nav class="navbar-fixed-top navbar navbar-inverse">
				<div class = "col-md-8 col-md-offset-2" align="center">
					<div class="container-fluid">
						<div class="navbar-header">
							<div class="navbar-Hangman">LinkedIn Coding Challenge</div>
						</div>
						<div class="nav navbar-nav" align="center" style="padding-top: 8px;"><font color="white">
							<b>Difficulty Level: </b>
							<form>
								<label class="radio-inline"><input type="radio" id="diffEasy" name="diffLevel" checked>Easy</label>
								<label class="radio-inline"><input type="radio" id="diffMedium" name="diffLevel">Medium</label>
								<label class="radio-inline"><input type="radio" id="diffHard" name="diffLevel">Hard</label>
							</form></font>
						</div>
						<div class="navbar-form navbar-left">
							<div class="form-group">
								<input class="form-control" type="text" id="userName" maxlength="10" placeholder="Name">
							</div>
							<button type="button" class="btn btn-success " id="Start">New Game</button>
						</div>
					</div>
				</div>
			</nav>
			<div id="main-outer">
				<!-- Main DIV -->
				<div class="col-md-9 col-md-offset-2">
					<!-- Main Left Column -->
					<div class="well col-md-8">
						<!-- Title DIV -->
						<div class="Title col-md-12" align="center"><h2><font color="#0077B5"><b>Hangman</b></font></h2></div>
						<div class="col-md-12" align="center" id="message" style="padding: 5px;"><b>LinkedIn Coding Challenge</b></div>
						<!-- Hangman IMG DIV -->
						<div class="col-md-7" align="center">
							<div class="col-md-12" align="center" id="imgHangman">
								<img src="images/HangmanStart.png" style="width:200px;height:200px;">
							</div>
							<!-- Word Guessed -->
							<div class="col-md-12" align="center" id="word"><font size="5px"><b>Dinh Luong</b></font></div>
							<!-- Guess Left -->
							<div class="col-md-12" align="center" id="guess"><font size="4px"><b>Guesses Left: </b></font><font size="4px" color="#0077B5"><b>6</font></b></div>
							<!-- Score -->
							<div class="col-md-12" align="center" id="score"><font size="4px"><b>Score: </b></font><font size="4px" color="#0077B5"><b>0</font></b></div>
						</div>
						<!-- Character DIV -->
						<div class="IMG col-md-5" align="center">
							<div class="col-md-12" align="center" id="Characters">
							</div>
							<div class="col-md-12 navbar-form navbar-left" align="center">
								<input class="form-control" type="text" id="guessWord" maxlength="10" placeholder="Guess Full Word" size="15">
							</div>
							<div class="col-md-12" align="center">
								<button type="button" id="hint" class="btn btn-info">hint</button>
							</div>
						</div>
					</div> <!-- Main Left Column ends -->
					<!-- Main Right Column -->
					<div class="well col-md-4" align="center">
						<div align="center"><font size="5" color="#0077B5"><b>Leader Board</b></font><hr></div>
						<table>
							<thead>
								<tr>
									<th style="width: 25px"><div id="rank">#</div></th>
									<th style="width: 125px"><div id="name">Name</div></th>
									<th style="width: 75px"><div id="score">Score</div></th>
								</tr>
							</thead>
							<tbody id="leaderBoard">
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<script type="text/javascript" src="js/hangman.js"></script>
			<script type="text/javascript" src="js/append.js"></script>
		</body>
		</html>