In this project, you\'ll be building a static website with one HTML file and a s

ID: 3756701 • Letter: I

Question

In this project, you'll be building a static website with one HTML file and a stylesheet (.css file). The purpose of your webpage is to allow users to 'buy'--or rather pretend to buy--something. What you are buying is up to you (please don't 'sell' anything illegal). When you submit your form, show a receipt below the purchase form.

The purchase form and the receipt must have all elements and data shown. Other than some border and the <legend>s shown in both the form and the receipt, style any way you want.

Suggested Approach

Note: Consider applying the client side validation as the last thing to avoid typing in all required fields
Write the HTML to get the form shown (in lightblue above)

Add the styles for the purchase form in a separate .css file

Add the Continue button such that when clicked, a Javascript function is alert('In JS Fun");

Get the values slowly, one or two values at a time

Use alert to see you are getting each value correctly (watch for misspelled ids causing silent errors, ByID() instead of ById(), syntax errors, ...)

Use JSHint to look for errors and warnings

Look at Chrome's console for errors

ignore the ugly form warnings so you can see the errors

Create the HTML representing the receipt

Add the styles for the receipt

Add lastly, add client side validation described next

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 this project. For example, the first input type should be written like this:

please use eclipse, the stylesheet in the <head></head>is ok.

Nan Merce Smal 52.00 Medum $2.65 Receipt Purchase Date: 20-Sep-2018 Purchased 3 medium itams) Total Cost S7SS Rick Marcer

Explanation / Answer

<!DOCTYPE HTML>

<html>

<head>

<title>Purchase</title>

<body >

<tr>

<td>First Name</td><td><input type="text" id="first" pattern="[A-Z a-z]*" required></td></tr>

<tr><td>Phone</td><td><input type="text" id="phone" pattern="[0-9]*" required> </td></tr>

<tr><td>State</td><td><select id="state" pattern="[A-Z a-z]*" required>

<option value="AL">Alabama</option>

<option value="AK">Alaska</option>

<option value="AZ">Arizona</option>

<option value="AR">Arkansas</option>

<option value="CA">California</option>

<option value="CO">Colorado</option>

<option value="CT">Connecticut</option>

<option value="DE">Delaware</option>

<option value="DC">District Of Columbia</option>

<option value="FL">Florida</option>

<option value="GA">Georgia</option>

<option value="HI">Hawaii</option>

<option value="ID">Idaho</option>

<option value="IL">Illinois</option>

<option value="IN">Indiana</option>

<option value="KS">Kansas</option>

<option value="KY">Kentucky</option>

<option value="LA">Louisiana</option>

<option value="ME">Maine</option>

<option value="MD">Maryland</option>

<option value="MA">Massachusetts</option>

<option value="MI">Michigan</option>

<option value="MN">Minnesota</option>

<option value="MS">Mississippi</option>

<option value="MO">Missouri</option>

<option value="MT">Montana</option>

<option value="NE">Nebraska</option>

<option value="NV">Nevada</option>

<option value="NH">New Hampshire</option>

<option value="NJ">New Jersey</option>

<option value="NM">New Mexico</option>

<option value="NC">North Carolina</option>

<option value="ND">North Dakota</option>

<option value="OK">Oklahoma</option>

<option value="OR">Oregon</option>

<option value="PA">Pennsylvania</option>

<option value="RI">Rhode Island</option>

<option value="SC">South Carolina</option>

<option value="SD">South Dakota</option>

<option value="TN">Tennessee</option>

<option value="TX">Texas</option>

<option value="VT">Vermont</option>

<option value="VA">Virginia</option>

<option value="WA">Washington</option>

<option value="WV">West Virginia</option>

<option value="WI">Wisconsin</option>

<option value="WY">Wyoming</option>

</select> </td></tr>

</table>

<input type="radio" id="size" value="small">Small $2.00 <br>

<input type="radio" id="size" value="medium">Medium $2.65 <br>

<input type="radio" id="size" value="large">Large $2.99<br>

</fieldset><br><br>

Quantity(1.5)<input type="text" id="quantity" pattern="[0-9]*" required>

</form>

</body>

function Validate()

{

var fname=document.forms["det"]["first"].value;

var lname=document.forms["det"]["last"].value;

var phone=document.forms["det"]["phone"].value;

var city=document.forms["det"]["city"].value;

var state=document.forms["det"]["state"].value;

var zip=document.forms["det"]["pin"].value;

var quan=document.forms["det"]["quantity"].value;

var size=document.forms["det"]["size"].value;

var num=0;

if(size=="Small")

{

num=2.00;}

else if(size="Large")

{num=2.99;}

else

{num=2.55;}

var cost= quan*num;

var win = window.open('', 'my div', 'height=400,width=600');

var mon = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');

var d= new Date();

var month= mon[d.getMonth()];

var day=d.getDate();

var year=d.getYear()+1900;

var tod= day+"-"+month+"-"+year;

win.document.write('<html><head><title>Reciept</title>');

win.document.write('</head><body bgcolor=pink><form><h1>Reciept</h1><br> Purchase Date: '+tod);

win.document.write('<br> Purchased '+quan+' '+size+' item(s) <br>Total Cost: $'+cost);

win.document.write('<fieldset><legend>Size</legend>');

win.document.write(fname+' '+lname+'<br> '+city+','+ state+'<br>'+zip);

win.document.write('</fieldset></form></body></html>');

}

</script>

</html>

styles.css

body{ background-color:lightblue;}

table{cellpadding:10px;}

Navigate

In this project, you write a MIPS code to 1) allow users to input a sequence of

In this project, you\'ll begin to write a simple calendar application. In the fi

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

In this project, you\'ll be building a static website with one HTML file and a s

Question

Explanation / Answer

Related Questions

Navigate