From ba74495a58c8adf45f324ea1d5c07fce46bdcc42 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 00:02:20 -0700
Subject: [PATCH 01/26] Update App.js

---
 src/App.js | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 29530fe9d2..0a058dc3b3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,24 @@
 import React from "react";
+import { Route, Routes } from 'react-router-dom';
+import Header from './components/Header';
+import Help from './components/Help';
+import PizzaForm from './components/PizzaForm';
+import Home from './components/Home';
+import OrderSuccess from './components/OrderSuccess';
 
-const App = () => {
+import "./App.css";
+
+function App() {
   return (
-    <>
-      <h1>Lambda Eats</h1>
-      <p>You can remove this code and create your own header</p>
-    </>
+    <div className="App">
+      <Header />
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/help" element={<Help />} />
+        <Route path="/pizza" element={<PizzaForm />} />
+        <Route path="/success" element={<OrderSuccess/>} />
+      </Routes>
+    </div>
   );
-};
+}
 export default App;

From dcf150029620944aa28e04ca5082cd76a950e52a Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 00:02:40 -0700
Subject: [PATCH 02/26] Update index.js

---
 src/index.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index afed62d599..9488cc06e5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,14 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 import "./index.css";
 import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(
+  <React.StrictMode>
+    <Router>
+      <App />
+    </Router>
+  </React.StrictMode>,
+  document.getElementById('root')
+);

From a8d26ae1c5e54a9c645dda9b8967a079e0ec857b Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 00:15:52 -0700
Subject: [PATCH 03/26] Create components

---
 src/components | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components

diff --git a/src/components b/src/components
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components
@@ -0,0 +1 @@
+

From 2e39d6c49daa7a19def48653c3df1e09eca190a2 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 00:21:08 -0700
Subject: [PATCH 04/26] Create Header

---
 components/Header | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 components/Header

diff --git a/components/Header b/components/Header
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/components/Header
@@ -0,0 +1 @@
+

From 0485854ca3bd11f5c1f4ce8dddc01ce94b5b8752 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 00:21:36 -0700
Subject: [PATCH 05/26] Delete src/components

---
 src/components | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 src/components

diff --git a/src/components b/src/components
deleted file mode 100644
index 8b13789179..0000000000
--- a/src/components
+++ /dev/null
@@ -1 +0,0 @@
-

From 2a718aaf0aa573dfa09318039d2b1c51b15f876a Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 00:22:38 -0700
Subject: [PATCH 06/26] Create Header

---
 src/components/Header | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/Header

diff --git a/src/components/Header b/src/components/Header
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/Header
@@ -0,0 +1 @@
+

From ec084f0d9c486a537eeb31a050aa39034f17ed84 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 00:22:53 -0700
Subject: [PATCH 07/26] Delete components directory

---
 components/Header | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 components/Header

diff --git a/components/Header b/components/Header
deleted file mode 100644
index 8b13789179..0000000000
--- a/components/Header
+++ /dev/null
@@ -1 +0,0 @@
-

From d7425b447164987e657fe72cb2e1c0d3fe5b4fe9 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 00:23:38 -0700
Subject: [PATCH 08/26] Create Help

---
 src/components/Help | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/Help

diff --git a/src/components/Help b/src/components/Help
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/Help
@@ -0,0 +1 @@
+

From e55c551d5844717eb8a465088136db4db966af03 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 00:24:04 -0700
Subject: [PATCH 09/26] Create Home

---
 src/components/Home | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/Home

diff --git a/src/components/Home b/src/components/Home
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/Home
@@ -0,0 +1 @@
+

From f29cbc9dae15ed18c5dc8c64ceabb70961d5d54a Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 00:24:31 -0700
Subject: [PATCH 10/26] Create OrderSuccess

---
 src/components/OrderSuccess | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/OrderSuccess

diff --git a/src/components/OrderSuccess b/src/components/OrderSuccess
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/OrderSuccess
@@ -0,0 +1 @@
+

From 3342b81c128416387f663fa22aa889733dfb235e Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 00:24:43 -0700
Subject: [PATCH 11/26] Create PizzaForm

---
 src/components/PizzaForm | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/PizzaForm

diff --git a/src/components/PizzaForm b/src/components/PizzaForm
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/PizzaForm
@@ -0,0 +1 @@
+

From 6691ae67f784e303d0a4b9f30d014c31c69aecdf Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:05:31 -0700
Subject: [PATCH 12/26] Delete src/components directory

