Skip to content

Commit ba8dc2a

Browse files
PierreM-DevPierreM-Dev
committed
merge
2 parents 03eec3e + a70a4b8 commit ba8dc2a

File tree

7 files changed

+894
-25
lines changed

7 files changed

+894
-25
lines changed

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

Lines changed: 90 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<<<<<<< HEAD
12
<!DOCTYPE html>
23
<html lang="en">
34

@@ -86,4 +87,92 @@
8687

8788
</body>
8889

89-
</html>
90+
</html>
91+
=======
92+
<!DOCTYPE html>
93+
<html lang="en">
94+
<head>
95+
<meta charset="UTF-8">
96+
<title>JS Drum Kit</title>
97+
<link rel="stylesheet" href="style.css">
98+
</head>
99+
<body>
100+
101+
102+
<div class="keys">
103+
<div data-key="65" class="key">
104+
<kbd>A</kbd>
105+
<span class="sound">clap</span>
106+
</div>
107+
<div data-key="83" class="key">
108+
<kbd>S</kbd>
109+
<span class="sound">hihat</span>
110+
</div>
111+
<div data-key="68" class="key">
112+
<kbd>D</kbd>
113+
<span class="sound">kick</span>
114+
</div>
115+
<div data-key="70" class="key">
116+
<kbd>F</kbd>
117+
<span class="sound">openhat</span>
118+
</div>
119+
<div data-key="71" class="key">
120+
<kbd>G</kbd>
121+
<span class="sound">boom</span>
122+
</div>
123+
<div data-key="72" class="key">
124+
<kbd>H</kbd>
125+
<span class="sound">ride</span>
126+
</div>
127+
<div data-key="74" class="key">
128+
<kbd>J</kbd>
129+
<span class="sound">snare</span>
130+
</div>
131+
<div data-key="75" class="key">
132+
<kbd>K</kbd>
133+
<span class="sound">tom</span>
134+
</div>
135+
<div data-key="76" class="key">
136+
<kbd>L</kbd>
137+
<span class="sound">tink</span>
138+
</div>
139+
</div>
140+
141+
<audio data-key="65" src="sounds/clap.wav"></audio>
142+
<audio data-key="83" src="sounds/hihat.wav"></audio>
143+
<audio data-key="68" src="sounds/kick.wav"></audio>
144+
<audio data-key="70" src="sounds/openhat.wav"></audio>
145+
<audio data-key="71" src="sounds/boom.wav"></audio>
146+
<audio data-key="72" src="sounds/ride.wav"></audio>
147+
<audio data-key="74" src="sounds/snare.wav"></audio>
148+
<audio data-key="75" src="sounds/tom.wav"></audio>
149+
<audio data-key="76" src="sounds/tink.wav"></audio>
150+
151+
<script>
152+
function playSound(e) {
153+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
154+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
155+
156+
if (!audio) return;
157+
158+
audio.currentTime = 0;
159+
audio.play();
160+
key.classList.add('playing');
161+
}
162+
163+
window.addEventListener('keydown', playSound);
164+
165+
function removeTransition(e) {
166+
if (e.propertyName !== 'transform') return;
167+
this.classList.remove('playing');
168+
}
169+
170+
const keys = document.querySelectorAll('.key');
171+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
172+
173+
</script>
174+
175+
176+
</body>
177+
</html>
178+
>>>>>>> a70a4b89a5f2882a5b33660499f0dd32de6a916e

‎03 - CSS Variables/index-START.html

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -66,16 +66,15 @@ <h2>Update CSS Variables with
6666
}
6767
</style>
6868
<style>
69-
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500"><<<<<<< HEAD body {
70-
text-align: center;
71-
background: #193549;
72-
color: white;
73-
font-family: 'helvetica neue', sans-serif;
74-
font-weight: 100;
75-
font-size: 50px;
69+
background: #193549;
70+
color: white;
71+
font-family: 'helvetica neue',
72+
sans-serif;
73+
font-weight: 100;
74+
font-size: 50px;
7675
}
7776

