new buttons

css/styles.css

@@ -1,7 +1,54 @@
-
+/*basic page formatting*/
 .container {
-  margin: 10px;
+  margin: 20px;
+}
+
+h1 {
+  text-align: center;
+}
+
+h1:hover {
+  color: lawngreen;
+}
+
+h4 {
+  margin: 0;
+  display: inline;
+}
+
+a {
+  color: dodgerblue;
+}
+
+a:hover {
+  color: tomato;
+}
+
+button {
+  background-color: black;
+  color: white;
+  font-weight: bold;
+  border: 0px;
+  border-radius: 3px;
+}
+
+button:hover {
+  background-color: grey;
+}
+
+button:focus {
+  background-color: darkgrey;
+  outline: none;
 }
+
+input {
+
+}
+
+input:focus {
+  outline: none;
+}
+/*styling of the color circle*/
 #colorBox {
   border: 3px solid black;
   height: 200px;
@@ -15,29 +62,39 @@
 #colorBox p {
   color: white;
   font-size: 20px;
-  /*margin: 20px;*/
   padding: 20px;
 }
 
+/*hint display formatting*/
 .hintSpace {
+  height: 25px;
+  margin-bottom: 0px;
+  padding-bottom: 0px;
+
+}
+
+.hintDisplay {
   height: 20px;
+  display: none;
 }
 
+/*help space/display formatting*/
 .helpSpace {
-  height: 20px;
-  padding: 20px;
+  height: 40px;
+  margin-top: 0px;
+  padding-top: 0px;
 }
 
 .helpDisplay {
-  padding: 0px;
-  margin: 0px;
+  height: 40px;
 }
 
-.hintDisplay {
-  display: none;
-  padding: 10px;
+.helpDisplay p {
+  padding: 0px;
+  margin: 0px;
 }
 
+/*link to info on css3 colors*/
 .question {
   text-align: center;
 }
@@ -47,11 +104,7 @@
   margin: 10px;
 }
 
-h1 {
-  text-align: center;
-}
-
-h4 {
-  margin: 0;
-  display: inline;
+/*hover states*/
+a:hover {
+  color: tomato;
 }

readme.md

@@ -12,7 +12,7 @@ Installation Instructions: I got it up on github pages so one can visit it there
 
 Unsolved Problems:
 1. I created an array of objects but because I only have two things in the array and one of them is the same as the name of the Array its not super dry... but I wanted to experiment with the objects in an array concept and theoretically I could add other things to them
-3. Im working on some animation... of the text that it doesn't just pop up on the page. 
+3. Im working on some animation... of the text that it doesn't just pop up on the page.
 
 User Stories:
 1. As a user I should be able to input my answer so that the computer can tell me if I am right

script.js

@@ -59,8 +59,9 @@ $(document).ready(function(){
 }
     //when one gets to the end of the Quiz
     if (i >= colorPrompts.length){
-      $("#colorBox").html("<p>You have reached the end of the Quiz!</p>");
+      $("#colorBox").html("<p>You have reached the end of the Quiz! You got " + correct + " of " + colorPrompts.length + " correct.</p>");
       $("#colorBox").css("background", "black");
+      $(".container").css("background", "yellow");
     }
   };