From b55a5182bb4103641db46ae8a0faf16f8cea03ad Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Thu, 15 Mar 2018 13:12:30 +1100 Subject: [PATCH 01/14] 01 - Drumkit - with keyboard and mouse interaction --- 01 - JavaScript Drum Kit/index.html | 88 +++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index.html diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html new file mode 100644 index 0000000000..fa6944a21a --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,88 @@ + + + + + JS Drum Kit + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + From 085ae35aaf8962ca8216659b55fe39c9e848b1dd Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Thu, 15 Mar 2018 13:43:34 +1100 Subject: [PATCH 02/14] 01 - Drumkit - fix sticky classnames --- 01 - JavaScript Drum Kit/index.html | 52 ++++++++++++++++------------- 1 file changed, 29 insertions(+), 23 deletions(-) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index fa6944a21a..1eec65526a 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -1,10 +1,12 @@ + JS Drum Kit + @@ -57,32 +59,36 @@ - + - + + \ No newline at end of file From 1c06580555301c5f97786c43739762f97e231c56 Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Thu, 15 Mar 2018 14:39:14 +1100 Subject: [PATCH 03/14] 02 - javascript analog clock --- 02 - JS and CSS Clock/index.html | 132 +++++++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 02 - JS and CSS Clock/index.html diff --git a/02 - JS and CSS Clock/index.html b/02 - JS and CSS Clock/index.html new file mode 100644 index 0000000000..d656fe7ff5 --- /dev/null +++ b/02 - JS and CSS Clock/index.html @@ -0,0 +1,132 @@ + + + + + + JS + CSS Clock + + + + + +
+
+
+
+
+
+
+ + + + + + + + \ No newline at end of file From 47f73f6ff6a830e2303e6c9240a96d120ad6833c Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Thu, 15 Mar 2018 14:40:28 +1100 Subject: [PATCH 04/14] 02 - javascript analog clock - remove console.log --- 02 - JS and CSS Clock/index.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/02 - JS and CSS Clock/index.html b/02 - JS and CSS Clock/index.html index d656fe7ff5..4388e40be1 100644 --- a/02 - JS and CSS Clock/index.html +++ b/02 - JS and CSS Clock/index.html @@ -105,13 +105,11 @@ ] if (seconds < 1) { - console.log('disable seconds animation') hands.seconds.classList.add('noanimate') hands.seconds.style.transform = `rotate(-6deg)` } setTimeout(function(){ - console.log('enable seconds animation') hands.seconds.classList.remove('noanimate') hands.hours.style.transform = `rotate(${(hours * 30) + (minutes / 2)}deg)` hands.minutes.style.transform = `rotate(${(minutes * 6) + (seconds / 10)}deg)` From 76c8e529fea2b067bf3212e350a00dda8af2be98 Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Thu, 15 Mar 2018 22:12:57 +1100 Subject: [PATCH 05/14] CSS variables, updating from JS --- 03 - CSS Variables/index.html | 76 +++++++++++++++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 03 - CSS Variables/index.html diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html new file mode 100644 index 0000000000..8eaa9ff63c --- /dev/null +++ b/03 - CSS Variables/index.html @@ -0,0 +1,76 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + From 00f65561df8d7c23fc68c0cf3d3bc7c628c33eca Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Fri, 16 Mar 2018 07:01:56 +1100 Subject: [PATCH 06/14] 04 Array cardio --- 04 - Array Cardio Day 1/index.html | 102 +++++++++++++++++++++++++++++ 1 file changed, 102 insertions(+) create mode 100644 04 - Array Cardio Day 1/index.html diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html new file mode 100644 index 0000000000..1f2837d67f --- /dev/null +++ b/04 - Array Cardio Day 1/index.html @@ -0,0 +1,102 @@ + + + + + + Array Cardio 💪 + + + +

+ Psst: have a look at the JavaScript Console 💁

+ + + + \ No newline at end of file From 91bfa39023093a15e62f82d448913f4275169821 Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Fri, 16 Mar 2018 15:03:30 +1100 Subject: [PATCH 07/14] 05 - Flex panel gallery --- 05 - Flex Panel Gallery/index.html | 167 +++++++++++++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 05 - Flex Panel Gallery/index.html diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/index.html new file mode 100644 index 0000000000..e0937cba9d --- /dev/null +++ b/05 - Flex Panel Gallery/index.html @@ -0,0 +1,167 @@ + + + + + + Flex Panels 💪 + + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + + \ No newline at end of file From fa27d2871a5abe80e1976651dc60bdc7a7f0e18f Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Sun, 18 Mar 2018 21:57:33 +1100 Subject: [PATCH 08/14] 06 Fetch JSON, filter matches with regex, display results. Highlight match, format number --- 06 - Type Ahead/index.html | 47 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 06 - Type Ahead/index.html diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html new file mode 100644 index 0000000000..6e992c570d --- /dev/null +++ b/06 - Type Ahead/index.html @@ -0,0 +1,47 @@ + + + + + Type Ahead 👀 + + + + +
+ +
    +
  • Filter for a city
    • +
  • or a state
    • +
+
+ + + From 188e1b0016b369e3b6a437551894bc1dbd279a47 Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Mon, 19 Mar 2018 19:51:41 +1100 Subject: [PATCH 09/14] Type ahead formatting --- 06 - Type Ahead/index.html | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html index 6e992c570d..aceb2a7ac7 100644 --- a/06 - Type Ahead/index.html +++ b/06 - Type Ahead/index.html @@ -26,13 +26,17 @@ return cities.filter(place => place.city.match(regex) || place.state.match(regex)) } +function highlightMatches(wordToMatch, label) { + const regex = new RegExp(wordToMatch, 'gi') + return label.replace(regex, `${wordToMatch}`) +} + function displayMatches(e) { const matches = findMatches(searchInput.value, cities) - resultHTML = '' - matches.forEach(({rank, city, state}) => { - resultHTML += `
  • ${city}, ${state}
    • ` - }) - searchResult.innerHTML = resultHTML + searchResult.innerHTML = matches.map(({population, city, state}) => `
  • + ${highlightMatches(searchInput.value, city + ', ' + state)} + ${Number(population).toLocaleString()} +
    • `).join('') } const searchInput = document.querySelector('.search') From c1da5d33754af8f89f3d93c8b3b41e74f949197a Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Mon, 19 Mar 2018 19:52:05 +1100 Subject: [PATCH 10/14] 07 - array methods --- 07 - Array Cardio Day 2/index.html | 51 ++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 07 - Array Cardio Day 2/index.html diff --git a/07 - Array Cardio Day 2/index.html b/07 - Array Cardio Day 2/index.html new file mode 100644 index 0000000000..447fa100d5 --- /dev/null +++ b/07 - Array Cardio Day 2/index.html @@ -0,0 +1,51 @@ + + + + + Array Cardio 💪💪 + + +

    Psst: have a look at the JavaScript Console 💁

    + + + From c1a45a991108e383ada29c68f79399e371a4a057 Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Tue, 3 Apr 2018 22:08:30 +1000 Subject: [PATCH 11/14] 08 - Basic line drawing --- 08 - Fun with HTML5 Canvas/index.html | 53 +++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 08 - Fun with HTML5 Canvas/index.html diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html new file mode 100644 index 0000000000..b7f445075d --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index.html @@ -0,0 +1,53 @@ + + + + + + HTML5 Canvas + + + + + + + + + + + \ No newline at end of file From 18a1257f2a19bd2c874780361e634ef1b5a53fa5 Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Tue, 3 Apr 2018 23:00:21 +1000 Subject: [PATCH 12/14] 08 - variable colour and width --- 08 - Fun with HTML5 Canvas/index.html | 35 ++++++++++++++++++--------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html index b7f445075d..a1573edfd9 100644 --- a/08 - Fun with HTML5 Canvas/index.html +++ b/08 - Fun with HTML5 Canvas/index.html @@ -13,25 +13,38 @@ canvas.width = window.innerWidth canvas.height = window.innerHeight - const context = canvas.getContext('2d') - context.strokeStyle = '#ff8800' - context.lineJoin = 'round' - context.lineCap = 'round' + const ctx = canvas.getContext('2d') + ctx.strokeStyle = '#ff8800' + ctx.lineJoin = 'round' + ctx.lineCap = 'round' + ctx.lineWidth = 5 let isDrawing = false - let last = { offsetX: 0, offsetY: 0 } + let last = { hue: 0 } + + const distance = ({ x: x1, y: y1 }, { x: x2, y: y2 }) => { + X = Math.abs(x1 - x2) + Y = Math.abs(y1 - y2) + const H = Math.sqrt(X * X + Y * Y) + return H + } const draw = ({ offsetX: x, offsetY: y }) => { if (!isDrawing) return - context.beginPath() - context.moveTo(last.x, last.y) - context.lineTo(x, y) - context.stroke() - last = { x, y } + + const { x: lastX, y: lastY, hue } = last + ctx.lineWidth = Math.log(Math.max(1, distance(last, { x, y }))) + ctx.strokeStyle = `hsl(${hue}, 100%, 50%)` + ctx.beginPath() + ctx.moveTo(lastX, lastY) + ctx.lineTo(x, y) + ctx.stroke() + + last = Object.assign({}, last, { x, y, hue: hue + 1 }) } const startDrawing = ({ offsetX: x, offsetY: y }) => { - last = { x, y } + last = Object.assign({}, last, { x, y }) isDrawing = true } From aa8e6e5214e3e08b23d164c3e03e4d5ea7c2fa3b Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Wed, 11 Apr 2018 20:26:25 +1000 Subject: [PATCH 13/14] 09 --- 09 - Dev Tools Domination/index.html | 91 ++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 09 - Dev Tools Domination/index.html diff --git a/09 - Dev Tools Domination/index.html b/09 - Dev Tools Domination/index.html new file mode 100644 index 0000000000..311ed4df1c --- /dev/null +++ b/09 - Dev Tools Domination/index.html @@ -0,0 +1,91 @@ + + + + + + Console Tricks! + + + + +

    ×BREAK×DOWN×

    + + + + + \ No newline at end of file From 5c2f933cec96aa7d3427c2c3dfb3163e3a662beb Mon Sep 17 00:00:00 2001 From: Philip Boardman Date: Thu, 12 Apr 2018 15:56:18 +1000 Subject: [PATCH 14/14] 10 - Shift-click to select a range of inputs --- .../index.html | 136 ++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 10 - Hold Shift and Check Checkboxes/index.html diff --git a/10 - Hold Shift and Check Checkboxes/index.html b/10 - Hold Shift and Check Checkboxes/index.html new file mode 100644 index 0000000000..acafac9c4e --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index.html @@ -0,0 +1,136 @@ + + + + + + Hold Shift to Check Multiple Checkboxes + + + + + +
    + + + + + + + + + +
    + + + + + \ No newline at end of file