You have been tasked with creating a site for a coffee shop where users can put in orders and pick them up later.
Part 1
Create a new html file and call it coffee.html. Your html will need the following:
1. A header, a sidebar, a content section, and a footer. Be sure to include HTML5 layout demarcations such as and See Section 3 CSS – Slides 14-15 for an example of making a basic structure.
2. Fill each of the 4 boxes with your own content.
The header should have a coffee shop title and logo image.
The menu should have a list of links about coffee.
The content will need a form (see #3)
The footer should have your name and the date.
Include some images. Here are some ideas to get your started:
https://www.iconarchive.com/search?q=coffee+&page=1 (Links to an external site.)
https://www.freedigitalphotos.net/images/search.php?search=coffee (Links to an external site.)
3. The form for your content should include the following:
Text that says “Place your order online”
Form input for the following (Name, phone, email, drink type, size, pickup time, and a “comments” box)
A submit button
Part 2
You will need to create a JavaScript function called “checkform” and place this in your HTML code.
For basics on JavaScript see slides Section 5 or:
https://www.w3schools.com/js/js_form_validation.asp (Links to an external site.)
Create an event handler for your form’s submit button that is tied to your function
Your function should verify that the following rules are met:
Names cannot have numbers
Phone should be in proper format (###-###-####)
Email should be in proper format ([email protected])
Time should be a valid time
None of the fields can be empty, except “comments”
If any of these fail, an alert box should pop up warning about what went wrong.
If it succeeds, have the form send an email to you with the contents. See this example:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_mail (Links to an external site.)