Saucy Tango Food Order Form

--Saucy Tango Food Order Form.md

Saucy Tango Food Order Form

In this practice project, you will create a food order form for a restaurant.

The local mom-and-pop shop, Saucy Tango, has received a lot of love from the community recently. To keep up with demand, they’ve decided to open their restaurant for online orders. They’ve entrusted this task to you, a budding React developer.

Your goal is to create a functional form that allows customers to place their orders easily. Once the customer submits the form, the form will alert them about their order details. You will be provided with a menu and your task is to create a form that can take in customer details such as name, phone number, address, and order.

To complete this project, you will use your understanding of controlled React forms. You’ll be using the State Hook to manage the state of the form, and employ event handlers to update the state of the form as the customer fills in their details.

Let’s dive in and get started!

FoodOrderForm.js

import React, { useState } from "react";

function FoodOrderForm() {
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [address, setAddress] = useState("");
  const [order, setOrder] = useState("");

  const handleSubmit = ($event) => {
    event.preventDefault();
    alert(`
      Order Successful!
      \n\n
      Your order was: ${order}
      \n\n
      Please show your confirmation number for pickup.
    `);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input
        type="text"
        id="name"
        name="name"
        value={name}
        onChange={({ target }) => setName(target.value)}
      />
      <br />
      <br />

      <label htmlFor="phone">Phone:</label>
      <input
        type="text"
        id="phone"
        name="phone"
        value={phone}
        onChange={({ target }) => setPhone(target.value)}
      />
      <br />
      <br />

      <label htmlFor="address">Address:</label>
      <input
        type="text"
        id="address"
        name="address"
        value={address}
        onChange={({ target }) => setAddress(target.value)}
      />
      <br />
      <br />

      <label htmlFor="order">Order:</label>
      <input
        type="text"
        id="order"
        name="order"
        value={order}
        onChange={({ target }) => setOrder(target.value)}
      />
      <br />
      <br />

      <button type="submit">Submit Order</button>
    </form>
  );
}

export default FoodOrderForm;

Fire house Subs provides a diverse menu of hearty sandwiches, catering to every taste with premium meats and fresh ingredients. For those who want to explore all the available choices, the fhsubsmenu is a handy tool that lists every sub, salad, and side option. This feature makes it easy to customize orders and learn about new, seasonal items, ensuring a convenient ordering experience that keeps customers coming back.

What?