- Add color picker

Hoocs151 · May 10, 2023 · a5ac893 · a5ac893
1 parent 95ffd5e
commit a5ac893
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -12,6 +12,12 @@
 
 <body>
     <div class="container">
+        <div class="color-picker-wrapper">
+            <label for="color-picker">
+                Color Picker:
+            </label>
+            <input type="color" id="color-picker" value="#000000" />
+        </div>
         <div class="wrapper">
             <label for="red">
                 R

diff --git a/script.js b/script.js
@@ -8,6 +8,25 @@ const rColor = document.getElementById("red")
 const gColor = document.getElementById("green")
 const bColor = document.getElementById("blue")
 
+const colorPicker = document.querySelector("#color-picker")
+
+const pickColor = () => {
+    const hex = colorPicker.value
+    const rgb = hexToRgb(hex)
+    rColor.value = rgb.r
+    gColor.value = rgb.g
+    bColor.value = rgb.b
+    generateColor()
+}
+
+const hexToRgb = (hex) => {
+    const r = parseInt(hex.substring(1,3), 16)
+    const g = parseInt(hex.substring(3,5), 16)
+    const b = parseInt(hex.substring(5,7), 16)
+    return { r, g, b }
+}
+
+colorPicker.addEventListener("change", pickColor)
 
 const generateColor = () => {
     let rColorValue = rColor.value

diff --git a/style.css b/style.css
@@ -257,4 +257,29 @@ button:focus {
 #copy-btn:focus {
     outline: none;
     box-shadow: 0 0 0 2px #0075ff;
+}
+
+.color-picker-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    margin-bottom: 2.2em;
+}
+
+.color-picker-wrapper label {
+    font-size: 1.2em;
+    color: #6c757d;
+    margin-right: 0.5em;
+}
+
+.color-picker-wrapper input[type="color"] {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    border: none;
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none;
+    border-radius: 50%;
+    cursor: pointer;
 }