JS-Beginners · AbdullahNisarG · May 17, 2022
diff --git a/css/all.min.css b/css/all.min.css
diff --git a/css/bootstrap.min.css b/css/bootstrap.min.css
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,53 @@
-button {
-    margin-top: 50vh
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: #ee82ee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.container > * {
+    margin-bottom: 2rem;
+}
+
+.container:last-child {
+    margin-bottom: 0;
+}
+
+.colorCode > input {
+    text-align: center;
+    padding: 10px 0px;
+    border-radius: 10px;
+    outline: none;
+    color: white;
+    border: 1px solid;
+    box-shadow: 1px 1px 1px;
+    font-size: 20px;
+    width: 150px;
+}
+
+.button > button {
+    cursor: pointer;
+    padding: 10px;
+    border-radius: 8px;
+    border: none;
+    box-shadow: 0px 0px 5px 4px white;
+    color: #ee82ee;
+    outline: none;
+}
+
+.button > button:focus {
+    border: 2px solid white;
 }
diff --git a/index.html b/index.html
@@ -1,35 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <!--bootstrap-->
-    <link rel="stylesheet" href="./css/bootstrap.min.css">
-    <!--main-->
+    <title>Color Generator</title>
     <link rel="stylesheet" href="./css/style.css">
-    <!--google fonts -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Courgette">
-    <!-- font awesome-->
-    <!-- for local copies of font awesome, ensure webfont folder is also in local root directory-->
-    <link rel="stylesheet" href="./css/all.min.css">
-    </head>
+</head>
+
 <body>
     <div class="container">
-        <div class="row max-height align-items-center text-center">
-            <div class="col">
-                <button class="btn btn-outline-secondary">Click Me!</button>
-            </div> 
-
+        <div class="colorCode">
+            <input type="text" value="#ee82ee" disabled>
+        </div>
+        <div class="button">
+            <button>Change Color</button>
         </div>
-
     </div>
-
-    <!--jQuery-->
-    <script src="./js/jquery-3.4.1.min.js"></script>
-    <!--bootstrap-->
-    <script src="./js/bootstrap.bundle.min.js"></script>
+
     <script src="./js/script.js"></script>
 </body>
+
 </html>
diff --git a/js/bootstrap.bundle.min.js b/js/bootstrap.bundle.min.js
diff --git a/js/jquery-3.4.1.min.js b/js/jquery-3.4.1.min.js
diff --git a/js/script.js b/js/script.js
@@ -1,12 +1,38 @@
-//Choose a random color
-const button = document.querySelector('button')
-const body = document.querySelector('body')
-const colors = ['red', 'green', 'blue', 'yellow', 'pink', 'purple']
+// Select all elements needed
+const button = document.querySelector("button");
+const body = document.querySelector("body");
+const codeInput = document.querySelector(".colorCode > input");
 
-body.style.backgroundColor = 'violet'
-button.addEventListener('click', changeBackground)
+//Choose a random color
+const arrayOfColorFunctions = [
+  "0",
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "a",
+  "b",
+  "c",
+  "d",
+  "e",
+  "f",
+];
 
-function changeBackground(){
-const colorIndex= parseInt(Math.random()*colors.length)
-body.style.backgroundColor = colors[colorIndex]
+function newColor() {
+  randomColor = "#";
+  for (let x = 0; x < 6; x++) {
+    let index = Math.floor(Math.random() * 16);
+    let value = arrayOfColorFunctions[index];
+    randomColor += value;
+  }
+  codeInput.value = randomColor;
+  button.style.color = randomColor;
+  body.style.backgroundColor = randomColor;
 }
+
+button.addEventListener("click", newColor);
diff --git a/webfonts/fa-brands-400.eot b/webfonts/fa-brands-400.eot
diff --git a/webfonts/fa-brands-400.svg b/webfonts/fa-brands-400.svg
diff --git a/webfonts/fa-brands-400.ttf b/webfonts/fa-brands-400.ttf
diff --git a/webfonts/fa-brands-400.woff b/webfonts/fa-brands-400.woff
diff --git a/webfonts/fa-brands-400.woff2 b/webfonts/fa-brands-400.woff2
diff --git a/webfonts/fa-regular-400.eot b/webfonts/fa-regular-400.eot
diff --git a/webfonts/fa-regular-400.svg b/webfonts/fa-regular-400.svg
diff --git a/webfonts/fa-regular-400.ttf b/webfonts/fa-regular-400.ttf
diff --git a/webfonts/fa-regular-400.woff b/webfonts/fa-regular-400.woff
diff --git a/webfonts/fa-regular-400.woff2 b/webfonts/fa-regular-400.woff2
diff --git a/webfonts/fa-solid-900.eot b/webfonts/fa-solid-900.eot
diff --git a/webfonts/fa-solid-900.svg b/webfonts/fa-solid-900.svg
diff --git a/webfonts/fa-solid-900.ttf b/webfonts/fa-solid-900.ttf
diff --git a/webfonts/fa-solid-900.woff b/webfonts/fa-solid-900.woff
diff --git a/webfonts/fa-solid-900.woff2 b/webfonts/fa-solid-900.woff2