Codestin Search App

diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-files/index-FINISHED.html similarity index 100% rename from 01 - JavaScript Drum Kit/index-FINISHED.html rename to 01 - JavaScript Drum Kit/index-files/index-FINISHED.html diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-files/index.html similarity index 70% rename from 01 - JavaScript Drum Kit/index-START.html rename to 01 - JavaScript Drum Kit/index-files/index.html index 4070d32767..246639f990 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-files/index.html @@ -59,8 +59,25 @@ + function playSound(e) { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); + if (!audio) return; // stop the function from running all together + audio.currentTime = 0; // rewind to the start + audio.play(); + key.classList.add('playing'); + } + function removeTransition(e) { + if (e.propertyName !== 'transform') return; // skip it if it's not a transform + this.classList.remove('playing'); + } + + const keys = document.querySelectorAll('.key'); + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + window.addEventListener('keydown', playSound); + + diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 246639f990..3cc4e44c33 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -1,83 +1,81 @@ - - - Codestin Search App - - - + + + Codestin Search App + + + - -

- A - clap -

- S - hihat -

- D - kick -

- F - openhat -

- G - boom -

- H - ride -

- J - snare +

+ A + clap +

+ S + hihat +

+ D + kick +

+ F + openhat +

+ G + boom +

+ H + ride +

+ J + snare +

+ K + tom +

+ L + tink +

- K - tom -

- L - tink -

- -

- - + + diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index 1c777557da..0aa9b115df 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -16,81 +16,80 @@

- - - + diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index/index-FINISHED.html similarity index 100% rename from 02 - JS + CSS Clock/index-FINISHED.html rename to 02 - JS + CSS Clock/index/index-FINISHED.html diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index/index.html similarity index 59% rename from 02 - JS + CSS Clock/index-START.html rename to 02 - JS + CSS Clock/index/index.html index 2712384201..1c777557da 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index/index.html @@ -61,13 +61,36 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } + - + + const mins = now.getMinutes(); + const minsDegrees = ((mins / 60) * 360) + 90; + minsHand.style.transform = `rotate(${minsDegrees}deg)`; + + const hour = now.getMinutes(); + const hourDegrees = ((mins / 12) * 360) + 90; + hourHand.style.transform = `rotate(${hourDegrees}deg)`; + } + + setInterval(setDate, 1000); + + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index.html similarity index 61% rename from 03 - CSS Variables/index-START.html rename to 03 - CSS Variables/index.html index bf0f33e3ba..81c83ac949 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index.html @@ -15,7 +15,7 @@

Update CSS Variables with JS

Base Color - +

@@ -26,6 +26,25 @@

Update CSS Variables with JS

misc styles, nothing to do with CSS variables */ + :root { + --base: #ffc600; + --spacing: 10px; + + } + + h1 { + color: var(--base); + --blur: 0px; + + } + + img { + padding: var(--spacing); + background: var(--base); + filter: blur(var(--blur)); + + } + body { text-align: center; } @@ -53,6 +72,15 @@

Update CSS Variables with JS

diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index.html similarity index 73% rename from 05 - Flex Panel Gallery/index-START.html rename to 05 - Flex Panel Gallery/index.html index e1d643ad5c..4a90472cf6 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -41,6 +42,12 @@ font-size: 20px; background-size:cover; background-position:center; + + flex: 1 0 auto; + /*justify-content: center;*/ + align-content: center; + display: flex; + flex-direction: column; } @@ -54,6 +61,26 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + justify-content: center; + align-items: center; + } + + + .panel > *:first-child { + transform: translateY(-100%); + } + + .panel > *:last-child { + transform: translateY(100%); + } + + .panel.open-active > *:first-child { + transform: translateY(0); + } + + .panel.open-active > *:last-child { + transform: translateY(0); } .panel p { @@ -68,6 +95,7 @@ .panel.open { font-size:40px; + flex: 5; } .cta { @@ -107,7 +135,25 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html deleted file mode 100644 index 1436886918..0000000000 --- a/06 - Type Ahead/index-START.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - Codestin Search App - - - - - - - - diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html new file mode 100644 index 0000000000..5858c9cb4a --- /dev/null +++ b/06 - Type Ahead/index.html @@ -0,0 +1,55 @@ + + + + + Codestin Search App + + + + + + + + diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html deleted file mode 100644 index 37c148df07..0000000000 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - Codestin Search App - - -

- - - - - - diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html new file mode 100644 index 0000000000..1e8da46dcd --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index.html @@ -0,0 +1,80 @@ + + + + + Codestin Search App + + +

+ + + + + diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index d4ffc4dc2a..c66610092b 100755 --- a/19 - Webcam Fun/index.html +++ b/19 - Webcam Fun/index.html @@ -10,7 +10,7 @@

- +

diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 00355f5a9c..3f24f7f760 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,48 @@ const canvas = document.querySelector('.photo'); const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelector('.snap'); + + +function getVideo() { + navigator.mediaDevices.getUserMedia({ + video: true, + audio: false + }) + .then(localmediastream => { + console.log(localmediastream); + video.src = window.URL.createObjectURL(localmediastream); + video.play(); + }) + .catch(err => console.error(err)); +} + + +function paintToCanvas() { + const width = video.videoWidth; + const height = video.videoHeight; + canvas.width = width; + canvas.height = height; + + return setInterval(() => { + ctx.drawImage(video, 0, 0, width, height); + let pixels = ctx.getImageData(0, 0, width, height); + console.log(pixels); + debugger; + }, 16); +} + +function takePhoto() { + snap.currentTime = 0; + snap.play(); + const data = canvas.toDataURL('image/jpeg'); + + const link = document.createElement('a'); + link.href = data; + link.setAttribute('download', 'handsome'); + link.innerHTML = ` person

`; + strip.insertBefore(link, strip.firstChild); + +} + +getVideo(); +video.addEventListener('canplay', paintToCanvas);