Purchase Widget

Assignment 1

Purchase Form

In this assignment, you'll be building a static website with one HTML file named purchase.html. The purpose of your webpage is to allow users to 'buy'--or rather pretend to buy--something. What you are selling is up to you (please don't 'sell' anything illegal). When you type="submit" your form, show the message 'You selected ' + the value of the selected radio button. Note: later we will generate using the values of all elements.

Figure: see image.

Your purchase form must have all elements and data shown. The state selections can be limited to only three (no need for 50). Other than having a border (any border), and a background color (any color other than white), style your page any way you want. You may use a < style> block insider purchase.html. Feel free to include an image if you want. However include the same number and order of elements.

Assignment 2

Receipt

In this assignment, you'll be generating a receipt when the Purchase from is filled out. You will also be adding client side validation to all input elements. For example, the zip code must be exactly 5 digits. You already have the Purchase HTML form from the previous assignment, which may look different than the one shown here in lightblue. You will be generating the HTML code to add the pink receipt shown below the HTML form.

Expected Behaviour: see image.

The purchase form and the receipt must have all elements and data shown. Other than the pink background, any border of your own choosing, and the < legend> Border generated in a legend: < /legend> inside a < fieldset>, feel free to style anyway you want. However, keep the same order of elements as shown.

How to Begin

Add any new needed styling to the < style> block and new Javascript to the < script> block to the file you used to complete the Purchase form assignment, which should be named purchase.html.

Three New Things

1) < fieldset> and < legend>

< fieldset>
< legend>Border generated in a legend: < /legend>
Content inside< br>
after a legend< br>
inside a fieldset
< /fieldset>

Figure: see image.

2) One JavaScript Date object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

var today = new Date();
console.assert(9 == tokay.getMonth()); // Assuming it is now October. 9 is October, 0 is January, and 11 is December

3) toFixed(2)

To show 2 decimal places, send a toFixed(2) message to the number.

var aNumber = Number('10.');
console.log(aNumber); // 10
console.log(aNumber.toFixed(2)); // 10.00

Suggsted Approach

Note: Consider apply the client side validation as the last thing to avoid typing in all required fields

• Use HTML to create a pink receipt with your JavaScript function that currently only shows the item selected.
  • Add any needed styles for the receipt
  • The receipt must have a border
  • You must have the same elements in order
  • You must have < fieldset> and < legend>
  • Use JavaScript's Date function to get the date formatted with several messages
• Lastly, add client side validation described next
  • You will be required to enter data into all text fields

Client Side Validation

The following table summarizes the list of input types needed for full credit. The column for Regex Expression shows the extra client side validation needed in the project. For example, the first input type should be written like this:

< input type="text" name="firstName" pattern="[A-Z a-z]*" required>

When done with Regex, make sure all inputs are required.