diff --git a/README.md b/README.md index 4405820..29fa648 100644 --- 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!
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.
As always, reach out when you need help. - Have fun and good luck! diff --git a/index.html b/index.html index 350fb9d..4ae0566 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,78 @@ - - - - - - Document - - - - - + + + + + + + Document + + + + + +
+ +
+ +
+ +

Library

+
+ +
+ +

Generate

+
+ +
+ +

Save

+
+ +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/scripts/script.js b/scripts/script.js index e69de29..5532dd3 100644 --- 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); + + } + +}); \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index e69de29..97dd3df 100644 --- a/styles/style.css +++ b/styles/style.css @@ -0,0 +1,166 @@ +html, +body { + + height: 100%; +} + +* { + text-align: center; +} + +#colors { + display: flex; + width: 100%; + height: 75%; +} + +.colorDiv { + display: flex; + flex-direction: column; + justify-content: space-evenly; + height: 100%; + width: 20%; + font-size: xx-large; +} + +.colorDiv div { + width: 50%; + margin: 0px auto; +} + +.colorDiv div:hover, +i:hover { + cursor: pointer; +} + +#buttons div p { + color: grey; + font-size: xx-large; + margin: 15px; +} + +button { + width: 80px; + height: 80px; + background-color: black; + color: white; + font-size: xx-large; + border: none; + border-radius: 10px; +} + +button:hover { + background-color: white; + border: 2px solid black; + color: black; + cursor: pointer; +} + +#buttons { + display: flex; + justify-content: space-evenly; + align-items: center; + height: 25%; +} + +.loadedItem { + height: 50px; + display: flex; + justify-content: space-evenly; + align-items: center; + margin: 10px auto; +} + +.loadedPallete { + display: flex; + height: 100%; +} + +.palleteColor { + height: 100%; + width: 20%; +} + +.loadButton { + display: inline-block; + background-color: black; + color: white; + font-size: large; + border: 1px solid white; + border-radius: 0px 10px 10px 0px; + width: 20%; + height: 50px; + line-height: 50px; +} + +.loadButton:hover { + background-color: white; + border: 1px solid black; + color: black; + cursor: pointer; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0, 0, 0); + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-content { + background-color: #fefefe; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 20%; + border: none; + border-radius: 25px; +} + +.modal-content p { + color: black; + font-size: x-large; +} + +.modal-content input { + height: 40px; + width: 60%; + font-size: large; + border-radius: 10px; + border: 1px dashed grey; +} + +.modal-content button { + line-height: 40px; + height: 20%; + width: 35%; + font-size: large; + border: 2px white solid; +} + +.modal-content button:hover { + background-color: white; + border: 2px solid black; + color: black; + cursor: pointer; +} + +.close { + color: red; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} \ No newline at end of file