edited css added more colors

alifrumin · Oct 27, 2015 · 6b8043e · 6b8043e
1 parent 8cb3729
commit 6b8043e
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 23 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -2,14 +2,14 @@
 
 #colorBox {
   border: 3px solid black;
-  height: 50px;
-  width: 50px;
-  /*background: orange;*/
+  height: 150px;
+  width: 150px;
   margin: 20px;
   margin-left: auto ;
   margin-right: auto ;
-
+  border-radius: 50%;
 }
+
 h1 {
   text-align: center;
 }
@@ -24,8 +24,16 @@ h3 {
 
 .hintDisplay {
   display: none;
+  color: black;
+  font-family: sans-serif;
+  padding: 10px;
 }
 
+
 .question {
   text-align: center;
 }
+
+a {
+  display: block;
+}
diff --git a/index.html b/index.html
@@ -10,9 +10,9 @@
 <body>
   <div class="container">
 	<h1>HTML Color Names Quiz</h1>
-	<h4 id="totalQuestions">Number of Questions:  </h4>
-	<h4 id="answeredQuestions">Number of Questions you have answered:  </h4>
-	<h4 id="correctQuestions">Number of Questions you have gotten correct: </h4>
+	<h4 id="totalQuestions"># of Questions:  </h4>
+	<h4 id="answeredQuestions"># of Questions Answered:  </h4>
+	<h4 id="correctQuestions"># Correct: </h4>
     <div class="question">
       <h3>Name the color below:</h3>
       <div id="colorBox"></div>
@@ -23,7 +23,7 @@ <h3>Name the color below:</h3>
       <button class="submit">Submit</button>
       <button class="hintButton">Hint</button>
 			<button class="skip">Skip</button>
-
+			<a href="http://html-color-codes.info/color-names/">For a full list of colors</a>
     </div>
   </div>
 </body>

diff --git a/script.js b/script.js
@@ -9,42 +9,55 @@ $(document).ready(function(){
       },
     salmon = {
       colorBoxColor:"salmon",
-      hint:"Like the fish",
+      hint:"Like the fish"
+      },
+    tomato = {
+      colorBoxColor:"tomato",
+      hint:"often used to make pasta sauce"
+      },
+    thistle = {
+      colorBoxColor:"thistle",
+      hint:"___ and Thyme"
+      },
+    lawngreen = {
+      colorBoxColor:"lawngreen",
+      hint:"front ___ + color"
+      },
+    dodgerblue = {
+      colorBoxColor:"dodgerblue",
+      hint:"LA baseball team + color"
+      },
+    ghostwhite = {
+      colorBoxColor:"ghostwhite",
+      hint:"pale as a ghost"
+      },
+    gainsboro = {
+      colorBoxColor:"gainsboro",
+      hint:"gainsboro"
       }
   ];
+
   //start
   $("#colorBox").css("background", colorPrompts[i].colorBoxColor)
   $(".hintDisplay").html(colorPrompts[i].hint)
   console.log(colorPrompts[i]);
 
+  //iterate through array
   function next(i){
   $("#colorBox").css("background", colorPrompts[i].colorBoxColor)
   $(".hintDisplay").html(colorPrompts[i].hint)
   }
-  // // next item in Array
-  // function next(i){
-  //   $("#colorBox").css("background", this.colorBoxColor);
-  //   $(".hintDisplay").html("<p>"+this.hint+"</p>");
-  //   i++;
-  // }
 
   //Length of Question Array for Number of Questions
   $("#totalQuestions").append(colorPrompts.length);
 
-  //check answer
+  //check answer on submit
   $(".submit").on("click", function(){
     if
     (($(".answer").val()) === (colorPrompts[i].colorBoxColor))
     {console.log(colorPrompts[i].colorBoxColor);
     i++;
     next(i);
-    // next();
-    // console.log(i);
-    // next();
-      // for (var i = 0; i < colorPrompts.length; i++) {
-      //   colorPrompts[i]
-      // };
-    //move to next item in Array
     //+1 to #correctQuestions
     //+1 to #answeredQuestions
     }
@@ -60,4 +73,11 @@ $(document).ready(function(){
   $(".hintButton").on("click", function(){
     $(".hintDisplay").toggle()
   });
+
+  //Skip button
+  $(".skip").on("click", function(){
+    i++;
+    next(i);
+  });
+
 });