Using the project structure you created for Assignment 1, create a new HTML5 web
ID: 3674079 • Letter: U
Question
Using the project structure you created for Assignment 1, create a new HTML5 web page and name it Exam1.html.
Create a style sheet file and name it Exam1.css, and save it in the styles folder. Add a link to this file from your web page.
Create a web page that allows a user to input:
An item Name
An item description
An item price
A minimum discount amount (%)
A maximum discount amount (%)
Whether the sale is:
Local – Add 5% Sales tax
Web Order – No Sales tax
Calculate the:
Item Discount amounts for the minimum through maximum discounts in 1% increments
The discounted item price for the minimum through maximum discounts in 1% increments
The item price with the applicable sales tax for the minimum through the maximum discounts in 1% increments (Sales tax should be applied to the discounted item price.)
Display:
The item name and description
In table form:
- Discount %
- Item discount amount
- Discounted item price
- Item price with tax
Format input and output with appropriate labels and headings.
Using a style sheet, format the web page so that the input and output areas are clearly defined and the contents are neatly organized.
Upon completion, submit your work by saving the project and folder structure in a Zip file and submit the Zip file through the assignment submission link.
Link to student home page
Create a Header & Footer and place a:
Page title in header (Use the Assignment Name as the title)
Student name & email in footer
Add a link to this assignment in your home page
SO FAR: THIS IS ALL I HAVE:
<!DOCTYPE html>
<html>
<head>
<title>Adam Zeidan Exam 1</title>
</head>
<script>
function Calculate()
{
var name = document.getElementById("itemname").value;
var nameitem = document.getElementById("itemnamedisplay");
nameitem.innerHTML = name;
var description = document.getElementById("itemdescription").value;
var descriptionofitem = document.getElementById("itemdescrptiondisplay");
descriptionofitem.innerHTML = description;
}
</script>
<body>
<h1>Adam Zeidan Exam 1</h1>
<hr>
<br>
<label>Add item name:</label>
<input type="text" id="itemname">
<br>
<label>Add item descrption:</label>
<input type="text" id="itemdescription">
<br>
<label>Add item price:</label>
<input type="text" id="itemprice">
<br>
<label>Minimum discount amount:</label>
<input type="text" id="mindiscount">
<br>
<label>Maximum discount amount:</label>
<input type="text" id="maxdiscount">
<br>
<label>Is this sale a local or web sale?:</label>
<input type="text" id="localorweb">
<br>
<br>
<button>Calculate</button>
<br>
<br>
<hr>
<br>
<p id="itemnamedisplay">This is where the item name will be displayed.</p>
<p id="itemdescrptiondisplay">This is where the item description will be displayed.</p>
<br>
<br>
<p id="tabledisplay">This is where the table will be displayed.</p>
<br>
<br>
</body>
</html>
Explanation / Answer
Answer:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function addRow() {
var itemPrice = document.getElementById("itemprice").value;
var mindiscount = document.getElementById("mindiscount").value;
var maxdiscount = document.getElementById("maxdiscountt").value;
var taxSt = document.getElementById("localorweb").value;
var taxAmt=1;
if taxSt=="local"
taxAmt=0.05;
var newDisplay=new Array(4);
var rowCount;
var row ;
var itemDiscount=0;
var itemDiscountPrice=0;
var itemPricewithTax=0;
var rows=new Array();
for(var k=mindiscount;k<=maxdiscount;k++)
{
var newRow=new Array();
itemDiscount=itemPrice*k*0.01;;
itemDiscountPrice=itemPrice-itemDiscount;
itemPricewithTax=itemDiscountPrice*taxAmt;
newRow.push(k);
newRow.push(itemDiscount);
newRow.push(itemDiscountPrice);
newRow.push(itemPricewithTax
rows.push(newRow);
}
var myTab=document.createElement("TABLE");
myTab.border="2";
var nC=4;
var row=myTab.insertRow(-1);
var h1=documnet.createElement("TH");
h1.innerHTML="Discount %";
row.appendChild(h1);
var h2=documnet.createElement("TH");
h2.innerHTML="Discount amount %";
row.appendChild(h2);
var h3=documnet.createElement("TH");
h3.innerHTML="item price with discount %";
row.appendChild(h3);
var h4=documnet.createElement("TH");
h4.innerHTML="itemprice with tax %";
row.appendChild(h4);
for(var k=0;k<rows.length;k++)
{
row = table.insertRow(-1);
for(var k2=0;k2<rows[0].length;k2++)
{
var newCell=row.insertCell(-1);
newCell.innerHTML=rows[k][k2];
}
}
var myDiscountTable=document.getElementById("myDiscountTable");
myDiscountTable.innerHTML="";
myDiscountTable.appendChild(myTab);
}
</script>
<title>HTML dynamic table using JavaScript</title>
</head>
<body>
<div id="myform">
<body>
<h1>Adam Zeidan Exam 1</h1>
<hr>
<br>
<label>item name: </label>
<input type="text" id="itemname">
<br> <br>
<label>item descrption: </label>
<input type="text" id="itemdescription">
<br> <br>
<label>item price: </label>
<input type="text" id="itemprice">
<br> <br>
<label>Min discount %: </label>
<input type="text" id="mindiscount">
<br><br>
<label>Max discount %: </label>
<input type="text" id="maxdiscount">
<br> <br>
<label>local or websale?:</label>
<input type="text" id="localorweb">
<br>
<br>
<button>Submit</button>
<br>
<br>
<hr>
<br>
<div id="myDiscountTable">
</div>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.