<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Bill Pay Tracker</title>

        <meta name="description" content="A clean and user-friendly bill pay tracker app that helps you calculate your monthly credit card payments and running balances.">

        <meta name="keywords" content="bill pay tracker, credit card payments, running balances">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">



        <script type="text/javascript">

            try {

                // App Javascript Goes Here. Place your entire script content inside the try block for error handling.

                document.addEventListener("DOMContentLoaded", function() {

                    // Variables to store bill details

                    var bills = [];



                    // Function to calculate monthly payment and running balance

                    function calculatePayment() {

                        var totalPayment = 0;

                        var runningBalance = 0;



                        // Calculate total payment and running balance

                        for (var i = 0; i < bills.length; i++) {

                            totalPayment += bills[i].payment;

                            runningBalance += bills[i].balance;

                        }



                        // Update the UI

                        $("#total-payment").text("$" + totalPayment.toFixed(2));

                        $("#running-balance").text("$" + runningBalance.toFixed(2));

                    }



                    // Event handler for adding a bill

                    $("#add-bill-form").submit(function(event) {

                        event.preventDefault();



                        // Get form values

                        var billName = $("#bill-name").val();

                        var billPayment = parseFloat($("#bill-payment").val());

                        var billBalance = parseFloat($("#bill-balance").val());



                        // Validate form values

                        if (billName && billPayment && billBalance) {

                            // Create bill object

                            var bill = {

                                name: billName,

                                payment: billPayment,

                                balance: billBalance

                            };



                            // Add bill to the list

                            bills.push(bill);



                            // Clear form inputs

                            $("#bill-name").val("");

                            $("#bill-payment").val("");

                            $("#bill-balance").val("");



                            // Calculate payment and update UI

                            calculatePayment();

                        }

                    });

                });



            } catch (error) {

                 // This will throw the error to the parent window.

                throw error;

            }

        </script>

        

        <style>

            /* App CSS Goes Here */

            body {

                font-family: 'Montserrat', sans-serif;

                background-color: #f8f9fa;

            }



            .container {

                max-width: 600px;

                margin: 0 auto;

                padding: 20px;

            }



            h1 {

                font-size: 24px;

                font-weight: 600;

                margin-bottom: 20px;

                color: #333;

            }



            .form-control {

                margin-bottom: 15px;

            }



            .btn-primary {

                background-color: #007bff;

                border-color: #007bff;

            }



            .btn-primary:hover {

                background-color: #0069d9;

                border-color: #0062cc;

            }



            #bill-list {

                margin-bottom: 20px;

            }



            #bill-list table {

                width: 100%;

                border-collapse: collapse;

            }



            #bill-list th,

            #bill-list td {

                padding: 8px;

                text-align: left;

                border-bottom: 1px solid #dee2e6;

            }



            #bill-list th {

                background-color: #f8f9fa;

                color: #333;

            }



            #bill-list td:last-child {

                text-align: right;

            }



            #total-payment-container {

                margin-bottom: 20px;

            }



            #total-payment-container label {

                font-weight: 600;

                margin-right: 10px;

            }



            #running-balance-container {

                margin-bottom: 20px;

            }



            #running-balance-container label {

                font-weight: 600;

                margin-right: 10px;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <h1>Bill Pay Tracker</h1>



            <form id="add-bill-form">

                <div class="form-group">

                    <label for="bill-name">Bill Name</label>

                    <input type="text" class="form-control" id="bill-name" required>

                </div>

                <div class="form-group">

                    <label for="bill-payment">Monthly Payment</label>

                    <input type="number" class="form-control" id="bill-payment" min="0" step="0.01" required>

                </div>

                <div class="form-group">

                    <label for="bill-balance">Running Balance</label>

                    <input type="number" class="form-control" id="bill-balance" min="0" step="0.01" required>

                </div>

                <button type="submit" class="btn btn-primary">Add Bill</button>

            </form>



            <div id="bill-list">

                <table>

                    <thead>

                        <tr>

                            <th>Bill Name</th>

                            <th>Monthly Payment</th>

                            <th>Running Balance</th>

                        </tr>

                    </thead>

                    <tbody>

                        <!-- Bill rows will be dynamically added here -->

                    </tbody>

                </table>

            </div>



            <div id="total-payment-container">

                <label>Total Monthly Payment:</label>

                <span id="total-payment">$0.00</span>

            </div>



            <div id="running-balance-container">

                <label>Running Balance:</label>

                <span id="running-balance">$0.00</span>

            </div>

        </div>

    </body>

</html>