diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 8a2f8e8417..e42e479ce0 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,11 +1,13 @@ + JS Drum Kit + @@ -58,10 +60,9 @@ - + + diff --git a/01 - JavaScript Drum Kit/main.js b/01 - JavaScript Drum Kit/main.js new file mode 100644 index 0000000000..9e1af6e7cf --- /dev/null +++ b/01 - JavaScript Drum Kit/main.js @@ -0,0 +1,23 @@ +const keyCodes = Array.from(document.querySelectorAll("div[data-key]")).map( + (key) => { + return parseInt(key.dataset.key); + }, +); + +document.addEventListener("keydown", (e) => { + const code = e.keyCode; + if (keyCodes.includes(code)) { + const div = document.querySelector(`div[data-key='${code}']`); + const audio = document.querySelector(`audio[data-key='${code}']`); + div.classList.add("playing"); + audio.currentTime = 0; + audio.play(); + } +}); + +document.addEventListener("transitionend", (e) => { + if (e.propertyName === "transform") { + const div = e.target; + div.classList.remove("playing"); + } +}); diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 55ab1a5331..20133dc093 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,20 +1,22 @@ + JS + CSS Clock + -
-
-
-
-
-
+
+
+
+
+
+
- + + diff --git a/02 - JS and CSS Clock/main.js b/02 - JS and CSS Clock/main.js new file mode 100644 index 0000000000..b36ed67a36 --- /dev/null +++ b/02 - JS and CSS Clock/main.js @@ -0,0 +1,16 @@ +const hourHand = document.querySelector("div.hour-hand"); +const secondHand = document.querySelector("div.second-hand"); +const minuteHand = document.querySelector("div.min-hand"); + +function updateUI() { + const now = new Date(); + const hours = now.getHours(); + const minutes = now.getMinutes(); + const seconds = now.getSeconds(); + + hourHand.style.transform = `rotate(${(hours / 24) * 360 + 90}deg)`; + minuteHand.style.transform = `rotate(${(minutes / 60) * 360 + 90}deg)`; + secondHand.style.transform = `rotate(${(seconds / 60) * 360 + 90}deg)`; +} + +setInterval(updateUI, 1000); diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index d5fcc3a2ae..ae0359c536 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -1,11 +1,13 @@ + Scoped CSS Variables and JS - + +

Update CSS Variables with JS

@@ -19,13 +21,14 @@

Update CSS Variables with JS

- + - + diff --git a/03 - CSS Variables/main.js b/03 - CSS Variables/main.js new file mode 100644 index 0000000000..5674cb5a3b --- /dev/null +++ b/03 - CSS Variables/main.js @@ -0,0 +1,19 @@ +const spaceInput = document.getElementById("spacing"); +const blurInput = document.getElementById("blur"); +const colorInput = document.getElementById("base"); +const body = document.getElementById("body"); + +spaceInput.addEventListener("change", (e) => { + const value = e.target.value; + body.style.setProperty("--img-space", `${value}px`); +}); + +blurInput.addEventListener("change", (e) => { + const value = e.target.value; + body.style.setProperty("--img-blur", `${value}px`); +}); + +colorInput.addEventListener("change", (e) => { + const value = e.target.value; + body.style.setProperty("--color-bg", value); +}); diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 0dcfd00f40..57a3d608cf 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -1,10 +1,12 @@ + Array Cardio 💪 +

Psst: have a look at the JavaScript Console 💁

+ diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 88a4f1d1e2..e30e9a2c4a 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -1,11 +1,13 @@ + Flex Panels 💪 + @@ -106,10 +148,17 @@
+ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 5a9aa7e4e8..9ae21772c2 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,23 +1,58 @@ + - - Type Ahead 👀 - - + + Type Ahead 👀 + + + +
+ + +
+ + async function filterStuff(e) { + while (!isFetched) await new Promise(resolve => setTimeout(() => resolve(), 1000)); + const query = e.target.value; + let str = ''; + cities.forEach(city => { + if (city.city.includes(query)) { + str += `
  • ${city.city.replace(query, `${query}`)}
    ${city.population}
    • `; + } + }); + suggestions.innerHTML = str; + } + searchInput.addEventListener("click", doStuff, {once: true}); + searchInput.addEventListener("input", filterStuff); + + diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css index 0c8c74e01b..7301be9d87 100644 --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -1,74 +1,76 @@ html { - box-sizing: border-box; - background: #ffc600; - font-family: 'helvetica neue'; - font-size: 20px; - font-weight: 200; + box-sizing: border-box; + background: #ffc600; + font-family: 'helvetica neue'; + font-size: 20px; + font-weight: 200; } -*, *:before, *:after { - box-sizing: inherit; +*, +*:before, +*:after { + box-sizing: inherit; } input { - width: 100%; - padding: 20px; + width: 100%; + padding: 20px; } .search-form { - max-width: 400px; - margin: 50px auto; + max-width: 400px; + margin: 50px auto; } input.search { - margin: 0; - text-align: center; - outline: 0; - border: 10px solid #F7F7F7; - width: 120%; - left: -10%; - position: relative; - top: 10px; - z-index: 2; - border-radius: 5px; - font-size: 40px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); + margin: 0; + text-align: center; + outline: 0; + border: 10px solid #F7F7F7; + width: 120%; + left: -10%; + position: relative; + top: 10px; + z-index: 2; + border-radius: 5px; + font-size: 40px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); } .suggestions { - margin: 0; - padding: 0; - position: relative; - /*perspective: 20px;*/ + margin: 0; + padding: 0; + position: relative; + /*perspective: 20px;*/ } .suggestions li { - background: white; - list-style: none; - border-bottom: 1px solid #D8D8D8; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); - margin: 0; - padding: 20px; - transition: background 0.2s; - display: flex; - justify-content: space-between; - text-transform: capitalize; + background: white; + list-style: none; + border-bottom: 1px solid #D8D8D8; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); + margin: 0; + padding: 20px; + transition: background 0.2s; + display: flex; + justify-content: space-between; + text-transform: capitalize; } .suggestions li:nth-child(even) { - transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); - background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); + transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); + background: linear-gradient(to bottom, #ffffff 0%, #EFEFEF 100%); } .suggestions li:nth-child(odd) { - transform: perspective(100px) rotateX(-3deg) translateY(3px); - background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); + transform: perspective(100px) rotateX(-3deg) translateY(3px); + background: linear-gradient(to top, #ffffff 0%, #EFEFEF 100%); } span.population { - font-size: 15px; + font-size: 15px; } .hl { - background: #ffc600; + background: #ffc600; } diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index-FINISHED.html index 0d99beba99..d116ce80cb 100644 --- a/07 - Array Cardio Day 2/index-FINISHED.html +++ b/07 - Array Cardio Day 2/index-FINISHED.html @@ -1,69 +1,72 @@ + - - Array Cardio 💪💪 - + + Array Cardio 💪💪 + + -

    Psst: have a look at the JavaScript Console 💁

    - + + diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 4ca34c7536..27f07f912d 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -1,42 +1,55 @@ + - - Array Cardio 💪💪 - + + Array Cardio 💪💪 + + -

    Psst: have a look at the JavaScript Console 💁

    - +

    Psst: have a look at the JavaScript Console 💁

    + + diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html index 7d2c933c61..dafbfbc7ca 100644 --- a/08 - Fun with HTML5 Canvas/index-FINISHED.html +++ b/08 - Fun with HTML5 Canvas/index-FINISHED.html @@ -1,74 +1,78 @@ + - - HTML5 Canvas - + + HTML5 Canvas + + - - + - + + diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index f70ad2059b..791ccd506e 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -1,20 +1,31 @@ + - - HTML5 Canvas - + + HTML5 Canvas + + - - + + + - + + + diff --git a/08 - Fun with HTML5 Canvas/script.js b/08 - Fun with HTML5 Canvas/script.js new file mode 100644 index 0000000000..2103761e4d --- /dev/null +++ b/08 - Fun with HTML5 Canvas/script.js @@ -0,0 +1,55 @@ +const canvas = document.getElementById("draw"); +const ctx = canvas.getContext("2d"); +let isDrawing = false; +let radius = 10; +let isRadiusUp = true; +let color = 0; +let isColorUp = true; + +function change() { + if (isRadiusUp) { + radius += 1; + } else { + radius -= 1; + } + + if (isColorUp) { + color += 1; + } else { + color -= 1; + } + + if (radius >= 40) { + isRadiusUp = false; + } + if (radius < 4) { + radius = 10; + isRadiusUp = true; + } + + if (color >= 250) { + isColorUp = false; + } + if (color <= 0) { + isColorUp = true; + } +} + +document.addEventListener("pointerdown", () => { + isDrawing = true; +}); + +document.addEventListener("pointerup", () => { + isDrawing = false; +}); + +addEventListener("pointermove", (event) => { + change(); + if (isDrawing) { + const x = event.clientX; + const y = event.clientY; + ctx.arc(x, y, radius, 0, 360, true); + ctx.fillStyle = `hsl(${color}, 50%, 50%)`; + ctx.fill(); + } +}); diff --git a/1 b/1 new file mode 100644 index 0000000000..2103761e4d --- /dev/null +++ b/1 @@ -0,0 +1,55 @@ +const canvas = document.getElementById("draw"); +const ctx = canvas.getContext("2d"); +let isDrawing = false; +let radius = 10; +let isRadiusUp = true; +let color = 0; +let isColorUp = true; + +function change() { + if (isRadiusUp) { + radius += 1; + } else { + radius -= 1; + } + + if (isColorUp) { + color += 1; + } else { + color -= 1; + } + + if (radius >= 40) { + isRadiusUp = false; + } + if (radius < 4) { + radius = 10; + isRadiusUp = true; + } + + if (color >= 250) { + isColorUp = false; + } + if (color <= 0) { + isColorUp = true; + } +} + +document.addEventListener("pointerdown", () => { + isDrawing = true; +}); + +document.addEventListener("pointerup", () => { + isDrawing = false; +}); + +addEventListener("pointermove", (event) => { + change(); + if (isDrawing) { + const x = event.clientX; + const y = event.clientY; + ctx.arc(x, y, radius, 0, 360, true); + ctx.fillStyle = `hsl(${color}, 50%, 50%)`; + ctx.fill(); + } +}); diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index 25df6ad31e..346302ff79 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -1,102 +1,131 @@ + - - Hold Shift to Check Multiple Checkboxes - + + Hold Shift to Check Multiple Checkboxes + - - - -
    -
    - -

    This is an inbox layout.

    -
    -
    - -

    Check one item

    -
    -
    - -

    Hold down your Shift key

    -
    -
    - -

    Check a lower item

    -
    -
    - -

    Everything in between should also be set to checked

    -
    -
    - -

    Try to do it without any libraries

    -
    -
    - -

    Just regular JavaScript

    -
    -
    - -

    Good Luck!

    -
    -
    - -

    Don't forget to tweet your result!

    -
    -
    +
    +
    + +

    This is an inbox layout.

    +
    +
    + +

    Check one item

    +
    +
    + +

    Hold down your Shift key

    +
    +
    + +

    Check a lower item

    +
    +
    + +

    Everything in between should also be set to checked

    +
    +
    + +

    Try to do it without any libraries

    +
    +
    + +

    Just regular JavaScript

    +
    +
    + +

    Good Luck!

    +
    +
    + +

    Don't forget to tweet your result!

    +
    +
    - + +