Feature/fonts

public/index.html

@@ -10,7 +10,7 @@
       content="Web site created using create-react-app"
     />
     <link
-    href="https://fonts.googleapis.com/css?family=Lovelo|Plexifont|+BV=swap"
+    href="https://fonts.googleapis.com/css?family=Lovelo|Plexifont+BV=swap"
     rel="stylesheet"
   />
     <link rel="stylesheet" href="./style.css" />

public/style.css

@@ -1,3 +1,13 @@
 html{
   background-color: black;
 }
+
+@font-face {
+  font-family: 'Lovelo Black', monospace;
+  src: url('Lovelo Black.otf');
+}
+
+@font-face {
+  font-family: 'plexifont', monospace;
+  src: url('plexifont.ttf');
+}

src/App.css

@@ -1,3 +1,13 @@
+@font-face {
+  font-family: 'Lovelo Black', monospace;
+  src: url('Lovelo Black.otf');
+}
+
+@font-face {
+  font-family: 'plexifont', monospace;
+  src: url('plexifont.ttf');
+}
+
 .App {
 }
 

src/components/nameInput.js

@@ -22,7 +22,7 @@ const NameInput = ({ name, setName }) => {
         }}
       >
         <input
-          class="enterName"
+          className="enterName"
           type="text"
           required
           value={tempName}

src/components/nameOutput.js

@@ -18,12 +18,13 @@ const NameOutput = ({ name }) => {
   };
 
   return (
-    <section className="nameOutput">
+    <div className="nameOutput">
       <h1 className="nameOutputh1">{randomElement}</h1>
       <h3 className="nameOutputh3">It's your turn to play!</h3>
-      <button className="outputButton">Next Player</button>
-      </section>
-
+      <button className="outputButton" onClick={handleClick}>
+        Next Player
+      </button>
+    </div>
   );
 };