-
Notifications
You must be signed in to change notification settings - Fork 0
/
pres2.html
110 lines (92 loc) · 3.57 KB
/
pres2.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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Marvel charec</title>
<!-- Bootstrap is used to make game look nicer -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
.top {
justify-content: center;
align-items: center;
width: 50%;
padding-top: 15px;
}
.blankSpaces{
display: inline-block;
width: 20px;
}
</style>
</head>
<body>
<div
class="lg-image"
style="
object-fit: fill;
background-image: url(./natlan-landscape.jpg);
height: 100vh;
"
>
<!-- Bootstrap Container will hold everything -->
<!-- Game counters all held here. cards are being used to hold various sections. -->
<div class="container top">
<div class="row">
<div class="col-lg-12">
<!-- First card: Holds the Word to Guess (blanks and guessed word) -->
<div class="card">
<div class="card-header">
<h3 class="card-title"><strong>Guess the Character!</strong></h3>
</div>
<div class="card-body">
<!-- This h3 section called wordblanks is what we'll be replacing with letters as the user guesses.
Pay particular attention to the id called ***wordblanks***. We'll be referencing this in the JavaScript. -->
<h3 id="word-blanks">_ _ _ _ _ _ _ _ _ </h3>
</div>
</div>
<!-- Second card: Holds the list of Wrong User Guesses. -->
<div class="card">
<div class="card-body">
<!-- This span section called userGuesses is where we will be dumping the wrong guesses.
Pay particular attention to the id called ****userGuesses***. We'll be referencing this in the JavaScript. -->
<strong>Wrong Guesses: </strong> <span id="wrong-guesses"></span>
</div>
</div>
<!-- Third card: Holds the Number of Wrong Guesses -->
<div class="card">
<div class="card-body">
<!-- This span called guessesLeft is where we will be dumping the number of guesses left.
Pay attention to the id called ****guessesLeft****. We'll be referencing this in the JavaScript. -->
<strong>Guesses Left: </strong> <span id="guesses-left">9</span>
</div>
</div>
<!-- Fourth card: Holds the number of Wins. -->
<div class="card">
<div class="card-body">
<!-- This span called winCounter is where we'll be dumping the number of wins.
Pay attention to the id called ****winCounter***. We'll be referencing this in the JavaScript. -->
<strong>Wins: </strong> <span id="win-counter">0</span>
</div>
</div>
<!-- Fifth card: Holds the number of Losses. -->
<div class="card">
<div class="card-body">
<!-- This span called winCounter is where we'll be dumping the number of wins.
Pay attention to the id called ****winCounter***. We'll be referencing this in the JavaScript. -->
<strong>Losses: </strong> <span id="loss-counter">0</span>
</div>
</div>
<div class="card">
<div class="card-body">
<strong>Timer</strong> <span id="TimerDisplay"><body ></body></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Adds a link to the javascript file. Loaded at the bottom so it waits for the HTML content to display first.
If you put this at the top it will crash, because the HTML IDs won't exist yet.-->
<script src="./pres.js"></script>
</body>
</div>
</html>