From 4f3ff8046ec5133018bed101feaeb6ce509d0f1f Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Tue, 15 Dec 2020 17:44:07 -0500 Subject: [PATCH 01/30] Start setting up layout grid --- css/style.css | 28 ++++++++++++++++++++++++++++ index.html | 15 +++++++++++++++ 2 files changed, 43 insertions(+) create mode 100644 css/style.css diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..ee6fe214 --- /dev/null +++ b/css/style.css @@ -0,0 +1,28 @@ +:root { + --bg-grey: #d3d3d3; + --bg-dark-grey: #f5f5f5; + --dropshadow-grey: #888888; +} + +body { + margin: 0; +} + +.container { + position: relative; + width: 100vw; + height: 100vh; + background-color: var(--bg-grey); +} + +.content-container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--bg-dark-grey); + box-shadow: 0px 0px 8px var(--dropshadow-grey); + width: 70vw; + height: 70vh; + border-radius: 20px; +} diff --git a/index.html b/index.html index e69de29b..904b3d96 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + +
+
+
+ + From 47804fd35d23080cfc2919fd058015397484276f Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Tue, 15 Dec 2020 18:20:28 -0500 Subject: [PATCH 02/30] Setup grid container and grid cells --- css/style.css | 17 + index.html | 1505 ++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 1521 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index ee6fe214..43190611 100644 --- a/css/style.css +++ b/css/style.css @@ -25,4 +25,21 @@ body { width: 70vw; height: 70vh; border-radius: 20px; + padding: 10px; +} + +.grid-container { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + width: 100%; + height: 80%; + background-color: white; +} + +.grid-cell { + width: 100%; + height: 100%; + border: 1px solid var(--bg-dark-grey); + background-color: white; } diff --git a/index.html b/index.html index 904b3d96..3195c42a 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,1510 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
From 1940fe8ef9744a3b292ae06442e0c00702f6a126 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Tue, 15 Dec 2020 19:21:12 -0500 Subject: [PATCH 03/30] Setup color pallate grid --- css/style.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 28 +++++++++++++++++++++++++++ 2 files changed, 79 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 43190611..51757c8c 100644 --- a/css/style.css +++ b/css/style.css @@ -2,6 +2,36 @@ --bg-grey: #d3d3d3; --bg-dark-grey: #f5f5f5; --dropshadow-grey: #888888; + + /* Pallate colors */ + --color-dark-red: #b23232; + --color-red: #ff4848; + --color-pink: #ff6c6c; + --color-dark-orange: #e59b40; + --color-orange: #ffad48; + --color-flesh: #ffc57e; + --color-lime: #e5de40; + --color-yellow: #fff748; + --color-light-yellow: #fffa91; + --color-green: #39cc4b; + --color-light-green: #48ff5e; + --color-royal-blue: #3248b2; + --color-blue: #4867ff; + --color-light-purple: #91a3ff; + --color-purple: #6432b2; + --color-violet: #8f48ff; + --color-light-violet: #bb91ff; + --color-black: #000000; + --color-black-80: #323232; + --color-black-60: #666666; + --color-black-40: #999999; + --color-black-20: #cccccc; + --color-white: #ffffff; + --color-dark-brown: #3a2119; + --color-brown: #754233; + --color-light-brown: #ac8d84; + --color-purple: #6432b2; + --color-purple: #6432b2; } body { @@ -24,7 +54,7 @@ body { box-shadow: 0px 0px 8px var(--dropshadow-grey); width: 70vw; height: 70vh; - border-radius: 20px; + border-radius: 25px; padding: 10px; } @@ -43,3 +73,23 @@ body { border: 1px solid var(--bg-dark-grey); background-color: white; } + +.colors-container { + width: 65%; + padding: 30px 30px 0 30px; + display: flex; + flex-wrap: wrap; +} + +.color { + flex-direction: column; + margin-right: 1.5em; + margin-bottom: 1.5em; + width: 30px; + height: 30px; + border-radius: 25%; +} + +.color-red { + background-color: red; +} diff --git a/index.html b/index.html index 3195c42a..d2d866ef 100644 --- a/index.html +++ b/index.html @@ -1512,6 +1512,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
From f0250c3cfae0b251236f7de73e02cfd40cbcb3dd Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Tue, 15 Dec 2020 19:36:25 -0500 Subject: [PATCH 04/30] Added all colors are variables to css --- css/style.css | 102 ++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 2 +- 2 files changed, 99 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 51757c8c..1f1d01d6 100644 --- a/css/style.css +++ b/css/style.css @@ -3,7 +3,7 @@ --bg-dark-grey: #f5f5f5; --dropshadow-grey: #888888; - /* Pallate colors */ + /* Pallate colors variables */ --color-dark-red: #b23232; --color-red: #ff4848; --color-pink: #ff6c6c; @@ -30,8 +30,6 @@ --color-dark-brown: #3a2119; --color-brown: #754233; --color-light-brown: #ac8d84; - --color-purple: #6432b2; - --color-purple: #6432b2; } body { @@ -90,6 +88,102 @@ body { border-radius: 25%; } +.color-dark-red { + background-color: var(--color-dark-red); +} + .color-red { - background-color: red; + background-color: var(--color-red); +} + +.color-pink { + background-color: var(--color-pink); +} + +.color-dark-orange { + background-color: var(--color-dark-orange); +} + +.color-flesh { + background-color: var(--color-flesh); +} + +.color-lime { + background-color: var(--color-lime); +} + +.color-yellow { + background-color: var(--color-yellow); +} + +.color-light-yellow { + background-color: var(--color-light-yellow); +} + +.color-green { + background-color: var(--color-green); +} + +.color-light-green { + background-color: var(--color-light-green); +} + +.color-royal-blue { + background-color: var(--color-royal-blue); +} + +.color-blue { + background-color: var(--color-blue); +} + +.color-light-purple { + background-color: var(--color-light-purple); +} + +.color-purple { + background-color: var(--color-purple); +} + +.color-violet { + background-color: var(--color-violet); +} + +.color-light-violet { + background-color: var(--color-light-violet); +} + +.color-black { + background-color: var(--color-black); +} + +.color-black-80 { + background-color: var(--color-black-80); +} + +.color-black-60 { + background-color: var(--color-black-60); +} + +.color-black-40 { + background-color: var(--color-black-40); +} + +.color-black-20 { + background-color: var(--color-black-20); +} + +.color-white { + background-color: var(--color-white); +} + +.color-dark-brown { + background-color: var(--color-dark-brown); +} + +.color-brown { + background-color: var(--color-brown); +} + +.color-light-brown { + background-color: var(--color-light-brown); } diff --git a/index.html b/index.html index d2d866ef..75987ba6 100644 --- a/index.html +++ b/index.html @@ -1513,7 +1513,7 @@
-
+
From 187caafdb8f3da22f6168044f9850981c989394f Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Tue, 15 Dec 2020 19:54:12 -0500 Subject: [PATCH 05/30] Assign color variables to all color divs --- css/style.css | 11 ++++++++++- index.html | 52 +++++++++++++++++++++++++-------------------------- 2 files changed, 36 insertions(+), 27 deletions(-) diff --git a/css/style.css b/css/style.css index 1f1d01d6..b95645b5 100644 --- a/css/style.css +++ b/css/style.css @@ -73,13 +73,14 @@ body { } .colors-container { - width: 65%; + width: 70%; padding: 30px 30px 0 30px; display: flex; flex-wrap: wrap; } .color { + border: 2px solid white; flex-direction: column; margin-right: 1.5em; margin-bottom: 1.5em; @@ -88,6 +89,10 @@ body { border-radius: 25%; } +.color:hover { + border: 2px solid grey; +} + .color-dark-red { background-color: var(--color-dark-red); } @@ -104,6 +109,10 @@ body { background-color: var(--color-dark-orange); } +.color-orange { + background-color: var(--color-orange); +} + .color-flesh { background-color: var(--color-flesh); } diff --git a/index.html b/index.html index 75987ba6..c5d45c28 100644 --- a/index.html +++ b/index.html @@ -1513,32 +1513,32 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
From 5e791e674fce9283cc84f30e97a51d9b39a31409 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Tue, 15 Dec 2020 20:21:29 -0500 Subject: [PATCH 06/30] Color pallate and grid layout complete --- css/style.css | 28 ++++++++++++++++++++---- index.html | 60 ++++++++++++++++++++++++++++----------------------- 2 files changed, 57 insertions(+), 31 deletions(-) diff --git a/css/style.css b/css/style.css index b95645b5..8e64b305 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap"); + :root { --bg-grey: #d3d3d3; --bg-dark-grey: #f5f5f5; @@ -33,6 +35,7 @@ } body { + font-family: "Montserrat", sans-serif; margin: 0; } @@ -72,25 +75,29 @@ body { background-color: white; } +.bottom-content-container { + display: flex; +} + .colors-container { width: 70%; - padding: 30px 30px 0 30px; + padding: 30px 0 0 30px; display: flex; flex-wrap: wrap; } .color { - border: 2px solid white; + border: 2px solid white; flex-direction: column; margin-right: 1.5em; - margin-bottom: 1.5em; + margin-bottom: 1em; width: 30px; height: 30px; border-radius: 25%; } .color:hover { - border: 2px solid grey; + border: 2px solid grey; } .color-dark-red { @@ -196,3 +203,16 @@ body { .color-light-brown { background-color: var(--color-light-brown); } + +.current-color-container { + display: flex; + align-items: center; +} + +.current-color { + border: 2px solid white; + width: 60px; + height: 60px; + margin: 0 20px; + border-radius: 25%; +} diff --git a/index.html b/index.html index c5d45c28..0911d12f 100644 --- a/index.html +++ b/index.html @@ -1512,33 +1512,39 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

The current color is

+
+
From d88853d83cdb38b3a1d59ba239aec78c5c890d36 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Wed, 16 Dec 2020 01:25:18 -0500 Subject: [PATCH 07/30] Remove CSS grid --- css/style.css | 25 +++++++++++++++---------- index.html | 26 +++++++++++++------------- 2 files changed, 28 insertions(+), 23 deletions(-) diff --git a/css/style.css b/css/style.css index 8e64b305..7fcad539 100644 --- a/css/style.css +++ b/css/style.css @@ -56,41 +56,42 @@ body { width: 70vw; height: 70vh; border-radius: 25px; - padding: 10px; + padding: 20px; } .grid-container { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; - width: 100%; - height: 80%; + display: flex; + flex-wrap: wrap; + width: 1140px; + height: 475px; background-color: white; + margin-bottom: 60px; } .grid-cell { - width: 100%; - height: 100%; + margin: 0; + width: 17px; + height: 17px; border: 1px solid var(--bg-dark-grey); background-color: white; } .bottom-content-container { display: flex; + padding: 0 30px; } .colors-container { width: 70%; - padding: 30px 0 0 30px; display: flex; flex-wrap: wrap; + margin-right: 40px; } .color { border: 2px solid white; flex-direction: column; margin-right: 1.5em; - margin-bottom: 1em; width: 30px; height: 30px; border-radius: 25%; @@ -216,3 +217,7 @@ body { margin: 0 20px; border-radius: 25%; } + +.margin-bottom-1 { + margin-bottom: 1em; +} diff --git a/index.html b/index.html index 0911d12f..7b226740 100644 --- a/index.html +++ b/index.html @@ -1514,19 +1514,19 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
From 54f51967e564dae10a9a176e622c8d134f3604b8 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Wed, 16 Dec 2020 23:28:08 -0500 Subject: [PATCH 08/30] Add js file and edit color hex codes --- css/style.css | 24 ++++++++++++------------ js/main.js | 3 +++ 2 files changed, 15 insertions(+), 12 deletions(-) create mode 100644 js/main.js diff --git a/css/style.css b/css/style.css index 7fcad539..837fe92a 100644 --- a/css/style.css +++ b/css/style.css @@ -6,19 +6,19 @@ --dropshadow-grey: #888888; /* Pallate colors variables */ - --color-dark-red: #b23232; - --color-red: #ff4848; - --color-pink: #ff6c6c; - --color-dark-orange: #e59b40; - --color-orange: #ffad48; + --color-dark-red: #800000; + --color-red: #ff0000; + --color-pink: #ff00ff; + --color-dark-orange: #cc3300; + --color-orange: #ff3300; --color-flesh: #ffc57e; - --color-lime: #e5de40; - --color-yellow: #fff748; - --color-light-yellow: #fffa91; - --color-green: #39cc4b; - --color-light-green: #48ff5e; - --color-royal-blue: #3248b2; - --color-blue: #4867ff; + --color-lime: #00ff00; + --color-yellow: #ffff00; + --color-light-yellow: #ffff99; + --color-green: #009900; + --color-light-green: #66ff66; + --color-royal-blue: #0000ff; + --color-blue: #000099; --color-light-purple: #91a3ff; --color-purple: #6432b2; --color-violet: #8f48ff; diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..1fae900f --- /dev/null +++ b/js/main.js @@ -0,0 +1,3 @@ +// Set all colors on color palette +// addEventListener to the current color PublicKeyCredential. When user clicks on color from color palette the current color changes to that color +// Add even listener to each cell so that when the user clicks on the cell, it changes to the current color \ No newline at end of file From 49b32f72b94fe24753ef13d9f5721bae3922106c Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Wed, 16 Dec 2020 23:42:13 -0500 Subject: [PATCH 09/30] Add title --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 7b226740..f623b86f 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Pixel Artboard - Kevin Meldau @@ -1542,7 +1542,7 @@
-

The current color is

+

The current color is

From 89408675308825a0cb175ea22caf01bf5641e9df Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Fri, 18 Dec 2020 11:57:25 -0500 Subject: [PATCH 10/30] Add clear and save buttons and style --- css/style.css | 73 ++++++++++++++++++++++++++++++++++++--------------- index.html | 4 +++ 2 files changed, 56 insertions(+), 21 deletions(-) diff --git a/css/style.css b/css/style.css index 837fe92a..e3f2f433 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,11 @@ -@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400&display=swap"); :root { --bg-grey: #d3d3d3; --bg-dark-grey: #f5f5f5; --dropshadow-grey: #888888; + --border: 2px solid white; + --border-radius: 15px; /* Pallate colors variables */ --color-dark-red: #800000; @@ -32,10 +34,14 @@ --color-dark-brown: #3a2119; --color-brown: #754233; --color-light-brown: #ac8d84; + + /* Font variables*/ + --primary-font: "Montserrat", sans-serif; } body { - font-family: "Montserrat", sans-serif; + font-family: var(--primary-font); + font-weight: 200; margin: 0; } @@ -54,9 +60,8 @@ body { background-color: var(--bg-dark-grey); box-shadow: 0px 0px 8px var(--dropshadow-grey); width: 70vw; - height: 70vh; border-radius: 25px; - padding: 20px; + padding: 40px; } .grid-container { @@ -65,7 +70,7 @@ body { width: 1140px; height: 475px; background-color: white; - margin-bottom: 60px; + margin-bottom: 20px; } .grid-cell { @@ -78,6 +83,7 @@ body { .bottom-content-container { display: flex; + flex-wrap: wrap; padding: 0 30px; } @@ -85,22 +91,60 @@ body { width: 70%; display: flex; flex-wrap: wrap; - margin-right: 40px; } .color { - border: 2px solid white; + border: var(--border); flex-direction: column; margin-right: 1.5em; width: 30px; height: 30px; - border-radius: 25%; + border-radius: var(--border-radius); } .color:hover { border: 2px solid grey; } +.current-color-container { + display: flex; + align-items: center; + padding-left: 30px; +} + +.current-color { + border: var(--border); + width: 60px; + height: 60px; + margin: 0 20px; + border-radius: var(--border-radius); +} + +.btn-container { + display: flex; + justify-content: flex-end; + margin-bottom: 20px; + padding: 5px; +} + +.btn { + margin-left: 20px; + font-family: var(--primary-font); + background-color: var(--color-black-20); + color: white; + letter-spacing: 1px; + text-transform: uppercase; + border: none; + padding: 15px 35px; + border: var(--border); + border-radius: var(--border-radius); +} + +.btn:hover { + border: 2px solid grey; + background-color: var(--color-black-40); +} + .color-dark-red { background-color: var(--color-dark-red); } @@ -205,19 +249,6 @@ body { background-color: var(--color-light-brown); } -.current-color-container { - display: flex; - align-items: center; -} - -.current-color { - border: 2px solid white; - width: 60px; - height: 60px; - margin: 0 20px; - border-radius: 25%; -} - .margin-bottom-1 { margin-bottom: 1em; } diff --git a/index.html b/index.html index f623b86f..39d89ce2 100644 --- a/index.html +++ b/index.html @@ -1512,6 +1512,10 @@
+
+ + +
From 297db959becaee6f5b355c1defdd5fce28c8631f Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Fri, 18 Dec 2020 12:05:47 -0500 Subject: [PATCH 11/30] Add id to all colors --- index.html | 52 ++++++++++++++++++++++++++-------------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 39d89ce2..ff99a81e 100644 --- a/index.html +++ b/index.html @@ -1518,32 +1518,32 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

The current color is

From 482ced243899a24fc45bcd65f422539b347585b7 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Fri, 18 Dec 2020 12:09:43 -0500 Subject: [PATCH 12/30] Edit id names on colors --- index.html | 83 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 55 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index ff99a81e..f3f26cc6 100644 --- a/index.html +++ b/index.html @@ -1513,37 +1513,64 @@
- - + +
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

The current color is

From 90b905118027bf47692a1f4cba4f0e2775333f80 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Fri, 18 Dec 2020 12:31:13 -0500 Subject: [PATCH 13/30] Fix flex distribution of colors --- css/style.css | 19 +++++++----- index.html | 83 +++++++++++++++++++-------------------------------- 2 files changed, 42 insertions(+), 60 deletions(-) diff --git a/css/style.css b/css/style.css index e3f2f433..db475499 100644 --- a/css/style.css +++ b/css/style.css @@ -89,14 +89,23 @@ body { .colors-container { width: 70%; +} + +.colors-top { display: flex; flex-wrap: wrap; + justify-content: space-between; + margin-bottom: 1em; +} + +.colors-bottom { + display: flex; + flex-wrap: wrap; + justify-content: space-between; } .color { border: var(--border); - flex-direction: column; - margin-right: 1.5em; width: 30px; height: 30px; border-radius: var(--border-radius); @@ -247,8 +256,4 @@ body { .color-light-brown { background-color: var(--color-light-brown); -} - -.margin-bottom-1 { - margin-bottom: 1em; -} +} \ No newline at end of file diff --git a/index.html b/index.html index f3f26cc6..95f78ac6 100644 --- a/index.html +++ b/index.html @@ -1518,59 +1518,36 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

The current color is

From 84e2b81bec8d8e6f1764ae91e0a0bd3c07b7d459 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Fri, 18 Dec 2020 13:06:43 -0500 Subject: [PATCH 14/30] Fix flex on current color container --- css/style.css | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index db475499..7dd801b1 100644 --- a/css/style.css +++ b/css/style.css @@ -83,8 +83,8 @@ body { .bottom-content-container { display: flex; - flex-wrap: wrap; - padding: 0 30px; + /* padding: 0 30px; */ + justify-content: space-between; } .colors-container { @@ -118,14 +118,13 @@ body { .current-color-container { display: flex; align-items: center; - padding-left: 30px; } .current-color { border: var(--border); width: 60px; height: 60px; - margin: 0 20px; + margin-left: 20px;; border-radius: var(--border-radius); } @@ -133,7 +132,7 @@ body { display: flex; justify-content: flex-end; margin-bottom: 20px; - padding: 5px; + /* padding: 5px; */ } .btn { @@ -256,4 +255,4 @@ body { .color-light-brown { background-color: var(--color-light-brown); -} \ No newline at end of file +} From c9fab22511517f7d518041cb0f74575302fadd5f Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Mon, 21 Dec 2020 15:14:52 -0600 Subject: [PATCH 15/30] Did some stuff, can't remember what --- css/style.css | 2 -- index.html | 2 +- js/main.js | 3 +-- 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 7dd801b1..de395e8c 100644 --- a/css/style.css +++ b/css/style.css @@ -83,7 +83,6 @@ body { .bottom-content-container { display: flex; - /* padding: 0 30px; */ justify-content: space-between; } @@ -132,7 +131,6 @@ body { display: flex; justify-content: flex-end; margin-bottom: 20px; - /* padding: 5px; */ } .btn { diff --git a/index.html b/index.html index 95f78ac6..4fd80abd 100644 --- a/index.html +++ b/index.html @@ -1551,7 +1551,7 @@

The current color is

-
+
diff --git a/js/main.js b/js/main.js index 1fae900f..79ffbd29 100644 --- a/js/main.js +++ b/js/main.js @@ -1,3 +1,2 @@ -// Set all colors on color palette // addEventListener to the current color PublicKeyCredential. When user clicks on color from color palette the current color changes to that color -// Add even listener to each cell so that when the user clicks on the cell, it changes to the current color \ No newline at end of file +// Add even listener to each cell so that when the user clicks on the cell, it changes to the current color From 1d405473db450027f98345ef6d9cc00e688c5fa9 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Fri, 25 Dec 2020 09:41:29 -0700 Subject: [PATCH 16/30] Add JS to change current color and setup grid --- index.html | 1663 +++++----------------------------------------------- js/main.js | 21 +- 2 files changed, 153 insertions(+), 1531 deletions(-) diff --git a/index.html b/index.html index 4fd80abd..05e0f3a4 100644 --- a/index.html +++ b/index.html @@ -5,1513 +5,12 @@ Pixel Artboard - Kevin Meldau - +
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
@@ -1519,34 +18,138 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -1556,5 +159,7 @@
+ + diff --git a/js/main.js b/js/main.js index 79ffbd29..e59f4ceb 100644 --- a/js/main.js +++ b/js/main.js @@ -1,2 +1,19 @@ -// addEventListener to the current color PublicKeyCredential. When user clicks on color from color palette the current color changes to that color -// Add even listener to each cell so that when the user clicks on the cell, it changes to the current color +// Declare a empty scring variable for currentColor to be used in function +var currentColor = ""; + +// +var grid = document.getElementsByClassName("grid-container")[0]; +for (let i = 0; i < 1500; i++) { + let div = document.createElement("div"); + div.className = "grid-cell"; + div.addEventListener("click", function () { + this.style.backgroundColor = "var(" + currentColor + ")"; + }); + grid.appendChild(div); +} + +function changeCurrentColor(color) { + currentColor = "--" + color; + document.getElementById("currentColor").style.backgroundColor = + "var(" + currentColor + ")"; +} From 661813c4dd69ed4be012f69fd3acb99f57afe519 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Fri, 25 Dec 2020 21:42:06 -0700 Subject: [PATCH 17/30] Add comments and clear grid function --- index.html | 3 ++- js/main.js | 18 ++++++++++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 05e0f3a4..d8d23822 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,8 @@
- + +
diff --git a/js/main.js b/js/main.js index e59f4ceb..071a9454 100644 --- a/js/main.js +++ b/js/main.js @@ -1,19 +1,33 @@ // Declare a empty scring variable for currentColor to be used in function var currentColor = ""; -// +// Hook the grid container so that we can inject the grid cells into it with a loop var grid = document.getElementsByClassName("grid-container")[0]; +// For loop to inject all the grid cells into the grid container for (let i = 0; i < 1500; i++) { + // Create an element and save it into a variable called div let div = document.createElement("div"); + // Asign the classname of grid-cell to the new div div.className = "grid-cell"; + // Add an event listener (onClick) to the div that changes the background color div.addEventListener("click", function () { this.style.backgroundColor = "var(" + currentColor + ")"; }); + // Replace the div with the new div (and current color) grid.appendChild(div); } - +// Take a look at this again function changeCurrentColor(color) { currentColor = "--" + color; document.getElementById("currentColor").style.backgroundColor = "var(" + currentColor + ")"; } + + +// var("") +// background-color: var(--bg-grey); + +function clearConfirmation() { + confirm("This can not be undone.\nAre you sure you would like to clear this grid?"); + window.location.reload(); +} \ No newline at end of file From c4dfa97412b6123e129018ab861045328155b72b Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Fri, 25 Dec 2020 21:44:52 -0700 Subject: [PATCH 18/30] Rename clear function --- index.html | 2 +- js/main.js | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index d8d23822..4734f72b 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
- +
diff --git a/js/main.js b/js/main.js index 071a9454..d40d8b10 100644 --- a/js/main.js +++ b/js/main.js @@ -23,11 +23,10 @@ function changeCurrentColor(color) { "var(" + currentColor + ")"; } - // var("") // background-color: var(--bg-grey); -function clearConfirmation() { +function clearGrid() { confirm("This can not be undone.\nAre you sure you would like to clear this grid?"); window.location.reload(); } \ No newline at end of file From d9edc8f593d6a12df8a5f25298ecaa5965dba12e Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Fri, 25 Dec 2020 21:48:07 -0700 Subject: [PATCH 19/30] Add comment for change current color --- js/main.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/js/main.js b/js/main.js index d40d8b10..3775665b 100644 --- a/js/main.js +++ b/js/main.js @@ -16,16 +16,13 @@ for (let i = 0; i < 1500; i++) { // Replace the div with the new div (and current color) grid.appendChild(div); } -// Take a look at this again +// Function to change current color to color the user clicks on function changeCurrentColor(color) { currentColor = "--" + color; document.getElementById("currentColor").style.backgroundColor = "var(" + currentColor + ")"; } -// var("") -// background-color: var(--bg-grey); - function clearGrid() { confirm("This can not be undone.\nAre you sure you would like to clear this grid?"); window.location.reload(); From d93a2ac481e7ded5baece4392f881af682fe8b4d Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Sat, 26 Dec 2020 19:13:25 -0700 Subject: [PATCH 20/30] Add tooltip template - still needs work --- css/style.css | 25 +++++++++++++++++++++++++ index.html | 7 ++++++- js/main.js | 4 +++- 3 files changed, 34 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index de395e8c..1ab16064 100644 --- a/css/style.css +++ b/css/style.css @@ -254,3 +254,28 @@ body { .color-light-brown { background-color: var(--color-light-brown); } + +/* Tool tip from w3Schools */ +.tooltip { + position: relative; + display: inline-block; + border-bottom: 1px dotted black; +} + +.tooltip .tooltiptext { + visibility: hidden; + width: 120px; + background-color: black; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px 0; + + /* Position the tooltip */ + position: absolute; + z-index: 1; +} + +.tooltip:hover .tooltiptext { + visibility: visible; +} \ No newline at end of file diff --git a/index.html b/index.html index 4734f72b..5d2a154f 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
- +
@@ -158,6 +158,11 @@
+ +
Hover over me + Tooltip text +
+
diff --git a/js/main.js b/js/main.js index 3775665b..28e2b29d 100644 --- a/js/main.js +++ b/js/main.js @@ -17,13 +17,15 @@ for (let i = 0; i < 1500; i++) { grid.appendChild(div); } // Function to change current color to color the user clicks on +// Takes in a param of color function changeCurrentColor(color) { currentColor = "--" + color; document.getElementById("currentColor").style.backgroundColor = "var(" + currentColor + ")"; } +// Function to reload page and clear grid function clearGrid() { - confirm("This can not be undone.\nAre you sure you would like to clear this grid?"); + confirm("This can not be undone.\nAre you sure you would like to clear this canvas?"); window.location.reload(); } \ No newline at end of file From 20bf2d4b3aadc003402c149595ea24493c2e4086 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Sun, 27 Dec 2020 08:12:51 -0700 Subject: [PATCH 21/30] Add tooltip to top color row --- css/style.css | 5 +++-- index.html | 56 +++++++++++++++++++++++++-------------------------- 2 files changed, 31 insertions(+), 30 deletions(-) diff --git a/css/style.css b/css/style.css index 1ab16064..e0a40822 100644 --- a/css/style.css +++ b/css/style.css @@ -259,17 +259,18 @@ body { .tooltip { position: relative; display: inline-block; - border-bottom: 1px dotted black; + /* border-bottom: 1px dotted black; */ } .tooltip .tooltiptext { visibility: hidden; - width: 120px; + width: 110px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; + bottom: 40px; /* Position the tooltip */ position: absolute; diff --git a/index.html b/index.html index 5d2a154f..8ccfa19c 100644 --- a/index.html +++ b/index.html @@ -21,69 +21,69 @@
+ >Dark Red
+ >Red
+ >Pink
+ >Dark Orange
+ >Orange
+ >Flesh
+ >Lime
+ >Yellow
+ >Light Yellow
+ >Green
+ >Light Green
+ >Royal Blue
+ >Blue
-
Hover over me +
From 2f70ab03542bbf21904f8831fc407c629c2c2061 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Sun, 27 Dec 2020 08:16:44 -0700 Subject: [PATCH 22/30] Fix clearGrid button --- index.html | 56 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 42 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index 8ccfa19c..3ffe7e2a 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,9 @@
- +
@@ -23,67 +25,93 @@ id="color-dark-red" class="color color-dark-red tooltip" onclick="changeCurrentColor(id)" - >Dark Red
+ > + Dark Red +
Red
+ > + Red +
Pink
+ > + Pink +
Dark Orange
+ > + Dark Orange +
Orange
+ > + Orange +
Flesh
+ > + Flesh +
Lime
+ > + Lime +
Yellow
+ > + Yellow +
Light Yellow
+ > + Light Yellow +
Green
+ > + Green +
Light Green
+ > + Light Green +
Royal Blue
+ > + Royal Blue +
Blue
+ > + Blue +
Date: Sun, 27 Dec 2020 20:31:52 -0700 Subject: [PATCH 23/30] Add tooltip to all colors --- index.html | 78 ++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 52 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 3ffe7e2a..fabb14e1 100644 --- a/index.html +++ b/index.html @@ -116,69 +116,95 @@
+ > + Light Purple +
+ > + Purple +
+ > + Violet +
+ > + Light Violet +
+ > + Black +
+ > + Black 80% +
+ > + Black 60% +
+ > + Black 40% +
+ > + Black 20% +
+ > + White +
+ > + Dark Brown +
+ > + Brown +
+ > + Light Brown +
From 0f35bc40373c55d53b792d022a4a8481737a2b1b Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Sun, 3 Jan 2021 14:05:51 -0500 Subject: [PATCH 24/30] Remove unnecessary comments --- index.html | 6 ------ 1 file changed, 6 deletions(-) diff --git a/index.html b/index.html index fabb14e1..9ba3e3ca 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,6 @@
- @@ -212,11 +211,6 @@
- - -
From 2c8690d4e4e28e59cbbd38fbf92545499df6fd17 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Sun, 3 Jan 2021 14:48:28 -0500 Subject: [PATCH 25/30] Add Save to PDF function --- index.html | 7 ++++--- js/main.js | 9 +++++++++ 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 9ba3e3ca..d0325c8c 100644 --- a/index.html +++ b/index.html @@ -10,12 +10,13 @@
-
+
- + +
@@ -213,7 +214,7 @@
- + diff --git a/js/main.js b/js/main.js index 28e2b29d..58ed3b0b 100644 --- a/js/main.js +++ b/js/main.js @@ -28,4 +28,13 @@ function changeCurrentColor(color) { function clearGrid() { confirm("This can not be undone.\nAre you sure you would like to clear this canvas?"); window.location.reload(); +} + +function generatePDF() { + // Choose the element that our PDF rendered in. + const element = document.getElementById("grid-canvas"); + // Choose the element and save the PDF for our user. + html2pdf() + .from(element) + .save(); } \ No newline at end of file From e7d254c220214a399c72ab068d3fcf89186590a4 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Sun, 3 Jan 2021 14:54:59 -0500 Subject: [PATCH 26/30] Test git push --- js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/main.js b/js/main.js index 58ed3b0b..d39cc49b 100644 --- a/js/main.js +++ b/js/main.js @@ -33,7 +33,7 @@ function clearGrid() { function generatePDF() { // Choose the element that our PDF rendered in. const element = document.getElementById("grid-canvas"); - // Choose the element and save the PDF for our user. + html2pdf() .from(element) .save(); From d0cc96956c7fb9436b72734a6456dfda2b4f11be Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Sun, 3 Jan 2021 14:56:08 -0500 Subject: [PATCH 27/30] Test git push - passphrase --- js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/main.js b/js/main.js index d39cc49b..58ed3b0b 100644 --- a/js/main.js +++ b/js/main.js @@ -33,7 +33,7 @@ function clearGrid() { function generatePDF() { // Choose the element that our PDF rendered in. const element = document.getElementById("grid-canvas"); - + // Choose the element and save the PDF for our user. html2pdf() .from(element) .save(); From ccbe87fd987d382859d5e81cb123cd7ad2bdcbc3 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Mon, 4 Jan 2021 11:07:30 -0500 Subject: [PATCH 28/30] Change var to let --- js/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/main.js b/js/main.js index 58ed3b0b..1f0c7e45 100644 --- a/js/main.js +++ b/js/main.js @@ -1,8 +1,8 @@ // Declare a empty scring variable for currentColor to be used in function -var currentColor = ""; +let currentColor = ""; // Hook the grid container so that we can inject the grid cells into it with a loop -var grid = document.getElementsByClassName("grid-container")[0]; +let grid = document.getElementsByClassName("grid-container")[0]; // For loop to inject all the grid cells into the grid container for (let i = 0; i < 1500; i++) { // Create an element and save it into a variable called div From 567909bc8e4362fdd91e26c216a45d089548daa4 Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Fri, 8 Jan 2021 11:50:42 -0500 Subject: [PATCH 29/30] Change all color divs to buttons --- css/style.css | 3 +- index.html | 104 +++++++++++++++++++++++++------------------------- 2 files changed, 54 insertions(+), 53 deletions(-) diff --git a/css/style.css b/css/style.css index e0a40822..85670300 100644 --- a/css/style.css +++ b/css/style.css @@ -5,7 +5,7 @@ --bg-dark-grey: #f5f5f5; --dropshadow-grey: #888888; --border: 2px solid white; - --border-radius: 15px; + --border-radius: 10px; /* Pallate colors variables */ --color-dark-red: #800000; @@ -107,6 +107,7 @@ body { border: var(--border); width: 30px; height: 30px; + padding: 15px; border-radius: var(--border-radius); } diff --git a/index.html b/index.html index d0325c8c..68d22b80 100644 --- a/index.html +++ b/index.html @@ -21,190 +21,190 @@
-
Dark Red -
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
+
-
Light Purple -
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
+
From 077dd36b1b8ccd6b0a9476bffeb9fd366ccc2f2d Mon Sep 17 00:00:00 2001 From: Kevin Meldau <“me@kevinmeldau.com”> Date: Fri, 8 Jan 2021 11:53:35 -0500 Subject: [PATCH 30/30] Edit tooltip placement --- css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/style.css b/css/style.css index 85670300..95a696c5 100644 --- a/css/style.css +++ b/css/style.css @@ -272,6 +272,7 @@ body { border-radius: 6px; padding: 5px 0; bottom: 40px; + left: 0; /* Position the tooltip */ position: absolute;