more refactored the loops for making the squares and their radnom col…

…ors and the initial number of buttons depending on easy or hard mode
SidneyBuckner · Jun 1, 2018 · 90d7f97 · 90d7f97
1 parent d78df58
commit 90d7f97
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ This is a guessing game that gives you a color based on its Red, Green and Blue
 ##### 6/1/2018
 + Added Ternary Operator for refactoring experiment (line 18)
 + Changing Font Size of h1 so display will be one line on responsive small devices
-+ Refactoring
++ Additional refactoring
 
 ##### 5/31/2018
 + Added function to randomize colors to display in boxes

diff --git a/css/colorgame.css b/css/colorgame.css
@@ -7,7 +7,7 @@ body {
 
 .square {
   width: 30%;
-  background-color: purple;
+  background-color: #ad98df;
   padding-bottom: 30%;
   float: left;
   margin: 1.66%;

diff --git a/js/colorgame.js b/js/colorgame.js
@@ -1,33 +1,62 @@
 var numSquares = 6;
-var colors = generateRandomColors(numSquares);
+var colors = [];
+var pickedColor;
 var squares = document.querySelectorAll('.square');
-var pickedColor = pickColor();
 var colorDisplay = document.getElementById("colorDisplay");
 var messageDisplay = document.querySelector("#message");
 var h1 = document.querySelector('h1');
 var resetButton = document.querySelector("#reset");
 var modeButtons = document.querySelectorAll(".mode");
 
-for(var i = 0; i < modeButtons.length; i++) {
- modeButtons[i].addEventListener('click', function() {
-   modeButtons[0].classList.remove('selected');
-   modeButtons[1].classList.remove('selected');
-   this.classList.add('selected');
+init();
 
-   //Discovered the Ternary Operator and will try to use it here
-   this.textContent === 'Easy'? numSquares = 3: numSquares = 6;
-  //  if (this.textContent === "Easy";) {
-  //   numSquares = 3;
-  // } else {
-  //   numSquares = 6;
-  // }
+function init() {
+  //mode buttons event listeners
+  setModeButtons();
+  setSquareButtons();
   reset();
-   //code how many square to show
-   //pick new and random colors
+}
+
+function setModeButtons() {
+  for(var i = 0; i < modeButtons.length; i++) {
+    modeButtons[i].addEventListener('click', function() {
+      modeButtons[0].classList.remove('selected');
+      modeButtons[1].classList.remove('selected');
+      this.classList.add('selected');
+
+      //Discovered the Ternary Operator and will try to use it here
+      this.textContent === 'Easy'? numSquares = 3: numSquares = 6;
+      //  if (this.textContent === "Easy";) {
+      //   numSquares = 3;
+      // } else {
+      //   numSquares = 6;
+      // }
+      reset();
+      //code how many square to show
+      //pick new and random colors
+
+      //pick a new pickedColor
+      //update page to reflect changes
+    });
+  }
+}
 
-   //pick a new pickedColor
-   //update page to reflect changes
- });
+function setSquareButtons() {
+  for (var i = 0; i < squares.length; i++) {
+    //adds click listeners to each square?
+    squares[i].addEventListener('click', function() {
+      var clickedColor = this.style.backgroundColor;
+        if (clickedColor === pickedColor) {
+            messageDisplay.textContent = 'Correct!';
+            resetButton.textContent = 'Play Again?';
+            changeColors(clickedColor);
+            h1.style.backgroundColor = clickedColor;
+        } else {
+            this.style.backgroundColor = "#232323";
+            messageDisplay.textContent ="Try Again";
+        }
+    });
+  }
 }
 
 function reset() {
@@ -42,7 +71,7 @@ function reset() {
   //change colors of quares
   for(var i = 0; i < squares.length; i++) {
     if (colors[i]) {
-      squares[i].style.display = 'block';  
+      squares[i].style.display = 'block';
       squares[i].style.backgroundColor = colors[i];
     }else {
       squares[i].style.display = 'none';
@@ -81,38 +110,22 @@ function reset() {
 // });
 
 resetButton.addEventListener('click', function() {
-  //generate new colors
-  colors = generateRandomColors(numSquares);
-  //pick a new random color from array
-  pickedColor = pickColor();
-  //Change Color display to match picked colors
-  colorDisplay.textContent = pickedColor;
-  this.textContent = "New Colors";
-  messageDisplay.textContent = '';
-  //change colors of quares
-  for(var i = 0; i < squares.length; i++) {
-    squares[i].style.backgroundColor = colors[i];
-  }
-  h1.style.backgroundColor = "#ad98df";
+  reset();
+  // //generate new colors
+  // colors = generateRandomColors(numSquares);
+  // //pick a new random color from array
+  // pickedColor = pickColor();
+  // //Change Color display to match picked colors
+  // colorDisplay.textContent = pickedColor;
+  // this.textContent = "New Colors";
+  // messageDisplay.textContent = '';
+  // //change colors of quares
+  // for(var i = 0; i < squares.length; i++) {
+  //   squares[i].style.backgroundColor = colors[i];
+  // }
+  // h1.style.backgroundColor = "#ad98df";
 });
 
-colorDisplay.textContent = pickedColor;
-
-for (var i = 0; i < squares.length; i++) {
-  squares[i].style.backgroundColor = colors[i];
-  squares[i].addEventListener('click', function() {
-    var clickedColor = this.style.backgroundColor;
-      if (clickedColor === pickedColor) {
-          messageDisplay.textContent = 'Correct!';
-          resetButton.textContent = 'Play Again?';
-          changeColors(clickedColor);
-          h1.style.backgroundColor = clickedColor;
-      } else {
-          this.style.backgroundColor = "#232323";
-          messageDisplay.textContent ="Try Again";
-      }
-  });
-}
 
 function changeColors(color) {
   for (var i = 0; i < squares.length; i++) {