HTML, CSS & Javascript code help please! Thank you! Note – for the following web
ID: 3923703 • Letter: H
Question
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.
Explanation / Answer
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" 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">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;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.