-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
62 lines (58 loc) · 3.02 KB
/
index.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
<html>
<head>
<!-- load bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- load the javascript -->
<script type="text/javascript" src="file.js"></script>
<!-- Import Font Awesome -->
<script src="https://use.fontawesome.com/11a80f23ff.js"></script>
<!-- import google fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!-- load the stylesheet -->
<link rel="stylesheet" href="main.css" />
<!-- load the testing javascript -->
<script src = "file.js"></script>
</head>
<body>
<div class="container">
<div class="text">
<input type="password" class="EmmaJennaPASS"/>
<p class="keytext"><span>Click the piano or type to discover tones.</span></p>
<div class="octaves">
<button type="button" class="btn" onclick="decOctave()">Decrease Octave</button>
<span class="octave">Current Octave: 0</span>
<button type="button" class="btn" onclick="incOctave()">Increase Octave</button>
</div>
</div>
<!-- octaves -->
<svg id="piano" >
<rect class="white-key" id="C" onclick="pink()"></rect>
<rect class="white-key" id="D" onclick="pink()" x="50"></rect>
<rect class="white-key" id="E" onclick="pink()" x="100"></rect>
<rect class="white-key" id="F" onclick="pink()" x="150"></rect>
<rect class="white-key" id="G" onclick="pink()" x="200"></rect>
<rect class="white-key" id="A" onclick="pink()" x="250"></rect>
<rect class="white-key" id="B" onclick="pink()" x="300"></rect>
<rect class="white-key" id="C2" onclick="pink()" x="350"></rect>
<rect class="white-key" id="D2" onclick="pink()" x="400"></rect>
<rect class="white-key" id="E2" onclick="pink()" x="450"></rect>
<rect class="white-key" id="F2" onclick="pink()" x="500"></rect>
<rect class="white-key" id="G2" onclick="pink()" x="550"></rect>
<rect class="white-key" id="A2" onclick="pink()" x="600"></rect>
<rect class="white-key" id="B2" onclick="pink()" x="650"></rect>
<!-- black keys begin -->
<rect class="black-key" id="C#" onclick="pinkblack()" x="35"></rect>
<rect class="black-key" id="D#" onclick="pinkblack()" x="85"></rect>
<rect class="black-key" id="F#" onclick="pinkblack()" x="185"></rect>
<rect class="black-key" id="G#" onclick="pinkblack()" x="235"></rect>
<rect class="black-key" id="A#" onclick="pinkblack()" x="285"></rect>
<rect class="black-key" id="C#2" onclick="pinkblack()" x="385"></rect>
<rect class="black-key" id="D#2" onclick="pinkblack()" x="435"></rect>
<rect class="black-key" id="F#2" onclick="pinkblack()" x="535"></rect>
<rect class="black-key" id="G#2" onclick="pinkblack()" x="585"></rect>
<rect class="black-key" id="A#2" onclick="pinkblack()" x="635"></rect>
<!-- <rect class="black-key" x="535"></rect> -->
</svg>
</div>
</body>
</html>