Progress on wesbos#30

smchenrybc · smchenrybc · commit f48a7e945501 · 2018-08-02T17:00:33.000-04:00
diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
@@ -9,7 +9,9 @@
 <body>
 
   <h1>Whack-a-mole! <span class="score">0</span></h1>
-  <button onClick="startGame()">Start!</button>
+  <div class="button">
+    <button onClick="startGame()">Start!</button>
+  </div>
 
   <div class="game">
     <div class="hole hole1">
@@ -37,6 +39,15 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
   const scoreBoard = document.querySelector('.score');
   const moles = document.querySelectorAll('.mole');
 
+  function randTime(min, max) {
+    return Math.random() * (max - min) + min;
+  }
+
+  function randomHole(holes) {
+    // holes is a NodeList
+    console.log(holes.length);
+  }
+
 </script>
 </body>
 </html>
diff --git a/30 - Whack A Mole/style.css b/30 - Whack A Mole/style.css
@@ -11,14 +11,24 @@ html {
 body {
   padding: 0;
   margin:0;
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 16px;
+}
+
+body button,
+body input {
+  font-family: inherit;
+}
+
+h1, .score {
   font-family: 'Amatic SC', cursive;
 }
 
 h1 {
   text-align: center;
   font-size: 10rem;
   line-height:1;
-  margin-bottom: 0;
+  margin: 0.5em 0;
 }
 
 .score {
@@ -67,3 +77,27 @@ h1 {
 .hole.up .mole {
   top:0;
 }
+
+div.button {
+  text-align: center;
+}
+button {
+  display: inline-block;
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: 0;
+  padding: 0.5em 1em;
+  border-radius: 2px;
+  font-size: 1em;
+  cursor: pointer;
+  outline: none;
+}
+button:hover {
+  box-shadow: inset 0 0 0 20rem rgba(140, 140, 140, .0625);
+}
+button:active {
+  box-shadow: inset 0 0 0 20rem rgba(140, 140, 140, .125),
+              inset 0 3px 4px 0 rgba(140, 140, 140, .25),
+              0 0 1px rgba(140, 140, 140, .125);
+
+}
