Point of Sale (Accounting Software)

नमस्‍कार दोस्‍तो,

इस ब्‍लॉग में हम आपको बहुत ही सरल भाषा में बतायेगें की किस प्रकार गुगल शीट के डेटा एवं वेब एप स्‍क्रीप्‍ट की मदद से पॉइन्‍ट ऑफ सेल का साफटवेयर कैसे तैयार किया जाता है ा

उक्‍त साफटवेयर के द्वारा अपना दैनिक कार्य Easy तरिके से किया जा सकता है ा

अत- निचे दिये गये दिशा निर्देशानुसार पॉइन्‍ट ऑफ सेल का साफटवेयर बनाना सिखें ा

How to Make Point of Sale Software for Your Business

In this blog we will tell you How to Make Point of Sale Software for Your Business so read the complete blog carefully and learn How to Make Point of Sale Software for Your Business according to given guidelines.

For Practical :- Practical

Step 1 :- Click to Google Sheet Copy With Source Code

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create 4 file Name Given Below
code.gs
index.html
styles-css.html
script-js.html

Step 4 :- Click to Copy Below Code and Paste to Code.gs File

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function include(fileName) {
  return HtmlService.createHtmlOutputFromFile(fileName).getContent();
}

function getData() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  let ws = ss.getSheetByName("Items");
  let res = {};
  res.items = ws.getRange(2, 1, ws.getLastRow()-1, 5).getValues();
  ws = ss.getSheetByName("Sales");
  res.sales = ws.getRange(2, 1, ws.getLastRow()-1, 6).getValues();
  return res;
}

function setData(data) {
  const importedData = JSON.parse(data);
  const orderLength = importedData.order.length;
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  ws = ss.getSheetByName("Sales");
  range = ws.getRange(ws.getLastRow()+1, 1, orderLength, 6);
  range.setValues(importedData.order);

  ws = ss.getSheetByName("Payments"); 
  const paymentColumns = importedData.payment[0].length;
  range = ws.getRange(ws.getLastRow()+1, 1, 1, paymentColumns);
  range.setValues(importedData.payment);
}

Step 5 :- Click to Copy Below Code and Paste to index.html File

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Libre+Barcode+128&family=Roboto&display=swap" rel="stylesheet">
    <title>Sunrise IT Education POS</title>
   <?!= include("styles-css"); ?>
    
</head>

