JS Drum Kit

A @@ -57,10 +57,8 @@

- - + - + + \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/main.js b/01 - JavaScript Drum Kit/main.js new file mode 100644 index 0000000000..012318962f --- /dev/null +++ b/01 - JavaScript Drum Kit/main.js @@ -0,0 +1,22 @@ +function playSound(e) { + const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); + const $key = document.querySelector(`div[data-key="${e.keyCode}"]`); + if (audio !== null) { + audio.currentTime = 0; + audio.play(); + } + if ($key !== null) { + $key.classList.add("playing"); + } +} + +function stopTransition(e) { + if (e.propertyName === "transform") { + e.target.classList.remove("playing"); + } +} + +window.addEventListener("keydown", playSound); + +const $keys = document.querySelectorAll("div[data-key]"); +$keys.forEach($key => $key.addEventListener("transitionend", stopTransition)); \ No newline at end of file diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index a69d6b635d..73d5daec9a 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,10 +1,11 @@ html { font-size: 10px; - background: url(https://i.imgur.com/b9r5sEL.jpg) bottom center; + background: url(./images/background.jpg) bottom center; background-size: cover; } -body,html { +body, +html { margin: 0; padding: 0; font-family: sans-serif; @@ -28,7 +29,7 @@ body,html { width: 10rem; text-align: center; color: white; - background: rgba(0,0,0,0.4); + background: rgba(0, 0, 0, 0.4); text-shadow: 0 0 .5rem black; } @@ -48,4 +49,4 @@ kbd { text-transform: uppercase; letter-spacing: .1rem; color: #ffc600; -} +} \ No newline at end of file diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html deleted file mode 100644 index 04d1a4e40e..0000000000 --- a/02 - JS and CSS Clock/index-FINISHED.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - JS + CSS Clock - - - - -

- - - - - - - diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html deleted file mode 100644 index 7a6d27d5bd..0000000000 --- a/02 - JS and CSS Clock/index-START.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - JS + CSS Clock - - - - -

- - - - - - - diff --git a/02 - JS and CSS Clock/index.html b/02 - JS and CSS Clock/index.html new file mode 100644 index 0000000000..3843fad764 --- /dev/null +++ b/02 - JS and CSS Clock/index.html @@ -0,0 +1,25 @@ + + + + + + JS + CSS Clock + + + + + + +

+ + + + + + \ No newline at end of file diff --git a/02 - JS and CSS Clock/main.js b/02 - JS and CSS Clock/main.js new file mode 100644 index 0000000000..7fec7eae43 --- /dev/null +++ b/02 - JS and CSS Clock/main.js @@ -0,0 +1,20 @@ +const $secondHand = document.querySelector(".second-hand"); +const $minHand = document.querySelector(".min-hand"); +const $hourHand = document.querySelector(".hour-hand"); + +function setDate() { + const now = new Date(); + const secounds = now.getSeconds(); + const secoundsDegree = ((secounds / 60) * 360) + 90; + $secondHand.style.transform = `rotate(${secoundsDegree}deg)` + + const mins = now.getMinutes(); + const minssDegree = ((mins / 60) * 360) + 90; + $minHand.style.transform = `rotate(${minssDegree}deg)` + + const hours = now.getHours(); + const hoursDegree = ((hours / 60) * 360) + 90; + $hourHand.style.transform = `rotate(${hoursDegree}deg)` +} + +setInterval(() => setDate(), 1000); \ No newline at end of file diff --git a/02 - JS and CSS Clock/style.css b/02 - JS and CSS Clock/style.css new file mode 100644 index 0000000000..897bd048fd --- /dev/null +++ b/02 - JS and CSS Clock/style.css @@ -0,0 +1,51 @@ +html { + background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5); + background-size: cover; + font-family: 'helvetica neue'; + text-align: center; + font-size: 10px; +} + +body { + margin: 0; + font-size: 2rem; + display: flex; + flex: 1; + min-height: 100vh; + align-items: center; +} + +.clock { + width: 30rem; + height: 30rem; + border: 20px solid white; + border-radius: 50%; + margin: 50px auto; + position: relative; + padding: 2rem; + box-shadow: + 0 0 0 4px rgba(0, 0, 0, 0.1), + inset 0 0 0 3px #EFEFEF, + inset 0 0 10px black, + 0 0 10px rgba(0, 0, 0, 0.2); +} + +.clock-face { + position: relative; + width: 100%; + height: 100%; + transform: translateY(-3px); + /* account for the height of the clock hands */ +} + +.hand { + width: 50%; + height: 6px; + background: black; + position: absolute; + top: 50%; + transform: rotate(90deg); + transform-origin: 100%; + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.55, -1.14, 0.74, 2.87); +} \ No newline at end of file diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html deleted file mode 100644 index 2f0d1464ff..0000000000 --- a/03 - CSS Variables/index-FINISHED.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -

- Spacing: - - - Blur: - - - Base Color - -

- -

- - - - - - - - diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index.html similarity index 63% rename from 03 - CSS Variables/index-START.html rename to 03 - CSS Variables/index.html index 6b9b539c09..aa0c50d3b9 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index.html @@ -1,9 +1,12 @@ + Scoped CSS Variables and JS + +

Update CSS Variables with JS

@@ -20,32 +23,7 @@

Update CSS Variables with JS

- - - - + - + + \ No newline at end of file diff --git a/03 - CSS Variables/main.js b/03 - CSS Variables/main.js new file mode 100644 index 0000000000..6410ded88b --- /dev/null +++ b/03 - CSS Variables/main.js @@ -0,0 +1,13 @@ +function handleUpdate(e) { + const $input = e.target; + const { + name, + value + } = $input; + const suffix = $input.dataset.sizing || ""; + document.documentElement.style.setProperty(`--${name}`, `${value}${suffix}`); +} + +const $inputs = document.querySelectorAll(".controls input"); +$inputs.forEach($input => $input.addEventListener("input", handleUpdate)); +$inputs.forEach($input => $input.addEventListener("mousemove", handleUpdate)); \ No newline at end of file diff --git a/03 - CSS Variables/style.css b/03 - CSS Variables/style.css new file mode 100644 index 0000000000..f4a9750556 --- /dev/null +++ b/03 - CSS Variables/style.css @@ -0,0 +1,32 @@ +:root { + --base: #ffc600; + --spacing: 10px; + --blur: 10px; +} + +body { + text-align: center; + background: #193549; + color: white; + font-family: 'helvetica neue', sans-serif; + font-weight: 100; + font-size: 50px; +} + +img { + padding: var(--spacing); + background: var(--base); + filter: blur(var(--blur)); +} + +.controls { + margin-bottom: 50px; +} + +input { + width: 100px; +} + +.hl { + color: var(--base); +} \ No newline at end of file diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html deleted file mode 100644 index bfa64d6be3..0000000000 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ /dev/null @@ -1,147 +0,0 @@ - - - - - Flex Panels 💪 - - - - - - -

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

- - - - - diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html deleted file mode 100644 index 71d1c26f00..0000000000 --- a/05 - Flex Panel Gallery/index-START.html +++ /dev/null @@ -1,114 +0,0 @@ - - - - - Flex Panels 💪 - - - - - - -

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

- - - - - - - diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/index.html new file mode 100644 index 0000000000..0d6bfb0919 --- /dev/null +++ b/05 - Flex Panel Gallery/index.html @@ -0,0 +1,45 @@ + + + + + + Flex Panels 💪 + + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + + + + \ No newline at end of file diff --git a/05 - Flex Panel Gallery/main.js b/05 - Flex Panel Gallery/main.js new file mode 100644 index 0000000000..be7d515a35 --- /dev/null +++ b/05 - Flex Panel Gallery/main.js @@ -0,0 +1,14 @@ +const panels = document.querySelectorAll(".panel"); + +function toggleOpen(e) { + e.currentTarget.classList.toggle("open"); +} + +function toggleActive(e) { + if (e.propertyName.includes("flex")) { + e.currentTarget.classList.toggle("open-active"); + } +} + +panels.forEach(panel => panel.addEventListener("click", toggleOpen)); +panels.forEach(panel => panel.addEventListener("transitionend", toggleActive)); \ No newline at end of file diff --git a/05 - Flex Panel Gallery/style.css b/05 - Flex Panel Gallery/style.css new file mode 100644 index 0000000000..6e17adc71e --- /dev/null +++ b/05 - Flex Panel Gallery/style.css @@ -0,0 +1,111 @@ +html { + box-sizing: border-box; + background: #ffc600; + font-family: 'helvetica neue'; + font-size: 20px; + font-weight: 200; +} + +body { + margin: 0; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +.panels { + min-height: 100vh; + overflow: hidden; + display: flex; +} + +.panel { + background: #6B0F9C; + box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1); + color: white; + text-align: center; + align-items: center; + /* Safari transitionend event.propertyName === flex */ + /* Chrome + FF transitionend event.propertyName === flex-grow */ + transition: + font-size 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), + flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11); + font-size: 20px; + background-size: cover; + background-position: center; + + flex-grow: 1; + justify-content: center; + align-items: center; + + display: flex; + flex-direction: column; +} + +.panel1 { + background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); +} + +.panel2 { + background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); +} + +.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); +} + +.panel4 { + background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); +} + +.panel5 { + background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); +} + +/* Flex Children */ +.panel>* { + margin: 0; + width: 100%; + transition: transform 0.5s; + + flex-grow: 1; + + display: flex; + justify-content: center; + align-items: center; +} + +.panel.open { + font-size: 40px; + flex-grow: 5; +} + +.panel *:first-child { + transform: translateY(-100%); +} + +.panel.open-active *:first-child { + transform: translateY(0); +} + +.panel *:last-child { + transform: translateY(100%); +} + +.panel.open-active *:last-child { + transform: translateY(0); +} + +.panel p { + text-transform: uppercase; + font-family: 'Amatic SC', cursive; + text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); + font-size: 2em; +} + +.panel p:nth-child(2) { + font-size: 4em; +} \ No newline at end of file diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html deleted file mode 100644 index 5902b43936..0000000000 --- a/06 - Type Ahead/index-FINISHED.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - Type Ahead 👀 - - - - - - - - diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index.html similarity index 68% rename from 06 - Type Ahead/index-START.html rename to 06 - Type Ahead/index.html index 109c90fb36..8300e5d020 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index.html @@ -1,10 +1,12 @@ + Type Ahead 👀 + - + - + + \ No newline at end of file diff --git a/06 - Type Ahead/main.js b/06 - Type Ahead/main.js new file mode 100644 index 0000000000..db89260527 --- /dev/null +++ b/06 - Type Ahead/main.js @@ -0,0 +1,43 @@ +const endpoint = "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json"; + +async function main() { + const cities = await fetch(endpoint).then(blob => blob.json()); + + // https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript + function numberWithCommas(x) { + return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + } + + function findMaches(wordToMatch) { + const regexp = new RegExp(wordToMatch, "gi"); + return cities.filter(place => { + return place.city.match(regexp) || place.state.match(regexp); + }); + } + + function displayMatches(e) { + const { + value + } = e.currentTarget; + const html = findMaches(value) + .map(place => { + const regexp = new RegExp(value, "gi"); + const cityName = place.city.replace(regexp, `${value}`); + const stateName = place.state.replace(regexp, `${value}`); + return ` +

+ ${cityName}, ${stateName} + ${numberWithCommas(place.population)} +

+ ` + }).join(""); + suggestions.innerHTML = html; + } + + const searchInput = document.querySelector(".search"); + const suggestions = document.querySelector(".suggestions"); + + searchInput.addEventListener("input", displayMatches); +} + +main(); \ No newline at end of file