JS Drum Kit

From 3c822f939fba10629f06178d96d65b3ad2ab60e8 Mon Sep 17 00:00:00 2001 From: Rodrigo Catto Date: Mon, 26 Nov 2018 01:21:26 -0300 Subject: [PATCH 1/4] My answer for the 4 initial challenge --- 01 - JavaScript Drum Kit/index-iskigow.html | 86 ++++++++++++++++ 02 - JS and CSS Clock/index-iskigow.html | 108 ++++++++++++++++++++ 03 - CSS Variables/index-iskigow.html | 75 ++++++++++++++ 04 - Array Cardio Day 1/index-iskigow.html | 98 ++++++++++++++++++ 4 files changed, 367 insertions(+) create mode 100644 01 - JavaScript Drum Kit/index-iskigow.html create mode 100644 02 - JS and CSS Clock/index-iskigow.html create mode 100644 03 - CSS Variables/index-iskigow.html create mode 100644 04 - Array Cardio Day 1/index-iskigow.html diff --git a/01 - JavaScript Drum Kit/index-iskigow.html b/01 - JavaScript Drum Kit/index-iskigow.html new file mode 100644 index 0000000000..8e557b1cbf --- /dev/null +++ b/01 - JavaScript Drum Kit/index-iskigow.html @@ -0,0 +1,86 @@ + + + + + JS Drum Kit + + + + + +

+ A + clap +

+ S + hihat +

+ D + kick +

+ F + openhat +

+ G + boom +

+ H + ride +

+ J + snare +

+ K + tom +

+ L + tink +

+ +

+ + + + + + diff --git a/02 - JS and CSS Clock/index-iskigow.html b/02 - JS and CSS Clock/index-iskigow.html new file mode 100644 index 0000000000..6827aa21f7 --- /dev/null +++ b/02 - JS and CSS Clock/index-iskigow.html @@ -0,0 +1,108 @@ + + + + + JS + CSS Clock + + + + +

+ + + + + + + diff --git a/03 - CSS Variables/index-iskigow.html b/03 - CSS Variables/index-iskigow.html new file mode 100644 index 0000000000..2f0711be33 --- /dev/null +++ b/03 - CSS Variables/index-iskigow.html @@ -0,0 +1,75 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +

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

+ +

+ + + + + + + diff --git a/04 - Array Cardio Day 1/index-iskigow.html b/04 - Array Cardio Day 1/index-iskigow.html new file mode 100644 index 0000000000..abbb6a57ec --- /dev/null +++ b/04 - Array Cardio Day 1/index-iskigow.html @@ -0,0 +1,98 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From bfd29ece0f3d8fea6283059030831389e77f8de1 Mon Sep 17 00:00:00 2001 From: Rodrigo Catto Date: Tue, 27 Nov 2018 17:07:41 -0300 Subject: [PATCH 2/4] My answer for lessons 5 and 6 - plus: - like delay to search city or state; - The panel is open and active one at a time; --- 05 - Flex Panel Gallery/index-iskigow.html | 160 +++++++++++++++++++++ 06 - Type Ahead/index-iskigow.html | 78 ++++++++++ 2 files changed, 238 insertions(+) create mode 100644 05 - Flex Panel Gallery/index-iskigow.html create mode 100644 06 - Type Ahead/index-iskigow.html diff --git a/05 - Flex Panel Gallery/index-iskigow.html b/05 - Flex Panel Gallery/index-iskigow.html new file mode 100644 index 0000000000..34dde86161 --- /dev/null +++ b/05 - Flex Panel Gallery/index-iskigow.html @@ -0,0 +1,160 @@ + + + + + Flex Panels 💪 + + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + + + + + diff --git a/06 - Type Ahead/index-iskigow.html b/06 - Type Ahead/index-iskigow.html new file mode 100644 index 0000000000..a186bf95fa --- /dev/null +++ b/06 - Type Ahead/index-iskigow.html @@ -0,0 +1,78 @@ + + + + + Type Ahead 👀 + + + + + + + + From 8dfaff6531cdb36680266a263e8df683cea73727 Mon Sep 17 00:00:00 2001 From: Rodrigo Catto Date: Tue, 27 Nov 2018 19:16:09 -0300 Subject: [PATCH 3/4] My answer for lessons 7 and 8 - plus: - Line with control; - Resize canvas on resize window (but lost the draw); - Use filter to remove a element in collection; --- 07 - Array Cardio Day 2/index-iskigow.html | 76 +++++++++++++++++++ 08 - Fun with HTML5 Canvas/index-iskigow.html | 74 ++++++++++++++++++ 2 files changed, 150 insertions(+) create mode 100644 07 - Array Cardio Day 2/index-iskigow.html create mode 100644 08 - Fun with HTML5 Canvas/index-iskigow.html diff --git a/07 - Array Cardio Day 2/index-iskigow.html b/07 - Array Cardio Day 2/index-iskigow.html new file mode 100644 index 0000000000..7aa5be53b1 --- /dev/null +++ b/07 - Array Cardio Day 2/index-iskigow.html @@ -0,0 +1,76 @@ + + + + + Array Cardio 💪💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + diff --git a/08 - Fun with HTML5 Canvas/index-iskigow.html b/08 - Fun with HTML5 Canvas/index-iskigow.html new file mode 100644 index 0000000000..19dce04d0d --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-iskigow.html @@ -0,0 +1,74 @@ + + + + + HTML5 Canvas + + +

+ + + + + + From f6c487646a9a6a79779aa3a7a769f697c2b64a06 Mon Sep 17 00:00:00 2001 From: Rodrigo Catto Date: Fri, 30 Nov 2018 21:05:57 -0300 Subject: [PATCH 4/4] My answer for lessons 9 and 10 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - plus: - Shift hold control separately from the check process; --- 09 - Dev Tools Domination/index-iskigow.html | 76 ++++++++++ .../index-iskigow.html | 141 ++++++++++++++++++ 2 files changed, 217 insertions(+) create mode 100644 09 - Dev Tools Domination/index-iskigow.html create mode 100644 10 - Hold Shift and Check Checkboxes/index-iskigow.html diff --git a/09 - Dev Tools Domination/index-iskigow.html b/09 - Dev Tools Domination/index-iskigow.html new file mode 100644 index 0000000000..da5ebf408e --- /dev/null +++ b/09 - Dev Tools Domination/index-iskigow.html @@ -0,0 +1,76 @@ + + + + + Console Tricks! + + + +

×BREAK×DOWN×

+ + + + diff --git a/10 - Hold Shift and Check Checkboxes/index-iskigow.html b/10 - Hold Shift and Check Checkboxes/index-iskigow.html new file mode 100644 index 0000000000..5806e01b36 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index-iskigow.html @@ -0,0 +1,141 @@ + + + + + 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 to do it without any libraries

+ +

Just regular JavaScript

+ +

Good Luck!

+ +

Don't forget to tweet your result!

+ + + +