---
 src/components/Header       | 1 -
 src/components/Help         | 1 -
 src/components/Home         | 1 -
 src/components/OrderSuccess | 1 -
 src/components/PizzaForm    | 1 -
 5 files changed, 5 deletions(-)
 delete mode 100644 src/components/Header
 delete mode 100644 src/components/Help
 delete mode 100644 src/components/Home
 delete mode 100644 src/components/OrderSuccess
 delete mode 100644 src/components/PizzaForm

diff --git a/src/components/Header b/src/components/Header
deleted file mode 100644
index 8b13789179..0000000000
--- a/src/components/Header
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/components/Help b/src/components/Help
deleted file mode 100644
index 8b13789179..0000000000
--- a/src/components/Help
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/components/Home b/src/components/Home
deleted file mode 100644
index 8b13789179..0000000000
--- a/src/components/Home
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/components/OrderSuccess b/src/components/OrderSuccess
deleted file mode 100644
index 8b13789179..0000000000
--- a/src/components/OrderSuccess
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/components/PizzaForm b/src/components/PizzaForm
deleted file mode 100644
index 8b13789179..0000000000
--- a/src/components/PizzaForm
+++ /dev/null
@@ -1 +0,0 @@
-

From cf6bc30bd35ba0da2ac95d5ba6d20fe6d08f2943 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:05:57 -0700
Subject: [PATCH 13/26] Create index.css

---
 src/components/Header/index.css | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/Header/index.css

diff --git a/src/components/Header/index.css b/src/components/Header/index.css
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/Header/index.css
@@ -0,0 +1 @@
+

From 2442a3f3e969143f327d23c4cf43117ee2eb2b6a Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:07:27 -0700
Subject: [PATCH 14/26] Create index.js

---
 src/components/Help/index.js | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/Help/index.js

diff --git a/src/components/Help/index.js b/src/components/Help/index.js
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/Help/index.js
@@ -0,0 +1 @@
+

From e6d0ed6fd8a2c8224f9c448a467cabcdd32431fe Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:08:01 -0700
Subject: [PATCH 15/26] Create index.js

---
 src/components/Home/index.js | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/Home/index.js

diff --git a/src/components/Home/index.js b/src/components/Home/index.js
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/Home/index.js
@@ -0,0 +1 @@
+

From 751c3605ecb0dd2d3b1e145bbf27b8a1f9d64908 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:08:55 -0700
Subject: [PATCH 16/26] Create index.js

---
 src/components/OrderSuccess/index.js | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/OrderSuccess/index.js

diff --git a/src/components/OrderSuccess/index.js b/src/components/OrderSuccess/index.js
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/OrderSuccess/index.js
@@ -0,0 +1 @@
+

From 20be548a257cab3af079a2d1e30768ab7edfa221 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:09:32 -0700
Subject: [PATCH 17/26] Create index.css

---
 src/components/PizzaForm/index.css | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/PizzaForm/index.css

diff --git a/src/components/PizzaForm/index.css b/src/components/PizzaForm/index.css
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/PizzaForm/index.css
@@ -0,0 +1 @@
+

From 65012527f2bedce48d3e5fe3cdd4c508f589c4e4 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:09:41 -0700
Subject: [PATCH 18/26] Create index.js

---
 src/components/PizzaForm/index.js | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/PizzaForm/index.js

diff --git a/src/components/PizzaForm/index.js b/src/components/PizzaForm/index.js
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/PizzaForm/index.js
@@ -0,0 +1 @@
+

From af54bf9b775b3c08a9d810fe178a90fb32ee8247 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:10:03 -0700
Subject: [PATCH 19/26] Create index.js

---
 src/components/Header/index.js | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/components/Header/index.js

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/src/components/Header/index.js
@@ -0,0 +1 @@
+

From ac4ab14704a1c414c03538c00a4287e0179750f1 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:10:36 -0700
Subject: [PATCH 20/26] Update index.css

---
 src/components/Header/index.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/components/Header/index.css b/src/components/Header/index.css
index 8b13789179..ea4b78a847 100644
--- a/src/components/Header/index.css
+++ b/src/components/Header/index.css
@@ -1 +1,20 @@
 
