Week3-JS/order.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>ABC Cabinets</title>

    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
    
    <!-- TODO: 
      There is a file named order.js containing all JavaScript code we need for this lab. 
      Let's try to add JavaScript to your page. Look at this page: 
      https://www.w3schools.com/tags/att_script_defer.asp
      Make sure the script is executed after the page has finished parsing.
    -->
    

  </head>

  <body>
    <header>
      <h1>ABC Cabinet</h1>
      <hr/>
      <nav>
        <h3>Navigation</h3>
        <a href='main.html' class="btn btn-primary">Main Page</a>
        <a href='order.html' class="btn btn-primary">Order Page</a>
      </nav>
    </header>

    <hr>
    <div id='content'>
      <h3>Order Form</h3>
    
      <form>
        <div class="container-flex-order">
          <div class="form-group flex-item-order">
            <label for="name">Name: </label><br/>
            <input type='text' id='name' name='name' placeholder="Enter name"><br/><br/>
            <label for="address">Address: </label><br/>
            <textarea id="address" name="address" rows="5" cols="33"></textarea>
          </div>

          <div class="form-group flex-item-order">
            <a>Method of payment: </a><br/>
            <input type='radio' id='paymentA' name='paymentType' value='Amex'>
            <label for="paymentA">Amex</label><br/>
            <input type='radio' id='paymentV' name='paymentType' value='Visa'>
            <label for="paymentV">Visa</label><br/>
            <input type='radio' id='paymentMC' name='paymentType' value='MasterCard'>
            <label for="paymentMC">MasterCard</label><br/><hr/>
            <a>Credit Card #: </a> <input type='text' id='creditCard' name='creditCard'><br/>
          </div>
          
          <div id="item-selection" class="form-group flex-item-order">
            <a>Items: </a><br/>
            <label for="single">
              <input type="checkbox" id="single" name="single" value="single">
              <span class="name">Single Cabinet</span><span class="price">$30.00</span>
            </label><br/>
            <label for="drawer">
              <input type="checkbox" id="drawer" name="drawer" value="double">
              <span class="name">Drawer</span><span class="price">$20.00</span>
            </label><br/>
            <label for="double">
              <input type="checkbox" id="double" name="double" value="double">
              <span class="name">Double Cabinet</span><span class="price">$50.00</span>
            </label><br/>
            <hr/>
            <a>Colour: </a>
            <select>
              <option value="black">Black</option>
              <option value="blue">Blue</option>
              <option value="green">Green</option>
              <option value="red">Red</option>
              <option value="white">White</option>
            </select>

          </div>
        </div>
        

        <div id="info-msg" class="alert alert-info info-msg"></div>

        <div id="submit-btn" class="form-group">
          <input type="submit" />
          <input type="reset" />
        </div>

      </form>
    </div>
  </body>
</html>



