-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
178 lines (151 loc) · 6.94 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Very important for responsive design -->
<title>Paw Patrol</title>
<link rel="stylesheet" href="style.css">
<!--This links to the css file -->
<script src="javascript.js" type="text/javascript"></script>
<!-- This is to link to the JS file -->
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaijaan" rel="stylesheet"> <!-- Font stylesheet reference -->
</head>
<body>
<div class="bg">
<img src="https://i.postimg.cc/VvvGY1Yg/paw-patrolbg.jpg" height=100% width=100% alt=""> <!-- BG image set to fill the page -->
</div>
<div class="wrapper">
<!-- Wrapper of the grid -->
<div class="keys">
<!-- This is the grid of the pups -->
<!-- Use keycode.info to determine the key values -->
<!-- Chase -->
<button id="bt" type="button"
onclick="javascript:playSoundClick('assets/audio/chase-audio.wav');">
<div data-key="49" class="key-chase">
<kbd>
<img src="https://i.postimg.cc/MG3LLd2g/chase.png" height=80% width=80% alt="It's Chase! Press 1 to hear from the police pup">
</kbd>
<span class="sound">1</span>
</div>
</button>
<!-- Marshall -->
<button id="bt" type="button"
onclick="javascript:playSoundClick('assets/audio/marshall-audio.wav');">
<div data-key="50" class="key-marshall">
<kbd>
<img src="https://i.postimg.cc/h4dYCLC3/marshall.png" height=80% width=80% alt="It's Marshall! Press 2 to hear from the fire pup">
</kbd>
<span class="sound">2</span>
</div>
</button>
<!-- Skye -->
<button id="bt" type="button"
onclick="javascript:playSoundClick('assets/audio/skye-audio.wav');">
<div data-key="51" class="key-skye">
<kbd>
<img src="https://i.postimg.cc/C1WQh5KN/skye.png" height=85% width=85% alt="It's Skye! Press 3 to hear from the flying pup">
</kbd>
<span class="sound">3</span>
</div>
</button>
<!-- Rubble -->
<button id="bt" type="button"
onclick="javascript:playSoundClick('assets/audio/rubble-audio.wav');">
<div data-key="52" class="key-rubble">
<kbd>
<img src="https://i.postimg.cc/d3rSLFkK/rubble.png" height=80% width=80% alt="It's Rubble! Press 4 to hear from the construction pup">
</kbd>
<span class="sound">4</span>
</div>
</button>
<!-- Rocky -->
<button id="bt" type="button"
onclick="javascript:playSoundClick('assets/audio/rocky-audio.wav');">
<div data-key="53" class="key-rocky">
<kbd>
<img src="https://i.postimg.cc/8zvPNKbQ/rocky.png" height=70% width=70% alt="It's Rocky! Press 5 to hear from the recycling pup">
</kbd>
<span class="sound">5</span>
</div>
</button>
<!-- Zuma -->
<button id="bt" type="button"
onclick="javascript:playSoundClick('assets/audio/zuma-audio.wav');">
<div data-key="54" class="key-zuma">
<kbd>
<img src="https://i.postimg.cc/5NWRDXT9/zuma.png" height=80% width=80% alt="It's Zuma! Press 6 to hear from the water pup">
</kbd>
<span class="sound">6</span>
</div>
</button>
</div>
</div>
<!-- These are all the audio clips -->
<audio data-key="49" src="assets/audio/chase-audio.wav"></audio>
<audio data-key="50" src="assets/audio/marshall-audio.wav"></audio>
<audio data-key="51" src="assets/audio/skye-audio.wav"></audio>
<audio data-key="52" src="assets/audio/rubble-audio.wav"></audio>
<audio data-key="53" src="assets/audio/rocky-audio.wav"></audio>
<audio data-key="54" src="assets/audio/zuma-audio.wav"></audio>
<script>
function removeTransition(e) {
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing');
}
function playSound(e) {
var audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
var key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audio) return; // Stops function if there are no keys that match
key.classList.add('playing'); // This is what causes the transform on the pups
audio.currentTime = 0;
audio.play();
}
var keysChase = document.querySelectorAll('.key-chase'); // Selects Chase div
keysChase.forEach(key => key.addEventListener('transitionend', removeTransition)); // This plays the pup's position
keysChase.forEach(key => key.addEventListener("click", function() {
document.querySelector(".key-chase").classList.add("playing");
console.log("Chase");
})); // This logs the pup name in the console
var keysMarshall = document.querySelectorAll('.key-marshall'); // Selects Marshall div
keysMarshall.forEach(key => key.addEventListener('transitionend', removeTransition));
keysMarshall.forEach(key => key.addEventListener("click", function() {
document.querySelector(".key-marshall").classList.add("playing");
console.log("Marshall");
}));
var keysSkye = document.querySelectorAll('.key-skye'); // Selects Skye div
keysSkye.forEach(key => key.addEventListener('transitionend', removeTransition));
keysSkye.forEach(key => key.addEventListener("click", function() {
document.querySelector(".key-skye").classList.add("playing");
console.log("Skye");
}));
var keysRubble = document.querySelectorAll('.key-rubble'); // Selects Rubble
keysRubble.forEach(key => key.addEventListener('transitionend', removeTransition));
keysRubble.forEach(key => key.addEventListener("click", function() {
document.querySelector(".key-rubble").classList.add("playing");
console.log("Rubble");
}));
var keysRocky = document.querySelectorAll('.key-rocky'); // Selects Rocky
keysRocky.forEach(key => key.addEventListener('transitionend', removeTransition));
keysRocky.forEach(key => key.addEventListener("click", function() {
document.querySelector(".key-rocky").classList.add("playing");
console.log("Rocky");
}));
var keysZuma = document.querySelectorAll('.key-zuma'); // Selects Zuma
keysZuma.forEach(key => key.addEventListener('transitionend', removeTransition));
keysZuma.forEach(key => key.addEventListener("click", function() {
document.querySelector(".key-zuma").classList.add("playing");
console.log("Zuma");
}));
window.addEventListener('keydown', playSound); // This plays the audio clip on key keydown
function playSoundClick(path) { // This plays the audio clip on mouse click of the button
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', path);
// This last bit of code should stop the mouse click spam. Instead audioElement returns as "<audio src="assets/audio/marshall-audio.wav"></audio>"
// While the working version of audio on button click returns "<audio src="assets/audio/marshall-audio.wav"></audio>"
audioElement.currentTime = 0;
audioElement.play();
}
</script>
</body>
</html>