Skip to content

Commit aec7037

Browse files
gomitogomitogomitogomito
committed
finished arnie greeter
1 parent c5bf623 commit aec7037

24 files changed

+30
-26
lines changed

‎01 - JavaScript Drum Kit/.index-START.html.swp

-12 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/images/bg.gif

210 KB
Loading

‎01 - JavaScript Drum Kit/images/pantydogs.jpg

-198 KB
Binary file not shown.

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

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>JS Drum Kit</title>
5+
<title>Arnie's conversation guide</title>
66
<link rel="stylesheet" href="style.css">
77
</head>
88
<body>
@@ -11,67 +11,71 @@
1111
<div class="keys">
1212
<div data-key="65" class="key">
1313
<kbd>A</kbd>
14-
<span class="sound">clap</span>
14+
<span class="sound">hello cutie pie</span>
1515
</div>
1616
<div data-key="83" class="key">
1717
<kbd>S</kbd>
18-
<span class="sound">hihat</span>
18+
<span class="sound">nice to meet you</span>
1919
</div>
2020
<div data-key="68" class="key">
2121
<kbd>D</kbd>
22-
<span class="sound">kick</span>
22+
<span class="sound">who are you?</span>
2323
</div>
2424
<div data-key="70" class="key">
2525
<kbd>F</kbd>
26-
<span class="sound">openhat</span>
26+
<span class="sound">what do you want?</span>
2727
</div>
2828
<div data-key="71" class="key">
2929
<kbd>G</kbd>
30-
<span class="sound">boom</span>
30+
<span class="sound">what's the matter?</span>
3131
</div>
3232
<div data-key="72" class="key">
3333
<kbd>H</kbd>
34-
<span class="sound">ride</span>
34+
<span class="sound">Fuck you asshore</span>
3535
</div>
3636
<div data-key="74" class="key">
3737
<kbd>J</kbd>
38-
<span class="sound">snare</span>
38+
<span class="sound">no problemo</span>
3939
</div>
4040
<div data-key="75" class="key">
4141
<kbd>K</kbd>
42-
<span class="sound">tom</span>
42+
<span class="sound">good bye</span>
4343
</div>
4444
<div data-key="76" class="key">
4545
<kbd>L</kbd>
46-
<span class="sound">tink</span>
46+
<span class="sound">I'll be back</span>
4747
</div>
4848
</div>
4949

50-
<audio data-key="65" src="sounds/clap.wav"></audio>
51-
<audio data-key="83" src="sounds/hihat.wav"></audio>
52-
<audio data-key="68" src="sounds/kick.wav"></audio>
53-
<audio data-key="70" src="sounds/openhat.wav"></audio>
54-
<audio data-key="71" src="sounds/boom.wav"></audio>
55-
<audio data-key="72" src="sounds/ride.wav"></audio>
56-
<audio data-key="74" src="sounds/snare.wav"></audio>
57-
<audio data-key="75" src="sounds/tom.wav"></audio>
58-
<audio data-key="76" src="sounds/tink.wav"></audio>
50+
<audio data-key="65" src="sounds/hello_cutie.wav"></audio>
51+
<audio data-key="83" src="sounds/nice_2_meet_u.wav"></audio>
52+
<audio data-key="68" src="sounds/who_are_you.wav"></audio>
53+
<audio data-key="70" src="sounds/what_want.wav"></audio>
54+
<audio data-key="71" src="sounds/whats_the_matter.wav"></audio>
55+
<audio data-key="72" src="sounds/t1_fu.wav"></audio>
56+
<audio data-key="74" src="sounds/t2_no_problemo.wav"></audio>
57+
<audio data-key="75" src="sounds/t2_goodbye.wav"></audio>
58+
<audio data-key="76" src="sounds/t1_be_back.wav"></audio>
5959

6060
<script>
61-
window.addEventListener('keydown', function(e){
62-
playSound(e);
63-
});
61+
window.addEventListener('keydown', playSound);
6462

6563
function playSound(e){
6664
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
67-
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
6865
if (!audio) return;
66+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
6967
audio.currentTime = 0;
7068
audio.play();
7169
key.classList.add('playing');
7270
}
7371

7472
const keys = document.querySelectorAll('.key');
73+
keys.forEach( key => key.addEventListener('transitionend', removeTransition) );
74+
75+
function removeTransition(e){
76+
if (e.propertyName !== 'transform') return;
77+
this.classList.remove('playing');
78+
}
7579
</script>
7680

7781

‎01 - JavaScript Drum Kit/sounds/boom.wav

-130 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/clap.wav

-63.4 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/hello_cutie.wav

17.6 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/hihat.wav

-50.9 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/kick.wav

-15.2 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/nice_2_meet_u.wav

11.8 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/openhat.wav

-238 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/ride.wav

-429 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/snare.wav

-32.6 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/t1_be_back.wav

11.4 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/t1_fu.wav

18.6 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/t2_goodbye.wav

8.72 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/t2_hasta_la_vista.wav

27 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/t2_no_problemo.wav

11 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/tink.wav

-5.32 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/tom.wav

-105 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/what_want.wav

9.65 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/whats_the_matter.wav

9.99 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/sounds/who_are_you.wav

7.65 KB
Binary file not shown.

‎01 - JavaScript Drum Kit/style.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
html {
22
font-size: 10px;
3-
background:url(http://0.0.0.0:8000/images/pantydogs.jpg) bottom center;
3+
background:url(images/bg.gif) bottom center;
44
background-size: cover;
55
}
66
body,html {
@@ -23,7 +23,7 @@ body,html {
2323
margin:1rem;
2424
font-size: 1.5rem;
2525
padding:1rem .5rem;
26-
transition:all .07s;
26+
transition:all .57s;
2727
width:100px;
2828
text-align: center;
2929
color:white;
@@ -32,7 +32,7 @@ body,html {
3232
}
3333

3434
.playing {
35-
transform:scale(1.1);
35+
transform:scale(1.1) rotate(90deg) scaleY(5);
3636
border-color:#ffc600;
3737
box-shadow: 0 0 10px #ffc600;
3838
}

0 commit comments

Comments
 (0)