Add files via upload

app.css

@@ -0,0 +1,112 @@
+body {
+  margin: 0;
+  padding: 0;
+  background-color: #232323;
+  font-family: "Raleway";
+}
+
+h1 {
+  margin: 0;
+  width: 100%;
+  background-color: steelblue;
+  text-align: center;
+  height: 140px;
+  color: white;
+  text-transform: uppercase;
+  font-size: 2em;
+  line-height: 1.4em;
+  font-weight: 400;
+  transition: all 0.8s;
+}
+h1 span{
+  font-size: 1.4em;
+  font-weight: 500;
+}
+#colorDisplay {
+  display: block;
+}
+#container {
+  max-width: 600px;
+  margin: 20px auto;
+}
+.squares {
+  padding-bottom: 30%;
+  background-color: purple;
+  float: left;
+  width: 30%;
+  margin: 1.66%;
+  border-radius: 15%;
+  transition: all 0.8s;
+}
+#stripe {
+  width: 100%;
+  background-color: white;
+  margin-top: 0;
+  text-align: center;
+}
+.visible {
+  display: none;
+}
+#div-1 {
+  display: flex;
+  width: 59%;
+  margin: 0 auto;
+  justify-content: space-between;
+}
+#reset {
+  color: steelblue;
+  outline: none;
+  border: none;
+  box-shadow: none;
+  font-family: "Raleway";
+  transition-property: all;
+  background-color: white;
+
+}
+#reset:hover{
+  background-color: steelblue;
+  color: white;
+}
+
+button {
+  border: none;
+  outline: none;
+  height: 100%;
+  color: steelblue;
+  font-weight: 600;
+  font-size: 1em;
+  background-color: white;
+  transition-property: all;
+  transition-duration: 0.8s;
+}
+button:hover{
+  background-color: steelblue;
+  color: white;
+}
+
+.selected {
+  background-color: steelblue;
+  color: white;
+}
+
+@media screen and (max-width: 414px){
+  h1{
+    font-size: 1.8em
+  }
+  h1 span{
+font-size: 1.2em;
+  }
+  #div-1{
+    width: 80%;
+  }
+  #container{
+    margin: 40px auto;
+  }
+
+}
+@media screen and (max-width: 375px){
+  #div-1{
+    width: 95%;
+  }
+
+}

app.js

@@ -0,0 +1,108 @@
+var squares = document.querySelectorAll(".squares");
+var colorDisplay = document.getElementById("colorDisplay");
+var message = document.getElementById("message");
+var easyBtn = document.getElementById("easyBtn");
+var hardBtn = document.getElementById("hardBtn");
+var resetBtn = document.getElementById("reset");
+var h1 = document.querySelector("h1");
+var colors = [];
+var pickedColor;
+
+function randomNumber() {
+  var num1 = Math.floor(Math.random() * 256);
+  var num2 = Math.floor(Math.random() * 256);
+  var num3 = Math.floor(Math.random() * 256);
+  return `rgb(${num1}, ${num2}, ${num3})`;
+}
+
+function randomColor(num) {
+  for (var i = 0; i < num; i++) {
+    colors.push(randomNumber());
+    randomNumber();
+  }
+}
+
+function pickColor(num) {
+  pickedColor = colors[Math.floor(Math.random() * num)];
+  colorDisplay.textContent = pickedColor;
+}
+
+function changeColor() {
+  for (var i = 0; i < squares.length; i++) {
+    squares[i].style.backgroundColor = pickedColor;
+  }
+  h1.style.backgroundColor = pickedColor;
+}
+
+function assignColors() {
+  for (var i = 0; i < squares.length; i++) {
+    squares[i].style.backgroundColor = colors[i];
+  }
+  for (var i = 0; i < squares.length; i++) {
+    squares[i].addEventListener("click", function () {
+      if (this.style.backgroundColor === pickedColor) {
+        changeColor();
+        message.textContent = "Bingo!";
+        resetBtn.textContent = "Play Again?";
+      } else {
+        this.style.backgroundColor = "rgb(35, 35, 35)";
+        message.textContent = "Try again";
+      }
+    });
+  }
+}
+
+randomColor(6);
+pickColor(6);
+assignColors();
+
+easyBtn.addEventListener("click", function () {
+  colors = [];
+  randomColor(3);
+  pickColor(3);
+  assignColors();
+  for (var i = 0; i < squares.length; i++) {
+    if (!colors.includes(squares[i].style.backgroundColor)) {
+      squares[i].style.backgroundColor = "rgb(35, 35, 35)";
+      squares[i].style.display = "none";
+    }
+  }
+  h1.style.backgroundColor = "steelblue";
+  this.classList.add("selected");
+  hardBtn.classList.remove("selected");
+  resetBtn.textContent = "New Colors";
+  message.textContent = ""
+});
+
+hardBtn.addEventListener("click", function () {
+  colors = [];
+  randomColor(6);
+  pickColor(6);
+  assignColors();
+  for (var i = 0; i < squares.length; i++) {
+    squares[i].style.backgroundColor = colors[i];
+    squares[i].style.display = "block";
+  }
+  h1.style.backgroundColor = "steelblue";
+  this.classList.add("selected");
+  easyBtn.classList.remove("selected");
+  resetBtn.textContent = "New Colors";
+  message.textContent = ""
+});
+
+resetBtn.addEventListener("click", function () {
+  if (colors.length === 3) {
+    colors = [];
+    randomColor(3);
+    pickColor(3);
+    assignColors();
+  } else {
+    colors = [];
+    randomColor(6);
+    pickColor(6);
+    assignColors();
+  }
+  h1.style.backgroundColor = "steelblue";
+  this.textContent = "New Colors";
+  message.textContent = ""
+});

index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="app.css" />
+  </head>
+  <body>
+    <h1>The great <span id="colorDisplay">rgb</span>color game</h1>
+    <div id="stripe">
+      <div id="div-1">
+        <button id="reset">New colors</button>
+        <span id="message"></span>
+        <div>
+          <button id="easyBtn">Easy</button>
+          <button id="hardBtn">Hard</button>
+        </div>
+      </div>
+    </div>
+    <div id="container">
+      <div class="squares"></div>
+      <div class="squares"></div>
+      <div class="squares"></div>
+      <div class="squares"></div>
+      <div class="squares"></div>
+      <div class="squares"></div>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>