Merge pull request #2 from lalonggone/feat/Palette-button

Feat/palette button

data.js

@@ -0,0 +1,2 @@
+var currentPalette = [];
+

index.html

@@ -6,7 +6,7 @@
     <title>Colorandom</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
 
     <link rel="stylesheet" href="styles.css" />
   </head>
@@ -16,28 +16,34 @@ <h1>COLORANDOM</h1>
     <section class="color-palette">
       <container>
         <div class="color-box" id="box1"></div>
-        <p>#EA9999</p>
+        <p class="hex-code">#EA9999</p>
       </container>
 
       <container>
         <div class="color-box" id="box2"></div>
-        <p>#FACB9C</p>
+        <p class="hex-code">#FACB9C</p>
       </container>
 
       <container>
         <div class="color-box" id="box3"></div>
-        <p>#FFE59A</p>
+        <p class="hex-code">#FFE59A</p>
       </container>
 
       <container>
         <div class="color-box" id="box4"></div>
-        <p>#B6D7A8</p>
+        <p class="hex-code">#B6D7A8</p>
       </container>
 
       <container>
         <div class="color-box" id="box5"></div>
-        <p>#A4C4CA</p>
+        <p class="hex-code">#A4C4CA</p>
       </container>
     </section>
+
+    <button class="new-palette-button">
+      New Palette
+    </button>
   </body>
+  <script src="data.js"></script>
+  <script src="main.js"></script>
 </html>

main.js

@@ -0,0 +1,69 @@
+//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');
+
+
+//Event Listeners
+body.addEventListener('click', function(event) {
+    if(event.target.className === 'new-palette-button') {
+        displayHexCode();
+        displayColor();
+    }
+});
+
+//Event Handlers and Functions
+function getRandomIndex(array) {
+  return Math.floor(Math.random() * array.length);
+}
+
+function displayHexCode() {
+    currentPalette = [];
+
+    for (var i = 0; i < paragraphsToChange.length; i++) {
+        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}`;
+    }
+}
+
+
+function generateHexCode() {
+  var hexConditions = [
+    "A",
+    "B",
+    "C",
+    "D",
+    "E",
+    "F",
+    "0",
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+  ];
+  var hexColor = ["#"];
+
+  for (var i = 0; i < 6; i++) {
+    hexColor.push(hexConditions[getRandomIndex(hexConditions)]);
+  }
+
+  return hexColor.join("");
+}
+
+
+// Starting Conditions
+displayHexCode();
+displayColor();

styles.css

@@ -23,7 +23,7 @@ h1 {
 .color-palette {
   display: flex;
   width: 66%;
-  height: 400px;
+  height: 200px;
   justify-content: space-evenly;
 }
 
@@ -33,6 +33,20 @@ h1 {
   border: 4px solid black;
 }
 
+.new-palette-button {
+  color: white;
+  font-size: large;
+  font-weight: 200;
+  font-family: "Poppins", sans-serif;
+  padding: 3px;
+  height: 40px;
+  width: 200px;
+  border-radius: 1px 50px; 
+  background-color: black;
+  border: none;
+
+}
+
 #box1 {
   background-color: #ea9999;
 }