Finish card dealer challenge

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-scripts": "3.2.0"

src/App.css

@@ -3,6 +3,7 @@
 }
 
 .App-logo {
+  animation: App-logo-spin infinite 20s linear;
   height: 40vmin;
 }
 
@@ -18,5 +19,15 @@
 }
 
 .App-link {
-  color: #09d3ac;
+  color: #61dafb;
 }
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -1,26 +1,16 @@
-import React from 'react';
+import React, { Component } from 'react';
+import Deck from './Deck';
 import logo from './logo.svg';
 import './App.css';
 
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+class App extends Component {
+	render() {
+		return (
+			<div className='App'>
+				<Deck />
+			</div>
+		);
+	}
 }
 
 export default App;

src/Card.css

@@ -0,0 +1,6 @@
+.Card {
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+}

src/Card.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import './Card.css';
+
+class Card extends Component {
+	constructor(props) {
+		super(props);
+		let angle = Math.random() * 90 - 45;
+		let xPos = Math.random() * 40 - 20;
+		let yPos = Math.random() * 40 - 20;
+		this._transform = `translate(${xPos}px, ${yPos}px) rotate(${angle}deg)`;
+	}
+	render() {
+		return (
+			<img
+				style={{ transform: this._transform }}
+				className='Card'
+				src={this.props.image}
+				alt={this.props.name}
+			/>
+		);
+	}
+}
+export default Card;

src/Deck.css

@@ -0,0 +1,36 @@
+.Deck {
+  font-family: "Slabo 27px", serif;
+}
+
+.Deck-cardarea {
+  margin-top: 80px;
+}
+
+.Deck-title {
+  color: azure;
+  font-size: 40px;
+  text-transform: uppercase;
+  letter-spacing: 5px;
+}
+
+.subtitle {
+  font-size: 20px;
+}
+
+.Deck-btn {
+  background: none;
+  border: 2px solid;
+  outline: none;
+  font: inherit;
+  margin: 0.5em;
+  padding: 1em 2em;
+  color: #009688;
+  transition: 0.25s;
+  text-transform: uppercase;
+}
+
+.Deck-btn:hover {
+  border-color: #4caf50;
+  color: white;
+  box-shadow: inset 0 0 0 2em #4caf50;
+}

src/Deck.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import Card from './Card';
+import './Deck.css';
+import axios from 'axios';
+const API_BASE_URL = 'https://www.deckofcardsapi.com/api/deck';
+
+class Deck extends Component {
+	constructor(props) {
+		super(props);
+		this.state = { deck: null, drawn: [] };
+		this.getCard = this.getCard.bind(this);
+	}
+	async componentDidMount() {
+		let deck = await axios.get(`${API_BASE_URL}/new/shuffle/`);
+		this.setState({ deck: deck.data });
+	}
+	async getCard() {
+		let deck_id = this.state.deck.deck_id;
+		try {
+			let cardUrl = `${API_BASE_URL}/${deck_id}/draw/`;
+			let cardRes = await axios.get(cardUrl);
+			if (!cardRes.data.success) {
+				throw new Error('No card remaining!');
+			}
+			let card = cardRes.data.cards[0];
+			console.log(cardRes.data);
+			this.setState(st => ({
+				drawn: [
+					...st.drawn,
+					{
+						id: card.code,
+						image: card.image,
+						name: `${card.value} of ${card.suit}`
+					}
+				]
+			}));
+		} catch (err) {
+			alert(err);
+		}
+	}
+
+	render() {
+		const cards = this.state.drawn.map(c => <Card key={c.id} name={c.name} image={c.image} />);
+		return (
+			<div className='Deck'>
+				<h1 className='Deck-title'>♦ Card Dealer ♦</h1>
+				<h2 className='Deck-title subtitle'>♦ A little demo made with React ♦</h2>
+				<button className='Deck-btn' onClick={this.getCard}>
+					Get Card!
+				</button>
+				<div className='Deck-cardarea'>{cards}</div>
+			</div>
+		);
+	}
+}
+export default Deck;

src/index.css

@@ -1,5 +1,7 @@
 body {
+  background: #17181c;
   margin: 0;
+  padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
@@ -10,4 +12,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
-}
+}