diff --git a/src/App.css b/src/App.css
index 11e5f75..3cb4f5a 100644
--- a/src/App.css
+++ b/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;
+}
diff --git a/src/App.js b/src/App.js
index f96face..c444619 100644
--- a/src/App.js
+++ b/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() {
-- PUNK API BABY --
- < FetchBeer />
+
- );
+ )
}
-export default App;
+export default App
diff --git a/src/components/BeerDeets.js b/src/components/BeerDeets.js
index 42ab408..607813f 100644
--- a/src/components/BeerDeets.js
+++ b/src/components/BeerDeets.js
@@ -4,8 +4,15 @@ import LikeButton from './LikeButton';
function BeerDeets(props) {
return(
-
- {props.beerList.map(beer =>
{beer.name}:
{beer.description}-------------------------------------------
< LikeButton />)}
+
+ {props.beerList.map(beer =>
+
+ {beer.name}:
+ {beer.description}
+
+ -------------------------------------------
+ )
+ }
)
}
diff --git a/src/components/FetchBeer.js b/src/components/FetchBeer.js
index 26afd86..e1808e5 100644
--- a/src/components/FetchBeer.js
+++ b/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,7 +12,7 @@ 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 })
})
}
@@ -20,13 +20,13 @@ class FetchBeer extends Component {
render() {
return(
-
+
+
+
)
}
}
-export default FetchBeer;
\ No newline at end of file
+export default FetchBeer
\ No newline at end of file
diff --git a/src/components/LikeButton.js b/src/components/LikeButton.js
index bec7c04..6887d83 100644
--- a/src/components/LikeButton.js
+++ b/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
+ return (
+
+ )
}
addLike = () => {