- Delivereat app
+
+
+ {this.state.menu.map( menuItem => {
+ return(
+
+ );
+ })}
+
+ {Object.values(this.state.order).length > 0 ? : null }
)
}
diff --git a/src/components/Menu.js b/src/components/Menu.js
new file mode 100644
index 0000000..0ad224e
--- /dev/null
+++ b/src/components/Menu.js
@@ -0,0 +1,29 @@
+import React from 'react';
+
+class MenuItem extends React.Component {
+ constructor(){
+ super();
+
+ this.setState = {
+
+ }
+
+
+ }
+
+handleClick(menuItem.id){
+ this.props.receiveModal()
+}
+
+render(){
+ return(
+
this.handleClick(menuItem.id)}>
+
{this.props.menuItem.name}
+
+
+ )
+}
+
+}
+
+export default Menu;
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
new file mode 100644
index 0000000..391b4ae
--- /dev/null
+++ b/src/components/MenuItem.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+class MenuItem extends React.Component {
+ constructor(){
+ super();
+
+ this.setState = {
+
+ }
+
+ this.handleClick = this.handleClick.bind(this);
+
+ }
+
+handleClick(){
+ this.props.receiveModal(this.props.menuItem.id)
+}
+
+render(){
+ return(
+
+
{this.props.menuItem.name}
![]({"/static/"+this.props.menuItem.photourl})
+
+
+ )
+}
+
+}
+
+export default MenuItem;
diff --git a/src/components/Order.js b/src/components/Order.js
new file mode 100644
index 0000000..0fac133
--- /dev/null
+++ b/src/components/Order.js
@@ -0,0 +1,126 @@
+import React from 'react';
+
+class Order extends React.Component {
+ constructor(){
+ super();
+
+ this.state = {
+ name: "",
+ address: "",
+ telephone: "",
+
+ }
+
+ this.handleSubmit = this.handleSubmit.bind(this);
+ this.handleChangeName = this.handleChangeName.bind(this);
+ this.handleChangeAddress = this.handleChangeAddress.bind(this);
+ this.handleChangeTelephone = this.handleChangeTelephone.bind(this);
+ this.receiveRemoveItem = this.receiveRemoveItem.bind(this);
+ this.handleClear = this.handleClear.bind(this);
+ // this.updateQuantity = this.updateQuantity.bind(this);
+ }
+
+handleClear(event){
+ event.preventDefault()
+ this.props.clearOrder()
+ this.setState({
+ name: "",
+ address: "",
+ telephone: "",
+ })
+}
+
+handleSubmit(event){
+ event.preventDefault()
+ this.props.submitOrder(this.state.name, this.state.address, this.state.telephone)
+ this.setState({
+ name: "",
+ address: "",
+ telephone: "",
+ })
+}
+
+handleChangeName(event){
+ this.setState({
+ name: event.target.value
+ })
+}
+
+handleChangeAddress(event){
+ this.setState({
+ address: event.target.value
+ })
+}
+
+handleChangeTelephone(event){
+ this.setState({
+ telephone: event.target.value
+ })
+}
+
+receiveRemoveItem(id){
+ this.props.receiveRemoveItem(id)
+}
+
+// updateQuantity(id, event.target.value){
+// this.props.updateQuantity(id, event.target.value)
+// }
+
+render(){
+ const orderDetails = Object.entries(this.props.order)
+ const total = orderDetails.reduce((acc, [id, quantity]) => {
+ const {price} = this.props.menu.find(item => item.id.toString() === id) // price is destructing from the object for the property called price, declaring ocnst equal to price
+ return acc +(quantity * price)
+ }, 0)
+ const deliveryCharge = total > 20 ? "you've qualified for free delivery" : 3.95
+ const totalIncDelivery = total > 20 ? total : total + 3.95
+ return(
+
+
Your Order Basket
+
+
+
+
+ | Name |
+ Quantity |
+ Total |
+
+
+
+ {orderDetails.map (([id, quantity]) => {
+ const menuItem = this.props.menu.find(item => item.id.toString() === id)
+ return(
+
+ | {menuItem.name} |
+ X{quantity} |
+ {/* this.updateQuantity(id, event)} /> | */}
+ £{quantity * menuItem.price} |
+ |
+
+ )
+ })}
+
+
+ | {total.toFixed(2)}xxxx |
+ {deliveryCharge}xxxx |
+ {totalIncDelivery.toFixed(2)} |
+
+
+
+
+
+
+
+
+
+ )
+}
+
+}
+
+export default Order
diff --git a/src/styles/AddOrderModal.scss b/src/styles/AddOrderModal.scss
new file mode 100644
index 0000000..a7dcfa3
--- /dev/null
+++ b/src/styles/AddOrderModal.scss
@@ -0,0 +1,130 @@
+.modal{
+ display:none;
+ position: fixed;
+ z-index:1;
+ left: 0;
+ top:0;
+ height: 100%;
+ width:100%;
+ overflow: auto;
+ background-color: rgba(0,0,0,0.5);
+}
+
+.modal2{
+ display: block;
+ position: fixed;
+ z-index:1;
+ left: 0;
+ top:0;
+ height: 100%;
+ width:100%;
+ overflow: auto;
+ background-color: rgba(0,0,0,0.5);
+}
+
+
+.modal-content{
+ background-color:#f4f4f4;
+ margin: 20% auto;
+ width:70%;
+ box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
+ animation-name:modalopen;
+ animation-duration:1s;
+}
+
+.modal-header h2, .modal-footer h3{
+ margin:0;
+}
+
+.modal-header{
+ background:coral;
+ padding:15px;
+ color:#fff;
+}
+
+.modal-body{
+ padding:10px 20px;
+}
+
+img {
+ max-width: 400px;
+ min-width: 50px;
+ height: auto;
+ float: center;
+ padding-bottom: 15px;
+}
+
+
+button{
+ background-color: coral;
+ padding: 1em 2em;
+ color: #fff;
+ border:0;
+}
+
+button:hover{
+ background:#333;
+}
+
+
+.closeBtn{
+ color:#ccc;
+ float: right;
+ font-size: 30px;
+}
+
+.closeBtn:hover,.closeBtn:focus{
+ color: #000;
+ text-decoration: none;
+ cursor:pointer;
+}
+
+.menuItem {
+ box-shadow: 10px 10px grey;
+ margin:30px;
+ background-color: #f4f4f4;
+ border: 1px solid;
+ text-align: center;
+ overflow-wrap: normal;
+
+}
+
+h2 {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.menuItem:hover {
+ background-color: #C0C0C0;
+}
+
+
+// #posterImage {
+// min-width: 300px;
+// min-height: 460px;
+// max-width: 325px;
+// }
+
+.main {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+
+
+@keyframes modalopen{
+ from{opacity: 0}
+ to{opacity: 1}
+}
+
+@media (max-width:510px) {
+ img {
+ max-width: 200px;
+ height: auto;
+ float: center;
+ padding-bottom: 15px;
+ }
+
+
+}
diff --git a/src/styles/App.scss b/src/styles/App.scss
index 0bdf5c0..1cc1278 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -1,3 +1,12 @@
body {
background-color: Cornsilk;
}
+
+header {
+ background-color: coral;
+ text-align: center;
+ color: white;
+ margin:auto;
+ overflow:hidden;
+ font-family: 'Charmonman', cursive;
+}
diff --git a/src/styles/Order.scss b/src/styles/Order.scss
new file mode 100644
index 0000000..976704a
--- /dev/null
+++ b/src/styles/Order.scss
@@ -0,0 +1,22 @@
+.modal-content{
+ background-color:#f4f4f4;
+ margin: 20% auto;
+ width:70%;
+ box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17);
+ animation-name:modalopen;
+ animation-duration:1s;
+}
+
+.modal-header h2, .modal-footer h3{
+ margin:0;
+}
+
+.modal-header{
+ background:coral;
+ padding:15px;
+ color:#fff;
+}
+
+.modal-body{
+ padding:10px 20px;
+}
diff --git a/static/apple.jpeg b/static/apple.jpeg
new file mode 100644
index 0000000..a611cf9
Binary files /dev/null and b/static/apple.jpeg differ
diff --git a/static/banana.jpeg b/static/banana.jpeg
new file mode 100644
index 0000000..67230ec
Binary files /dev/null and b/static/banana.jpeg differ
diff --git a/static/battenberg.jpeg b/static/battenberg.jpeg
new file mode 100644
index 0000000..68a9dff
Binary files /dev/null and b/static/battenberg.jpeg differ
diff --git a/static/blueberry.jpeg b/static/blueberry.jpeg
new file mode 100644
index 0000000..9019b8d
Binary files /dev/null and b/static/blueberry.jpeg differ
diff --git a/static/fudge.jpeg b/static/fudge.jpeg
new file mode 100644
index 0000000..a622419
Binary files /dev/null and b/static/fudge.jpeg differ
diff --git a/static/rainbow.jpeg b/static/rainbow.jpeg
new file mode 100644
index 0000000..b38a11b
Binary files /dev/null and b/static/rainbow.jpeg differ
diff --git a/static/redvelvet.jpeg b/static/redvelvet.jpeg
new file mode 100644
index 0000000..fadd84d
Binary files /dev/null and b/static/redvelvet.jpeg differ
diff --git a/static/strawberry.jpeg b/static/strawberry.jpeg
new file mode 100644
index 0000000..c9f6c85
Binary files /dev/null and b/static/strawberry.jpeg differ
diff --git a/static/tart.jpeg b/static/tart.jpeg
new file mode 100644
index 0000000..a779878
Binary files /dev/null and b/static/tart.jpeg differ
diff --git a/static/toffee.jpeg b/static/toffee.jpeg
new file mode 100644
index 0000000..86b23c9
Binary files /dev/null and b/static/toffee.jpeg differ
diff --git a/static/vegan.png b/static/vegan.png
new file mode 100644
index 0000000..1bd375c
Binary files /dev/null and b/static/vegan.png differ
diff --git a/views/index.hbs b/views/index.hbs
index 8fdb420..0267a92 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -1,8 +1,9 @@
-
Let's get some food
+
DIABETES
+
![]({"/static/"+this.props.modalDetails.photourl})
+