Skip to content

Commit 790cbc7

Browse files
SheaCloseSheaClose
committed
created new drum kit completely from scratch
1 parent 5029405 commit 790cbc7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+121
-4
lines changed

‎10 - Hold Shift and Check Checkboxes/index-FINISHED.html renamed to ‎10HoldShiftandCheckCheckboxes/index-FINISHED.html

File renamed without changes.

‎10 - Hold Shift and Check Checkboxes/index-START.html renamed to ‎10HoldShiftandCheckCheckboxes/index-START.html

File renamed without changes.

‎11 - Custom Video Player/index.html renamed to ‎11CustomVideoPlayer/index.html

File renamed without changes.

‎11 - Custom Video Player/scripts-FINISHED.js renamed to ‎11CustomVideoPlayer/scripts-FINISHED.js

File renamed without changes.

‎11 - Custom Video Player/scripts.js renamed to ‎11CustomVideoPlayer/scripts.js

File renamed without changes.

‎11 - Custom Video Player/style.css renamed to ‎11CustomVideoPlayer/style.css

File renamed without changes.

‎12 - Key Sequence Detection/index-FINISHED.html renamed to ‎12KeySequenceDetection/index-FINISHED.html

File renamed without changes.

‎12 - Key Sequence Detection/index-START.html renamed to ‎12KeySequenceDetection/index-START.html

File renamed without changes.

‎1MYDrumkit/drums.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
body {
2+
background-image: url("public/lwcauvj39y-gabriel-barletta.jpg");
3+
background-position: center;
4+
background-repeat: no-repeat;
5+
background-size: cover;
6+
background-attachment: fixed;
7+
display: flex;
8+
justify-content: space-around;
9+
padding: 40vh 10vw;
10+
}
11+
.keys {
12+
color: white;
13+
background-color: rgba(0, 0, 0, 0.7);
14+
border-radius: 5px;
15+
width: 5vw;
16+
text-align: center;
17+
/*padding: 0px 2.5vw;*/
18+
border: 2px solid rgba(255,255,255,.7);
19+
}
20+
.desc {
21+
margin-top: -15px;
22+
margin-bottom: -2px;
23+
font-size: 15px;
24+
}
25+
.keyshadow {
26+
border: 2px solid yellow;
27+
box-shadow: 0px 0px 10px yellow;
28+
}

‎1MYDrumkit/drums.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
function playSound(e) {
2+
const key = e.keyCode
3+
, audio = document.querySelector(`audio[id="${key}"]`)
4+
, keyDiv = document.getElementById(key)
5+
if (!audio) {
6+
return;
7+
}
8+
audio.currentTime = 0;
9+
audio.play();
10+
keyDiv.classList.add("keyshadow")
11+
setTimeout(()=>{keyDiv.classList.remove("keyshadow")},100)
12+
console.log(keyDiv);
13+
}
14+
window.addEventListener("keydown", playSound)

‎1MYDrumkit/index.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>My Drum Machine</title>
6+
<link rel="stylesheet" href="drums.css">
7+
</head>
8+
<body>
9+
<div class="keys" id="65">
10+
<h1 id="key">A</h1>
11+
<h6 class="desc">boom</h6>
12+
</div>
13+
<div class="keys" id="83">
14+
<h1 id="key">S</h1>
15+
<h6 class="desc">clap</h6>
16+
</div>
17+
<div class="keys" id="68">
18+
<h1 id="key">D</h1>
19+
<h6 class="desc">hi-hat</h6>
20+
</div>
21+
<div class="keys" id="70">
22+
<h1 id="key">F</h1>
23+
<h6 class="desc">kick</h6>
24+
</div>
25+
<div class="keys" id="71">
26+
<h1 id="key">G</h1>
27+
<h6 class="desc">open-hat</h6>
28+
</div>
29+
<div class="keys" id="72">
30+
<h1 id="key">H</h1>
31+
<h6 class="desc">ride</h6>
32+
</div>
33+
<div class="keys" id="74">
34+
<h1 id="key">J</h1>
35+
<h6 class="desc">snare</h6>
36+
</div>
37+
<div class="keys" id="75">
38+
<h1 id="key">K</h1>
39+
<h6 class="desc">tink</h6>
40+
</div>
41+
<div class="keys" id="76">
42+
<h1 id="key">L</h1>
43+
<h6 class="desc">tom</h6>
44+
</div>
45+
46+
<audio src="public/boom.wav" id="65"></audio>
47+
<audio src="public/clap.wav" id="83"></audio>
48+
<audio src="public/hihat.wav" id="68"></audio>
49+
<audio src="public/kick.wav" id="70"></audio>
50+
<audio src="public/openhat.wav" id="71"></audio>
51+
<audio src="public/ride.wav" id="72"></audio>
52+
<audio src="public/snare.wav" id="74"></audio>
53+
<audio src="public/tink.wav" id="75"></audio>
54+
<audio src="public/tom.wav" id="76"></audio>
55+
56+
<script src="./drums.js"></script>
57+
</body>
58+
</html>

‎01 - JavaScript Drum Kit/sounds/boom.wav renamed to ‎1MYDrumkit/public/boom.wav

File renamed without changes.

