From 24ac47599b26f93664fbed26b1f450ba0d9f6383 Mon Sep 17 00:00:00 2001
From: jacquikeating <j.keating@live.ca>
Date: Sun, 14 Apr 2024 16:33:06 -0400
Subject: [PATCH] Modularized JS

Separated code related to theme switching and copying colour codes to their own files.
---
 index.css               | 31 ++++----------
 index.html              | 22 +++++-----
 index.js                | 91 +++++++----------------------------------
 modules/copy-code.js    | 42 +++++++++++++++++++
 modules/theme-switch.js | 32 +++++++++++++++
 5 files changed, 107 insertions(+), 111 deletions(-)
 create mode 100644 modules/copy-code.js
 create mode 100644 modules/theme-switch.js

diff --git a/index.css b/index.css
index dade2f4..909334b 100644
--- a/index.css
+++ b/index.css
@@ -135,7 +135,7 @@ select, input:not(.clr-input) {
 .input:focus,
 .input:active
  {
-    /* font-weight: 700;    */
+    font-weight: 700;   
     outline: solid var(--clr-outline) 5px;
     border: 2px solid var(--clr-border);
 }
@@ -154,7 +154,11 @@ select, input:not(.clr-input) {
     color: var(--clr-text);
     pointer-events: none;
     letter-spacing: 1.75px;
-    font-weight: 500;
+    font-weight: 600;
+}
+
+#clr-input:hover ~ #clr-input-text {
+    font-weight: 800;
 }
 
 .scheme-select {
@@ -192,26 +196,6 @@ select, input:not(.clr-input) {
     position: relative;
 }
 
-#clr-0{
-    background-color: #3EEBD8;
-}
-
-#clr-1 {
-    background-color: #42CDED;
-}
-
-#clr-2 {
-    background-color: #459CEE;
-}
-
-#clr-3 {
-    background-color: #496CF0;
-}
-
-#clr-4 {
-    background-color: #5B4DF1;
-}
-
 .clr-hex-code {
     width: 100px;
     padding: 10px;
@@ -318,7 +302,6 @@ div > span {
         position: relative;
         bottom: 0;
         right: 0;
-        font-size: 1.15em;
     }
 
     @keyframes copied {
@@ -363,7 +346,7 @@ div > span {
         border-radius: 6px;
         text-align: center;
     }
-
+    
     button {
         line-height: 0;
     }
diff --git a/index.html b/index.html
index 1fcfb5d..b1c5f94 100644
--- a/index.html
+++ b/index.html
@@ -37,22 +37,22 @@ <h1>Palette</h1>
             
             <div class="inputs-container">
                 
-                <input type="color" class="input clr-input" id="clr-input" aria-label="Select a seed colour" value="#459CEE"></input>
-                
+                <input type="color" class="input clr-input" id="clr-input" aria-label="Select a seed colour" value="#46F0DD"></input>
+                <p id="clr-input-text"></p>
+
                 <select class="input scheme-select" aria-label="Select a colour scheme type">
                     <option class="scheme-option" value="monochrome">Monochrome</option>
                     <option class="scheme-option" value="monochrome-dark">Monochrome Dark</option>
                     <option class="scheme-option" value="monochrome-light">Monochrome Light</option>
-                    <option class="scheme-option" value="analogic">Analogic</option>
+                    <option class="scheme-option" value="analogic" selected="selected">Analogic</option>
                     <option class="scheme-option" value="complement">Complement</option>
                     <option class="scheme-option" value="analogic-complement">Analogic-Complement</option>
                     <option class="scheme-option" value="triad">Triad</option>
                     <option class="scheme-option" value="quad">Quad</option>
                 </select>
                 
-                <p id="clr-input-text">#459CEE</p>
                 <button class="input get-scheme-btn">Get colour scheme</button>
-            
+
             </div>
             
             <p class="hint">Click anywhere on a colour to copy its hex code!</p>
@@ -64,32 +64,32 @@ <h1>Palette</h1>
             
             <div class="clr" id="clr-0">
                 <span id="clr-0-span"></span>
-                <p class="clr-hex-code" id="clr-0-text">#3EEBD8</p>
+                <p class="clr-hex-code" id="clr-0-text"></p>
             </div>
             
             <div class="clr" id="clr-1">
                 <span id="clr-1-span"></span>
-                <p class="clr-hex-code" id="clr-1-text">#42CDED</p>
+                <p class="clr-hex-code" id="clr-1-text"></p>
             </div>
             
             <div class="clr" id="clr-2">
                 <span id="clr-2-span"></span>
-                <p class="clr-hex-code" id="clr-2-text">#459CEE</p>
+                <p class="clr-hex-code" id="clr-2-text"></p>
             </div>
             
             <div class="clr" id="clr-3">
                 <span id="clr-3-span"></span>
-                <p class="clr-hex-code" id="clr-3-text">#496CF0</p>
+                <p class="clr-hex-code" id="clr-3-text"></p>
             </div>
             
             <div class="clr" id="clr-4">
                 <span id="clr-4-span"></span>
-                <p class="clr-hex-code" id="clr-4-text">#5B4DF1</p>
+                <p class="clr-hex-code" id="clr-4-text"></p>
             </div>
             
         </main>
         
-        <script type="module" src="index.js"></script>
+        <script type="module" src="./index.js"></script>
         <script src="https://kit.fontawesome.com/1f9b885cb6.js" crossorigin="anonymous"></script>
 
     </body>
diff --git a/index.js b/index.js
index 66bc16c..7a5fedb 100644
--- a/index.js
+++ b/index.js
@@ -1,7 +1,9 @@
-// ELEMENT REFERENCES -----------------------------------------------------------------
+// IMPORTS ----------------------------------------------------------------
+import { lightThemeBtn, darkThemeBtn, applyLightTheme, applyDarkTheme } from './modules/theme-switch.js'
+import { copyCode } from './modules/copy-code.js'
 
-const lightThemeBtn = document.getElementById("light-theme-btn")
-const darkThemeBtn = document.getElementById("dark-theme-btn")
+
+// ELEMENT REFERENCES ----------------------------------------------------------------
 const clrInput = document.querySelector("#clr-input")
 const clrInputText = document.querySelector("#clr-input-text")
 const schemeSelect = document.querySelector(".scheme-select")
@@ -9,38 +11,20 @@ const getSchemeBtn = document.querySelector(".get-scheme-btn")
 const clrDivs = document.querySelectorAll(".clr")
 
 
-
 // GLOBAL VARIABLES -----------------------------------------------------------------
-
-let seedClrData
 let clrsArray
-let theme = 'dark'
 let seedClr = clrInput.value.replace(/#/, "")
-let schemeType
-
-
 
-// LISTENERS -----------------------------------------------------------------
 
+// LISTENERS ------------------------------------------------------------------------
 // Selecting dark or light mode "fills in" the corresponding icon and applies the theme
-lightThemeBtn.addEventListener("click", function() {
-    theme = 'light'
-    lightThemeBtn.innerHTML = `<i class="fa-solid fa-sun"></i>`
-    darkThemeBtn.innerHTML = `<i class="fa-regular fa-moon"></i>`
-    applyLightTheme()
-})
-
-darkThemeBtn.addEventListener("click", function() {
-    theme = 'dark'
-    darkThemeBtn.innerHTML = `<i class="fa-solid fa-moon"></i>`
-    lightThemeBtn.innerHTML = `<i class="fa-regular fa-sun"></i>`
-    applyDarkTheme()
-})
+lightThemeBtn.addEventListener("click", applyLightTheme)
+darkThemeBtn.addEventListener("click", applyDarkTheme)
 
 // Calls updateClrInput() whenever user chooses a colour, not just when clicking getSchemeBtn
 clrInput.addEventListener("input", updateClrInput)
 
-// getSchemeBtn triggers a small chain of events, starting with getColourScheme()
+// getSchemeBtn triggers getColourScheme() followed by updatePalette()
 getSchemeBtn.addEventListener("click", getColourScheme)
 
 // Triggers copyCode() whenever any colour is clicked
@@ -49,7 +33,7 @@ for (let i = 0; i < clrDivs.length; i++) {
 }
 
 
-// FUNCTIONS
+// FUNCTIONS -------------------------------------------------------------------------
 // Displays the hex code of the seed colour each time the user changes it
 function updateClrInput() {
     clrInputText.textContent = clrInput.value.toUpperCase()
@@ -57,15 +41,14 @@ function updateClrInput() {
     fetch(`https://www.thecolorapi.com/id?hex=${seedClr}`)
         .then(res => res.json())
         .then(data => {
-            seedClrData = data
-             clrInputText.style.color = seedClrData.contrast.value
-             clrInput.setAttribute("data-contrast", `${seedClrData.contrast.value}`)
+             clrInputText.style.color = data.contrast.value
+             clrInput.setAttribute("data-contrast", `${data.contrast.value}`)
         })
 }
 
 // Get colour scheme, step 1: Call API to fill clrsArray variable with data
 function getColourScheme() {
-    schemeType = document.querySelector(".scheme-select").value    
+    let schemeType = document.querySelector(".scheme-select").value    
     fetch(`https://www.thecolorapi.com/scheme?hex=${seedClr}&mode=${schemeType}&count=5`)
         .then(res => res.json())
         .then(data => {
@@ -88,49 +71,5 @@ function updatePalette(){
     }
 }
 
-// Code-copying function 1: Basically just sets up all the arguments the other functions need
-function copyCode(e) {
-    let targetClrDiv = e.target
-
-    if (e.target.tagName === "P") {
-        targetClrDiv = e.target.parentElement
-    }
-        
-    let targetClrDivId = targetClrDiv.id
-    let codeToCopy = document.querySelector(`#${targetClrDivId} p`).textContent
-    let contrastTextClr = targetClrDiv.getAttribute("data-contrast")
-    tempTextArea(codeToCopy, targetClrDivId, contrastTextClr)
-}
-
-// code-copy 2: Cretes a temporary <textarea> so we can put our text in it and then copy from that.
-// There's gotta be an easier way of doing this... test the non-Scrimba option on desktop
-function tempTextArea(codeToCopy, targetClrDivId, contrastTextClr) {
-     const textArea = document.createElement('textarea')
-        textArea.value = codeToCopy
-        textArea.style.opacity = 0
-        document.body.appendChild(textArea)
-        textArea.focus()
-        textArea.select()
-        document.execCommand('copy')
-    document.body.removeChild(textArea)
-    
-    showCopiedSpan(codeToCopy, targetClrDivId, contrastTextClr)
-}
-
-// Code-copy step 3: 
-function showCopiedSpan(codeToCopy, targetClrDivId, contrastTextClr) {
-    const copiedSpan = document.querySelector(`#${targetClrDivId}-span`)
-    copiedSpan.classList.add("copied")
-    copiedSpan.style.color = contrastTextClr
-    copiedSpan.innerHTML = `${codeToCopy} <br> copied!`
-    setTimeout(function(){copiedSpan.classList.remove('copied')}, 650)
-}
-
-// Dark/light theme
-function applyLightTheme() {
-    document.querySelector("html").classList.add("light-theme")
-}
-
-function applyDarkTheme() {
-    document.querySelector("html").classList.remove("light-theme")
-}
+updateClrInput()
+getColourScheme()
\ No newline at end of file
diff --git a/modules/copy-code.js b/modules/copy-code.js
new file mode 100644
index 0000000..8f0095a
--- /dev/null
+++ b/modules/copy-code.js
@@ -0,0 +1,42 @@
+// EXPORT -----------------------------------------------------------------------------
+export { copyCode, tempTextArea, showCopiedSpan }
+
+
+// FUNCTIONS --------------------------------------------------------------------------
+// Code-copying function 1: Basically just sets up all the arguments the other functions need
+function copyCode(e) {
+    let targetClrDiv = e.target
+
+    if (e.target.tagName === "P") {
+        targetClrDiv = e.target.parentElement
+    }
+        
+    let targetClrDivId = targetClrDiv.id
+    let codeToCopy = document.querySelector(`#${targetClrDivId} p`).textContent
+    let contrastTextClr = targetClrDiv.getAttribute("data-contrast")
+    tempTextArea(codeToCopy, targetClrDivId, contrastTextClr)
+}
+
+// code-copy 2: Cretes a temporary <textarea> so we can put our text in it and then copy from that.
+// navigator.clipboard.writeText would be better, but it wasn't working in the Scrimba editor
+function tempTextArea(codeToCopy, targetClrDivId, contrastTextClr) {
+     const textArea = document.createElement('textarea')
+        textArea.value = codeToCopy
+        textArea.style.opacity = 0
+        document.body.appendChild(textArea)
+        textArea.focus()
+        textArea.select()
+        document.execCommand('copy')
+    document.body.removeChild(textArea)
+    
+    showCopiedSpan(codeToCopy, targetClrDivId, contrastTextClr)
+}
+
+// Code-copy step 3: display feedback to user
+function showCopiedSpan(codeToCopy, targetClrDivId, contrastTextClr) {
+    const copiedSpan = document.querySelector(`#${targetClrDivId}-span`)
+    copiedSpan.classList.add("copied")
+    copiedSpan.style.color = contrastTextClr
+    copiedSpan.innerHTML = `${codeToCopy} <br> copied!`
+    setTimeout(function(){copiedSpan.classList.remove('copied')}, 650)
+}
\ No newline at end of file
diff --git a/modules/theme-switch.js b/modules/theme-switch.js
new file mode 100644
index 0000000..4527725
--- /dev/null
+++ b/modules/theme-switch.js
@@ -0,0 +1,32 @@
+// EXPORT -----------------------------------------------------------------------------
+export { lightThemeBtn, darkThemeBtn, applyLightTheme, applyDarkTheme }
+
+
+// ELEMENT REFERENCES -----------------------------------------------------------------
+const lightThemeBtn = document.getElementById("light-theme-btn")
+const darkThemeBtn = document.getElementById("dark-theme-btn")
+
+
+// GLOBAL VARIABLE(S)  ----------------------------------------------------------------
+let theme = 'dark'
+
+
+// LISTENERS --------------------------------------------------------------------------
+lightThemeBtn.addEventListener("click", applyLightTheme)
+darkThemeBtn.addEventListener("click", applyDarkTheme)
+
+
+// FUNCTIONS --------------------------------------------------------------------------
+function applyLightTheme() {
+    theme = 'light'
+    lightThemeBtn.innerHTML = `<i class="fa-solid fa-sun"></i>`
+    darkThemeBtn.innerHTML = `<i class="fa-regular fa-moon"></i>`
+    document.querySelector("html").classList.add("light-theme")
+}
+
+function applyDarkTheme() {
+    theme = 'dark'
+    darkThemeBtn.innerHTML = `<i class="fa-solid fa-moon"></i>`
+    lightThemeBtn.innerHTML = `<i class="fa-regular fa-sun"></i>`
+    document.querySelector("html").classList.remove("light-theme")
+}
\ No newline at end of file