Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 6adf01e

Browse files
JaymeweissJaymeweiss
committed
added my attempts made for the first four problems
1 parent 395fef0 commit 6adf01e

File tree

4 files changed

+397
-0
lines changed

4 files changed

+397
-0
lines changed

‎01 - JavaScript Drum Kit/index-My Attempt.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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(keyPress) {
67+
const audio = document.querySelector(`audio[data-key="${keyPress.keyCode}"]`);
68+
const key = document.querySelector(`div[data-key="${keyPress.keyCode}"]`);
69+
70+
//check if the audio is found - if not stop here
71+
if (!audio) return;
72+
73+
key.classList.add('playing');
74+
audio.currentTime = 0;
75+
audio.play();
76+
}
77+
78+
const drumkeys = Array.from(document.querySelectorAll('.key'));
79+
drumkeys.forEach(key => key.addEventListener('transitionend', removeTransition));
80+
window.addEventListener('keydown', playSound);
81+
</script>
82+
83+
</body>
84+
</html>

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

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</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+
21+
:root {
22+
--transition: all 0.05s;
23+
}
24+
25+
html {
26+
background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
27+
background-size:cover;
28+
font-family:'helvetica neue';
29+
text-align: center;
30+
font-size: 10px;
31+
}
32+
33+
body {
34+
font-size: 2rem;
35+
display:flex;
36+
flex:1;
37+
min-height: 100vh;
38+
align-items: center;
39+
}
40+
41+
.clock {
42+
width: 30rem;
43+
height: 30rem;
44+
border:20px solid white;
45+
border-radius:50%;
46+
margin:50px auto;
47+
position: relative;
48+
padding:2rem;
49+
box-shadow:
50+
0 0 0px 4px rgba(0,0,0,0.1),
51+
inset 0 0 0 3px #EFEFEF,
52+
inset 0 0 10px black,
53+
0 0 10px rgba(0,0,0,0.2);
54+
}
55+
56+
.clock-face {
57+
position: relative;
58+
width: 100%;
59+
height: 100%;
60+
transform: translateY(-3px); /* account for the height of the clock hands */
61+
}
62+
63+
.hand {
64+
width:50%;
65+
height:6px;
66+
background:black;
67+
position: absolute;
68+
top:50%;
69+
transform-origin: 100%;
70+
transform: rotate(90deg);
71+
transition: var(--transition);
72+
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
73+
}
74+
75+
</style>
76+
77+
<script>
78+
const secondHand = document.querySelector('.second-hand');
79+
const minuteHand = document.querySelector('.min-hand');
80+
const hourHand = document.querySelector('.hour-hand');
81+
82+
function setDate() {
83+
const now = new Date();
84+
const timeInterval = '0.05s';
85+
86+
const seconds = now.getSeconds();
87+
//using the lesson from the 3rd video - I placed the transition as a css variable and changed it here rather than fiddling with the styles which did not give the desired effect
88+
if (seconds == 0){
89+
document.documentElement.style.setProperty(`--transition`, `none`);
90+
} else {
91+
document.documentElement.style.setProperty(`--transition`, `all ${timeInterval}`);
92+
}
93+
const secondsDegrees = ((seconds / 60) * 360) + 90; //adding 90 as it starts in the 90 deg mark
94+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
95+
96+
const minutes = now.getMinutes();
97+
const minutesDegrees = ((minutes / 60) * 360) + 90;
98+
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
99+
100+
const hours = now.getHours();
101+
const hoursDegrees = ((hours / 12) * 360) + 90;
102+
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
103+
}
104+
105+
setInterval(setDate, 1000); //so it runs every second
106+
</script>
107+
</body>
108+
</html>

‎03 - CSS Variables/index-My Attempt.html

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Scoped CSS Variables and JS</title>
6+
</head>
7+
<body>
8+
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
9+
10+
<div class="controls">
11+
<label for="spacing">Spacing:</label>
12+
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px"> <!--these data tags are for the suffixes that will be needed to update the variables correctly later on-->
13+
14+
<label for="blur">Blur:</label>
15+
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
16+
17+
<label for="base">Base Color</label>
18+
<input type="color" name="base" value="#ffc600">
19+
</div>
20+
21+
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
22+
23+
<style>
24+
25+
/*these are useful for use with the js to update them and effect the CSS without the need to change the style*/
26+
:root {
27+
--base: #ffc600;
28+
--spacing: 10px;
29+
--blur: 10px;
30+
}
31+
32+
img {
33+
padding: var(--spacing);
34+
background: var(--base);
35+
filter: blur(var(--blur));
36+
}
37+
38+
.h1 {
39+
colour: var(--base);
40+
}
41+
42+
/*
43+
misc styles, nothing to do with CSS variables
44+
*/
45+
46+
body {
47+
text-align: center;
48+
}
49+
50+
body {
51+
background: #193549;
52+
color: white;
53+
font-family: 'helvetica neue', sans-serif;
54+
font-weight: 100;
55+
font-size: 50px;
56+
}
57+
58+
.controls {
59+
margin-bottom: 50px;
60+
}
61+
62+
a {
63+
color: var(--base);
64+
text-decoration: none;
65+
}
66+
67+
input {
68+
width:100px;
69+
}
70+
</style>
71+
72+
<script>
73+
//selecting all of the inputs on the page
74+
const inputs = document.querySelectorAll('.controls input');
75+
76+
function handleUpdate() {
77+
const suffix = this.dataset.sizing || ''; //the or '' is to avoid the undefined value that would be returned from the colour input that has no need for the suffix
78+
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
79+
}
80+
81+
inputs.forEach(input => input.addEventListener('change', handleUpdate));
82+
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
83+
</script>
84+
85+
</body>
86+
</html>

0 commit comments

Comments
 (0)