Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

Specifications Please use your text editor of choice to edit orderup.html, order

ID: 3715784 • Letter: S

Question

Specifications

Please use your text editor of choice to edit orderup.html, orderup.css and results.html

Orderup.html

For this orderup.html, you need to:

•Must verify that the password fields match.

-If the password fields match, allow the user to continue to results.html

-If the password fields do not match, create an alert saying “en-sure passwords match” and do not allow the user to continue to results.html

•Create a new “Delivery Address” fieldset that is the exact same as billing address but with a checkbox that says “same as billing” that will populate

with whatever is in the “Billing Address fieldset” if checkbox is clicked.

Results.html

•When “Place Order” button is pressed, the screen will display all of the fields from the previous page

Orderup.css

USE CSS to style your page and make it attractive

submission :orderup.html, results.html and orderup.css

example of orderup.html

<html>

<head>

<title>Orderup</title>
<link rel="stylesheet" type="text/css" href="orderup.css">

</head>

<body>

<h1 class= >Place An Order!</h1>

<img src="http://pngimg.com/uploads/mickey_mouse/mickey_mouse_PNG76.png" alt="JPEG Icon">

<section>

<form id=payment action="file:///C:/Users/1515590036E/Desktop/homework2/results.html" method="get">

<fieldset>

<legend>Billing address</legend>

<label for=name>First Name</label>

<input id=name name=fname type=text placeholder="First name" required autofocus /><br>

<label for=name>Last Name</label>

<input id=name1 name=lname type=text placeholder="Last name" required autofocus /><br>

<label for=address>Street Address</label>

<input id=addr name=addr type=text placeholder="street address" required autofocus /><br>

<label for=address>City</label>

<input id=city name=city type=text placeholder="city" required autofocus /><br>

</text>

<label for=country>State</label>

<select>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<option value="IA">Iowa (IA)</option>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<option value="NY">New York (NY)</option>

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

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

<option value="OH">Ohio (OH)</option>

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

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

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

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

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

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

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

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

<option value="UT">Utah (UT)</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>

</li>

</ol>

</fieldset>

<fieldset>

<legend>Payment</legend>

<input id=visa name=cardtype type=radio checked="checked"/>

<label for=visa>VISA</label>

<input id=amex name=cardtype type=radio />

<label for=amex>Discover</label>

<input id=mastercard name=cardtype type=radio />

<label for=mastercard>Mastercard</label>

<input id=AmericanExpress name=cardtype type=radio />

<label for=AmericanExpress>AmericanExpress</label><br>

<label for=name>Card</label>

<input id=name name=fname type=number placeholder="card number" required autofocus /><br>

<label for=expiredate>Expiration date</label>

<select name="month" id="month" size="1">

<option value="00">MM</option>

<option value="01">01</option>

<option value="02">02</option>

<option value="03">03</option>

<option value="04">04</option>

<option value="05">05</option>

<option value="06">06</option>

<option value="07">07</option>

<option value="08">08</option>

<option value="09">09</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

</select>

<select name="year" id="year" size="1">

<option value="00">YY</option>

<option value="01">2018</option>

<option value="02">2019</option>

<option value="03">2020</option>

<option value="04">2021</option>

<option value="05">2022</option>

</select>

<br>

<label for=cvv>CVV</label>

<input id="cvc" type="number" placeholder="Cvc/Cvv" maxlength="4" />

</fieldset>

<fieldset>

<legend>Create Account</legend>

<label for=name>Username</label>

<input id=name name=fname type=text placeholder="First name" required autofocus /><br>

<label for=name>Password</label>

<input id=name1 name=lname type=password placeholder="Last name" required autofocus /><br>

<label for=address>Verify Password</label>

<input id=addr name=addr type=password placeholder="street address" required autofocus /><br>

</fieldset>

<input type="submit" name="purchase" value="Place Order">

<p id="para1">Enjoy</p>

</form>

</section>

</body>

</html>

Explanation / Answer

SOurceCode:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="orderup.css">

<title>Orderup</title>

</head>

<body>

<h1 id="headerLine">Order Up</h1><br>

<section>

<form id=payment method="get">

