forked from lzha97/spelling_bee
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathspelling_bee.html
66 lines (53 loc) · 3.23 KB
/
spelling_bee.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
<!DOCTYPE html>
<html>
<head>
<title>Spelling Bee</title>
<link rel="stylesheet" href = "spelling_bee.css">
<link rel="icon" href="/cute_bee.png" type="image/icon type">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto+Slab:300,400,500,600,700&display=swap" rel="stylesheet">
</head>
<body onload="get_valid_words()" onkeydown="input_from_keyboard(event)">
<h1> Spelling Bee Game</h1>
<!-- NOTIFICATIONS -->
<div class="container" style="height:50px; align-items:center;">
<div>
<p id="too-short" class="notifications">Too Short</p>
<p id="good" class="notifications">Good! <span class="points"></span></p>
<p id="great" class="notifications">Great! <span class="points"></span></p>
<p id="amazing" class="notifications">Amazing! <span class="points"></span></p>
<p id="pangram" class="notifications">Pangram! <span class="points"></span></p>
<p id="already-found" class="notifications">Already Found</p>
<p id="invalid-word" class="notifications">Invalid Word</p>
<p id="miss-center" class="notifications">Missing Center Letter</p>
</div>
</div>
<!-- INPUT WORD -->
<div class="cursor">
<p id="inputword" style="display:flex;"> <span id="testword"></span><span id="cursor">|</span></p>
</div>
<!-- <div class="cursor" style="height:40px; text-align:center; display:flex-inline; justify-content:center; margin-bottom:360px;"> -->
<!-- HEXAGON GRID -->
<div style="display:flex; flex-direction:column; align-items:center;">
<ul id="hexGrid"></ul>
<div class="button_container">
<button id="submit_button" type="button" class="button" onclick="submitWord()">Enter</button>
<button id="shuffle_button" type="button" class="button" onclick="shuffleLetters()">
<img src="shuffle_icon.png" style="width:1.2em">
</button>
<button id="delete_button" type="button" class="button" onclick="deleteLetter()">Delete</button>
<!--<i style="align-self:center;"></i>-->
</div>
</div>
<div class="container" style="height:400px; justify-content:normal;" id="scoreboard">
<div class="scoreText" style="margin-bottom:8px;">You have found <span id="numfound">0</span> word(s).</div>
<div class="scoreText" style="margin-bottom:8px;">Score: <span id="score">0</span>/<span id="maxscore">0</span>.</div>
<div style=" font-family: 'Open Sans', sans-serif; align-self:center; font-size: 15px; font-style:bold; text-decoration: underline;">Words Discovered</div>
<div id="discoveredText" >
</div>
</div>
</body>
</html>
<script type="text/javascript" src="spelling_bee.js"></script>