Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Reservation - Bussline</title>
    <script>
        function bookmytrip()
        {
           const print = document.getElementById("print");
         const FirstName = document.getElementById("FirstName").value;
         const LastName = document.getElementById("LastName").value;


            print.innerHTML = ("Thank you " + FirstName + " " + LastName + " For your reservation with us. <br> ")


        }


    </script>
    <body>

        <style>
            header{
                 font-family: candara;
            background-color: darkblue;
            color: white;
            text-align: center;
            }

        form{
            font-family: candara;
            background-color: darkblue;
            color: white;
            text-align: center;
        }
            footer{
                font-family: sans-serif;
                background-color: lightblue;
                color: black;
                font-style: italic;
            }
            </style>

            <header>
            <h3>BUSLINE OF THE CITY</h3>
                </header>
             <form>
            <h1> Fill out the reservation form</h1>
        <p>First Name: <input type="text" id="FirstName" name ="user_name"> </p>
        <p>Last Name: <input type="text" id="LastName" name ="user_name"/></p>


             <p>Arrival City:</p>
         <p>St Louis ($40) <input type="radio" id="stlouis" name ="Radyes"></p>
         <p>Milwaukee ($20) <input type ="radio" id="mil" name="Radyes"></p>
            <p>Detroit ($35) <input type ="radio" id="detroit" name="Radyes"></p>

            <p>Hotel Choice:</p>
         <p>Economy ($50/day) <input type="radio" id="economy" name ="Radyes"></p>
         <p>Standard ($70/day) <input type ="radio" id="standard" name="Radyes"></p>
        <p>Upscale ($120/day) <input type ="radio" id="upscale" name="Radyes"></p>

            <p>Number of travelers:
            <select>
                <option> 1 </option>
                 <option> 2 </option>
                 <option> 3 </option>
                 <option> 4 </option>
                 <option> 5 </option>
                 <option> 6 </option>
            </select>
            </p>

              <p>Number of days:
            <select>
                <option> 2 </option>
                 <option> 3 </option>
                 <option> 4 </option>
                 <option> 5 </option>
                 <option> 6 </option>
                  <option> 7 </option>
            </select>
            </p>

            <p>Wifi ($10) <input type=checkbox id="wifi"> </p>
            <p>Fully-reclining seat ($20) <input type=checkbox id="fullseat"> </p>

            <p>Meal choice: </p>
        <p>None <input type="radio" id="none" name ="Radyes"></p>
        <p>Snack ($5) <input type="radio" id="snack" name ="Radyes"></p>
        <p>Full meal ($10) <input type="radio" id="fullmeal" name ="Radyes"></p>
            <p> Special Requests: <textarea name="comments" type="text" id="splreq" col="25" rows ="5" ></textarea></p>

            <p> <input type="button" id="button" value="Book My Trip" onclick= "bookmytrip()"> </p>

            <p id="print"></p>
        </form>
        <footer>
     <h6> 3746 Harvard Street</h6>
            <h6>773-987-0000</h6>
  </footer>

    </body>
</head>
</html>