Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple ARV Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .calculator {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="number"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #2e7d32;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            width: 100%;
        }
        button:hover {
            background-color: #1b5e20;
        }
        #results {
            margin-top: 20px;
            display: none;
            background-color: #e8f5e9;
            padding: 15px;
            border-radius: 4px;
        }
        .result-item {
            margin-bottom: 10px;
        }
        .result-label {
            font-weight: bold;
        }
        .result-value {
            float: right;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <h2>After Repair Value (ARV) Calculator</h2>
        <p>Estimate the potential value of a property after renovations and determine your maximum purchase price.</p>
        
        <div class="form-group">
            <label for="zipCode">Property ZIP Code</label>
            <input type="number" id="zipCode" placeholder="Enter ZIP code">
        </div>
        
        <div class="form-group">
            <label for="squareFootage">Square Footage</label>
            <input type="number" id="squareFootage" placeholder="Enter square footage">
        </div>
        
        <div class="form-group">
            <label for="propertyType">Property Type</label>
            <select id="propertyType">
                <option value="single-family">Single Family</option>
                <option value="multi-family">Multi-Family</option>
                <option value="condo">Condo</option>
                <option value="commercial">Commercial</option>
            </select>
        </div>
        
        <div class="form-group">
            <label for="condition">Current Condition</label>
            <select id="condition">
                <option value="excellent">Excellent - Minor Cosmetic Work</option>
                <option value="good">Good - Some Updates Needed</option>
                <option value="fair">Fair - Significant Updates Needed</option>
                <option value="poor">Poor - Major Renovation Needed</option>
                <option value="distressed">Distressed - Complete Rehab Required</option>
            </select>
        </div>
        
        <button onclick="calculateARV()">Calculate ARV</button>
        
        <div id="results">
            <h3>Results</h3>
            
            <div class="result-item">
                <span class="result-label">Estimated ARV:</span>
                <span class="result-value" id="arv">$0</span>
                <div style="clear: both;"></div>
            </div>
            
            <div class="result-item">
                <span class="result-label">Estimated Rehab Costs:</span>
                <span class="result-value" id="rehabCosts">$0</span>
                <div style="clear: both;"></div>
            </div>
            
            <div class="result-item">
                <span class="result-label">Maximum Purchase Price (70% Rule):</span>
                <span class="result-value" id="maxPurchase">$0</span>
                <div style="clear: both;"></div>
            </div>
            
            <div class="result-item">
                <span class="result-label">Potential Profit:</span>
                <span class="result-value" id="profit">$0</span>
                <div style="clear: both;"></div>
            </div>
        </div>
    </div>
    
    <script>
        function calculateARV() {
            // Get input values
            const zipCode = document.getElementById('zipCode').value;
            const squareFootage = parseFloat(document.getElementById('squareFootage').value);
            const propertyType = document.getElementById('propertyType').value;
            const condition = document.getElementById('condition').value;
            
            // Validate inputs
            if (!zipCode || !squareFootage) {
                alert('Please fill in all required fields');
                return;
            }
            
            // Calculate ARV
            const valuePerSqFt = getAverageValuePerSqFt(propertyType, zipCode);
            const arv = squareFootage * valuePerSqFt;
            
            // Calculate rehab costs
            const rehabCosts = calculateRehabCosts(condition, squareFootage);
            
            // Calculate maximum purchase price (70% rule)
            const maxPurchasePrice = (arv * 0.7) - rehabCosts;
            
            // Calculate potential profit
            const potentialProfit = arv - maxPurchasePrice - rehabCosts;
            
            // Display results
            document.getElementById('arv').textContent = formatCurrency(arv);
            document.getElementById('rehabCosts').textContent = formatCurrency(rehabCosts);
            document.getElementById('maxPurchase').textContent = formatCurrency(maxPurchasePrice);
            document.getElementById('profit').textContent = formatCurrency(potentialProfit);
            
            // Show results section
            document.getElementById('results').style.display = 'block';
        }
        
        function getAverageValuePerSqFt(propertyType, zipCode) {
            // In a real implementation, this would use actual data from APIs
            // For this simple calculator, we'll use reasonable estimates
            const baseValues = {
                'single-family': 150,
                'multi-family': 130,
                'condo': 170,
                'commercial': 200
            };
            
            // Return the base value for the property type
            return baseValues[propertyType] || 150;
        }
        
        function calculateRehabCosts(condition, squareFootage) {
            // Estimate rehab costs based on condition and square footage
            const costPerSqFt = {
                'excellent': 5,
                'good': 20,
                'fair': 40,
                'poor': 60,
                'distressed': 100
            };
            
            return squareFootage * (costPerSqFt[condition] || 40);
        }
        
        function formatCurrency(value) {
            return '$' + value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/\.00$/, '');
        }
    </script>
</body>
</html>