diff --git a/client/src/App.js b/client/src/App.js index abd6c12912b2b956dd2de08b857a6bb9efc19e9f..e676230da434dabf42e7a8283f436a22d465b349 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -2,10 +2,12 @@ import logo from './logo.svg'; import './App.css'; import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css' import Navbar from './components/Navbar'; +import Homescreen from './screens/Homescreen'; function App() { return ( <div className="App"> <Navbar/> + <Homescreen/> </div> ); } diff --git a/client/src/coffeesdata.js b/client/src/coffeesdata.js new file mode 100644 index 0000000000000000000000000000000000000000..2afcb5d6608ca89a843be742f4b31e41b702833b --- /dev/null +++ b/client/src/coffeesdata.js @@ -0,0 +1,115 @@ +const coffees = + [ + { + name: "Latte", + milk: [ + "whole milk", + "2% milk", + "almond milk", + "oat milk" + ], + flavor: [ + "none", + "vanilla", + "mocha", + "caramel" + ], + temp: [ + "hot", + "iced" + ], + prices: [ + { + "whole milk": 3.00, + "2% milk": 3.00, + "almond milk": 3.50, + "oat milk": 3.50 + } + ] + }, + { + name: "Cold Brew", + milk: [ + "none", + "whole milk", + "2% milk", + "almond milk", + "oat milk" + ], + flavor: [ + "none", + "vanilla", + "mocha", + "caramel" + ], + temp: [ + "iced" + ], + prices: [ + { + "none": 2.00, + "whole milk": 2.00, + "2% milk": 2.00, + "almond milk": 2.50, + "oat milk": 2.50 + } + ] + }, + { + name: "Cappuccino", + milk: [ + "none", + "whole milk", + "2% milk", + "almond milk", + "oat milk" + ], + flavor: [ + "none", + "vanilla", + "mocha", + "caramel" + ], + temp: [ + "hot", + "iced" + ], + prices: [ + { + "none": 3.00, + "whole milk": 3.00, + "2% milk": 3.00, + "almond milk": 3.50, + "oat milk": 3.50 + } + ] + }, + { + name: "Macchiato", + milk: [ + "whole milk", + "2% milk", + "almond milk", + "oat milk" + ], + flavor: [ + "none", + "vanilla", + "mocha", + "caramel" + ], + temp: [ + "hot", + "iced" + ], + prices: [ + { + "whole milk": 3.00, + "2% milk": 3.00, + "almond milk": 3.50, + "oat milk": 3.50 + } + ] + }, + ]; +export default coffees \ No newline at end of file diff --git a/client/src/components/Coffee.js b/client/src/components/Coffee.js new file mode 100644 index 0000000000000000000000000000000000000000..579a6ba9c80c9b743617a7b1bdc2435b530a04eb --- /dev/null +++ b/client/src/components/Coffee.js @@ -0,0 +1,40 @@ +import React from 'react' + + +export default function Coffee({coffee}) { + + + return( + <div> + <h1>{coffee.name}</h1> + + <div className="flex-container"> + <div className="w-100 m-1"> + <p>Milk</p> + <select> + {coffee.milk.map((milk) => { + return <option value={milk}>{milk}</option>; + })} + </select> + + </div> + + <div className="w-100 m-1"> + <p>Prices</p> + </div> + + + + </div> + + + + + + + </div > + + + + ) +} diff --git a/client/src/screens/Homescreen.js b/client/src/screens/Homescreen.js new file mode 100644 index 0000000000000000000000000000000000000000..90ada852c61f5cc96553f2bf0d79c22cf620ce49 --- /dev/null +++ b/client/src/screens/Homescreen.js @@ -0,0 +1,25 @@ +import React from 'react' + +import coffees from '../coffeesdata' +import Coffee from '../components/Coffee' +export default function Homescreen() { + + + return ( + <div> + <div className="row"> + + {coffees.map(coffee =>{ + return ( + <div className="col-md-3" > + <div> + <Coffee coffee={coffee} /> + </div> + </div> + ) + })} + + </div> + </div> + ) +}