From 44c0cb52f2aae2e6ed473c714469cf5560d85e9b Mon Sep 17 00:00:00 2001 From: arrahhal Date: Wed, 23 Jul 2025 16:18:13 +0300 Subject: [PATCH 01/11] solve day 1 --- 01 - JavaScript Drum Kit/index-START.html | 7 ++++--- 01 - JavaScript Drum Kit/main.js | 23 +++++++++++++++++++++++ 2 files changed, 27 insertions(+), 3 deletions(-) create mode 100644 01 - JavaScript Drum Kit/main.js 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..8850483d09 --- /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.play(); + } +}); + +document.addEventListener("keyup", (e) => { + const code = e.keyCode; + if (keyCodes.includes(code)) { + const div = document.querySelector(`div[data-key='${code}']`); + div.classList.remove("playing"); + } +}); From a69dc309f6f72710f0b037f111079bd2befd76ab Mon Sep 17 00:00:00 2001 From: arrahhal Date: Thu, 24 Jul 2025 01:05:58 +0300 Subject: [PATCH 02/11] refactor solution after watching the video --- 01 - JavaScript Drum Kit/main.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/01 - JavaScript Drum Kit/main.js b/01 - JavaScript Drum Kit/main.js index 8850483d09..9e1af6e7cf 100644 --- a/01 - JavaScript Drum Kit/main.js +++ b/01 - JavaScript Drum Kit/main.js @@ -10,14 +10,14 @@ document.addEventListener("keydown", (e) => { 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("keyup", (e) => { - const code = e.keyCode; - if (keyCodes.includes(code)) { - const div = document.querySelector(`div[data-key='${code}']`); +document.addEventListener("transitionend", (e) => { + if (e.propertyName === "transform") { + const div = e.target; div.classList.remove("playing"); } }); From 6c94cadbfe7dd0a0bcd40ef3f5cb4637988aa85a Mon Sep 17 00:00:00 2001 From: arrahhal Date: Thu, 24 Jul 2025 02:17:15 +0300 Subject: [PATCH 03/11] solve day 2 --- 02 - JS and CSS Clock/index-START.html | 30 ++++++++++++++------------ 02 - JS and CSS Clock/main.js | 16 ++++++++++++++ 2 files changed, 32 insertions(+), 14 deletions(-) create mode 100644 02 - JS and CSS Clock/main.js 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); From 9c779d3abc43e363c8b814b0b8c1c3854aa222e3 Mon Sep 17 00:00:00 2001 From: arrahhal Date: Sat, 26 Jul 2025 16:05:36 +0300 Subject: [PATCH 04/11] solve day 3 --- 03 - CSS Variables/index-START.html | 25 ++++++++++++++++++------- 03 - CSS Variables/main.js | 19 +++++++++++++++++++ 2 files changed, 37 insertions(+), 7 deletions(-) create mode 100644 03 - CSS Variables/main.js 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); +}); From f47f012e7df56bde6cfa182067fe2a521bcca44a Mon Sep 17 00:00:00 2001 From: arrahhal Date: Thu, 13 Nov 2025 21:43:22 +0300 Subject: [PATCH 05/11] solve 4 --- 04 - Array Cardio Day 1/index-START.html | 64 ++++++++++++++++++------ 1 file changed, 49 insertions(+), 15 deletions(-) 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 💁

+ From a78ed5aa53069a0f0ea4e513b1138971c87d4e5a Mon Sep 17 00:00:00 2001 From: arrahhal Date: Fri, 14 Nov 2025 19:52:16 +0300 Subject: [PATCH 06/11] solve day 5 --- 05 - Flex Panel Gallery/index-START.html | 73 ++++++++++++++++++++---- 1 file changed, 61 insertions(+), 12 deletions(-) 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 @@
+ From 75ddd7d5bbd41a8e227d47940f83334713f78513 Mon Sep 17 00:00:00 2001 From: arrahhal Date: Mon, 17 Nov 2025 20:50:42 +0300 Subject: [PATCH 07/11] try to solve 6 --- 06 - Type Ahead/index-START.html | 61 +++++++++++++++++----- 06 - Type Ahead/style.css | 88 ++++++++++++++++---------------- 2 files changed, 92 insertions(+), 57 deletions(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 5a9aa7e4e8..d6a0c9074a 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,23 +1,56 @@ + - - Type Ahead 👀 - - + + Type Ahead 👀 + + + +
+ +
    +
  • Filter for a city
    • +
  • or a state
    • +
+
+ + async function filterStuff(e) { + while (!isFetched) await new Promise(resolve => setTimeout(() => resolve(), 1000)); + const query = e.target.value; + suggestions.innerHTML = ''; + cities.forEach(city => { + if (city.city.includes(query)) { + suggestions.innerHTML += `
  • ${city.city.replace(query, `${query}`)}
    ${city.population}
    • `; + } + }); + } + 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; } From 8045677854454b1a5a89e6ddb74b66f42f988dc1 Mon Sep 17 00:00:00 2001 From: arrahhal Date: Thu, 20 Nov 2025 20:51:54 +0300 Subject: [PATCH 08/11] fix crash day 6 --- 06 - Type Ahead/index-START.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index d6a0c9074a..9ae21772c2 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -31,22 +31,24 @@ .then((data) => data.json()).then(json => { cities = json; isFetched = true; - suggestions.innerHTML = ''; + let str = ''; json.forEach(city => { - suggestions.innerHTML += `
  • ${city.city}
    ${city.population}
    • `; + str += `
  • ${city.city}
    ${city.population}
    • `; }); + suggestions.innerHTML = str; }); } async function filterStuff(e) { while (!isFetched) await new Promise(resolve => setTimeout(() => resolve(), 1000)); const query = e.target.value; - suggestions.innerHTML = ''; + let str = ''; cities.forEach(city => { if (city.city.includes(query)) { - suggestions.innerHTML += `
  • ${city.city.replace(query, `${query}`)}
    ${city.population}
    • `; + str += `
  • ${city.city.replace(query, `${query}`)}
    ${city.population}
    • `; } }); + suggestions.innerHTML = str; } searchInput.addEventListener("click", doStuff, {once: true}); searchInput.addEventListener("input", filterStuff); From 422d077fda9350701008aae9bf6805c80c1c4259 Mon Sep 17 00:00:00 2001 From: arrahhal Date: Thu, 20 Nov 2025 21:01:14 +0300 Subject: [PATCH 09/11] day 7 --- 07 - Array Cardio Day 2/index-FINISHED.html | 99 +++++++++++---------- 07 - Array Cardio Day 2/index-START.html | 83 +++++++++-------- 2 files changed, 99 insertions(+), 83 deletions(-) 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 💁

    + + From 713eabf42adfb69fd3f6a87b1ff448133eed0627 Mon Sep 17 00:00:00 2001 From: arrahhal Date: Wed, 3 Dec 2025 22:58:20 +0300 Subject: [PATCH 10/11] try to solve day 8 --- .../index-FINISHED.html | 116 +++++++++--------- 08 - Fun with HTML5 Canvas/index-START.html | 33 +++-- 08 - Fun with HTML5 Canvas/script.js | 55 +++++++++ 1 | 55 +++++++++ 4 files changed, 192 insertions(+), 67 deletions(-) create mode 100644 08 - Fun with HTML5 Canvas/script.js create mode 100644 1 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(); + } +}); From f0183b1d1d57c5d58179ced1b4d70d4defabd517 Mon Sep 17 00:00:00 2001 From: arrahhal Date: Mon, 5 Jan 2026 19:40:36 +0300 Subject: [PATCH 11/11] a solution to day 10 --- .../index-START.html | 195 ++++++++++-------- 1 file changed, 112 insertions(+), 83 deletions(-) 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!

    +
    +
    - + +