<body>
    <header>
        <h1>Sunrise IT Education POS</h1>
    </header>
    <main class="main-container flex-row">
        <section class="order flex-column">
            <article class="receipt flex-column">
                <div class="company-info flex-column">
                    <p id="company-name">Sunrise IT Education</p>
                    <p id="company-address">Rajasthan</p>
                    <p id="company-city">India</p>
                    <p id="company-phone">1234567890</p>
                    <p id="invoice-number"></p>
                </div>
                <div class="receipt-details">
                    <table class="details-table">
                        <thead>
                            <tr>
                                <td class="dotted-border" colspan="5"></td>
                            </tr>
                            <tr>
                                <td class="empty-border" colspan="5"></td>
                            </tr>
                            <tr>
                                <th class="description">Description</th>
                                <th class="quantity">Qty</th>
                                <th class="price">Price</th>
                                <th class="subtotal">Sub</th>
                                <th class="delete">Del</th>
                            </tr>
                            <tr>
                                <td class="dotted-border" colspan="5"></td>
                            </tr>
                            <tr>
                                <td class="empty-border" colspan="5"></td>
                            </tr>
                        </thead>
                        <tbody id="receipt-details">

                        </tbody>
                    </table>
                </div>
                <div class="receipt-summary">
                    <table class="summary-table">
                        <tbody class="summary-table" id="total-summary">
                            <tr>
                                <td class="dotted-border" colspan="3"></td>
                            </tr>
                            <tr>
                                <td class="empty-border" colspan="3"></td>
                            </tr>
                            <tr>
                                <td>Subtotal:</td>
                                <td id="subtotal-summary">₹0.00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>Tax:</td>
                                <td id="tax-summary">₹0.00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>Grand Total:</td>
                                <td id="grandtotal-summary">₹0.00</td>
                                <td></td>
                            </tr>
                        </tbody>
                        <tbody class="summary-table" id="payment-summary">
                            <tr>
                                <td>Amt Paid:</td>
                                <td id="amount-paid">₹0.00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td id="tip-change-title">Change:</td>
                                <td id="tip-change-value">₹0.00</td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>Payment Type:</td>
                                <td id="payment-type"></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td class="dotted-border" colspan="3"></td>
                            </tr>
                            <tr>
                                <td class="empty-border" colspan="3"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="receipt-footer flex-column">
                    <p id="receipt-message">Thanks For Your Business!</p>
                    <p id="barcode">Barcode</p>
                </div>
            </article>
            <div class="toolbar flex-row">
                <i class="fas fa-money-bill-wave toolbar-icon paypad-show" data-payment-type='{"type" : "cash"}'></i>
                <i class="fas fa-credit-card toolbar-icon paypad-show" data-payment-type='{"type" : "credit"}'></i>
                <i class="fas fa-trash-alt toolbar-icon" id="clear-order"></i>
            </div>
        </section>
        <section class="menu-payment grid">
            <div class="menu flex-row" id="menu">

            </div>
            <div class="payment grid" id="payment-overlay">
                <div class="paypad grid" id="paypad">
                    <button class="paypad-btn number" data-id="7">7</button>
                    <button class="paypad-btn number" data-id="8">8</button>
                    <button class="paypad-btn number" data-id="9">9</button>
                    <button class="paypad-btn number" data-id="4">4</button>
                    <button class="paypad-btn number" data-id="5">5</button>
                    <button class="paypad-btn number" data-id="6">6</button>
                    <button class="paypad-btn number" data-id="1">1</button>
                    <button class="paypad-btn number" data-id="2">2</button>
                    <button class="paypad-btn number" data-id="3">3</button>
                    <button class="paypad-btn number" data-id="0">0</button>
                    <button class="paypad-btn " data-id="back">Back</button>
                    <button class="paypad-btn " data-id="clear">Clear</button>
                    <button class="paypad-btn span3-col" id="close-sale" data-id="close-sale">Close Sale</button>
                </div>
                <div class="close-paypad flex">
                    <i class="fas fa-times close-icon paypad-close" id="paypad-close"></i>
                </div>
            </div>
        </section>
    </main>
    <?!= include('script-js') ?>
</body>

</html>

Step 6 :- Click to Copy Below Code and Paste to styles-css.html File

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

html,
body {
    height: 100%
}

main {
    height: 92%;
}

body {
    background-color: #121212;
    ;
}

header {
    background-color: rgb(255, 255, 255, .1);
    color: #a7e1ee;
    font-size: smaller;
}

header h1 {
    font-family: 'Audiowide', cursive;
    margin-left: 15px;
}

main {
    margin-top: 10px;
}

.grid {
    display: grid;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.order,
.menu-payment {
    border: solid .5px;
    border-radius: 10px;
    margin: 0px 10px 5px 10px;
    height: 100%;
    max-height: 100%;
}


/*--------------------------------ORDER------------------------*/

.order {
    background-color: white;
    flex: 0 0 440px;
    overflow: auto;
}

.receipt {
    border: solid .5px;
    margin: 10px 15px 5px 15px;
    box-shadow: 3px 3px 2px rgb(3, 3, 3);
    user-select: none;
    flex-grow: 1;
}

.receipt,
.company-info,
.receipt-footer {
    align-items: center;
}

.company-info {
    margin-top: 5px;
}

#company-name {
    font-size: 1.5rem;
}

#company-phone {
    font-size: 1.25rem;
}

th.description {
    width: 180px;
    text-align: left;
}

th.price {
    width: 70px;
}

th.subtotal {
    width: 75px;
}

.quantity,
.price,
.subtotal,
.delete {
    text-align: right;
}

