From 8d66fb5e82a6c2feaa84d2830c92cf1aea698bd8 Mon Sep 17 00:00:00 2001 From: Jim Shelly Date: Tue, 14 Jan 2020 06:09:11 +0000 Subject: [PATCH 1/2] update the code --- .gitignore | 5 -- .replit | 2 + 01 - JavaScript Drum Kit/index-JIM.html | 82 +++++++++++++++++++ 01 - JavaScript Drum Kit/index-START.html | 4 +- 02 - JS and CSS Clock/index-JIM.html | 96 +++++++++++++++++++++++ 03 - CSS Variables/index-JIM.html | 61 ++++++++++++++ index.html | 12 +++ 7 files changed, 254 insertions(+), 8 deletions(-) delete mode 100644 .gitignore create mode 100644 .replit create mode 100644 01 - JavaScript Drum Kit/index-JIM.html create mode 100644 02 - JS and CSS Clock/index-JIM.html create mode 100644 03 - CSS Variables/index-JIM.html create mode 100644 index.html diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 164ae8655c..0000000000 --- a/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -.DS_Store -node_modules/ -*.log -haters/ -.idea/ diff --git a/.replit b/.replit new file mode 100644 index 0000000000..36f22d0471 --- /dev/null +++ b/.replit @@ -0,0 +1,2 @@ +language = "html" +run = "index-START.html" diff --git a/01 - JavaScript Drum Kit/index-JIM.html b/01 - JavaScript Drum Kit/index-JIM.html new file mode 100644 index 0000000000..018a0dc645 --- /dev/null +++ b/01 - JavaScript Drum Kit/index-JIM.html @@ -0,0 +1,82 @@ + + + + + JS Drum Kit + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + + diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..33390a2161 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -5,9 +5,7 @@ JS Drum Kit - - - +
A diff --git a/02 - JS and CSS Clock/index-JIM.html b/02 - JS and CSS Clock/index-JIM.html new file mode 100644 index 0000000000..9d6ad79604 --- /dev/null +++ b/02 - JS and CSS Clock/index-JIM.html @@ -0,0 +1,96 @@ + + + + + JS + CSS Clock + + + + +
+
+
+
+
+
+
+ + + + + + + + diff --git a/03 - CSS Variables/index-JIM.html b/03 - CSS Variables/index-JIM.html new file mode 100644 index 0000000000..0cddf2d01a --- /dev/null +++ b/03 - CSS Variables/index-JIM.html @@ -0,0 +1,61 @@ + + + + + Scoped CSS Variables and JS + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000000..8f5dca5797 --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + +

JavaScript30

+ + + + \ No newline at end of file From b710a5f0dfc4dfd700b980d661b9b47516f99eae Mon Sep 17 00:00:00 2001 From: "jim.shelly" Date: Tue, 14 Jan 2020 02:26:43 -0600 Subject: [PATCH 2/2] FInished Day 3 --- 03 - CSS Variables/index-JIM.html | 139 +++++++++++++++++++----------- 1 file changed, 88 insertions(+), 51 deletions(-) diff --git a/03 - CSS Variables/index-JIM.html b/03 - CSS Variables/index-JIM.html index 0cddf2d01a..a175f9f0a9 100644 --- a/03 - CSS Variables/index-JIM.html +++ b/03 - CSS Variables/index-JIM.html @@ -1,61 +1,98 @@ - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -
- - - - - - - - -
- - - - - input { - width: 100px; - } - + + function handleUpdate() { + console.log("+poop"); + const suffix = this.dataset.sizing || ""; + document.documentElement.style.setProperty( + `--${this.name}`, + this.value + suffix + ); + } - + inputs.forEach(input => input.addEventListener("change", handleUpdate)); + inputs.forEach(input => + input.addEventListener("mousemove", handleUpdate) + ); + +