+.Nav-wrapper{
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+}
+.Nav-btn{
+    color: white;
+    border: solid 1px blue;
+    border-radius: 4px;;
+    padding: 6px 12px;
+    font-style: normal;
+    text-decoration: none;
+}
+.Nav-btn:hover{
+    background: rgb(51, 51, 132);
+}
+.Nav-btn-active{
+    background: blue;
+}

From 0946a92c19b6189d327ea91093f0552e7890f592 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:10:50 -0700
Subject: [PATCH 21/26] Update index.js

---
 src/components/Header/index.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 8b13789179..d9c0d79bda 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -1 +1,18 @@
 
+import React from 'react'
+import { Link, useLocation } from 'react-router-dom';
+import { useEffect, useState } from 'react'
+import "./index.css";
+
+export default function Index() {
+  let location = useLocation();
+  return (
+    <div className='App-header'>
+        <p className="App-title">LAMBDA EATS</p>
+        <div className="Nav-wrapper">
+            <Link to="/" className={`Nav-btn ${location.pathname === "/" ? "Nav-btn-active" : ""}`}>Home</Link>
+            <Link to="/help" className={`Nav-btn ${location.pathname === "/help" ? "Nav-btn-active" : ""}`}>Help</Link>
+        </div>
+    </div>
+  )
+}

From 962237923d89415df42e0b4c6c7122352397646c Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:11:15 -0700
Subject: [PATCH 22/26] Update index.js

---
 src/components/Help/index.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/Help/index.js b/src/components/Help/index.js
index 8b13789179..f30555a3b9 100644
--- a/src/components/Help/index.js
+++ b/src/components/Help/index.js
@@ -1 +1,7 @@
+import React from 'react'
 
+export default function Index() {
+  return (
+    <div>Help page</div>
+  )
+}

From a4187f5ff96ba1b88ea673ed01920e2b6a45e57a Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:11:34 -0700
Subject: [PATCH 23/26] Update index.js

---
 src/components/Home/index.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/Home/index.js b/src/components/Home/index.js
index 8b13789179..9d26ac568e 100644
--- a/src/components/Home/index.js
+++ b/src/components/Home/index.js
@@ -1 +1,18 @@
 
+import React from 'react'
+import { useNavigate } from 'react-router-dom';
+
+export default function Index() {
+  const navigate = useNavigate();
+  const handleClick = () => {
+    navigate('/pizza');
+  }
+  return (
+    <div className="main-body">
+        <div className="pizza-body">
+          <p>Your favorite food, delivered while coding</p>
+          <button id="order-pizza" onClick={() => handleClick()}>Pizza?</button>
+        </div>
+    </div>
+  )
+}

From 84468de92310c4e6578508d131abe256bb902803 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:11:57 -0700
Subject: [PATCH 24/26] Update index.js

---
 src/components/OrderSuccess/index.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/OrderSuccess/index.js b/src/components/OrderSuccess/index.js
index 8b13789179..abe19a2798 100644
--- a/src/components/OrderSuccess/index.js
+++ b/src/components/OrderSuccess/index.js
@@ -1 +1,11 @@
+import React from 'react'
 
+export default function Index() {
+  return (
+    <div className="main-body">
+      <div className="pizza-body">
+        <p>Congrats! Pizza is on its way!</p>
+      </div>
+    </div>
+  )
+}

From 644d2da9cc9f328c3e49fcff6c66d73abb07499b Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:12:21 -0700
Subject: [PATCH 25/26] Update index.css

---
 src/components/PizzaForm/index.css | 61 ++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/src/components/PizzaForm/index.css b/src/components/PizzaForm/index.css
index 8b13789179..c621bff5e3 100644
--- a/src/components/PizzaForm/index.css
+++ b/src/components/PizzaForm/index.css
@@ -1 +1,62 @@
 
+.form-wrapper{
+  max-width: 700px;
+  text-align: center;
+  margin: auto;
+  margin-top: 40px;
+  border: 1px solid grey;
+  border-radius: 8px;
+}
+.form-title{
+  font-size: 24px;
+  font-weight: 600;
+}
+.form-pizza{
+  width: 100%;
+  height: 200px;
+  background: url(../../../Assets/Pizza.jpg);
+}
+#pizza-form{
+  padding: 8px;
+}
+.form-group{
+  text-align: left;
+  width: 100%;
+  margin-bottom: 8px;
+}
+label{
+  padding: 10px;
+  background: grey;
+  display: block;
+  margin-bottom: 8px;
+}
+input{
+  width: calc(100% - 8px);
+  font-size: 20px;
+}
+#size-dropdown{
+  width: 150px;
+  font-size: 16px;
+}
+#order-button{
+  padding: 12px 24px;
+  font-size: 20px;
+  border-radius: 6px;
+  border: 1px blue solid;
+}
+#order-button:hover{
+  background: rgb(88, 88, 193);
+}
+.error{
+  margin: 8px;
+  color: red;
+  font-weight: bold;
+}
+.checkbox{
+  width: 30px;
+}
+.checkbox-wrapper{
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+}

