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 2ec2555

Browse files
add task02 and update the answer of task 01
1 parent cdc7ec4 commit 2ec2555

File tree

2 files changed

+157
-0
lines changed

2 files changed

+157
-0
lines changed
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<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>
47+
</div>
48+
</div>
49+
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>
59+
60+
<script>
61+
function removeTransition(e) {
62+
if (e.propertyName !== 'transform') return;
63+
e.target.classList.remove('playing');
64+
}
65+
66+
function playSound(e) {
67+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
68+
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();
74+
}
75+
76+
const keys = Array.from(document.querySelectorAll('.key'));
77+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
78+
window.addEventListener('keydown', playSound);
79+
</script>
80+
81+
82+
</body>
83+
</html>

‎02 - JS Clock/index-START.html

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS + CSS Clock</title>
6+
</head>
7+
<body>
8+
9+
10+
<div class="clock">
11+
<div class="clock-face">
12+
<div class="hand hour-hand"></div>
13+
<div class="hand min-hand"></div>
14+
<div class="hand second-hand"></div>
15+
</div>
16+
</div>
17+
18+
19+
<style>
20+
html {
21+
background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
22+
background-size:cover;
23+
font-family:'helvetica neue';
24+
text-align: center;
25+
font-size: 10px;
26+
}
27+
28+
body {
29+
margin: 0;
30+
font-size: 2rem;
31+
display:flex;
32+
flex:1;
33+
min-height: 100vh;
34+
align-items: center;
35+
}
36+
37+
.clock {
38+
width: 30rem;
39+
height: 30rem;
40+
border:20px solid white;
41+
border-radius:50%;
42+
margin:50px auto;
43+
position: relative;
44+
padding:2rem;
45+
box-shadow:
46+
0 0 0 4px rgba(0,0,0,0.1),
47+
inset 0 0 0 3px #EFEFEF,
48+
inset 0 0 10px black,
49+
0 0 10px rgba(0,0,0,0.2);
50+
}
51+
52+
.clock-face {
53+
position: relative;
54+
width: 100%;
55+
height: 100%;
56+
transform: translateY(-3px); /* account for the height of the clock hands */
57+
}
58+
59+
.hand {
60+
width:50%;
61+
height:6px;
62+
background:black;
63+
position: absolute;
64+
top:50%;
65+
}
66+
67+
</style>
68+
69+
<script>
70+
71+
72+
</script>
73+
</body>
74+
</html>

0 commit comments

Comments
(0)

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