Passing Test

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;

src/components/Header/index.css

@@ -0,0 +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;
+}

src/components/Header/index.js

@@ -0,0 +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>
+  )
+}

src/components/Help/index.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Index() {
+  return (
+    <div>Help page</div>
+  )
+}

src/components/Home/index.js

@@ -0,0 +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>
+  )
+}

src/components/OrderSuccess/index.js

@@ -0,0 +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>
+  )
+}

src/components/PizzaForm/index.css

@@ -0,0 +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;
+}

src/components/PizzaForm/index.js

@@ -0,0 +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>
+  )
+}

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')
+);