JS Drum Kit

Update CSS Variables with JS

+ Spacing: + + + Blur: + + + Base Color + +

Date: Sun, 11 Dec 2016 11:44:08 +0100 Subject: [PATCH 07/21] =?UTF-8?q?Improves=20solution=20=F0=9F=92=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 03 - CSS Variables/index-MINE.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/03 - CSS Variables/index-MINE.html b/03 - CSS Variables/index-MINE.html index 31590a711e..10212cdbaa 100644 --- a/03 - CSS Variables/index-MINE.html +++ b/03 - CSS Variables/index-MINE.html @@ -73,10 +73,10 @@

Update CSS Variables with JS

Psst: have a look at the JavaScript Console 💁

+ + From fa23d9ad2ce15bbd53623a2da04ffb063859ea8f Mon Sep 17 00:00:00 2001 From: claudiopro Date: Mon, 12 Dec 2016 19:24:24 +0100 Subject: [PATCH 14/21] Fixes typo --- 07 - Array Cardio Day 2/index-MINE.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/07 - Array Cardio Day 2/index-MINE.html b/07 - Array Cardio Day 2/index-MINE.html index e4b98cabe6..be137fc565 100644 --- a/07 - Array Cardio Day 2/index-MINE.html +++ b/07 - Array Cardio Day 2/index-MINE.html @@ -2,7 +2,7 @@ - Document + Array Cardio 💪💪

Psst: have a look at the JavaScript Console 💁

@@ -20,7 +20,7 @@ { text: 'Love this!', id: 523423 }, { text: 'Super good', id: 823423 }, { text: 'You are the best', id: 2039842 }, - { text: 'Ramen in my fav food ever', id: 123523 }, + { text: 'Ramen is my fav food ever', id: 123523 }, { text: 'Nice Nice Nice!', id: 542328 } ]; From 0c5fe745fad5ceea07fc462ccc34d7a1391d1335 Mon Sep 17 00:00:00 2001 From: claudiopro Date: Mon, 12 Dec 2016 20:35:21 +0100 Subject: [PATCH 15/21] =?UTF-8?q?Adds=20solution=20to=20challenge=20no.=20?= =?UTF-8?q?8=20=F0=9F=8E=A8=F0=9F=96=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 08 - Fun with HTML5 Canvas/index-MINE.html | 79 ++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 08 - Fun with HTML5 Canvas/index-MINE.html diff --git a/08 - Fun with HTML5 Canvas/index-MINE.html b/08 - Fun with HTML5 Canvas/index-MINE.html new file mode 100644 index 0000000000..6ec51dd1a3 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-MINE.html @@ -0,0 +1,79 @@ + + + + + HTML5 Canvas + + +

