completed

src/App.css

@@ -26,18 +26,39 @@ b {
 
 h1 {
   letter-spacing: 5px;
+  font-weight: 800;
+}
+
+.likeButton {
+  font-size: 14px;
+  color: yellow;
+}
+
+p > span {
+  color: white;
+  font-size: 15px;
+}
+
+p {
+  font-size: 30px;
+}
+
+.fetchButton {
+  font-size: 50px;
+  font-family: monospace;
 }
 
 button {
   color: black;
   border: none;
-  background-color:#0797BD ;
-  height: 30px;
-  width: 120px;
+  background-color: #0797bd;
+  height: auto;
+  width: auto;
   text-align: center;
-  font-family: monospace;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
   font-weight: bold;
   letter-spacing: 2px;
+  border: 4px solid orange;
 }
 
 .App-header {
@@ -63,3 +84,7 @@ button {
     transform: rotate(360deg);
   }
 }
+
+b {
+  color: orange;
+}

src/App.js

@@ -1,8 +1,7 @@
-import React from 'react';
-import FetchBeer from './components/FetchBeer';
-import logo from './logo.svg';
-import './App.css';
-import LikeButton from './components/LikeButton';
+import React from 'react'
+import FetchBeer from './components/FetchBeer'
+import logo from './logo.svg'
+import './App.css'
 
 function App() {
   return (
@@ -12,10 +11,10 @@ function App() {
         <h1>
             -- PUNK API BABY --
         </h1>
-        < FetchBeer />
+        <FetchBeer />
       </header>
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

src/components/BeerDeets.js

@@ -4,8 +4,15 @@ import LikeButton from './LikeButton';
 
 function BeerDeets(props) {
    return(
-       <div>
-       {props.beerList.map(beer => <li><b>{beer.name}:</b><br></br>{beer.description}<p>-------------------------------------------</p>< LikeButton /></li>)}
+      <div>
+         {props.beerList.map(beer => 
+         <li>
+            <b>{beer.name}:</b><br></br>
+            <h2>{beer.description}</h2>
+            <h2><LikeButton /></h2>
+            <p>-------------------------------------------</p>
+         </li>)
+         }
       </div>
    )
 }

src/components/FetchBeer.js

@@ -1,8 +1,8 @@
-import React, {Component} from 'react';
-import BeerDeets from './BeerDeets';
-import axios from 'axios';
+import React from 'react'
+import BeerDeets from './BeerDeets'
+import axios from 'axios'
 
-class FetchBeer extends Component {
+class FetchBeer extends React.Component {
     state = {
         beerList: []
     }
@@ -12,21 +12,21 @@ class FetchBeer extends Component {
         return axios.get('https://api.punkapi.com/v2/beers')
             .then(res => {
                 const beers = res.data
-                this.setState({ beerList: beers });
+                this.setState({ beerList: beers })
             })
     }
 
 
     render() {
         return(
             <div>
-                <button onClick={this.fetchBeer}>Gimme BEER</button>
+                <button onClick={this.fetchBeer} className="fetchButton">Gimme BEER</button>
                 <ul>
-                 <li><BeerDeets beerList={this.state.beerList}/></li>
-                </ul>
+                    <li><BeerDeets beerList={this.state.beerList}/></li>
+                </ul> 
             </div>
         )
     }
 }
 
-export default FetchBeer;
+export default FetchBeer

src/components/LikeButton.js

@@ -1,12 +1,18 @@
-import React, {Component} from 'react';
+import React from 'react';
 
-class LikeButton extends Component {
+class LikeButton extends React.Component {
     state = {
     likes: 0
 };
 
 render() {
-    return <button onClick={this.addLike}> Me Likey: {this.state.likes} </button>
+    return (
+        <button onClick={this.addLike}>
+        <p className="likeButton">
+            Me Likey: <span>{this.state.likes}</span>
+        </p>
+        </button>
+    )
 }
 
 addLike = () => {