Visitar URL original
Completed 01 · wesbos/JavaScript30@1ea5f63 · GitHub
Skip to content

Commit 1ea5f63

Browse files
No3xNo3x
committed
Completed 01
1 parent 38a754c commit 1ea5f63

2 files changed

Lines changed: 14 additions & 13 deletions

File tree

‎01 - JavaScript Drum Kit/index-FINISHED.html‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -58,23 +58,24 @@
5858
<audio data-key="76" src="sounds/tink.wav"></audio>
5959

6060
<script>
61-
function removeTransition(e) {
62-
if (e.propertyName !== 'transform') return;
63-
e.target.classList.remove('playing');
64-
}
6561

6662
function playSound(e) {
6763
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
6864
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
69-
if (!audio) return;
70-
71-
key.classList.add('playing');
72-
audio.currentTime = 0;
73-
audio.play();
65+
if(null != audio) {
66+
key.classList.add("playing");
67+
audio.currentTime = 0;
68+
audio.play();
69+
}
7470
}
75-
76-
const keys = Array.from(document.querySelectorAll('.key'));
77-
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
71+
72+
function removeHighlight(e) {
73+
this.classList.remove("playing");
74+
}
75+
76+
keys = document.querySelectorAll(".key");
77+
keys.forEach( key => key.addEventListener("transitionend", removeHighlight));
78+
7879
window.addEventListener('keydown', playSound);
7980
</script>
8081

‎01 - JavaScript Drum Kit/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
html {
22
font-size: 10px;
3-
background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
3+
background:url(https://i.imgur.com/b9r5sEL.jpg) bottom center;
44
background-size: cover;
55
}
66
body,html {

0 commit comments

Comments
 (0)