javascript_memory/memory.html at main · stokbroodje/javascript_memory · 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
<!DOCTYPE html>
<html>
	<head>
		<title>Memory</title>
		<link rel="stylesheet" href="css/main.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body>
		<div class ="container">
			<div class ="header">
				<div class ="menu_btn" onclick="menu()">
					<div class="line"></div>
					<div class="line"></div>
					<div class="line"></div>
				</div>
				<div class="title">Memory</div>
				<div class="restart_button">
					<img class="restart" src="img/restart.png" alt="restart button">
				</div>
			</div>
			<div class="menu" id="menu">
				<div id="theme">
					<select id="picture-select" onchange="onSelect()">
						<option value="dog">Doggos</option>
						<option value="cat">Kitties</option>
					</select>
					<label for="theme">Select a theme</label>
				</div>
				<div id="card_color">
					<input type="color" id="closed_card" name="closed_card" value="#df9a06" onchange="colorChange()">
					<label for="closed_card">Closed card</label><br>
					<input type="color" id="found_card" name="found_card" value="#df9a06" onchange="colorChange()">
					<label for="found_card">Found card</label>
				</div>
			</div>
			<div class="game_state">
				<span id='login'></span>
				<div id="game_time">Time: 0sec</div>

				<div id="found_pairs">Pairs: <span id='pairs'>0</span></div>
				<div id="progress_bar"></div>
			</div>

			<div aria-label="game board" class ="game_board" id="game_board">

			</div>
			<div class ="footer">
				<div class="high_scores">
					<h2> Top 5 </h2>
					<ul id="top_5" aria-label="Top 5">
					</ul>
				</div>
				<div id="average_time"><h2>Average playtime: 420s</h2></div>
			</div>
		</div>
		<script type="text/javascript" src="backend.js"></script>
		<script type="text/javascript" src="memory.js"></script>
	></script>
	</b