Skip to content

Commit 4ba905d

Browse files
author
Greg Pfaff
committed
Drum style and starting JS
1 parent b8bc9cb commit 4ba905d

File tree

2 files changed

+104
-75
lines changed

2 files changed

+104
-75
lines changed

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

Lines changed: 50 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,44 +6,47 @@
66
<link rel="stylesheet" href="style.css">
77
</head>
88
<body>
9-
10-
11-
<div class="keys">
12-
<div data-key="65" class="key">
13-
<kbd>A</kbd>
14-
<span class="sound">clap</span>
15-
</div>
16-
<div data-key="83" class="key">
17-
<kbd>S</kbd>
18-
<span class="sound">hihat</span>
19-
</div>
20-
<div data-key="68" class="key">
21-
<kbd>D</kbd>
22-
<span class="sound">kick</span>
23-
</div>
24-
<div data-key="70" class="key">
25-
<kbd>F</kbd>
26-
<span class="sound">openhat</span>
27-
</div>
28-
<div data-key="71" class="key">
29-
<kbd>G</kbd>
30-
<span class="sound">boom</span>
31-
</div>
32-
<div data-key="72" class="key">
33-
<kbd>H</kbd>
34-
<span class="sound">ride</span>
35-
</div>
36-
<div data-key="74" class="key">
37-
<kbd>J</kbd>
38-
<span class="sound">snare</span>
39-
</div>
40-
<div data-key="75" class="key">
41-
<kbd>K</kbd>
42-
<span class="sound">tom</span>
43-
</div>
44-
<div data-key="76" class="key">
45-
<kbd>L</kbd>
46-
<span class="sound">tink</span>
9+
<div class="layer">
10+
<h1>#JavaScript 30 Drum Example</h1>
11+
<div class="drums">
12+
<div class="drumkit">
13+
<div class="drum" data-key="65">
14+
<div class="drum-note">A</div>
15+
<div class="drum-sound">Clap</div>
16+
</div>
17+
<div class="drum" data-key="83">
18+
<div class="drum-note">S</div>
19+
<div class="drum-sound">HiHat</div>
20+
</div>
21+
<div class="drum" data-key="68">
22+
<div class="drum-note">D</div>
23+
<div class="drum-sound">Kick</div>
24+
</div>
25+
<div class="drum" data-key="70">
26+
<div class="drum-note">F</div>
27+
<div class="drum-sound">OpenHat</div>
28+
</div>
29+
<div class="drum" data-key="71">
30+
<div class="drum-note">G</div>
31+
<div class="drum-sound">Boom</div>
32+
</div>
33+
<div class="drum" data-key="72">
34+
<div class="drum-note">H</div>
35+
<div class="drum-sound">Ride</div>
36+
</div>
37+
<div class="drum" data-key="74">
38+
<div class="drum-note">J</div>
39+
<div class="drum-sound">Snare</div>
40+
</div>
41+
<div class="drum" data-key="75">
42+
<div class="drum-note">K</div>
43+
<div class="drum-sound">Tom</div>
44+
</div>
45+
<div class="drum" data-key="76">
46+
<div class="drum-note">L</div>
47+
<div class="drum-sound">Tink</div>
48+
</div>
49+
</div>
4750
</div>
4851
</div>
4952

@@ -59,6 +62,15 @@
5962

6063
<script>
6164

65+
var drum = document.getElementsByClassName('drum');
66+
for(var i = 0; i < drum.length; i++) {
67+
var drumAttr = drum[i].getAttribute('data-key');
68+
var drumEl = drum[i];
69+
var self = this;
70+
drumEl.addEventListener('click', function(event) {
71+
console.log(event.target.getAttribute('data-key'));
72+
}.bind(this), false);
73+
}
6274
</script>
6375

6476

‎01 - JavaScript Drum Kit/style.css‎

Lines changed: 54 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,67 @@
1-
html {
2-
font-size: 10px;
3-
background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
1+
html,
2+
body {
3+
height: 100%;
4+
}
5+
6+
body {
7+
background: url(http://pearldrum.com/common/assets/images/background.jpg);
8+
background-position: center center;
49
background-size: cover;
10+
background-repeat: no-repeat;
511
}
6-
body,html {
7-
margin: 0;
8-
padding: 0;
9-
font-family: sans-serif;
12+
.layer {
13+
background-color: rgba(85, 85, 85, 0.7);
14+
position: absolute;
15+
top: 0;
16+
left: 0;
17+
width: 100%;
18+
height: 100%;
1019
}
1120

12-
.keys {
13-
display:flex;
14-
flex:1;
15-
min-height:100vh;
16-
align-items: center;
17-
justify-content: center;
21+
h1 {
22+
color: white;
23+
text-transform: uppercase;
24+
text-align: center;
25+
text-shadow: 2px 2px 2px black;
1826
}
1927

20-
.key {
21-
border:4px solid black;
22-
border-radius:5px;
23-
margin:1rem;
24-
font-size: 1.5rem;
25-
padding:1rem .5rem;
26-
transition:all .07s;
27-
width:100px;
28+
.drums {
29+
margin-top: 50px;
30+
width: 100%;
31+
height: 100px;
32+
margin: 120px auto;
33+
}
34+
.drums .drumkit {
2835
text-align: center;
29-
color:white;
30-
background:rgba(0,0,0,0.4);
31-
text-shadow:0 0 5px black;
36+
vertical-align: middle;
3237
}
33-
34-
.playing {
35-
transform:scale(1.1);
36-
border-color:#ffc600;
37-
box-shadow: 0 0 10px #ffc600;
38+
.drums .drumkit .drum {
39+
border: 4px solid black;
40+
width: 90px;
41+
height: 80px;
42+
display: inline-block;
43+
margin: 10px;
44+
vertical-align: middle;
45+
background-color: rgba(0, 0, 0, 0.5);
46+
border-radius: 5px;
3847
}
39-
40-
kbd {
48+
.drums .drumkit .drum:hover {
49+
box-shadow: 0 0 10px #fff;
50+
transition: ease-in 0.25s;
51+
}
52+
.drums .drumkit .drum-note {
4153
display: block;
42-
font-size: 40px;
54+
text-transform: uppercase;
55+
margin-top: 10px;
56+
color: white;
57+
font-family: serif;
58+
font-weight: bold;
59+
font-size: 20px;
4360
}
44-
45-
.sound {
46-
font-size: 1.2rem;
61+
.drums .drumkit .drum-sound {
4762
text-transform: uppercase;
48-
letter-spacing: 1px;
49-
color:#ffc600;
63+
margin-top: 10px;
64+
color: #ffc600;
65+
font-size: 12px;
5066
}
67+

0 commit comments

Comments
 (0)