<fieldset>

<legend>Billing address</legend>

<label for=name>First Name</label>

<input id=billingname name=billingname type=text placeholder="First name" required autofocus /><br>

<label for=name>Last Name</label>

<input id=billingname1 name=billingname1 type=text placeholder="Last name" required autofocus /><br>

<label for=address>Street Address</label>

<input id=billingaddr name=billingaddr type=text placeholder="street address" required autofocus /><br>

<label for=address>City</label>

<input id=billingcity name=billingcity type=text placeholder="city" required autofocus /><br>

<label for=country>State</label>

<select id="billingcountry" name = "billingcountry">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<option value="IA">Iowa (IA)</option>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<option value="NY">New York (NY)</option>

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

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

<option value="OH">Ohio (OH)</option>

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

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

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

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

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

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

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

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

<option value="UT">Utah (UT)</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>

</fieldset>

<fieldset>

<legend>Delivery address</legend>

<input id=sameasbilling name=sameasbilling type=checkbox />

<label for=sameasbilling>Same as billing Address</label><br>

<label for=name>First Name</label>

<input id=deliveryname name=deliveryname type=text placeholder="First name" required autofocus /><br>

<label for=name>Last Name</label>

<input id=deliveryname1 name=deliveryname1 type=text placeholder="Last name" required autofocus /><br>

<label for=address>Street Address</label>

<input id=deliveryaddr name=deliveryaddr type=text placeholder="street address" required autofocus /><br>

<label for=address>City</label>

<input id=deliverycity name=deliverycity type=text placeholder="city" required autofocus /><br>

<label for=country>State</label>

<select id="deliverycountry" name ="deliverycountry">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<option value="IA">Iowa (IA)</option>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<option value="NY">New York (NY)</option>

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

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

<option value="OH">Ohio (OH)</option>

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

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

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

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

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

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

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

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

<option value="UT">Utah (UT)</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>

</fieldset>

<fieldset>

<legend>Payment</legend>

<input id=visa value = "VISA" name=cardtype type=radio checked="checked" />

<label for=visa>VISA</label>

<input id=amex value = "Discover" name=cardtype type=radio />

<label for=amex>Discover</label>

<input id=mastercard value = "Mastercard" name=cardtype type=radio />

<label for=mastercard>Mastercard</label>

<input id=AmericanExpress value="AmericanExpress" name=cardtype type=radio />

<label for=AmericanExpress>AmericanExpress</label><br>

<label for=name>Card</label>

<input id=cardnumber name=cardname type=number placeholder="card number" required autofocus /><br>

<label for=expiredate>Expiredate</label>

<select name="month" id="month" size="1">

<option value="00">MM</option>

<option value="January">01</option>

<option value="February">02</option>

<option value="March">03</option>

<option value="April">04</option>

<option value="May">05</option>

<option value="June">06</option>

<option value="July">07</option>

<option value="August">08</option>

<option value="September">09</option>

<option value="October">10</option>

<option value="November">11</option>

<option value="December">12</option>

</select>

<select name="year" id="year" size="1">

<option value="00">YY</option>

<option value="2018">2018</option>

<option value="2019">2019</option>

<option value="2020">2020</option>

<option value="2021">2021</option>

<option value="2022">2022</option>

</select><br>

<label for=ccv>CCV</label>

<input id="cvc" name = "cvc" type="number" placeholder="Cvc/Cvv" maxlength="3" />

</fieldset>

<fieldset>

<legend>Create Account</legend>

<label for=name>User Name</label>

<input id=username name=username type=text placeholder="Username" required autofocus /><br>

<label for=name>Password</label>

<input id=password name=password type=password placeholder="password" required autofocus /><br>

<label for=address>Verify Password</label>

<input id=confirm_password name=confirm_password type=password placeholder="password" required autofocus /><br>

</fieldset>

<div id="btnDiv">

<input type="submit" id = "submit" name="purchase" class="submitButton" value="Place Order">

<div>

</form>

</section>

</body>

<script>

