From fd44a84f6dec5a76b00fd8eb17eec944ebd7d6b1 Mon Sep 17 00:00:00 2001
From: Marvin Scham <dev@marvinscham.de>
Date: Sun, 2 May 2021 18:04:47 +0200
Subject: [PATCH] Added custom hex color input

---
 main.html     |  4 ++++
 script.js     |  8 ++++++++
 style.css     | 19 +++++++++++++++++++
 style.css.map |  2 +-
 style.scss    | 18 ++++++++++++++++++
 5 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/main.html b/main.html
index b9e89f2..dc161fd 100644
--- a/main.html
+++ b/main.html
@@ -33,6 +33,10 @@
             <h1>Spine Color</h1>
             <div id="dc" class="col"></div>
             <div id="palette"></div>
+            <div id="customcol">
+                <label for="custom">Custom Hex Value</label>
+                <input type="text" name="custom" id="custom" placeholder="#000000" pattern="#[0-9A-Fa-f]{6}">
+            </div>
         </div>
     </div>
     <div id="footer">
diff --git a/script.js b/script.js
index 89d5be8..96c2c75 100644
--- a/script.js
+++ b/script.js
@@ -99,4 +99,12 @@ function rgbToHex(r, g, b) {
 
 //##########################################################################################################################
 
+const custom = document.getElementById("custom");
+
+custom.addEventListener("keyup", function () {
+    if (custom.value.length == 7) {
+        document.getElementById("img").style.borderColor = custom.value;
+    }
+});
+
 renew();
\ No newline at end of file
diff --git a/style.css b/style.css
index 2db4459..0335a45 100644
--- a/style.css
+++ b/style.css
@@ -21,6 +21,11 @@ body {
   font-size: 2em;
 }
 
+h1 {
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
 #content {
   margin-top: 100px;
   min-height: calc(100vh - 100px);
@@ -84,6 +89,20 @@ body {
   margin-left: 4px;
 }
 
+#content #customcol {
+  margin-top: 1rem;
+}
+
+#content #customcol input {
+  padding: 0.5rem;
+  -webkit-transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease;
+}
+
+#content #customcol input:invalid {
+  background-color: lightcoral;
+}
+
 #content input#file {
   position: absolute;
   height: 47px;
diff --git a/style.css.map b/style.css.map
index 483e7ec..bf16352 100644
--- a/style.css.map
+++ b/style.css.map
@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "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",
+    "mappings": "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",
     "sources": [
         "style.scss"
     ],
diff --git a/style.scss b/style.scss
index 8b41532..1f5c603 100644
--- a/style.scss
+++ b/style.scss
@@ -21,6 +21,11 @@ body {
   }
 }
 
+h1 {
+  margin: 0;
+  margin-bottom: 1rem;
+}
+
 #content {
   margin-top: 100px;
   min-height: calc(100vh - 100px);
@@ -81,6 +86,19 @@ body {
     }
   }
 
+  #customcol {
+    margin-top: 1rem;
+
+    input {
+      padding: 0.5rem;
+      transition: background-color 0.2s ease;
+
+      &:invalid {
+        background-color: lightcoral;
+      }
+    }
+  }
+
   input#file {
     position: absolute;
     height: 47px;