-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (119 loc) · 5.34 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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Calvin Heath Quote Machine</title>
<script>
function play(str) {
if (str === "q" || str === "Q") {
document.getElementById('display').innerText = "By Walt Disney";
} else if (str === "w" || str === "W") {
document.getElementById('display').innerText = "By Eleanor Roosevelt";
} else if (str === "e" || str === "E") {
document.getElementById('display').innerText = "By Helen Keller";
} else if (str === "a" || str === "A") {
document.getElementById('display').innerText = "By Anne Frank";
} else if (str === "s" || str === "S") {
document.getElementById('display').innerText = "By Dr. Seuss";
} else if (str === "d" || str === "D") {
document.getElementById('display').innerText = "By Dalai Lama";
} else if (str === "z" || str === "Z") {
document.getElementById('display').innerText = "By Tony Robbins";
} else if (str === "x" || str === "X") {
document.getElementById('display').innerText = "By Estee Lauder";
} else if (str === "c" || str === "C") {
document.getElementById('display').innerText = "By Calvin James Heath";
}
var audio = document.getElementById(str);
audio.play();
}
window.document.onkeyup = function(event) {
let keystroke = event.key
if (keystroke === "q" || keystroke === "Q") {
play("Q");
} else if (keystroke === "w" || keystroke === "W") {
play("W");
} else if (keystroke === "e" || keystroke === "E") {
play("E");
} else if (keystroke === "a" || keystroke === "A") {
play("A");
} else if (keystroke === "s" || keystroke === "S") {
play("S");
} else if (keystroke === "d" || keystroke === "D") {
play("D");
} else if (keystroke === "z" || keystroke === "Z") {
play("Z");
} else if (keystroke === "x" || keystroke === "X") {
play("X");
} else if (keystroke === "c" || keystroke === "C") {
play("C");
}
}
</script>
</head>
<body>
<div class="container" id="drum-machine">
<h1 class="text-center"><u>Calvin Heath Quote Machine</u></h1>
<div class="card my-3">
<div class="card-body">
<div class="text-center" id="display">Nothing Yet to Display</div>
</div>
</div>
<button class="drum-pad btn btn-block btn-info" id="drum-0" onclick="play('Q')">
Q
<audio src="./clip/Q.m4a" class="clip" id="Q">
</button>
<button class="drum-pad btn btn-block btn-info" id="drum-1" onclick="play('W')">
W
<audio src="./clip/W.m4a" class="clip" id="W">
</button>
<button class="drum-pad btn btn-block btn-info" id="drum-2" onclick="play('E')">
E
<audio src="./clip/E.m4a" class="clip" id="E">
</button>
<button class="drum-pad btn btn-block btn-info" id="drum-3" onclick="play('A')">
A
<audio src="./clip/A.m4a" class="clip" id="A">
</button>
<button class="drum-pad btn btn-block btn-info" id="drum-4" onclick="play('S')">
S
<audio src="./clip/S.m4a" class="clip" id="S">
</button>
<button class="drum-pad btn btn-block btn-info" id="drum-5" onclick="play('D')">
D
<audio src="./clip/D.m4a" class="clip" id="D">
</button>
<button class="drum-pad btn btn-block btn-info" id="drum-6" onclick="play('Z')">
Z
<audio src="./clip/Z.m4a" class="clip" id="Z">
</button>
<button class="drum-pad btn btn-block btn-info" id="drum-7" onclick="play('X')">
X
<audio src="./clip/X.m4a" class="clip" id="X">
</button>
<button class="drum-pad btn btn-block btn-info" id="drum-8" onclick="play('C')">
C
<audio src="./clip/C.m4a" class="clip" id="C">
</button>
</div>
<style>
body{
background: rgb(241,223,11);
background: linear-gradient(90deg, rgba(241,223,11,1) 0%, rgba(35,245,38,1) 17%, rgba(253,29,82,1) 50%, rgba(135,30,30,1) 72%, rgba(231,11,11,1) 92%);
}
h1{
color: #ffffff;
}
</style>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>