ReCoded-Org · Ahmed183M · May 8, 2021 · May 8, 2021 · May 8, 2021 · May 8, 2021
diff --git a/README.md b/README.md
@@ -1,46 +1,47 @@
+Team:
+Ahmed Mohammed
+Saif Ali
+
 # Welcome! 👋
 
 Your challenge is to build out this cool color generating website that helps the user to pick a color palette for their designs!
 
 ### Your users should be able to:
+
 - Generate random colors at a click of a button
 - Display the colors on the screen with their hexadecimal color representation
-![2](https://user-images.githubusercontent.com/32653855/117524495-30ad9600-afc6-11eb-84ad-2fe377303b63.png)
+  ![2](https://user-images.githubusercontent.com/32653855/117524495-30ad9600-afc6-11eb-84ad-2fe377303b63.png)
 
 - Lock certain colors that they like. (When a color is locked, it won't change when user clicks the refresh button to generate new colors)
-![3](https://user-images.githubusercontent.com/32653855/117524628-c6492580-afc6-11eb-8a58-8460081ad5ec.png)
+  ![3](https://user-images.githubusercontent.com/32653855/117524628-c6492580-afc6-11eb-8a58-8460081ad5ec.png)
 
 - Save color palette with a name to local storage
-![4](https://user-images.githubusercontent.com/32653855/117524683-0b6d5780-afc7-11eb-9e55-9be924180067.png)
+  ![4](https://user-images.githubusercontent.com/32653855/117524683-0b6d5780-afc7-11eb-9e55-9be924180067.png)
 
 - User should be able to see all of their saved palettes in their library and when clicked on one, it should update the containers to the palette selected.
- ![5](https://user-images.githubusercontent.com/32653855/117524756-83d41880-afc7-11eb-9cd7-5976457155ba.png)
-
-
+  ![5](https://user-images.githubusercontent.com/32653855/117524756-83d41880-afc7-11eb-9cd7-5976457155ba.png)
 
 ### Bonus!
+
 If you've finished the above requirements, awesome work!<br>
 You can make your color picker project better by implementing the following:
-- When clicking on any of the hexidecimal color codes, it should copy that color code to the clipboard
-![6](https://user-images.githubusercontent.com/32653855/117526725-981c1380-afcf-11eb-93ca-0f6d825a3542.png)
 
+- When clicking on any of the hexidecimal color codes, it should copy that color code to the clipboard
+  ![6](https://user-images.githubusercontent.com/32653855/117526725-981c1380-afcf-11eb-93ca-0f6d825a3542.png)
 
 ### Where to get the icons?
-Use Font awesome. If you don't know about it, you can find how to use it [here](https://www.w3schools.com/icons/fontawesome_icons_intro.asp). 
-
-To learn more about font awesome, visit their [website](https://fontawesome.com/).
 
+Use Font awesome. If you don't know about it, you can find how to use it [here](https://www.w3schools.com/icons/fontawesome_icons_intro.asp).
 
+To learn more about font awesome, visit their [website](https://fontawesome.com/).
 
 ### **Instructions**
+
 - There's a lot of small functionalities to this website, it's important for you to plan how you will work on this website. It doesn't have to be perfect, but you need to know exactly what you are going to do.
 - Break the website down into smaller tasks and divide the tasks amongst your team members.
 - Start building!
 
-
-
 For this project, please don't hesitate to use the internet to your advantage and surf the web. Google things and communicate with your team members.<br>
 As always, reach out when you need help.
 
-
 Have fun and good luck!
diff --git a/index.html b/index.html
@@ -1,13 +1,78 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="./styles/style.css" />
-    <title>Document</title>
-  </head>
-  <body>
-    <script src="./scripts/script.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="./styles/style.css" />
+  <title>Document</title>
+  <script src="https://kit.fontawesome.com/35a21264fd.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+
+  <div id="colors"></div>
+
+  <div id="buttons">
+
+    <div>
+      <button id="libraryButton"><i class="fas fa-book-open"></i></button>
+      <p id="text2copy">Library</p>
+    </div>
+
+    <div>
+      <button id="generateButton"><i class="fas fa-sync-alt"></i></button>
+      <p>Generate</p>
+    </div>
+
+    <div>
+      <button id="saveButton"><i class="fas fa-save"></i></button>
+      <p>Save</p>
+    </div>
+
+  </div>
+
+  <div id="saveModal" class="modal">
+
+    <div class="modal-content">
+      <span class="close">&times;</span>
+      <p>Give your pallete a name:</p>
+      <input type="text" id="palleteName" placeholder="Enter a name">
+      <button id="savePallete">Save Pallete</button>
+    </div>
+
+  </div>
+
+  <div id="copyModal" class="modal">
+
+    <div class="modal-content">
+      <p>Color Code Copied to Your Clipboard!</p>
+      <p>📋👌</p>
+    </div>
+
+  </div>
+
+  <div id="libraryModal" class="modal">
+
+    <div class="modal-content">
+      <span class="close">&times;</span>
+      <p>Pick a pallete to load:</p>
+      <div id="loadedPalletes"></div>
+    </div>
+
+  </div>
+
+  <div id="loadModal" class="modal">
+
+    <div class="modal-content">
+      <p id="loadedText"></p>
+    </div>
+
+  </div>
+
+  <script src="./scripts/script.js"></script>
+
+</body>
+
+</html>
diff --git a/scripts/script.js b/scripts/script.js
@@ -0,0 +1,245 @@
+function lightOrDark(color) {
+
+    var r, g, b, hsp;
+    color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
+
+    r = color >> 16;
+    g = color >> 8 & 255;
+    b = color & 255;
+
+    hsp = Math.sqrt(
+        0.299 * (r * r) +
+        0.587 * (g * g) +
+        0.114 * (b * b)
+    );
+
+    if (hsp > 128) {
+        return 'light';
+    } else {
+        return 'dark';
+    }
+
+};
+
+const runColor = () => {
+
+    for (let i = 0; i < 5; i++) {
+        if (locked[i] == false) {
+            randomColors[i] = "#000000".replace(/0/g, function () {
+                return (~~(Math.random() * 16)).toString(16);
+            });
+        }
+    }
+    refreshColors();
+
+};
+
+const colors = document.querySelector("#colors");
+const libraryButton = document.querySelector("#libraryButton");
+const generateButton = document.querySelector("#generateButton");
+const saveButton = document.querySelector("#saveButton");
+const saveModal = document.getElementById("saveModal");
+const savePallete = document.getElementById("savePallete");
+const span1 = document.getElementsByClassName("close")[0];
+const copyModal = document.getElementById("copyModal");
+const libraryModal = document.getElementById("libraryModal");
+const loadedPalletes = document.getElementById("loadedPalletes");
+const span2 = document.getElementsByClassName("close")[1];
+const loadModal = document.getElementById("loadModal");
+const loadedText = document.getElementById("loadedText");
+
+let randomColors = [];
+let locked = [false, false, false, false, false];
+const refreshColors = () => {
+
+    colors.innerHTML = "";
+
+    randomColors.forEach((color, i) => {
+
+        const colorTitle = document.createElement("div");
+        colorTitle.setAttribute("id", color);
+        colorTitle.innerHTML = color.toUpperCase();
+        colorTitle.style.border = "3px solid black";
+        colorTitle.style.borderRadius = "10px";
+        if (lightOrDark(color) == "dark") {
+            colorTitle.style.color = "white";
+            colorTitle.style.border = "3px solid white";
+        }
+
+        const newLock = document.createElement("i");
+        if (locked[i] == false) newLock.setAttribute("class", "fas fa-lock-open");
+        if (locked[i] == true) newLock.setAttribute("class", "fas fa-lock");
+        newLock.setAttribute("id", color + "lock");
+        newLock.style.width = "min-content";
+        newLock.style.margin = "0px auto";
+        if (lightOrDark(color) == "dark") newLock.style.color = "white";
+
+        const newColor = document.createElement("div");
+        newColor.setAttribute("class", "colorDiv");
+        newColor.style.backgroundColor = color;
+
+        newColor.append(colorTitle);
+        newColor.append(newLock);
+        colors.append(newColor);
+
+    });
+
+}
+generateButton.addEventListener("click", runColor);
+runColor();
+
+colors.addEventListener("click", (e) => {
+    if (e.target.localName == "i") {
+        for (let i = 0; i < 5; i++) {
+
+            if (e.target.id == randomColors[i] + "lock") {
+                if (locked[i] == false) {
+                    e.target.setAttribute("class", "fas fa-lock");
+                    locked[i] = true;
+                } else if (locked[i] == true) {
+                    e.target.setAttribute("class", "fas fa-lock-open");
+                    locked[i] = false;
+                } else {
+                    console.log(`There is an error with lock${i}!`);
+                }
+            }
+
+        }
+    }
+
+    if (e.target.id.length == 7) {
+
+        window.navigator.clipboard.writeText(e.target.id.toUpperCase());
+        copyModal.style.display = "block";
+        setTimeout(() => {
+            copyModal.style.display = "none";
+        }, 2000);
+
+    }
+
+});
+
+saveButton.onclick = function () {
+    saveModal.style.display = "block";
+}
+span1.onclick = function () {
+    saveModal.style.display = "none";
+}
+
+window.onclick = function (e) {
+    if (e.target == saveModal) {
+        saveModal.style.display = "none";
+    }
+    if (e.target == libraryModal) {
+        libraryModal.style.display = "none";
+    }
+}
+
+savePallete.onclick = function () {
+
+    const palleteName = document.getElementById("palleteName");
+    if (palleteName.value in localStorage) alert("Name already exists!\nPlease write a different name!")
+    else if (palleteName.value == "") alert("Please enter a name!");
+    else {
+        randomColors.push(palleteName.value);
+        localStorage.setItem(palleteName.value, randomColors);
+        saveModal.style.display = "none";
+        palleteName.value = "";
+        randomColors = randomColors.slice(0, 5);
+    }
+
+}
+
+libraryButton.onclick = function () {
+
+    if (localStorage.length == 0) alert("You haven't saved anything!")
+    else {
+
+        loadedPalletes.innerHTML = "";
+
+        for (let i = 0; i < localStorage.length; i++) {
+
+            const loadedItem = localStorage.getItem(localStorage.key(i)).split(",");
+
+            const loadedPallete = document.createElement("div");
+            loadedPallete.setAttribute("class", "loadedItem");
+
+            const loadedPalleteName = document.createElement("span");
+            loadedPalleteName.style.display = "inline-block";
+            loadedPalleteName.style.width = "25%";
+            loadedPalleteName.style.overflowWrap = "anywhere";
+            loadedPalleteName.innerHTML = localStorage.key(i) + ":";
+
+            const loadedPalleteColorList = document.createElement("div");
+            loadedPalleteColorList.setAttribute("class", "loadedPallete");
+            loadedPalleteColorList.style.width = "50%";
+
+            const loadedPalleteColor1 = document.createElement("div");
+            loadedPalleteColor1.setAttribute("class", "palleteColor");
+            loadedPalleteColor1.style.backgroundColor = loadedItem[0];
+
+            const loadedPalleteColor2 = document.createElement("div");
+            loadedPalleteColor2.setAttribute("class", "palleteColor");
+            loadedPalleteColor2.style.backgroundColor = loadedItem[1];
+
+            const loadedPalleteColor3 = document.createElement("div");
+            loadedPalleteColor3.setAttribute("class", "palleteColor");
+            loadedPalleteColor3.style.backgroundColor = loadedItem[2];
+
+            const loadedPalleteColor4 = document.createElement("div");
+            loadedPalleteColor4.setAttribute("class", "palleteColor");
+            loadedPalleteColor4.style.backgroundColor = loadedItem[3];
+
+            const loadedPalleteColor5 = document.createElement("div");
+            loadedPalleteColor5.setAttribute("class", "palleteColor");
+            loadedPalleteColor5.style.backgroundColor = loadedItem[4];
+
+            const loadedPalleteLoad = document.createElement("span");
+            loadedPalleteLoad.setAttribute("id", localStorage.key(i))
+            loadedPalleteLoad.setAttribute("class", "loadButton");
+            loadedPalleteLoad.innerHTML = "Load";
+
+            loadedPalleteColorList.append(loadedPalleteColor1);
+            loadedPalleteColorList.append(loadedPalleteColor2);
+            loadedPalleteColorList.append(loadedPalleteColor3);
+            loadedPalleteColorList.append(loadedPalleteColor4);
+            loadedPalleteColorList.append(loadedPalleteColor5);
+
+
+            loadedPallete.append(loadedPalleteName);
+            loadedPallete.append(loadedPalleteColorList);
+            loadedPallete.append(loadedPalleteLoad);
+
+            loadedPalletes.append(loadedPallete);
+
+        }
+
+        libraryModal.style.display = "block";
+
+    }
+
+}
+
+span2.onclick = function () {
+    libraryModal.style.display = "none";
+}
+
+loadedPalletes.addEventListener("click", (e) => {
+
+    let clickedItem = e.target;
+
+    if (clickedItem.className == "loadButton") {
+
+        randomColors = localStorage.getItem(clickedItem.id).split(",");
+        loadedText.innerHTML = randomColors[5] + " Color Pallete Loaded ✔!";
+        randomColors = randomColors.slice(0, 5);
+        refreshColors();
+        libraryModal.style.display = "none";
+        loadModal.style.display = "block";
+        setTimeout(() => {
+            loadModal.style.display = "none";
+        }, 2000);
+
+    }
+
+});