.receipt-details {
    margin-top: 10px;
    flex-grow: 1;
}

.dotted-border {
    border-bottom: dotted 2px;
}

.fa-backspace:hover {
    transform: scale(1.2);
}

table.summary-table {
    text-align: right;
}

tbody.summary-table td:nth-child(1) {
    width: 277px;
}

tbody.summary-table td:nth-child(2) {
    width: 75px;
}

tbody.summary-table td:nth-child(3) {
    width: 25px;
}

.receipt-footer {
    padding-top: 20px;
}

#barcode {
    font-family: 'Libre Barcode 128', cursive;
    font-size: 70px;
    margin-top: 10px;
}

.toolbar {
    flex: 0 0 60px;
    justify-content: space-around;
    align-items: center;
    border: solid .5px;
    border-radius: 10px;
    margin: 0px 15px 5px 15px;
}

.toolbar-icon {
    font-size: 2rem;
}

.toolbar-icon:hover {
    transform: scale(1.2);
}


/*--------------------------------MENU--PAYMENT------------------------*/

.menu-payment {
    background: rgba(255, 255, 255, .05);
    flex-grow: 1;
    z-index: 0;
}

.menu {
    background: rgba(255, 255, 255, .05);
    grid-column: 1;
    grid-row: 1;
    flex-flow: row wrap;
    align-content: flex-start;
    z-index: 0;
    height: 100%;
    overflow: auto;
}

.menu-item {
    flex-flow: column nowrap;
    flex-basis: auto;
    flex-shrink: 0;
    margin: 5px;
    background: rgba(255, 255, 255, .05);
    width: 150px;
}

.menu-img {
    border-radius: 50%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

figcaption {
    color: white;
    text-align: center;
    user-select: none;
}

.menu-item:hover>.menu-img {
    transform: scale(1.03);
}

#payment-overlay {
    display: none;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 330px auto;
    width: 100%;
    height: 100%;
    z-index: 9;
    background: rgba(255, 255, 255, .05);
}

.paypad {
    margin: 10px 0 0 10px;
    align-content: center;
    grid-column: 1;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(5, 100px);
}

.span3-col {
    grid-column: span 3;
}

#close-sale {
    display: none;
}

.paypad-btn.number {
    font-size: 2rem;
}

.close-icon {
    color: white;
    font-size: 3rem;
    margin: 150px 0 0 15px;
}

.close-icon:hover {
    transform: scale(1.03);
}
</style>

Step 7 :- Click to Copy Below Code and Paste to script-js.html File

<script> 
// Export order and the payment to google sheet

class Order {
    constructor() {
        this._menu = [];
        this._previousSales = [];
        this._invoiceNumber = "";
        this._order = [];
        this._payment = {
            invoiceNumber: 0,
            amountPaid: 0,
            type: "",
            changeTip: 0
        };
    }

    get menu() {
        return this._menu;
    }

    set menu(menuArray) {
        this._menu = [];

        menuArray.forEach(menuItem => {
            let currItem = {};
            currItem.sku = menuItem[0];
            currItem.description = menuItem[1];
            currItem.price = menuItem[2];
            currItem.taxRate = menuItem[3];
            currItem.image = menuItem[4];
            this._menu.push(currItem);
        })
    }

    get previousSales() {
        return this._previousSales;
    }

    set previousSales(salesData) {
        this._previousSales = salesData;
    }

    get invoiceNumber() {
        return this._invoiceNumber;
    }

    get order() {
        return this._order;
    }

    get payment() {
        return this._payment;
    }

    set payment(payment) {
        this._payment = payment;
    }

    generateInvoiceNumber() {
        if (this._previousSales.length < 1 || this._previousSales == undefined) {
            this._invoiceNumber = 1;
        } else {
            let highest = 0;
            this._previousSales.forEach(previousSalesLine => {
                if (previousSalesLine[1] > highest) {
                    highest = previousSalesLine[1];
                }
                this._invoiceNumber = highest + 1;
            })
        }
    }

