Skip to content

Commit 242130b

Browse files
author
Gustav Lindberg
committed
3 done
1 parent 5c8d898 commit 242130b

4 files changed

Lines changed: 224 additions & 2 deletions

File tree

‎01 - JavaScript Drum Kit/index.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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 src="index.js"></script>
61+
62+
63+
</body>
64+
</html>

‎01 - JavaScript Drum Kit/index.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
document.addEventListener('keydown', function(e) {
2+
var keyCode = e.keyCode;
3+
var audio = document.querySelector(`audio[data-key="${keyCode}"]`);
4+
var keyElement = document.querySelector(`.key[data-key="${keyCode}"]`);
5+
6+
if(!audio) return null;
7+
8+
audio.currentTime = 0;
9+
audio.play();
10+
keyElement.classList.add('playing');
11+
});
12+
13+
var keys = document.querySelectorAll('.key');
14+
15+
function removeTransition(e) {
16+
if(e.propertyName !== 'transform') return null;
17+
e.target.classList.remove('playing');
18+
}
19+
20+
keys.forEach((key) => {
21+
key.addEventListener('transitionend', removeTransition)
22+
});

‎02 - JS + CSS Clock/index.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
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+
font-size: 2rem;
30+
display:flex;
31+
flex:1;
32+
min-height: 100vh;
33+
align-items: center;
34+
}
35+
36+
.clock {
37+
width: 30rem;
38+
height: 30rem;
39+
border:20px solid white;
40+
border-radius:50%;
41+
margin:50px auto;
42+
position: relative;
43+
padding:2rem;
44+
box-shadow:
45+
0 0 0 4px rgba(0,0,0,0.1),
46+
inset 0 0 0 3px #EFEFEF,
47+
inset 0 0 10px black,
48+
0 0 10px rgba(0,0,0,0.2);
49+
}
50+
51+
.clock-face {
52+
position: relative;
53+
width: 100%;
54+
height: 100%;
55+
transform: translateY(-3px); /* account for the height of the clock hands */
56+
}
57+
58+
.hand {
59+
width:50%;
60+
height:6px;
61+
background:black;
62+
position: absolute;
63+
top:50%;
64+
transform-origin: 100%;
65+
transform: rotate(0deg);
66+
transition: 0.05s cubic-bezier(0.1, 2.7, 0.5, 1);
67+
}
68+
69+
.no-transition {
70+
transition: none !important;
71+
}
72+
73+
</style>
74+
75+
<script>
76+
var secondHand = document.querySelector('.second-hand');
77+
var minHand = document.querySelector('.min-hand');
78+
var hourHand = document.querySelector('.hour-hand');
79+
80+
function setDate() {
81+
var now = new Date();
82+
var seconds = now.getSeconds();
83+
var minutes = now.getMinutes();
84+
var hours = (now.getHours() % 12);
85+
console.log(seconds);
86+
if(seconds === 0) {
87+
secondHand.classList.add('no-transition');
88+
}
89+
if (seconds === 1) {
90+
secondHand.classList.remove('no-transition');
91+
}
92+
if(minutes === 0) {
93+
minHand.classList.add('no-transition');
94+
}
95+
if (minutes === 1) {
96+
minHand.classList.remove('no-transition');
97+
}
98+
if(hours === 0) {
99+
hourHand.classList.add('no-transition');
100+
}
101+
if (seconds === 1) {
102+
hourHand.classList.remove('no-transition');
103+
}
104+
secondHand.style.transform = `rotate(${seconds * 6 + 90}deg)`;
105+
minHand.style.transform = `rotate(${minutes * 6 + 90}deg)`;
106+
hourHand.style.transform = `rotate(${hours * 30 + 90}deg)`;
107+
}
108+
109+
setInterval(setDate, 1000);
110+
111+
</script>
112+
</body>
113+
</html>

03 - CSS Variables/index-START.html renamed to 03 - CSS Variables/index.html

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
99

1010
<div class="controls">
1111
<label for="spacing">Spacing:</label>
12-
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
12+
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-unit="px">
1313

1414
<label for="blur">Blur:</label>
15-
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
15+
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-unit="px">
1616

1717
<label for="base">Base Color</label>
1818
<input id="base" type="color" name="base" value="#ffc600">
@@ -22,6 +22,21 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
2222

2323
<style>
2424

25+
:root {
26+
--base: #bada55;
27+
--spacing: 10px;
28+
--blur: 10px;
29+
}
30+
31+
img {
32+
padding: var(--spacing);
33+
background: var(--base);
34+
filter: blur(var(--blur));
35+
}
36+
37+
.hl {
38+
color: var(--base);
39+
}
2540
/*
2641
misc styles, nothing to do with CSS variables
2742
*/
@@ -48,6 +63,14 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
4863
</style>
4964

5065
<script>
66+
const inputs = document.querySelectorAll('input');
67+
inputs.forEach(input => input.addEventListener('change', handleUpdate));
68+
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
69+
70+
function handleUpdate(e) {
71+
var unit = this.dataset.unit || '';
72+
document.documentElement.style.setProperty(`--${this.name}`, this.value + unit);
73+
}
5174
</script>
5275

5376
</body>

0 commit comments

Comments
 (0)