‎01 - JavaScript Drum Kit/sounds/clap.wav renamed to ‎1MYDrumkit/public/clap.wav

File renamed without changes.

‎01 - JavaScript Drum Kit/sounds/hihat.wav renamed to ‎1MYDrumkit/public/hihat.wav

File renamed without changes.

‎01 - JavaScript Drum Kit/sounds/kick.wav renamed to ‎1MYDrumkit/public/kick.wav

File renamed without changes.

‎1MYDrumkit/public/lwcauvj39y-gabriel-barletta.jpg

5.32 MB

‎01 - JavaScript Drum Kit/sounds/openhat.wav renamed to ‎1MYDrumkit/public/openhat.wav

File renamed without changes.

‎01 - JavaScript Drum Kit/sounds/ride.wav renamed to ‎1MYDrumkit/public/ride.wav

File renamed without changes.

‎01 - JavaScript Drum Kit/sounds/snare.wav renamed to ‎1MYDrumkit/public/snare.wav

File renamed without changes.

‎01 - JavaScript Drum Kit/sounds/tink.wav renamed to ‎1MYDrumkit/public/tink.wav

File renamed without changes.

‎01 - JavaScript Drum Kit/sounds/tom.wav renamed to ‎1MYDrumkit/public/tom.wav

File renamed without changes.

‎01 - JavaScript Drum Kit/index-FINISHED.html renamed to ‎1jsDrumkit/index-FINISHED.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
<audio data-key="76" src="sounds/tink.wav"></audio>
5959

6060
<script>
61+
console.log("Shea");
6162
function removeTransition(e) {
6263
if (e.propertyName !== 'transform') return;
6364
e.target.classList.remove('playing');

‎01 - JavaScript Drum Kit/index-START.html renamed to ‎1jsDrumkit/index-START.html

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,7 @@
5757
<audio data-key="75" src="sounds/tom.wav"></audio>
5858
<audio data-key="76" src="sounds/tink.wav"></audio>
5959

60-
<script>
61-
62-
</script>
63-
60+
<script src="./js.js" charset="utf-8"></script>
6461

6562
</body>
6663
</html>

‎1jsDrumkit/js.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
window.addEventListener("keydown", function(e){
2+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
3+
, key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
4+
if (!audio) {
5+
return
6+
}
7+
8+
key.classList.add("playing")
9+
audio.currentTime = 0; // stops audio and restarts from zero
10+
audio.play(); // play's the audo file associated with the keycode
11+
12+
})
13+
function removeTransition(e){
14+
if (e.propertyName !== 'transform'){return}
15+
this.classList.remove("playing")
16+
}
17+
const keys =
18+
document.querySelectorAll('.key')
19+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

‎01 - JavaScript Drum Kit/style.css renamed to ‎1jsDrumkit/style.css

File renamed without changes.

‎02 - JS + CSS Clock/index-FINISHED.html renamed to ‎2CSSClock/index-FINISHED.html

File renamed without changes.

‎02 - JS + CSS Clock/index-START.html renamed to ‎2CSSClock/index-START.html

File renamed without changes.

‎03 - CSS Variables/index-FINISHED.html renamed to ‎3CSSVariables/index-FINISHED.html

File renamed without changes.

‎03 - CSS Variables/index-START.html renamed to ‎3CSSVariables/index-START.html

File renamed without changes.

‎04 - Array Cardio Day 1/index-FINISHED.html renamed to ‎4ArrayCardioDay1/index-FINISHED.html

File renamed without changes.

‎04 - Array Cardio Day 1/index-START.html renamed to ‎4ArrayCardioDay1/index-START.html

File renamed without changes.

‎05 - Flex Panel Gallery/index-FINISHED.html renamed to ‎5FlexPanelGallery/index-FINISHED.html

File renamed without changes.

‎05 - Flex Panel Gallery/index-START.html renamed to ‎5FlexPanelGallery/index-START.html

File renamed without changes.

‎06 - Type Ahead/index-FINISHED.html renamed to ‎6TypeAhead/index-FINISHED.html

File renamed without changes.

‎06 - Type Ahead/index-START.html renamed to ‎6TypeAhead/index-START.html

File renamed without changes.

‎06 - Type Ahead/style.css renamed to ‎6TypeAhead/style.css

File renamed without changes.

‎07 - Array Cardio Day 2/index-FINISHED.html renamed to ‎7ArrayCardioDay2/index-FINISHED.html

File renamed without changes.

‎07 - Array Cardio Day 2/index-START.html renamed to ‎7ArrayCardioDay2/index-START.html

File renamed without changes.

‎08 - Fun with HTML5 Canvas/index-FINISHED.html renamed to ‎8FunwithHTML5Canvas/index-FINISHED.html

File renamed without changes.

‎08 - Fun with HTML5 Canvas/index-START.html renamed to ‎8FunwithHTML5Canvas/index-START.html

File renamed without changes.

‎09 - Dev Tools Domination/index-FINISHED.html renamed to ‎9DevToolsDomination/index-FINISHED.html

File renamed without changes.

‎09 - Dev Tools Domination/index-START.html renamed to ‎9DevToolsDomination/index-START.html

File renamed without changes.

0 commit comments

Comments
 (0)