Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rental Property Calculator</title>
    <style>
        .calculator-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 500px;
            margin: auto;
        }

        .calculator-container input,
        .calculator-container button {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 6px;
            background-color: #f9f9f9;
        }

        .calculator-container button {
            background-color: #000;
            color: white;
            border: none;
            cursor: pointer;
        }

        .calculator-container button:hover {
            background-color: #444;
        }

        .calculator-container .result {
            margin-top: 20px;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        }

        .calculator-container .result h3 {
            margin-top: 0;
            font-size: 18px;
            color: #000;
        }

        .calculator-container .result p {
            font-size: 16px;
            color: #000;
            margin: 8px 0;
        }

        .calculator-container .result strong {
            color: #000;
        }

        .calculator-container h2 {
            font-size: 20px;
            text-align: center;
            color: #000;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>

    
    <div class="calculator-container">
        <h2>Rental Property Calculator</h2>

        
        <label for="propertyPrice">Property Price ($):</label>
        <input type="number" id="propertyPrice" placeholder="Enter property price">

        <label for="monthlyRent">Monthly Rent Income ($):</label>
        <input type="number" id="monthlyRent" placeholder="Enter monthly rent income">

        <label for="propertyTax">Annual Property Tax ($):</label>
        <input type="number" id="propertyTax" placeholder="Enter annual property tax">

        <label for="insurance">Annual Insurance ($):</label>
        <input type="number" id="insurance" placeholder="Enter annual insurance">

        <label for="managementFee">Monthly Property Management Fee ($):</label>
        <input type="number" id="managementFee" placeholder="Enter property management fee">

        <label for="maintenance">Monthly Maintenance & Repairs ($):</label>
        <input type="number" id="maintenance" placeholder="Enter maintenance cost">

        <label for="utilities">Monthly Utilities Cost ($):</label>
        <input type="number" id="utilities" placeholder="Enter utilities cost">

        <label for="loanAmount">Loan Amount ($):</label>
        <input type="number" id="loanAmount" placeholder="Enter loan amount">

        <label for="interestRate">Annual Interest Rate (%):</label>
        <input type="number" id="interestRate" placeholder="Enter interest rate" step="0.1">

        <label for="loanTerm">Loan Term (in Years):</label>
        <input type="number" id="loanTerm" placeholder="Enter loan term in years">

        <button id="calculateBtn">Calculate</button>

        
        <div class="result" id="result">
            
        </div>
    </div>

    <script>
        // Wait for the DOM to be fully loaded
        document.addEventListener('DOMContentLoaded', function () {
            // Get the button element
            const calculateBtn = document.getElementById('calculateBtn');

            // Make sure the button exists and attach the click listener
            if (calculateBtn) {
                calculateBtn.addEventListener('click', calculate);
            }
        });

        function calculate() {
            // Clear previous result
            document.getElementById("result").innerHTML = "";

            // Get input values
            const propertyPrice = parseFloat(document.getElementById("propertyPrice").value);
            const monthlyRent = parseFloat(document.getElementById("monthlyRent").value);
            const propertyTax = parseFloat(document.getElementById("propertyTax").value);
            const insurance = parseFloat(document.getElementById("insurance").value);
            const managementFee = parseFloat(document.getElementById("managementFee").value);
            const maintenance = parseFloat(document.getElementById("maintenance").value);
            const utilities = parseFloat(document.getElementById("utilities").value);
            const loanAmount = parseFloat(document.getElementById("loanAmount").value);
            const interestRate = parseFloat(document.getElementById("interestRate").value) / 100;
            const loanTerm = parseInt(document.getElementById("loanTerm").value);

            // Check if all fields are filled out with valid numbers
            if (isNaN(propertyPrice) || isNaN(monthlyRent) || isNaN(propertyTax) || isNaN(insurance) ||
                isNaN(managementFee) || isNaN(maintenance) || isNaN(utilities) || isNaN(loanAmount) ||
                isNaN(interestRate) || isNaN(loanTerm)) {
                document.getElementById("result").innerHTML = "<p>Please fill in all the fields with valid numbers.</p>";
                return;
            }

            // Calculate Monthly Mortgage Payment
            const monthlyInterestRate = interestRate / 12;
            const totalPayments = loanTerm * 12;
            let monthlyMortgage = 0;

            if (monthlyInterestRate > 0) {
                monthlyMortgage = loanAmount * (monthlyInterestRate * Math.pow(1 + monthlyInterestRate, totalPayments)) /
                                  (Math.pow(1 + monthlyInterestRate, totalPayments) - 1);
            } else {
                monthlyMortgage = loanAmount / totalPayments;
            }

            // Calculate Net Operating Income (NOI)
            const annualIncome = monthlyRent * 12;
            const totalExpenses = (propertyTax + insurance + managementFee * 12 + maintenance * 12 + utilities * 12);
            const noi = annualIncome - totalExpenses;

            // Calculate Cash Flow
            const annualMortgagePayment = monthlyMortgage * 12;
            const cashFlow = noi - annualMortgagePayment;

            // Calculate ROI
            const downPayment = propertyPrice - loanAmount;
            const roi = (cashFlow / downPayment) * 100;

            // Display Results
            document.getElementById("result").innerHTML = `
                <h3>Results:</h3>
                <p><strong>Monthly Mortgage Payment:</strong> $${monthlyMortgage.toFixed(2)}</p>
                <p><strong>Annual Mortgage Payment:</strong> $${annualMortgagePayment.toFixed(2)}</p>
                <p><strong>Net Operating Income (NOI):</strong> $${noi.toFixed(2)}</p>
                <p><strong>Annual Cash Flow:</strong> $${cashFlow.toFixed(2)}</p>
                <p><strong>Return on Investment (ROI):</strong> ${roi.toFixed(2)}%</p>
            `;
        }
    </script>
</body>
</html>

Room in apartment before and after renovation works