78-
=======<style> :root {
77+
<style> :root {
7978
--base: #ffc600;
8079
--spacing: 10px;
8180
--blur: 10px;
@@ -117,34 +116,22 @@ <h2>Update CSS Variables with
117116
</style>
118117

119118
<script>
120-
const inputs = document.querySelectorAll('.controls input'); >>>
121-
>>>
122-
> d9f49f31d1d3151a05a134e351ce82bfed0e8ffc
123-
119+
const inputs = document.querySelectorAll('.controls input');
124120
function handleUpdate() {
125121
const suffix = this.dataset.sizing || '';
126122

127123
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
128124
}
129125

130-
<<
131-
<<
132-
<< < HEAD
133-
<
134-
script >
135-
const inputs = document.querySelectorAll('.controls input');
126+
<script>
127+
const inputs = document.querySelectorAll('.controls input');
136128

137129
function handleUpdate() {
138130
const suffix = this.dataset.sizing || '';
139131

140132
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
141133
}
142134

143-
===
144-
===
145-
= >>>
146-
>>>
147-
> d9f49f31d1d3151a05a134e351ce82bfed0e8ffc
148135
inputs.forEach(input => input.addEventListener('change', handleUpdate));
149136
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
150137
</script>

‎05 - Flex Panel Gallery/index-FINISHED.html

Lines changed: 144 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<<<<<<< HEAD
12
<!DOCTYPE html>
23
<html lang="en">
34

@@ -169,4 +170,146 @@
169170

170171
</body>
171172

172-
</html>
173+
</html>
174+
=======
175+
<!DOCTYPE html>
176+
<html lang="en">
177+
<head>
178+
<meta charset="UTF-8">
179+
<title>Flex Panels 💪</title>
180+
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
181+
</head>
182+
<body>
183+
<style>
184+
html {
185+
box-sizing: border-box;
186+
background:#ffc600;
187+
font-family:'helvetica neue';
188+
font-size: 20px;
189+
font-weight: 200;
190+
}
191+
body {
192+
margin: 0;
193+
}
194+
*, *:before, *:after {
195+
box-sizing: inherit;
196+
}
197+
198+
.panels {
199+
min-height:100vh;
200+
overflow: hidden;
201+
display: flex;
202+
}
203+
204+
.panel {
205+
background:#6B0F9C;
206+
box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
207+
color:white;
208+
text-align: center;
209+
align-items:center;
210+
/* Safari transitionend event.propertyName === flex */
211+
/* Chrome + FF transitionend event.propertyName === flex-grow */
212+
transition:
213+
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
214+
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
215+
background 0.2s;
216+
font-size: 20px;
217+
background-size:cover;
218+
background-position:center;
219+
flex: 1;
220+
justify-content: center;
221+
display: flex;
222+
flex-direction: column;
223+
}
224+
225+
226+
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
227+
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
228+
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
229+
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
230+
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
231+
232+
/* Flex Items */
233+
.panel > * {
234+
margin:0;
235+
width: 100%;
236+
transition:transform 0.5s;
237+
flex: 1 0 auto;
238+
display:flex;
239+
justify-content: center;
240+
align-items: center;
241+
}
242+
243+
.panel > *:first-child { transform: translateY(-100%); }
244+
.panel.open-active > *:first-child { transform: translateY(0); }
245+
.panel > *:last-child { transform: translateY(100%); }
246+
.panel.open-active > *:last-child { transform: translateY(0); }
247+
248+
.panel p {
249+
text-transform: uppercase;
250+
font-family: 'Amatic SC', cursive;
251+
text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
252+
font-size: 2em;
253+
}
254+
.panel p:nth-child(2) {
255+
font-size: 4em;
256+
}
257+
258+
.panel.open {
259+
flex: 5;
260+
font-size:40px;
261+
}
262+
263+
</style>
264+
265+
266+
<div class="panels">
267+
<div class="panel panel1">
268+
<p>Hey</p>
269+
<p>Let's</p>
270+
<p>Dance</p>
271+
</div>
272+
<div class="panel panel2">
273+
<p>Give</p>
274+
<p>Take</p>
275+
<p>Receive</p>
276+
</div>
277+
<div class="panel panel3">
278+
<p>Experience</p>
279+
<p>It</p>
280+
<p>Today</p>
281+
</div>
282+
<div class="panel panel4">
283+
<p>Give</p>
284+
<p>All</p>
285+
<p>You can</p>
286+
</div>
287+
<div class="panel panel5">
288+
<p>Life</p>
289+
<p>In</p>
290+
<p>Motion</p>
291+
</div>
292+
</div>
293+
294+
<script>
295+
const panels = document.querySelectorAll('.panel');
296+
297+
function toggleOpen() {
298+
console.log('Hello');
299+
this.classList.toggle('open');
300+
}
301+
302+
function toggleActive(e) {
303+
console.log(e.propertyName);
304+
if (e.propertyName.includes('flex')) {
305+
this.classList.toggle('open-active');
306+
}
307+
}
308+
309+
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
310+
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
311+
</script>
312+
313+
</body>
314+
</html>
315+
>>>>>>> a70a4b89a5f2882a5b33660499f0dd32de6a916e

0 commit comments

Comments
 (0)