Scribd Logo
Upload

Welcome to Scribd!

  • Lab 4

    Uploaded by

    Kishan Singh
    11 views2 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views2 pages

    Lab 4

    Uploaded by

    Kishan Singh

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Lab 4: A super class Detail has been defined to store the details of a customer.

    Define
    a subclass Bill to compute the monthly telephone charge of the customer as per the
    chart given below:

    Number of Calls Rate


    1 – 100 Only Rental charge
    101 – 200 60 paisa per call + rental charge

    201 – 300 80 paisa per call + rental charge

    Above 300 1 rupee per call + rental charge

    HTML Code:
    form,
    #output {
    <!DOCTYPE html>
    margin: auto;
    <html>
    max-width: 500px;
    <head> }
    <title>Telephone Bill Calculator</title>
    <link label {
    href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap"
    display: block;
    rel="stylesheet"> font-weight: bold;
    <link rel="stylesheet" href="lab4.css"> margin-bottom: 5px;
    </head> }
    <body>
    <div class="container"> input[type="number"] {
    border: 1px solid #ccc;
    <h1 style="text-align: center;"> Telephone Bill Calculator</h1>
    <form> border-radius: 3px;
    <label for="calls">Number of calls:</label> padding: 5px;
    width: 100%;
    <input type="number" id="calls" name="calls" placeholder="Enter
    }
    number of calls">
    <input type="button" value="Calculate" onclick="calculateBill()">
    input[type="button"] {
    </form> background-color: #4caf50;
    <div id="output"></div> border: none;
    <footer> border-radius: 3px;
    <p>&copy; Created By KISHAN SINGH</p> color: white;
    </footer> cursor: pointer;
    </div> padding: 10px;
    <script src="lab4.js"></script> margin-top: 10px;
    </body> }
    </html>
    input[type="button"]:hover {
    CSS Code: background-color: #3e8e41;
    }

    body { #output {
    background-color: #f5f5f5; font-weight: bold;
    font-family: "Open Sans", sans-serif; text-align: center;
    } font-size: 24px;
    margin-top: 25px; font-size: 14px;
    padding: 20px; margin: 1px;
    background-color: white; }
    border: 1px solid #ccc;
    border-radius: 3px; JavaScript Code:
    box-shadow: 0px 0px 10px #ccc;
    } function calculateBill() {
    var calls =
    .container { document.getElementById("calls").value;
    margin: auto;
    max-width: 500px; if (calls > 0 && calls <= 100) {
    border: 1px solid #ccc; var bill = "Your monthly bill is Rs. 100.";
    border-radius: 5px; } else if (calls > 100 && calls <= 200) {
    padding: 20px; var bill = "Your monthly bill is Rs. " + (100 +
    margin-top: 180px; (calls - 100) * 0.6).toFixed(2) + ".";
    box-shadow: 0px 0px 10px #ccc; } else if (calls > 200 && calls <= 300) {
    box-sizing: border-box; var bill = "Your monthly bill is Rs. " + (100 +
    max-height: auto; .60 * 100 + (calls - 200) * 0.8).toFixed(2) + ".";
    } } else if (calls > 300) {
    footer { var bill = "Your monthly bill is Rs. " + (100 +
    margin-top: 10%; 0.60 * 100 + 100 * 0.80 + (calls - 300) *
    background-color: grey; 1).toFixed(2) + ".";
    color: white; } else {
    bottom: 0; var bill = "Please enter a valid number of
    height: 50px; calls.";
    margin-left: 10%; }
    width: 80%;
    text-align: center;
    padding: 20px; document.getElementById("output").innerHTML
    box-sizing: border-box; = bill;
    max-width: 100%; }
    }

    p{

    OUTPUT :

    You might also like