Add styled board

lancesnider · Jul 23, 2016 · 6e76204 · 6e76204
1 parent fababb3
commit 6e76204
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <title>Math Boggle</title>
+    <link rel="stylesheet" type="text/css" href="math-boggle/styles.css">
   </head>
   <body>
     <div id="math-boggle"></div>

diff --git a/math-boggle/GameBoard.js b/math-boggle/GameBoard.js
@@ -3,15 +3,60 @@ import React from 'react'
 class Operands extends React.Component {
   render(){
     return (
-      <div>Operands</div>
+      <div className="operands">
+        <div>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+        </div>
+        <div>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+        </div>
+        <div>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+        </div>
+        <div>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+        </div>
+        <div>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+          <button className="button">9</button>
+        </div>
+      </div>
     )
   }
 }
 
 class Operators extends React.Component {
   render(){
     return (
-      <div>Operators</div>
+      <div>
+        <div className="operators">
+          <button className="button">+</button>
+          <button className="button">-</button>
+          <button className="button">*</button>
+          <button className="button">/</button>
+          <button className="button">^</button>
+        </div>
+        <button className="button equals">=</button>
+      </div>
     )
   }
 }

diff --git a/math-boggle/styles.css b/math-boggle/styles.css
@@ -0,0 +1,67 @@
+body {
+  background-color: #272822;
+  color: white;
+  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
+}
+
+.button {
+  width: 60px;
+  height: 60px;
+  text-decoration: none;
+  border: 1px solid black;
+  font-size: 18px;
+  font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
+}
+
+.button:focus {
+  outline: 0;
+}
+
+
+
+
+.operands .button {
+  background-color: #e0e0e0;
+  color: black;
+}
+
+.operands .button:hover {
+  background-color: #ccc;
+}
+
+.operands .button:focus {
+  outline: 0;
+}
+
+.operands .button:disabled {
+  background-color: #ccc;
+}
+
+
+
+
+
+.operators .button {
+  background-color: #f5923e;
+  color: white;
+  font-size: 24px;
+}
+
+.operators .button:hover {
+  background-color: #c2732f;
+}
+
+
+
+
+
+.equals {
+  color: white;
+  background-color: #7b9a38;
+  width: 300px;
+  font-size: 32px;
+}
+
+.equals:hover {
+  background-color: #688035;
+}