    addOrderLine(quantity, sku) {
        let currentLine = {};

        for (let i = 0; i < this._menu.length; i++) {
            if (sku === this._menu[i].sku) {
                currentLine.sku = this._menu[i].sku;
                currentLine.description = this._menu[i].description;
                currentLine.quantity = quantity;
                currentLine.price = this._menu[i].price;
                currentLine.subtotal = currentLine.quantity * currentLine.price;
                currentLine.tax = Utilities.roundToTwo(this._menu[i].taxRate * currentLine.subtotal);
            }
        }

        this._order.push(currentLine);
        Ui.receiptDetails(this);

    }

    deleteOrderLine(index) {
        this._order.splice(index, 1);

        Ui.receiptDetails(this);
    }

    clearOrder() {
        this._order = [];

        Ui.receiptDetails(this);
    }

    getSummary() {
        const summary = {
            subtotal: 0,
            tax: 0,
            grandtotal: 0
        }

        this.order.forEach(orderLine => {
            summary.subtotal += orderLine.subtotal;
            summary.tax += orderLine.tax;
        })
        summary.grandtotal = summary.subtotal + summary.tax;

        return summary;
    }

    paypad(input) {
        if (!isNaN(parseInt(input))) {
            Utilities.numberPaypad(parseInt(input), this);
        } else if (input === "back") {
            Utilities.backPaypad(this);
        } else if (input === "clear") {
            Utilities.clearPaypad(this);
        } else {
            this.closeSale();
        }
    }

    changePayment(input) {

        const orderGrandTotal = this.getSummary().grandtotal;
        if (input.invoiceNumber != null) this.payment.invoiceNumber = inputInvoiceNumber;
        if (input.amountPaid != null) this.payment.amountPaid = parseFloat(input.amountPaid);
        if (input.type != null) this.payment.type = input.type;
        if (this.payment.amountPaid > orderGrandTotal) {
            this.payment.changeTip = this.payment.amountPaid - orderGrandTotal;
            Ui.closeButton(false);
        } else {
            this.payment.changeTip = 0;
            Ui.closeButton(true);
        }

        Ui.paymentSummary(this);
    }

    clearPayment() {
        this._payment = {
            invoiceNumber: 0,
            amountPaid: 0,
            type: "",
            changeTip: 0
        };

        Ui.paymentSummary(this);
    }

    exportOrder(time) {
      let exportData = [];

        this.order.forEach(orderLine => {
            let currentLine = [];
            currentLine[0] = time;
            currentLine[1] = this.invoiceNumber;
            currentLine[2] = orderLine.sku;
            currentLine[3] = orderLine.quantity;
            currentLine[4] = orderLine.price;
            currentLine[5] = orderLine.tax;

            exportData.push(currentLine);
            this.previousSales.push(currentLine);

        });

        return exportData;
    }

    exportPayment(time) {
        const currentPayment = [[]];
        const tipChange = Utilities.roundToTwo(this.payment.amountPaid - this.getSummary().grandtotal)

        currentPayment[0][0] = time;
        currentPayment[0][1] = this.invoiceNumber;
        currentPayment[0][2] = this.getSummary().grandtotal;
        currentPayment[0][3] = this.payment.type;

        if (this.payment.type === "cash") {
            currentPayment[0][4] = 0;
        } else {
            currentPayment[0][4] = tipChange;
        }
       return currentPayment;
    }

    closeSale() {
        const date = Date();
        const orderData = this.exportOrder(date);
        const paymentData = this.exportPayment(date);
        const exportData = {
          order : orderData,
          payment : paymentData
        }

        Ui.hidePaypad(this);
        this.clearPayment();
        this.clearOrder();
        Ui.invoiceNumber(this);

        google.script.run.setData(JSON.stringify(exportData));
    }
}

