-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwordMatch.html
89 lines (87 loc) · 2.82 KB
/
wordMatch.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
<!DOCTYPE html>
<html>
<head>
<title>Word Match</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<style type="text/css">
.wrapper{
background-image: url('css/bg.gif');
width: 100%;
color: #fff;
}
.bullet{
width:20px;
height:20px;
border:#6c757d 2px solid;
border-radius:20px;
background-color: #010e19;
}
.bullet2{
width:20px;
height:20px;
border:#6c757d 2px solid;
border-radius:20px;
float:right;
margin-top: -20px;
background-image:radial-gradient(#010e19, #010e19, brown)
}
.w{
box-shadow: 0px 3px 2px 0px;
}
</style>
<body class="wrapper">
<div>
<header class="bg-secondary p-2 text-center text-light shadow mb-3"><h1>Word Match</h1></header>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 mx-auto text-center">
<p class="lead">Type the given word in <span class="text-danger font-weight-bold" id="level">5</span> Seconds </p>
<div class="border rounded w border-secondary p-1 mb-5 mx-auto bg-light text-dark" style="width: 60%;">
<div class="bullet"></div>
<div class="bullet2"></div>
<h1 class="wordOutput"> </h1>
</div>
<!-- <button class="btn btn-lg m-2 py-3 px-4 rounded-circle border rounded text-light" id="play"><i class="fa fa-play fa-lg"></i> </button> -->
<div class="form-group mt-2">
<input type="text" id="word_input" class="form-control form-control-lg rounded" placeholder="Start typing...." autofocus>
<h3 id="message" class="mt-3"></h3>
</div>
<div class="row mt-3">
<div class="col-4 mt-3">
<h4>Time left: <span id="time_countDown">0</span></h4>
</div>
<div class="col-4 mt-3">
<h4>Score: <span id="score">0</span></h4>
</div>
<div class="col-4 mt-3">
<h4> Highscore: <span id="highScore">0</span></h4>
</div>
</div>
<div class="row ">
<div class="col-md-6 mt-3 mx-auto">
<div class="form-group m-1">
<label for="speedLevel" class="font-weight-bold">Level </label><br>
<select id="speedLevel" name="speedLevel" >
<option value="5">Easy</option>
<option value="3">Medium</option>
<option value="2">Hard</option>
</select>
</div>
<div class="bg-secondary rounded p-2 border mt-2 text-center p-1" style="width:%">
<span class="lead font-weight-bold">Instruction</span>
<p>Type each word in the given amount of seconds to score <br>
words are chosen radomly so, some words might be repeated
Highscore is displayed, see if you can beat it.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="scripts/wordGame.js"></script>
</body>
</html>