function checkDeliveryAddres(id){

if(document.getElementById(id).checked){

var billingname = document.getElementById("billingname").value;

var billingname1 = document.getElementById("billingname1").value;

var billingaddr = document.getElementById("billingaddr").value;

var billingcity = document.getElementById("billingcity").value;

var selbox = document.getElementById("billingcountry");

var idx = selbox.selectedIndex;

var billingcountry = selbox.options[idx].value;

document.getElementById("deliveryname").value = billingname;

document.getElementById("deliveryname1").value = billingname1;

document.getElementById("deliveryaddr").value = billingaddr;

document.getElementById("deliverycity").value = billingcity;

document.getElementById("deliverycountry").value = billingcountry;

}

}

function checkpassword(){

if (document.getElementById('password').value != document.getElementById('confirm_password').value) {

alert('ensure passwords match');

return false;

}

}

function displayresults(){

var billingname = document.getElementById("billingname").value;

var billingname1 = document.getElementById("billingname1").value;

var billingaddr = document.getElementById("billingaddr").value;

var billingcity = document.getElementById("billingcity").value;

var selbox = document.getElementById("billingcountry");

var idx = selbox.selectedIndex;

var billingcountry = selbox.options[idx].text;

var deliveryname = document.getElementById("deliveryname").value;

var deliveryname1 = document.getElementById("deliveryname1").value;

var deliveryaddr = document.getElementById("deliveryaddr").value;

var deliverycity = document.getElementById("deliverycity").value;

var selbox = document.getElementById("deliverycountry");

var idx = selbox.selectedIndex;

var deliverycountry = selbox.options[idx].value;

var cvc = document.getElementById("cvc").value;

var cardnumber = document.getElementById("cardnumber").value;

var selbox = document.getElementById("month");

var idx = selbox.selectedIndex;

var month = selbox.options[idx].value;

var selbox = document.getElementById("year");

var idx = selbox.selectedIndex;

var year = selbox.options[idx].value;

var paymentType = document.querySelector('input[name = cardtype]:checked').value;

var username = document.getElementById("username").value;

var password = document.getElementById("password").value;

var confirm_password = document.getElementById("confirm_password").value;

document.writeln("The form has successfully been submitted");

document.writeln("You entered following data");

document.writeln("<pre>");

document.writeln("First Name : " + billingname);

document.writeln("Last Name : " + billingname1);

document.writeln("Address : " + billingaddr);

document.writeln("city : " + billingcity);

document.writeln("country : " + billingcountry);

document.writeln("dfirstname : " + deliveryname);

document.writeln("dlastname : " + deliveryname1);

document.writeln("daddress : " + deliveryaddr);

document.writeln("dcity : " + deliverycity);

document.writeln("dcountry : " + deliverycountry);

document.writeln("CCV : " + cvc);

document.writeln("Card Number : " + cardnumber);

document.writeln("Card Expiry Month : " + month);

document.writeln("Card Expiry Year : " + year);

document.writeln("Payment Type : " + paymentType);

document.writeln("username : " + username);

document.writeln("password : " + password);

document.writeln("confirm_password : " + confirm_password);

}

</script>

</html>

Related Questions

Specific compounds are named in the boxes below and the functional group part of
Question #836875
Specific conductance is a measure of water\'s capacity to conduct an electric cu
Question #52305
Specific enthalpy of superheated system at the pipe inlet h1=3172.63 kJ/kg and a
Question #1719275
Specific gravity is defined as the density of a substance divided by the density
Question #1460655
Specific heat capacity Consider the experiment described below. A 1.0 kg mass an
Question #1776708
Specific heat of steel: 490 J/kg/K Specific heat of water: 4180 J/kg/K Heat of f
Question #1299222
Specific heats/other quantities given: cw4.186 J(g °C); CAI -0.92 J(g C); mcolCa
Question #1881417
Specific hormones are needed in order to balance cellular activities that lead t
Question #3472719
Hire Me For All Your Tutoring Needs
Integrity-first tutoring: clear explanations, guidance, and feedback.
Drop an Email at
drjack9650@gmail.com
Chat Now And Get Quote

Navigate

Previous
Specifications Please use your text editor of choice to create orderup.css , and
Next
Specifications call for the wall thickness of two-liter polycarbonate bottles to

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