class Ui {
    static menu(orderInstance) {
        let frag = document.createDocumentFragment();

        orderInstance.menu.forEach(item => {
            let menuElement = `<img src="${item.image}" alt="${item.description}" class="menu-img" style="width:150px;">
            <figcaption>${item.description}</figcaption>
            <figcaption>${Utilities.convertFloatToString(item.price)}</figcaption>`

            let node = document.createElement("figure");
            node.className = "menu-item";
            node.setAttribute("data-sku", `${item.sku}`);
            node.innerHTML = menuElement;
            frag.appendChild(node);
        });

        document.getElementById("menu").appendChild(frag);

        document.querySelectorAll(".menu-item").forEach(button => {
            button.addEventListener('click', () => {
                orderInstance.addOrderLine(1, parseInt(button.getAttribute("data-sku")));
            });
        })
    }

    static receiptDetails(orderInstance) {
        let frag = document.createDocumentFragment();

        orderInstance.order.forEach((orderLine, index) => {
            let receiptLine = `<td class="description">${orderLine.description}</td>
            <td class="quantity">${orderLine.quantity}</td>
            <td class="price">${Utilities.convertFloatToString(orderLine.price)}</td>
            <td class="subtotal">${Utilities.convertFloatToString(orderLine.subtotal)}</td>
            <td class="delete" data-delete="${index.toString()}"><i class="fas fa-backspace"></i></td>`

            let node = document.createElement("tr");
            node.setAttribute("data-index", `${index.toString()}`);
            node.innerHTML = receiptLine;
            frag.appendChild(node);
        });

        let receiptDetails = document.getElementById("receipt-details");
        while (receiptDetails.hasChildNodes()) {
            receiptDetails.removeChild(receiptDetails.childNodes[0]);
        }

        receiptDetails.appendChild(frag);
        this.summary(orderInstance);

        document.querySelectorAll('.delete').forEach(button => {
            button.addEventListener('click', () => {
                orderInstance.deleteOrderLine(parseInt(button.getAttribute("data-delete")));
            })
        })
    }

    static invoiceNumber(orderInstance) {
        orderInstance.generateInvoiceNumber();
        const invoiceNumber = orderInstance.invoiceNumber;
        document.getElementById('invoice-number').textContent = `Invoice# ${invoiceNumber}`
    }

    static summary(orderInstance) {
        const summary = orderInstance.getSummary();
        const subtotal = document.getElementById("subtotal-summary");
        const tax = document.getElementById("tax-summary");
        const grandtotal = document.getElementById("grandtotal-summary");

        subtotal.textContent = Utilities.convertFloatToString(summary.subtotal);
        tax.textContent = Utilities.convertFloatToString(summary.tax);
        grandtotal.textContent = Utilities.convertFloatToString(summary.grandtotal);
    }

    static showPaypad(orderInstance) {
        const paypad = document.getElementById('payment-overlay');
        paypad.style.display = "grid";
    }

    static hidePaypad(orderInstance) {
        const paypad = document.getElementById('payment-overlay');
        paypad.style.display = "none";
    }

    static paymentSummary(orderInstance) {
        document.getElementById('amount-paid').textContent = Utilities.convertFloatToString(orderInstance.payment.amountPaid);

        const changeTipTitle = document.getElementById('tip-change-title');
        const paymentType = document.getElementById("payment-type");

        if (orderInstance.payment.type === "credit") {
            changeTipTitle.textContent = "Tip:";
            paymentType.textContent = "CC";
        } else if (orderInstance.payment.type === "cash") {
            changeTipTitle.textContent = "Change:";
            paymentType.textContent = "Cash";
        } else {
            changeTipTitle.textContent = "Change:";
            paymentType.textContent = "";
        }
        document.getElementById("tip-change-value").textContent = Utilities.convertFloatToString(orderInstance.payment.changeTip);
    }

    static closeButton(bool) {
        const closeButton = document.getElementById('close-sale');
        if (bool) {
            closeButton.style.display = "none";
        } else {
            closeButton.style.display = "grid";
        }
    }

}

class Utilities {

    static convertFloatToString(float) {
        let priceParams = {
            style: "currency",
            currency: "INR"
        };

        return float.toLocaleString("en-india", priceParams);
    }

