Scribd Logo
Upload

Welcome to Scribd!

  • Exp 4

    Uploaded by

    ANSARI MOHAMMAD SAHIL ASHRAF 422164
    14 views4 pages
    The document outlines an aim to implement modern JavaScript (ES6) features in three examples: 1) an e-commerce cart that displays product images and calculates totals based on user input, 2) a banking application using object-oriented programming, 3) using the fetch() method in JavaScript. Code snippets are provided for an e-commerce cart using functions to display product details based on selection and calculate totals, as well as for a banking class to perform transactions and display account information. The aim is to learn modern JavaScript features through practical examples.

    Original Description:

    Original Title

    exp4

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document outlines an aim to implement modern JavaScript (ES6) features in three examples: 1) an e-commerce cart that displays product images and calculates totals based on user input, 2) a banking application using object-oriented programming, 3) using the fetch() method in JavaScript. Code snippets are provided for an e-commerce cart using functions to display product details based on selection and calculate totals, as well as for a banking class to perform transactions and display account information. The aim is to learn modern JavaScript features through practical examples.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    14 views4 pages

    Exp 4

    Uploaded by

    ANSARI MOHAMMAD SAHIL ASHRAF 422164
    The document outlines an aim to implement modern JavaScript (ES6) features in three examples: 1) an e-commerce cart that displays product images and calculates totals based on user input, 2) a banking application using object-oriented programming, 3) using the fetch() method in JavaScript. Code snippets are provided for an e-commerce cart using functions to display product details based on selection and calculate totals, as well as for a banking class to perform transactions and display account information. The aim is to learn modern JavaScript features through practical examples.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 4

    ZOHEB ANSARI

    Web Computing Exp 04

    AIM

    Implementation of Modern Java Script (ES6)


    a) Implementation of E-commerce Cart example with product images and
    total bill as per user’s operations
    b) Implementation of Banking using OOP.
    c) Implementation of fetch() in Java Script

    CODE

    a)
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>Document</title>
    </head>
    <script>
        function show() {
            var x = document.getElementById("pname").value;
            if (x == "iphone") {
                document.getElementById("pimage1").src = "iphone.jpg";
                document.getElementById("price").value = 79999;
                document.getElementById("qty").focus();
            }
            else if (x == "realme") {
                document.getElementById("pimage1").src = "realme.jpg";
                document.getElementById("price").value = 15499;
                document.getElementById("qty").focus();
            }
            else if (x == "oppo") {
                document.getElementById("pimage1").src = "oppo.png";
                document.getElementById("price").value = 29999;
                document.getElementById("qty").focus();
            }
            else if (x == "iQOO") {
                document.getElementById("pimage1").src = "iqoo.jpg";
                document.getElementById("price").value = 27999;
                document.getElementById("qty").focus();
            }
        }

        function calcBill() {
            var p, q, t;
            p = parseFloat(document.getElementById("price").value);
            q = parseInt(document.getElementById("qty").value);
            t = p * q;
            document.getElementById("total").value = t;
        }
    </script>

    <body>
        <div align="center">
            <form action="">
                <label>Choose any smartphone: </label>
                <select id="pname" onchange="show()">
                    <option value="Choose">Select</option>
                    <option value="iphone">iphone</option>
                    <option value="realme">Realme</option>
                    <option value="oppo">Oppo</option>
                    <option value="iQOO">iQOO</option>
                </select><br><br>
                <div id="img1"><img id="pimage1" width="200" height="200"></div><br>
                <label>Price: </label><input id="price"> <br><br>
                <label>Quantity: </label><input id="qty"> <br><br>
                <label>Total Bill: </label><input id="total"> <br><br>
                <button onclick="calcBill()">Calculate Bill</button>
                <input type="reset" value="CLEAR ALL">
            </form>
        </div>
    </body>

    </html>

    b)
    <html>
    <head>
        <title>Banking example</title>
    </head>
    <body>
        <script>
            class Bank {
                constructor(name, bal) {
                    this.name = name;
                    this.bal = bal;
                }
                performTrans = (pbal, transtype, amt) => {
                    let cbal;
                    this.bal = pbal;
                    if (transtype == "d" || transtype=="D") {
                        cbal = pbal + amt;
                        this.bal = cbal;
                    }
                    if (transtype == "w" || transtype=="W") {
                        cbal = pbal - amt;
                        this.bal = cbal;
                    }
                }
                show() {
                    document.write("Name: " + this.name + "<br>");
                    document.write("Balance: " + this.bal);
                }
            }
            mybank = new Bank(prompt("Enter your name"), a = parseInt(prompt("Enter
    balance amount")));
            mybank.performTrans(a, prompt("State the operation"),
    parseInt(prompt("Enter the amount")));
            mybank.show();
        </script>
    </body>
    </html>

    c)

    OUTPUT

    a)

    b)
    c)

    CONCLUSION

    You might also like