In: Computer Science
Lemon Motors sells vehicles of dubious quality to debatably discerning customers. They've asked you to write an app that determines sales prices. Users will type a vehicle price in a text box. In other objects on your screen, users will select if they want: • Rust proofing for $500 • Extended warranty for $2000 • Pin striping for $250 When the calculate button is clicked, the following results will be displayed: • The total amount of the three add-ons listed above • The random discount, which is anywhere between 0% to 15% of the vehicle price • The subtotal, which is the vehicle price, plus add-ons, minus the discount. • A $300 service fee, which is added to all car sales • The sales tax, which is 10% of the subtotal • The final sale price, which is the subtotal plus tax and service fee. All results are shown in local currency. All result labels should clear when a change is made to any object that captures user data. (using visual studio 2015) Need help with the coding
Code :
<!DOCTYPE html>
<html>
<head>
<title>Lemon Motors</title>
<!-- All the styling is included here -->
<style type="text/css">
header{
background-color: indigo;
color: white;
text-align: center;
font-size: 2em;
padding: 10px;
}
section{
padding: 10px;
}
.form_container{
width: 50%;
margin: 0 auto;
padding: 20px;
background-color: #e6584e;
color: white;
border-radius: 10px;
box-shadow: 1px 10px 10px grey;
}
h1{
text-transform: uppercase;
text-align: center;
}
label{
display: block;
padding: 10px 0;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
}
input[type="text"]{
width: 100%;
padding: 10px;
box-sizing: border-box;
}
button{
padding: 10px;
font-size: 0.8em;
margin: 10px 0;
width: 100px;
background-color: #3ee038;
color: white;
border: 1px solid #3ee038;
border-radius: 4px;
}
.invoice_details{
border: 1px solid;
width: 40%;
margin: 30px auto;
padding: 0 20px;
box-shadow: 1px 10px 10px grey;
border-radius: 10px;
display: none;
}
</style>
</head>
<body>
<header>
Lemon Motors
</header>
<section>
<!-- Form in which the input is entered by user -->
<form class="form_container" javascript:void(0) target="_blank">
<h1>Enter Vehicle Price</h1>
<label>Vehicle Price</label>
<input type="text" id="vPrice" name="vehiclePrice" placeholder="Enter Vehicle Price">
<label>Add-ons</label>
<input type="checkbox" id="rProofing" name="rustProofing" value="500">Rust Proofing for $500
<input type="checkbox" id="eWarranty" name="extendedWarranty" value="2000">Extended Warranty for $2000
<input type="checkbox" id="pStriping" name="pinStriping" value="250">Pin Striping for $250
<button type="submit" onclick="generateInvoice()">Calculate</button>
</form>
<div class="invoice_details" id="invoice">
<h1>Invoice Details</h1>
<p id="totalAddOn"></p>
<p id="randomDiscount"></p>
<p id="subtotal"></p>
<p id="serviceFee"></p>
<p id="salesTax"></p>
<p id="finalPrice"></p>
<p id="output"></p>
</div>
</section>
<script type="text/javascript">
// generateInvoice() to calculate all teh required details regarding the invoice.
function generateInvoice(){
var vehiclePrice = document.getElementById("vPrice").value;
// In this I have checked whether the checkbox us checked or not if it is checked than I am getting the value else I am assigning value as 0.
if(document.getElementById("rProofing").checked){
var rP = document.getElementById("rProofing").value;
}else{
rP = 0;
}
// In this I have checked whether the checkbox us checked or not if it is checked than I am getting the value else I am assigning value as 0.
if(document.getElementById("eWarranty").checked){
var eW = document.getElementById("eWarranty").value;
}else{
eW = 0;
}
// In this I have checked whether the checkbox us checked or not if it is checked than I am getting the value else I am assigning value as 0.
if(document.getElementById("pStriping").checked){
var pS = document.getElementById("pStriping").value;
}
else{
pS = 0;
}
var total = parseInt(rP) + parseInt(eW) + parseInt(pS);
document.getElementById('totalAddOn').innerHTML = "Total Amount of the Add-Ons: " + "$" + total;
// Here I am generating the random number between 0 and 15.
var randomNumber = Math.floor(Math.random() * (15 + 1));
// Calculating the discount based on the random number generated.
var discount = parseInt(vehiclePrice) * parseInt(randomNumber) / 100;
// Here I have calculated all teh required values and shown it on the screen.
document.getElementById('randomDiscount').innerHTML = "Random Discount: " + "$" + discount;
var subtotal = parseInt(vehiclePrice) + parseInt(total) - parseInt(discount);
document.getElementById('subtotal').innerHTML = "Subtotal: " + "$" + subtotal;
var salesTax = parseInt(subtotal) * 0.10;
document.getElementById('salesTax').innerHTML = "Sales Tax: " + "$" + salesTax;
var serviceFee = 300;
document.getElementById("serviceFee").innerHTML = "Service fee: $300";
var finalPrice = parseInt(subtotal) + parseInt(salesTax) + parseInt(serviceFee);
document.getElementById("finalPrice").innerHTML = "Final Price: " + "$" + finalPrice;
document.getElementById('invoice').style.display = "block";
return false;
}
</script>
</body>
</html>
Application View before adding the value in the form:
Application View After filling the value:
I have developed this code using HTML, CSS and Javascript.