Merge pull request #3 from lalonggone/feature/lock-color

Feature/lock color
lalonggone · Nov 1, 2023 · a8c3b34 · a8c3b34
2 parents dc46cdf + d7c9d17
commit a8c3b34
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -15,27 +15,43 @@ <h1>COLORANDOM</h1>
 
     <section class="color-palette">
       <container>
-        <div class="color-box" id="box1"></div>
+        <div class="color-box" id="box1">
+          <img class="locked-icon hidden" src="assets/locked.png">
+          <img class="unlocked-icon" src="assets/unlocked.png">
+        </div>
         <p class="hex-code">#EA9999</p>
       </container>
-
+      
       <container>
-        <div class="color-box" id="box2"></div>
+        <div class="color-box" id="box2">
+          <img class="locked-icon hidden" src="assets/locked.png">
+          <img class="unlocked-icon" src="assets/unlocked.png">
+        </div>
         <p class="hex-code">#FACB9C</p>
       </container>
-
+
+      <!-- Add locked/unlocked icons and classes for the other boxes -->
       <container>
-        <div class="color-box" id="box3"></div>
+        <div class="color-box" id="box3">
+          <img class="locked-icon hidden" src="assets/locked.png">
+          <img class="unlocked-icon" src="assets/unlocked.png">
+        </div>
         <p class="hex-code">#FFE59A</p>
       </container>
-
+      
       <container>
-        <div class="color-box" id="box4"></div>
+        <div class="color-box" id="box4">
+          <img class="locked-icon hidden" src="assets/locked.png">
+          <img class="unlocked-icon" src="assets/unlocked.png">
+        </div>
         <p class="hex-code">#B6D7A8</p>
       </container>
-
+      
       <container>
-        <div class="color-box" id="box5"></div>
+        <div class="color-box" id="box5">
+          <img class="locked-icon hidden" src="assets/locked.png">
+          <img class="unlocked-icon" src="assets/unlocked.png">
+        </div>
         <p class="hex-code">#A4C4CA</p>
       </container>
     </section>

diff --git a/main.js b/main.js
@@ -1,40 +1,84 @@
 //DOM Elements
 var newPaletteButton = document.querySelector(".new-palette-button");
-var colorPaletteSection = document.querySelector('.color-palette');
-var body = document.querySelector('body');
-var paragraphsToChange = document.querySelectorAll('.hex-code');
-var boxesToChange = document.querySelectorAll('.color-box');
-
+var colorPaletteSection = document.querySelector(".color-palette");
+var body = document.querySelector("body");
+var paragraphsToChange = document.querySelectorAll(".hex-code");
+var boxesToChange = document.querySelectorAll(".color-box");
+var lockedIcon = document.querySelector(".locked-icon");
+var unlockedIcon = document.querySelector(".unlocked-icon");
+var colorBox = document.querySelectorAll(
+  ".box-1, .box-2, .box-3, .box-4, .box-5"
+);
+var box1 = document.querySelector('#box1')
+var box2 = document.querySelector('#box2')
+var box3 = document.querySelector('#box3')
+var box4 = document.querySelector('#box4')
+var box5 = document.querySelector('#box5')
 
 //Event Listeners
 body.addEventListener('click', function(event) {
-    if(event.target.className === 'new-palette-button') {
-        displayHexCode();
-        displayColor();
-    }
+  if (event.target.className === 'new-palette-button') {
+      displayHexCode();
+      displayColor();
+  }
+
+  toggleLock();
 });
 
 //Event Handlers and Functions
 function getRandomIndex(array) {
   return Math.floor(Math.random() * array.length);
 }
 
+function toggleLock() {
+  if (event.target.classList.contains('unlocked-icon')) {
+    var parentContainer = event.target.closest('container');
+
+    if (parentContainer) {
+        var lockedIcon = parentContainer.querySelector('.locked-icon');
+        var unlockedIcon = parentContainer.querySelector('.unlocked-icon');
+        var colorSwatch = parentContainer.querySelector('div')
+
+        colorSwatch.classList.add('locked');
+        lockedIcon.classList.remove('hidden');
+        unlockedIcon.classList.add('hidden');
+    }
+}
+
+if (event.target.classList.contains('locked-icon')) {
+    var parentContainer = event.target.closest('container');
+    if (parentContainer) {
+        var lockedIcon = parentContainer.querySelector('.locked-icon');
+        var unlockedIcon = parentContainer.querySelector('.unlocked-icon');
+        var colorSwatch = parentContainer.querySelector('div')
+
+        colorSwatch.classList.remove('locked')
+        lockedIcon.classList.add('hidden');
+        unlockedIcon.classList.remove('hidden');
+    }
+}
+}
+
 function displayHexCode() {
-    currentPalette = [];
+  currentPalette = [];
 
-    for (var i = 0; i < paragraphsToChange.length; i++) {
-        paragraphsToChange[i].innerText = generateHexCode();
-        currentPalette.push(paragraphsToChange[i].innerText);
+  for (var i = 0; i < paragraphsToChange.length; i++) {
+    if (!boxesToChange[i].classList.contains("locked")) {
+      paragraphsToChange[i].innerText = generateHexCode();
     }
+
+    currentPalette.push(paragraphsToChange[i].innerText);
+  }
 }
 
 function displayColor() {
-    for (var i = 0; i < boxesToChange.length; i++) {
-        boxesToChange[i].style.backgroundColor = `${paragraphsToChange[i].innerText}`;
+  for (var i = 0; i < boxesToChange.length; i++) {
+    if (!boxesToChange[i].classList.contains("locked")) {
+      boxesToChange[i].style.backgroundColor = `${paragraphsToChange[i].innerText}`;
     }
+  }
 }
 
-
 function generateHexCode() {
   var hexConditions = [
     "A",
@@ -63,7 +107,6 @@ function generateHexCode() {
   return hexColor.join("");
 }
 
-
 // Starting Conditions
 displayHexCode();
-displayColor();
+displayColor();
diff --git a/styles.css b/styles.css
@@ -31,6 +31,9 @@ h1 {
   width: 100px;
   height: 100px;
   border: 4px solid black;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
 }
 
 .new-palette-button {
@@ -47,6 +50,7 @@ h1 {
 
 }
 
+
 #box1 {
   background-color: #ea9999;
 }
@@ -66,3 +70,13 @@ h1 {
 #box5 {
   background-color: #a4c4ca;
 }
+
+.locked-icon, .unlocked-icon {
+  height: 20px;
+  margin: 4px;
+}
+
+
+.hidden {
+  display: none;
+}