First-pass at app

README.md

@@ -1,5 +1,22 @@
-# Payments App
+# Dogs App
 
-This repository contains the intial code for a React app to make and track payments.
+This repository contains the initial code for a React app about dogs. To complete the app, you'll need to add the functionality for saving photos, choosing the best dog, and browsing dog breeds.
+
+You will need to get images of dogs from the API at [https://dog.ceo/dog-api/documentation/](https://dog.ceo/dog-api/documentation/).
 
 This repository is part of CodeYourFuture's [group projects](https://github.com/CodeYourFuture/group-projects).
+
+![Screenshot of project](screenshot.png)
+
+## What you need to do
+
+- Show a random picture of a dog in the "Random Dogs" panel. When the "Next Dog" button is clicked, show a new random picture of a dog.
+- When the "Save Image" button is clicked, this image should be added to the Saved Photos area.
+- Show two pictures of dogs in the "Choose the best dog" panel. Each picture should come from a different dog breed. When the user selects a "Best Dog", it should treat it like a "vote" for that dog breed. Display how many "votes" each dog breed gets below the images.
+- In the "Select a Breed" panel, show a random picture from the breed in the select dropdown. When the user selects a new breed, show a random picture from that breed.
+- When the "Show me more!" button is clicked, show another random picture from the breed in the select dropdown.
+
+## Stretch goals
+
+- At the top, replace the ??? with a list of the top five dog breeds according to how many "votes" they get in the "Choose the best dog" panel.
+- Allow the user to select _any_ breed in the "Select a Breed" panel by loading all the possible breeds from the API.

src/App.css

@@ -8,9 +8,8 @@
 }
 
 .App-header {
-  background-color: #222;
+  background: linear-gradient(to right, #00c9ff, #92fe9d);
   padding: 2rem;
-  color: white;
 }
 
 .App-title {

src/App.js

@@ -1,20 +1,28 @@
 import React, { Component } from 'react';
+import Favourites from './components/Favourites';
+import RandomDog from './components/RandomDog';
+import DogBattle from './components/DogBattle';
+import Breeds from './components/Breeds';
 import './App.css';
 
 class App extends Component {
   constructor() {
-    super()
+    super();
     this.state = {
-      balance: 87.43,
-    };
+      favouriteBreeds: [],
+      savedPhotos: [],
+    }
   }
-
   render() {
     return (
       <div className="App">
         <header className="App-header">
-          <h1 className="App-title">Title</h1>
+          <h1 className="App-title">Dogs!</h1>
         </header>
+        <Favourites />
+        <RandomDog />
+        <DogBattle />
+        <Breeds />
       </div>
     );
   }

src/components/Breeds.css

@@ -0,0 +1,35 @@
+.Breeds {
+	margin: 4rem auto;
+	max-width: 50rem;
+	border: 1px solid #ddd;
+	border-bottom-width: 4px;
+	border-top: 0;
+	box-shadow: 0 -4px 0 #efd67f;
+	padding: 1.5rem;
+}
+
+.Breeds-title {
+	margin: 0 0 1rem;
+	font-size: 1rem;
+}
+
+.Breeds-image {
+	max-width: 300px;
+	height: auto;
+	border-radius: 0.5em;
+}
+
+.Breeds-button {
+	display: inline-block;
+	border: none;
+	border-radius: 3px;
+	background: #49bae0;
+	padding: 0.5em 1em;
+	color: #fff;
+	cursor: pointer;
+}
+
+.Breeds-button:hover,
+.Breeds-button:focus {
+	background: #54cbf3;
+}

src/components/Breeds.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import './Breeds.css';
+
+class Breeds extends React.Component {
+	render() {
+		return (
+			<div className="Breeds">
+				<h2 className="Breeds-title">Select a Breed</h2>
+				<p>
+					<select className="Breeds-select">
+						<option>beagle</option>
+						<option>bluetick</option>
+						<option>bullterrier-staffordshire</option>
+						<option>malinois</option>
+						<option>wolfhound-irish</option>
+					</select>
+				</p>
+				<img className="Breeds-image" src="http://via.placeholder.com/300x300" />
+				<p>
+					<button className="Breeds-button">Show me more!</button>
+				</p>
+			</div>
+		)
+	}
+}
+
+export default Breeds;

src/components/Dog.css

@@ -0,0 +1,20 @@
+.Dog-image {
+	max-width: 300px;
+	height: auto;
+	border-radius: 0.5em;
+}
+
+.Dog-button {
+	display: inline-block;
+	border: none;
+	border-radius: 3px;
+	background: #49bae0;
+	padding: 0.5em 1em;
+	color: #fff;
+	cursor: pointer;
+}
+
+.Dog-button:hover,
+.Dog-button:focus {
+	background: #54cbf3;
+}

src/components/Dog.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import './Dog.css';
+
+function Dog(props) {
+	return (
+		<div className="Dog">
+			<img className="Dog-image" src={props.image} />
+			<p>
+				<button className="Dog-button">Best Dog</button>
+			</p>
+		</div>
+	)
+}
+
+export default Dog;

src/components/DogBattle.css

@@ -0,0 +1,19 @@
+.DogBattle {
+	margin: 4rem auto;
+	max-width: 50rem;
+	border: 1px solid #ddd;
+	border-bottom-width: 4px;
+	border-top: 0;
+	box-shadow: 0 -4px 0 #e17fef;
+	padding: 1.5rem;
+}
+
+.DogBattle-title {
+	margin: 0 0 1rem;
+	font-size: 1rem;
+}
+
+.DogBattle-images {
+	display: flex;
+	justify-content: space-around;
+}

src/components/DogBattle.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Dog from './Dog.js';
+import './DogBattle.css';
+
+class DogBattle extends React.Component {
+	render() {
+		return (
+			<div className="DogBattle">
+				<h2 className="DogBattle-title">Choose the best dog</h2>
+				<div className="DogBattle-images">
+					<Dog image="http://via.placeholder.com/300x300" />
+					<Dog image="http://via.placeholder.com/300x300" />
+				</div>
+			</div>
+		)
+	}
+}
+
+export default DogBattle;

src/components/Favourites.css

@@ -0,0 +1,37 @@
+.Favourites {
+	display: flex;
+	margin: 4rem auto;
+	max-width: 50rem;
+	border: 1px solid #ddd;
+	border-bottom-width: 4px;
+	border-top: 0;
+	box-shadow: 0 -4px 0 #ef7f7f;
+	padding: 1.5rem;
+	text-align: left;
+}
+
+.Favourites h2 {
+	margin: 0 0 0.5rem;
+	font-size: 1rem;
+}
+
+.Favourites-breeds {
+	flex-grow: 2;
+}
+
+.Favourites-saved {
+	flex-grow: 1;
+}
+
+.Favourites-photos {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.Favourites-photos img {
+	max-width: 80px;
+	height: auto;
+	margin-right: 1em;
+	margin-bottom: 1em;
+	border-radius: 0.5em;
+}

src/components/Favourites.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import './Favourites.css';
+
+class Favourites extends React.Component {
+	render() {
+		return (
+			<div className="Favourites">
+				<div className="Favourites-breeds">
+					<h2>Favourite Breeds</h2>
+					<p>???</p>
+					<p>???</p>
+				</div>
+				<div className="Favourites-saved">
+					<h2>Saved Photos</h2>
+					<div className="Favourites-photos">
+						<img src="http://via.placeholder.com/80x80" />
+						<img src="http://via.placeholder.com/80x80" />
+					</div>
+				</div>
+			</div>
+		)
+	}
+}
+
+export default Favourites;

src/components/RandomDog.css

@@ -0,0 +1,39 @@
+.RandomDog {
+	margin: 4rem auto;
+	max-width: 30rem;
+	border: 1px solid #ddd;
+	border-bottom-width: 4px;
+	border-top: 0;
+	box-shadow: 0 -4px 0 #c1ef7f;
+	padding: 1.5rem;
+}
+
+.RandomDog-title {
+	margin: 0 0 1rem;
+	font-size: 1rem;
+}
+
+.RandomDog-image {
+	max-width: 300px;
+	height: auto;
+	border-radius: 0.5em;
+}
+
+.RandomDog-button {
+	display: inline-block;
+	border: none;
+	border-radius: 3px;
+	background: #49bae0;
+	padding: 0.5em 1em;
+	color: #fff;
+	cursor: pointer;
+}
+
+.RandomDog-button:hover,
+.RandomDog-button:focus {
+	background: #54cbf3;
+}
+
+.RandomDog-button + .RandomDog-button {
+	margin-left: 2rem;
+}

src/components/RandomDog.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import './RandomDog.css';
+
+class RandomDog extends React.Component {
+
+	render() {
+		return (
+			<div className="RandomDog">
+				<h2 className="RandomDog-title">Random Dogs</h2>
+				<img className="RandomDog-image" src="http://via.placeholder.com/300x300" />
+				<p>
+					<button className="RandomDog-button">Save Image</button>
+					<button className="RandomDog-button">Next Dog</button>
+				</p>
+			</div>
+		)
+	}
+}
+
+export default RandomDog;