PrepList/purchase.html at main · Coding-Chef/PrepList · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="author" content="Dustin Busmer" />
    <meta name="keywords" content="Prep List, hospitality, kitchenware, kitchen, utensils" />
    <meta name="description" content="Purchase form for the kitchenware store Prep List" />

    <link href="styles.css" rel="stylesheet" />
    <link rel="icon" href="images/chef-logo.png" type="image/ico" />

    <title>Purchase</title>
</head>

<body>

    <h1 id="top" class="pageHeader">Prep List</h1>

    <nav>
        <ul class="navBar">
            <li><a href="index.html">Home</a></li>
            <li><a href="products.html">Products</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a class="active">Purchase</a></li>
            <li><a href="sitemap.html">Sitemap</a></li>
        </ul>
    </nav>

    <main>

        <form method="get" action="response.html"> <!--Beggining of the form-->
            <fieldset id="purchaseForm">

                <legend>Purchase form</legend>

                <label for="fName">First name:</label>
                <input id="fName" name="fName" type="text" autofocus placeholder="Nicholas" required="required" />
                <br />

                <label for="lName">Last name:</label>
                <input id="lName" name="lName" type="text" placeholder="Tesla" required="required" />
                <br />

                <p>Please select the items you wish to purchase:</p> <!--Items for purchase with the price as value-->
                <input class="merch" id="knife" name="item" type="checkbox" value="12.5" />
                <label for="knife">Knife $12.5.0</label>
                <br />
                <input class="merch" id="fork" name="item" type="checkbox" value="12" />
                <label for="fork">Fork $12.00</label>
                <br />
                <input class="merch" id="spoon" name="item" type="checkbox" value="6" />
                <label for="spoon">Spoon $6.00</label>
                <br />
                <input class="merch" id="spork" name="item" type="checkbox" value="18" />
                <label for="spork">Spork $18.00</label>
                <br />
                <input class="merch" id="knork" name="item" type="checkbox" value="24.5" />
                <label for="knork">Knork $24.50</label>
                <br />

                <label for="delivery">Delivery:</label> <!--Delivery options-->
                <select id="delivery" name="delivery">
                    <option value="0">Pickup in store (free)</option>
                    <option value="14">Standard delivery + $14.00</option>
                    <option value="18">Express(next business day) + $18.00</option>
                    <option value="22">Same day delivery + $22.00</option>
                </select>
                <br />

                <input type="button" id="purchaseButton" onclick="price()" value="Total:" /> <!--Clickeable button to get sub total-->
                <input type="text" name="totalCost" id="totalCost" size="50" readonly="readonly" />
                <br />

                <p>Would you like to subscribe to hear about specials before everyone else?</p>
                <input class="sub" id="yes" name="subscribe" type="radio" value="yes" checked="checked" />
                <label for="yes">Yes</label>
                <br />
                <input class="sub" id="no" name="subscribe" type="radio" value="no" />
                <label for="no">No</label>
                <br />

                <label for="email">E-mail address:</label>
                <input id="email" name="email" type="email" placeholder="your@emailaddress.com" required="required" />
                <br />
                <!--Credit card block-->
                <div class="creditCard">
                    <label for="creditCard">Credit Card No:</label>
                    <input id="creditCard" name="creditCard" type="text" pattern="[0-9]{15,16}" title="15 or 16 digits" required="required" />

                    <label for="expDate">Exp Date:</label>
                    <input id="expDate" name="expDate" type="text" pattern="(?:0[1-9]|1[0-2])/[0-9]{2}" title="Please enter a valid date as MM/YY" placeholder="MM/YY" required="required" />

                    <label for="cvv">CVV:</label>
                    <input id="cvv" name="cvv" type="text" pattern="[0-9]{3}" title="Please enter the 3-digit number on the back of your card." placeholder="000" required="required" />
                    <br />
                </div>

                <label for="comments">Comments:</label>
                <textarea id="comments" name="comments" placeholder="If delivery selected please put address here!       Max 300 characters." maxlength="300" ></textarea>
                <br />

                <input id="submit" type="submit" value="submit" onclick="price();" /> <input id="reset" type="reset" />

            </fieldset>
        </form>

        <script src="response.js"></script>

    </main>

    <footer>

        <p>
            <span class="copyright">Copyright &#169; 2020 Prep List. All rights reserved.</span>
            <a class="topLink" href="#top">Top</a>
            <span class="badges"> <!--HTML CSS validation links-->
                <a href="https://validator.w3.org/#validate_by_input"><img src="images/200px-HTML5_logo_and_wordmark.png" alt="HTML5 validation" height="50" width="50" /></a>
                <a href="https://jigsaw.w3.org/css-validator/#validate_by_input"><img src="images/CSS3_logo_and_wordmark.svg(1).png" alt="CSS validation" height="50" width="35" /></a>
            </span>
        </p>

    </footer>

</body>

</html>