Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit cecbbe3

Browse files
Updated UI
1 parent c9e6454 commit cecbbe3

File tree

2 files changed

+107
-58
lines changed

2 files changed

+107
-58
lines changed

‎Challenges/Day 01 - JavaScript Drum Kit/index.html

Lines changed: 59 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -8,59 +8,67 @@
88
</head>
99

1010
<body>
11-
12-
13-
<div class="keys">
14-
<div data-key="65" class="key">
15-
<kbd>A</kbd>
16-
<span class="sound">clap</span>
17-
</div>
18-
<div data-key="83" class="key">
19-
<kbd>S</kbd>
20-
<span class="sound">hihat</span>
21-
</div>
22-
<div data-key="68" class="key">
23-
<kbd>D</kbd>
24-
<span class="sound">kick</span>
25-
</div>
26-
<div data-key="70" class="key">
27-
<kbd>F</kbd>
28-
<span class="sound">openhat</span>
29-
</div>
30-
<div data-key="71" class="key">
31-
<kbd>G</kbd>
32-
<span class="sound">boom</span>
33-
</div>
34-
<div data-key="72" class="key">
35-
<kbd>H</kbd>
36-
<span class="sound">ride</span>
37-
</div>
38-
<div data-key="74" class="key">
39-
<kbd>J</kbd>
40-
<span class="sound">snare</span>
41-
</div>
42-
<div data-key="75" class="key">
43-
<kbd>K</kbd>
44-
<span class="sound">tom</span>
45-
</div>
46-
<div data-key="76" class="key">
47-
<kbd>L</kbd>
48-
<span class="sound">tink</span>
49-
</div>
11+
<div class="container">
12+
<header>
13+
<div>
14+
<h1>JavaScript Drum Kit</h1>
15+
<p>Press key or press space to play auto drum</p>
16+
</div>
17+
</header>
18+
<main>
19+
<div class="keys">
20+
<div data-key="65" class="key">
21+
<kbd>A</kbd>
22+
<span class="sound">clap</span>
23+
</div>
24+
<div data-key="83" class="key">
25+
<kbd>S</kbd>
26+
<span class="sound">hihat</span>
27+
</div>
28+
<div data-key="68" class="key">
29+
<kbd>D</kbd>
30+
<span class="sound">kick</span>
31+
</div>
32+
<div data-key="70" class="key">
33+
<kbd>F</kbd>
34+
<span class="sound">openhat</span>
35+
</div>
36+
<div data-key="71" class="key">
37+
<kbd>G</kbd>
38+
<span class="sound">boom</span>
39+
</div>
40+
<div data-key="72" class="key">
41+
<kbd>H</kbd>
42+
<span class="sound">ride</span>
43+
</div>
44+
<div data-key="74" class="key">
45+
<kbd>J</kbd>
46+
<span class="sound">snare</span>
47+
</div>
48+
<div data-key="75" class="key">
49+
<kbd>K</kbd>
50+
<span class="sound">tom</span>
51+
</div>
52+
<div data-key="76" class="key">
53+
<kbd>L</kbd>
54+
<span class="sound">tink</span>
55+
</div>
56+
</div>
57+
<audio data-key="65" src="sounds/clap.wav"></audio>
58+
<audio data-key="83" src="sounds/closedhat.wav"></audio>
59+
<audio data-key="68" src="sounds/kick.wav"></audio>
60+
<audio data-key="70" src="sounds/openhat.wav"></audio>
61+
<audio data-key="71" src="sounds/boom.wav"></audio>
62+
<audio data-key="72" src="sounds/ride.wav"></audio>
63+
<audio data-key="74" src="sounds/snare.wav"></audio>
64+
<audio data-key="75" src="sounds/tom.wav"></audio>
65+
<audio data-key="76" src="sounds/tinkbell.wav"></audio>
66+
</main>
67+
<footer>
68+
<input type="button" value="Start Audio" id="playAudioButton"></input>
69+
</footer>
5070
</div>
5171

52-
<input type="button" value="Start Audio" id="playAudioButton"></input>
53-
54-
<audio data-key="65" src="sounds/clap.wav"></audio>
55-
<audio data-key="83" src="sounds/closedhat.wav"></audio>
56-
<audio data-key="68" src="sounds/kick.wav"></audio>
57-
<audio data-key="70" src="sounds/openhat.wav"></audio>
58-
<audio data-key="71" src="sounds/boom.wav"></audio>
59-
<audio data-key="72" src="sounds/ride.wav"></audio>
60-
<audio data-key="74" src="sounds/snare.wav"></audio>
61-
<audio data-key="75" src="sounds/tom.wav"></audio>
62-
<audio data-key="76" src="sounds/tinkbell.wav"></audio>
63-
6472
<script>
6573

6674
/************************************************************************************************

‎Challenges/Day 01 - JavaScript Drum Kit/style.css

Lines changed: 48 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,64 @@
1+
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
2+
13
html {
24
font-size: 10px;
3-
/*background: url(https://i.imgur.com/b9r5sEL.jpg) bottom center;
4-
background-size: cover;*/
5-
background: #2980b9; /* fallback for old browsers */
6-
background: -webkit-linear-gradient(to right, #2c3e50, #2980b9); /* Chrome 10-25, Safari 5.1-6 */
7-
background: linear-gradient(to right, #2c3e50, #2980b9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
5+
background: #2980b9; /* fallback for old browsers */
6+
background: -webkit-linear-gradient(to right, #2c3e50, #2980b9); /* Chrome 10-25, Safari 5.1-6 */
7+
background: linear-gradient(
8+
to right,
9+
#2c3e50,
10+
#2980b9
11+
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
812
}
913

1014
body,
1115
html {
1216
margin: 0;
1317
padding: 0;
14-
font-family: sans-serif;
18+
font-family: 'Montserrat', sans-serif;
19+
height: 100%;
20+
}
21+
22+
.container {
23+
display: grid;
24+
grid-template-areas:
25+
'header'
26+
'content'
27+
'footer';
28+
grid-template-rows: 35% auto 40%;
29+
grid-gap: 10px;
30+
width: 100%;
31+
height: 100%;
32+
}
33+
.container > * {
34+
display: flex;
35+
justify-content: center;
36+
align-items: center;
37+
}
38+
header {
39+
grid-area: header;
40+
}
41+
main {
42+
grid-area: content;
43+
}
44+
footer {
45+
grid-area: footer;
46+
}
47+
header h1 {
48+
color: antiquewhite;
49+
font-size: 6em;
50+
text-transform: uppercase;
51+
text-align: center;
52+
}
53+
header p {
54+
color: antiquewhite;
55+
font-size: 2em;
56+
text-align: center;
1557
}
1658

1759
.keys {
1860
display: flex;
1961
flex: 1;
20-
min-height: 100vh;
2162
align-items: center;
2263
justify-content: center;
2364
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /