done

Oakwood811 · Oakwood811 · commit 03fa62c89455 · 2022-12-14T17:32:02.000-05:00
diff --git a/My projects/Random Color Generator/felix-dubois-robert-CuEvrPd3NYc-unsplash.jpg b/My projects/Random Color Generator/felix-dubois-robert-CuEvrPd3NYc-unsplash.jpg
diff --git a/My projects/Random Color Generator/home.html b/My projects/Random Color Generator/home.html
@@ -0,0 +1,20 @@
+<!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">
+  <title>Random Color Generator</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <header>
+    <h1>Random Color Generator</h1>
+  </header>
+  <section>
+    <div class="container">
+    </div>
+  </section>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/My projects/Random Color Generator/script.js b/My projects/Random Color Generator/script.js
@@ -0,0 +1,45 @@
+// Convert the id into a element
+const containerEl = document.querySelector(".container")
+
+// Using FOR LOOP 
+// in for loop index start at 0 and you can replace array.length with the number of elements you want
+for (let index = 0; index < 30; index++) {
+  // We have to create an element for the div
+  const colorContainerEl = document.createElement("div")
+  // Then, to add a class we can use the classList property and add method
+  colorContainerEl.classList.add("color-container")
+  //Next, we need to append this new element inside this container... so write container element.append
+  containerEl.appendChild(colorContainerEl)
+}
+const colorContainerEls = document.querySelectorAll(".color-container")
+
+generateColors();
+
+function generateColors(){
+  colorContainerEls.forEach((colorContainerEl) => {
+    const newColorCode = randomColor();
+    colorContainerEl.style.backgroundColor = "#" + newColorCode;
+    colorContainerEl.innerText = "#" + newColorCode;
+  });
+}
+
+//Back in HTML remove the boxes we created with the "div"
+
+//Create a color codes using a function
+
+function randomColor() {
+  const chars = "0123456789abcdef"
+  const colorCodeLength = 6;
+  let colorCode = ""; //start with empty and then we use for loop again, replace array.length now with the colorCodeLength 
+  for (let index = 0; index < colorCodeLength; index++) {
+    // want to create a variable from 0-15 from the chars
+    const randomNumber = Math.floor(Math.random()*
+    chars.length)
+    colorCode += chars.substring(randomNumber,randomNumber+1)
+   
+  }
+  return colorCode;
+}
+
+
+
diff --git a/My projects/Random Color Generator/style.css b/My projects/Random Color Generator/style.css
@@ -0,0 +1,38 @@
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+body{
+  background-image: url(felix-dubois-robert-CuEvrPd3NYc-unsplash.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+h1 {
+  text-align: center;
+  color: white;
+  text-shadow: 2px 3px 4px grey;
+  text-decoration:underline
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.color-container {
+  background-color: orange;
+  width: 300px;
+  height: 150px;
+  color: white;
+  margin: 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 25px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  border: solid black 2px;
+  border-radius: 10px;
+}
