Homework SourseHTML CSS Javascript code help please Thank you Note for th
HTML, CSS & Javascript code help please!
Thank you!
Note – for the following web page, you may reference a control’s value in JavaScript using: document.getElementById(\'[control-ID]\').value
Where [control-ID] is the value of the ID attribute for the control.
Another question very similar to this one if you want to try it as well.
https://www.chegg.com/homework-help/questions-and-answers/html-css-code-please-note-following-two-web-pages-may-reference-control-s-value-javascript-q15161947
#1 - You\'ve been hired by John\'s Store to write a web page that calculates sales data.
Provide the following controls to get the following information from a salesman:
Appliance name (label and combo box) – the product to be sold. Use these combo box values: washer, dryer, refrigerator, microwave, toaster, stove.
Wholesale price (label and text box) – the price John\'s Store paid for the appliance. Ensure that the price is at least zero.
Retail price (label and text box) – the price John\'s Store is selling the appliance for. Ensure that the price is at least the wholesale price. Provide controls to display the following outputs:
A button to perform the calculations.
Profit (label and text box) – the profit John\'s Store will earn selling the appliance (Retail – Wholesale).
Commission (label and text box) – the 2% commission the salesman will earn selling the appliance (Profit * 0.02) .
Sales tax (label and text box) – the 6% sales tax on the appliance (Retail * 0.06).
Total (label and text box) – the total cost to the customer (Retail + SalesTax) .
A button to clear all inputs.
Also include these elements:
A page header with a title.
A page footer with the company name and an e-mail link. Ensure that labels & text boxes are aligned in columns. Connect the web page to a .CSS style sheet containing specifications for each category of control used in the page (body, p, inputs, etc.). Place JavaScript in the HTML page.
Solution
john_store.html
<html>
<head>
<link rel=\"stylesheet\" type=\"text/css\" href=\"store.css\">
<title>John\'s Store</title>
<script>
function Perform()
{
var whole=document.getElementById(\"w_price\").value;
var retail=document.getElementById(\"r_price\").value;
var profit=document.getElementById(\"profit\").value=retail-whole;
var stax=document.getElementById(\"tax\").value=retail*0.06;
document.getElementById(\"commission\").value=profit*0.02;
var total=document.getElementById(\"total\").value=Number(retail)+Number(stax);
return;
}
</script>
</head>
<body>
<header class=\"center\">
<h1> John\'s Store</h1>
</header>
<div class=\"center\">
<form role=\"form\" name=\"prodAddForm\" id=\"prodAddForm\" action=\"\" method=\"post\" \">
<div>
<label for=\"appliance\" >Appliance Name</label>
<select name=\'appliance\' id=\'appliance\' placeholder=\'appliance *\' required autofocus />
<option value=\'\' selected=\'selected\'>Select Appliance</option>
<option value = \'washer\'> washer </option>
<option value = \'dryer\'> dryer </option>
<option value = \'refrigerator\'> refrigerator </option>
<option value = \'microwave\'> microwave </option>
<option value = \'toaster\'> toaster </option>
<option value = \'stove\'> stove </option>
</select>
</div>
<div>
<label for=\"w_price\" >Wholesale Price</label>
<input type=\"text\" name=\"w_price\" onkeyup=\'document.getElementById(\"r_price\").value=document.getElementById(\"w_price\").value\' id=\"w_price\" value=\"0\" placeholder=\" wholesale price\" required autofocus />
</div>
<div>
<label for=\"r_price\" >Retail Price</label>
<input type=\"text\" name=\"r_price\" id=\"r_price\" value=\"0\" placeholder=\" retail price\" required autofocus />
</div>
<div>
<label for=\"profit\" >Profit</label>
<input type=\"text\" name=\"profit\" id=\"profit\" value=\"0\" placeholder=\"profit\" />
</div>
<div>
<label for=\"commission\" >commission</label>
<input type=\"text\" name=\"commission\" id=\"commission\" value=\"0\" placeholder=\"commission\"/>
</div>
<div>
<label for=\"tax\" >Sales Tax</label>
<input type=\"text\" name=\"tax\" id=\"tax\" value=\"0\" placeholder=\"tax\" />
</div>
<div>
<label for=\"total\" >Total</label>
<input type=\"text\" name=\"total\" id=\"total\" value=\"0\" placeholder=\"total\" />
</div>
<div>
<button type=\"button\" id=\"perform\" name=\"perform\" onClick=\"return Perform()\">Click</button>
<button type=\"reset\" >Clear</button>
</div>
</form>
</div>
<footer class=\"center\" >
<h6> <p>John\'s Store</p><p> john@abc.com</p></h6>
</footer>
</body>
</html>
store.css
input[type=text], select {
width: 50%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 50%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.center {
text-align: center;
border: 3px solid green;
}