+ + + + + + From f356f3e530a659bc1cf7de00ebf9c2c4abdb0feb Mon Sep 17 00:00:00 2001 From: claudiopro Date: Mon, 12 Dec 2016 20:43:13 +0100 Subject: [PATCH 16/21] =?UTF-8?q?Fixes=20initialization=20of=20canvas=202d?= =?UTF-8?q?=20context=20=F0=9F=8E=A8=20=F0=9F=96=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 08 - Fun with HTML5 Canvas/index-MINE.html | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/08 - Fun with HTML5 Canvas/index-MINE.html b/08 - Fun with HTML5 Canvas/index-MINE.html index 6ec51dd1a3..d3b5ef9a01 100644 --- a/08 - Fun with HTML5 Canvas/index-MINE.html +++ b/08 - Fun with HTML5 Canvas/index-MINE.html @@ -11,13 +11,6 @@ const canvas = document.querySelector('#draw'); const ctx = canvas.getContext('2d'); - setTimeout(() => { - ctx.strokeStyle = '#ff0000'; - ctx.lineCap = 'round'; - ctx.lineJoin = 'round'; - ctx.lineWidth = 1; - }, 0); - let isDrawing = false, lastX = 0, lastY = 0, @@ -54,6 +47,10 @@ function resizeCanvas(e) { [canvas.width, canvas.height] = [window.innerWidth, window.innerHeight]; + ctx.strokeStyle = '#ff0000'; + ctx.lineCap = 'round'; + ctx.lineJoin = 'round'; + ctx.lineWidth = 1; } canvas.addEventListener('mouseup', e => isDrawing = false); From 29ca3f07ae05a26045b9d1ee0333a646cdc94fd6 Mon Sep 17 00:00:00 2001 From: claudiopro Date: Mon, 12 Dec 2016 21:57:30 +0100 Subject: [PATCH 17/21] =?UTF-8?q?Makes=20canvas=20touch=20friendly=20?= =?UTF-8?q?=F0=9F=91=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 08 - Fun with HTML5 Canvas/index-MINE.html | 63 +++++++++++++++++----- 1 file changed, 51 insertions(+), 12 deletions(-) diff --git a/08 - Fun with HTML5 Canvas/index-MINE.html b/08 - Fun with HTML5 Canvas/index-MINE.html index d3b5ef9a01..fd4d76eb99 100644 --- a/08 - Fun with HTML5 Canvas/index-MINE.html +++ b/08 - Fun with HTML5 Canvas/index-MINE.html @@ -17,11 +17,7 @@ hue = 0, direction = 1; - function draw(e) { - if (!isDrawing) { - return; - } - + function beginPath() { hue++; if (hue >= 360) { hue = 0; @@ -31,13 +27,39 @@ } ctx.lineWidth += direction; + ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; + ctx.beginPath(); + ctx.moveTo(lastX, lastY); + } + + function draw(e) { + e.preventDefault(); + if (!isDrawing) { + return; + } + + beginPath(); // Drain current x and y values from mouse event let {offsetX: x, offsetY: y} = e; + ctx.lineTo(x, y); + ctx.stroke(); - ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; - ctx.beginPath(); - ctx.moveTo(lastX, lastY); + // Update last x and y values + [lastX, lastY] = [x, y]; + } + + function drawTouch(e) { + e.preventDefault(); + const touch = e.changedTouches[0]; + if (!isDrawing) { + return; + } + + beginPath(); + + // Drain current x and y values from mouse event + let {pageX: x, pageY: y} = touch; ctx.lineTo(x, y); ctx.stroke(); @@ -53,14 +75,31 @@ ctx.lineWidth = 1; } - canvas.addEventListener('mouseup', e => isDrawing = false); - canvas.addEventListener('mouseout', e => isDrawing = false); - canvas.addEventListener('mousedown', e => { + function reset(e) { + isDrawing = false; + } + + function startAndStore(e) { [lastX, lastY] = [e.offsetX, e.offsetY]; isDrawing = true; - }); + } + + function startAndStoreTouch(e) { + const touch = e.changedTouches[0]; + [lastX, lastY] = [touch.pageX, touch.pageY]; + isDrawing = true; + } + + canvas.addEventListener('mouseup', reset); + canvas.addEventListener('mouseout', reset); + canvas.addEventListener('mousedown', startAndStore); canvas.addEventListener('mousemove', draw); + canvas.addEventListener('touchcancel', reset); + canvas.addEventListener('touchend', reset); + canvas.addEventListener('touchstart', startAndStoreTouch); + canvas.addEventListener('touchmove', drawTouch); + window.addEventListener('resize', resizeCanvas); resizeCanvas(); From d9d3e3b4a1f1482ef003cc6334ebe7a239371a10 Mon Sep 17 00:00:00 2001 From: claudiopro Date: Thu, 15 Dec 2016 18:06:22 +0100 Subject: [PATCH 18/21] =?UTF-8?q?Adds=20the=20solution=20to=20challenge=20?= =?UTF-8?q?no.=209=20=F0=9F=8C=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 09 - Dev Tools Domination/index-MINE.html | 92 +++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 09 - Dev Tools Domination/index-MINE.html diff --git a/09 - Dev Tools Domination/index-MINE.html b/09 - Dev Tools Domination/index-MINE.html new file mode 100644 index 0000000000..64286779a5 --- /dev/null +++ b/09 - Dev Tools Domination/index-MINE.html @@ -0,0 +1,92 @@ + + + + + Console Tricks! + + + +

×BREAK×DOWN×

+ + + + From 650d0d492794b41ecc69fd61c97831dac431190c Mon Sep 17 00:00:00 2001 From: claudiopro Date: Sat, 31 Dec 2016 13:38:43 +0100 Subject: [PATCH 19/21] Fixes indentation --- 09 - Dev Tools Domination/index-MINE.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/09 - Dev Tools Domination/index-MINE.html b/09 - Dev Tools Domination/index-MINE.html index 64286779a5..6860a1acff 100644 --- a/09 - Dev Tools Domination/index-MINE.html +++ b/09 - Dev Tools Domination/index-MINE.html @@ -63,7 +63,7 @@ console.log(`That means I am ${dog.age * 7} human years old 🐩`); if (dog.age > 7) { console.log(`Wow I am a really old dog 🙈`); - } + } console.groupEnd(dog.name); }); From 59d9375a88b2df4dbdebcb5a4bf9d3013272463e Mon Sep 17 00:00:00 2001 From: claudiopro Date: Sat, 31 Dec 2016 14:17:52 +0100 Subject: [PATCH 20/21] =?UTF-8?q?My=20solution=20for=20Hold=20Shift=20to?= =?UTF-8?q?=20Check=20Multiple=20Checkboxes=20=F0=9F=8E=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index-MINE.html | 163 ++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 10 - Hold Shift and Check Checkboxes/index-MINE.html diff --git a/10 - Hold Shift and Check Checkboxes/index-MINE.html b/10 - Hold Shift and Check Checkboxes/index-MINE.html new file mode 100644 index 0000000000..1cc0350edc --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index-MINE.html @@ -0,0 +1,163 @@ + + + + + Hold Shift to Check Multiple Checkboxes + + + + +

+ +

This is an inbox layout.

+ +

Check one item

+ +

Hold down your Shift key

+ +

Check a lower item

+ +

Everything inbetween should also be set to checked

+ +

Try do it with out any libraries

+ +

Just regular JavaScript

+ +

Good Luck!

+ +

Don't forget to tweet your result!

+ + + + + From 34f2e6d1e14aa341399577bad1c9c4b3fffc96d1 Mon Sep 17 00:00:00 2001 From: claudiopro Date: Sat, 31 Dec 2016 14:19:15 +0100 Subject: [PATCH 21/21] Sets page title --- 10 - Hold Shift and Check Checkboxes/index-FINISHED.html | 2 +- 10 - Hold Shift and Check Checkboxes/index-START.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html index 3ce296cc4b..2b5d39a52c 100644 --- a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html +++ b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html @@ -2,7 +2,7 @@ - Document + Hold Shift to Check Multiple Checkboxes