    static roundToTwo(num) {
        return +(Math.round(num + "e+2") + "e-2");
    }

    static numberPaypad(input, orderInstance) {
        const currentInput = this.roundToTwo(input * .01);
        const currentAmountPaid = this.roundToTwo(orderInstance.payment.amountPaid);
        const newAmountPaid = this.roundToTwo((currentAmountPaid * 10) + currentInput);

        if (currentAmountPaid === 0) {
            orderInstance.changePayment({ amountPaid: currentInput });
        } else {
            orderInstance.changePayment({ amountPaid: newAmountPaid });
        }
    }

    static backPaypad(orderInstance) {
        const currentPayment = orderInstance.payment.amountPaid;

        if (currentPayment > 0) {
            const toSubtract = ((currentPayment * 100) % 10) * 0.01;
            const newAmount = (currentPayment - toSubtract) * 0.1;
            orderInstance.changePayment({ amountPaid: newAmount });
        }
    }

    static clearPaypad(orderInstance) {
        orderInstance.changePayment({ amountPaid: 0 });
    }
}



// ORDER INSTANTIATION
const order = new Order();

function sheetData() {
  google.script.run.withSuccessHandler(function(dataArray){
    console.log(dataArray)
    items = Object.values(dataArray.items);
    sales = dataArray.sales;

    order.menu = items;
    order.previousSales = sales;

    Ui.menu(order);
    Ui.invoiceNumber(order);
  }).getData();
}

sheetData();



// STATIC EVENT LISTENERS
document.getElementById('clear-order').addEventListener('click', () => {
    order.clearOrder();
})

document.querySelectorAll('.paypad-show').forEach(button => {
    button.addEventListener('click', () => {
        Ui.showPaypad(order);
        order.changePayment(JSON.parse(button.getAttribute("data-payment-type")));

    })
})

document.getElementById('paypad-close').addEventListener('click', () => {
    order.clearPayment();
    Ui.hidePaypad(order);
})

document.querySelectorAll('.paypad-btn').forEach(button => {
    button.addEventListener('click', () => {
        order.paypad(button.getAttribute("data-id"));
    })
})
</script>

Point of Sale (Accounting Software)

How to Make Point of Sale Software for Your Business

In this blog we will tell you How to Make Point of Sale Software for Your Business so read the complete blog carefully and learn How to Make Point of Sale Software for Your Business according to given guidelines.

For Practical :- Practical

Step 1 :- Click to Google Sheet Copy With Source Code

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create 4 file Name Given Below
code.gs
index.html
styles-css.html
script-js.html

Step 4 :- Click to Copy Below Code and Paste to Code.gs File

Step 5 :- Click to Copy Below Code and Paste to index.html File

Step 6 :- Click to Copy Below Code and Paste to styles-css.html File

Step 7 :- Click to Copy Below Code and Paste to script-js.html File

Step 8 :- Click to Deploy >> New Deployment >> Deploy >>

More Detail See Video :-

Post a Comment

Donation and Support

Contact Form

Point of Sale (Accounting Software)

How to Make Point of Sale Software for Your Business

In this blog we will tell you How to Make Point of Sale Software for Your Business so read the complete blog carefully and learn How to Make Point of Sale Software for Your Business according to given guidelines.

For Practical :- Practical

Step 1 :- Click to Google Sheet Copy With Source Code

Step 2 :- Click to >> Extensions >> App Script >>

Step 3 :- Create 4 file Name Given Belowcode.gsindex.htmlstyles-css.htmlscript-js.html

Step 4 :- Click to Copy Below Code and Paste to Code.gs File

Step 5 :- Click to Copy Below Code and Paste to index.html File

Step 6 :- Click to Copy Below Code and Paste to styles-css.html File

Step 7 :- Click to Copy Below Code and Paste to script-js.html File

Step 8 :- Click to Deploy >> New Deployment >> Deploy >>

More Detail See Video :-

Post a Comment

Contact Form

Step 3 :- Create 4 file Name Given Below
code.gs
index.html
styles-css.html
script-js.html