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.