From 0fcfa511672e7767a0921c9d1f7551cf2d716e28 Mon Sep 17 00:00:00 2001
From: mrzexii <126282962+mrzexii@users.noreply.github.com>
Date: Sun, 10 Sep 2023 11:12:44 -0700
Subject: [PATCH 26/26] Update index.js

---
 src/components/PizzaForm/index.js | 96 +++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)

diff --git a/src/components/PizzaForm/index.js b/src/components/PizzaForm/index.js
index 8b13789179..6db576131b 100644
--- a/src/components/PizzaForm/index.js
+++ b/src/components/PizzaForm/index.js
@@ -1 +1,97 @@
+import React from 'react'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios'
+import "./index.css";
 
+export default function Index() {
+  const navigate = useNavigate();
+  const [name, setName] = useState('');
+  const [err, setErr] = useState(false);
+  const [size, setSize] = useState('Small');
+  const [special, setSpecial] = useState('');
+  
+  const toppingList = ['Pepperoni', 'Sousage', 'Cabaduab Bacon', 'Spicy Halian Sausage', 'Grilled Chicker', 'Onions', 'Green Pepper', 'Diced Tomatos', 'Black Olives', 'Roasted Garlic', 'Artichoke Hearts', 'Three Cheese', 'Pineapple', 'Extra Cheese'];
+
+  const handleSubmit = event => {
+    event.preventDefault();
+    if (name.length < 2)
+    {
+      setErr(true);
+    }
+    else
+    {
+      const order = {};
+      console.log(`Name: ${name}, Size: ${size}, Special: ${special}`);
+      const toppingsChecklist = document.querySelectorAll('[type="checkbox"]');
+      
+      order['name'] = name;
+      order['size'] = size;
+      order['special'] = special;
+      toppingsChecklist.forEach(top => {
+        order[top.name] = top.checked ? true : false
+      })
+      axios.post("https://reqres.in/api/orders", order);
+      navigate('/success');
+    }
+  }
+
+  const handleInputName = event => {
+    if (event.target.value.length >= 2)
+      setErr(false);
+    else
+     setErr(true);
+    setName(event.target.value);
+  }
+
+  const handleSelectSize = event => {
+    setSize(event.target.value);
+  }
+
+  const handleInputSpecial = event => {
+    setSpecial(event.target.value);
+  }
+  return (
+    <div className="form-wrapper">
+      <p className="form-title">Build your own Pizza</p>
+      <div className="form-pizza"></div>
+      <form onSubmit={handleSubmit} id="pizza-form">
+        <div className="form-group">
+          <label>Insert pizza name (*Required)</label>
+          <input type="text" id="name-input" value={name} onChange={handleInputName}/>
+          {
+            err ? <p className="error">name must be at least 2 characters</p>:<></>
+          }
+        </div>
+        <div className="form-group">
+          <label>Choice of Size (*Required)</label>
+          <select value={size} onChange={handleSelectSize} id="size-dropdown">
+            <option value="Small">Small</option>
+            <option value="Medium">Medium</option>
+            <option value="Large">Large</option>
+            <option value="ExtraLarge">ExtraLarge</option>
+          </select>
+        </div>
+        <div className="form-group">
+          <label>Add Toppings</label>
+          <div className="checkbox-wrapper">
+            {
+              toppingList.map((data, index) => {
+                return (
+                <div>
+                  <input className="checkbox" type="checkbox" key={index} id={index.toString()} name={data}/>
+                  <span>{data}</span>
+                </div>)
+              })
+            }
+          </div>
+        </div>
+        <div className="form-group">
+          <label>Special instructions</label>
+          <input type="text" id="special-text" value={special} onChange={handleInputSpecial} placeholder="Anything else you'd like to add?"/>
+        </div>
+        <button type="submit" id="order-button">Order</button>
+      </form>
+    </div>
+  )
+}