Embed

<div id="roi-calculator" style="font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f8fafc; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
  <h2 style="text-align: center; color: #1e3a8a; margin-bottom: 20px;">UAE Real Estate ROI Calculator</h2>
  
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px;">
    <div>
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Emirates</label>
      <select id="emirate-select" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
        <option value="All">All Emirates</option>
        <option value="Dubai" selected>Dubai</option>
        <option value="Abu Dhabi">Abu Dhabi</option>
        <option value="Ras Al Khaimah">Ras Al Khaimah</option>
        <option value="Sharjah">Sharjah</option>
      </select>
      
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Location</label>
      <select id="location-select" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
        
      </select>
    </div>
    
    <div>
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Purchase Price (AED)</label>
      <input id="purchase-price" type="number" value="1000000" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
      
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Down Payment (AED)</label>
      <input id="down-payment" type="number" value="250000" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
    </div>
    
    <div>
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Interest Rate (%)</label>
      <input id="interest-rate" type="number" value="3.5" step="0.1" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
      
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Loan Term (years)</label>
      <input id="loan-term" type="number" value="25" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
    </div>
    
    <div>
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Monthly Rent (AED)</label>
      <input id="monthly-rent" type="number" value="5000" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
      
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Occupancy Rate (%)</label>
      <input id="occupancy-rate" type="number" value="90" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
    </div>
    
    <div>
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Service Charge (AED/year)</label>
      <input id="service-charge" type="number" value="15000" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
      
      <label style="display: block; margin-bottom: 5px; font-weight: bold;">Holding Period (years)</label>
      <input id="holding-period" type="number" value="5" style="width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px;">
    </div>
  </div>
  
  <div style="text-align: center; margin: 20px 0;">
    <button id="calculate-button" style="background-color: #1e3a8a; color: white; border: none; padding: 10px 20px; border-radius: 4px; font-size: 16px; cursor: pointer;">Calculate ROI</button>
  </div>
  
  <div id="results-section" style="display: none; margin-top: 30px; border-top: 1px solid #e2e8f0; padding-top: 20px;">
    <h3 style="text-align: center; color: #1e3a8a; margin-bottom: 20px;">Investment Results</h3>
    
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;">
      <div style="background-color: #f0fdf4; padding: 15px; border-radius: 6px;">
        <h4 style="margin: 0 0 5px 0;">Return on Investment</h4>
        <div id="roi-value" style="font-size: 22px; font-weight: bold;"></div>
        <div id="roi-annual" style="font-size: 14px; color: #64748b;"></div>
      </div>
      
      <div style="background-color: #f5f3ff; padding: 15px; border-radius: 6px;">
        <h4 style="margin: 0 0 5px 0;">Future Property Value</h4>
        <div id="future-value" style="font-size: 22px; font-weight: bold;"></div>
        <div id="value-period" style="font-size: 14px; color: #64748b;"></div>
      </div>
    </div>
    
    <div id="recommendation" style="background-color: #f8fafc; border-radius: 6px; padding: 15px; margin-top: 20px; border-left: 4px solid #3b82f6;">
      
    </div>
  </div>
</div>

<script>
// Location data with all UAE locations
const locationData = {
  // Dubai Prime Established
  'Dubai - Downtown': { area: 'Dubai', type: 'Prime Established', appreciationRate: 4.5, occupancyRate: 92, rentalYield: 5.2 },
  'Dubai - Palm Jumeirah': { area: 'Dubai', type: 'Prime Established', appreciationRate: 5.0, occupancyRate: 88, rentalYield: 4.8 },
  'Dubai - Dubai Marina': { area: 'Dubai', type: 'Prime Established', appreciationRate: 4.2, occupancyRate: 90, rentalYield: 5.5 },
  'Dubai - Emirates Hills': { area: 'Dubai', type: 'Prime Established', appreciationRate: 4.2, occupancyRate: 85, rentalYield: 4.2 },
  'Dubai - Bluewaters Island': { area: 'Dubai', type: 'Prime Established', appreciationRate: 4.8, occupancyRate: 90, rentalYield: 5.0 },
  
  // Dubai Prime Upcoming
  'Dubai - Dubai Creek Harbour': { area: 'Dubai', type: 'Prime Upcoming', appreciationRate: 5.5, occupancyRate: 86, rentalYield: 5.7 },
  'Dubai - Dubai Hills Estate': { area: 'Dubai', type: 'Prime Upcoming', appreciationRate: 4.7, occupancyRate: 88, rentalYield: 5.0 },
  'Dubai - Emaar Beachfront': { area: 'Dubai', type: 'Prime Upcoming', appreciationRate: 5.3, occupancyRate: 85, rentalYield: 5.5 },
  'Dubai - MBR City': { area: 'Dubai', type: 'Prime Upcoming', appreciationRate: 5.2, occupancyRate: 84, rentalYield: 5.1 },
  'Dubai - Sanaiya Island': { area: 'Dubai', type: 'Prime Upcoming', appreciationRate: 5.1, occupancyRate: 85, rentalYield: 5.4 },
  
  // Abu Dhabi
  'Abu Dhabi - Saadiyat Island': { area: 'Abu Dhabi', type: 'Prime Established', appreciationRate: 3.8, occupancyRate: 84, rentalYield: 5.0 },
  'Abu Dhabi - Yas Island': { area: 'Abu Dhabi', type: 'Prime Established', appreciationRate: 3.5, occupancyRate: 85, rentalYield: 5.5 },
  
  // Ras Al Khaimah
  'Ras Al Khaimah - Al Marjan Island': { area: 'Ras Al Khaimah', type: 'Prime Upcoming', appreciationRate: 3.5, occupancyRate: 70, rentalYield: 5.8 },
  'Ras Al Khaimah - Sanaiya Island': { area: 'Ras Al Khaimah', type: 'Prime Upcoming', appreciationRate: 3.7, occupancyRate: 72, rentalYield: 5.9 },
  
  // Sharjah
  'Sharjah - Aljada': { area: 'Sharjah', type: 'Prime Upcoming', appreciationRate: 3.0, occupancyRate: 82, rentalYield: 6.5 }
};

// When DOM is fully loaded
document.addEventListener('DOMContentLoaded', function() {
  // DOM Elements
  const emirateSelect = document.getElementById('emirate-select');
  const locationSelect = document.getElementById('location-select');
  const purchasePrice = document.getElementById('purchase-price');
  const downPayment = document.getElementById('down-payment');
  const interestRate = document.getElementById('interest-rate');
  const loanTerm = document.getElementById('loan-term');
  const monthlyRent = document.getElementById('monthly-rent');
  const occupancyRate = document.getElementById('occupancy-rate');
  const serviceCharge = document.getElementById('service-charge');
  const holdingPeriod = document.getElementById('holding-period');
  const calculateButton = document.getElementById('calculate-button');
  const resultsSection = document.getElementById('results-section');

  // Format currency
  function formatCurrency(value) {
    return 'AED ' + Math.round(value).toLocaleString();
  }

  // Format percentage
  function formatPercent(value) {
    return value.toFixed(2) + '%';
  }

  // Filter locations by emirate
  function filterLocations() {
    const selectedEmirate = emirateSelect.value;
    const filteredLocations = Object.keys(locationData).filter(location => {
      return selectedEmirate === 'All' || locationData[location].area === selectedEmirate;
    });
    
    // Clear location select
    locationSelect.innerHTML = '';
    
    // Add options
    filteredLocations.forEach(location => {
      const option = document.createElement('option');
      option.value = location;
      option.textContent = location;
      locationSelect.appendChild(option);
    });
    
    // Trigger change to update info
    updateLocationInfo();
  }

  // Update location info and related fields
  function updateLocationInfo() {
    const selectedLocation = locationSelect.value;
    const location = locationData[selectedLocation];
    
    if (location) {
      // Update related inputs
      occupancyRate.value = location.occupancyRate;
      
      // Calculate rent based on yield
      const price = parseFloat(purchasePrice.value) || 1000000;
      const calculatedRent = Math.round((price * (location.rentalYield / 100)) / 12);
      monthlyRent.value = calculatedRent;
    }
  }

  // Calculate mortgage payment
  function calculateMortgage(loanAmount, interestRate, loanTerm) {
    if (!loanAmount || !interestRate || !loanTerm) return 0;
    
    const monthlyRate = interestRate / 100 / 12;
    const numPayments = loanTerm * 12;
    
    if (interestRate === 0) return loanAmount / numPayments;
    
    const payment = loanAmount * monthlyRate * Math.pow(1 + monthlyRate, numPayments) / 
                   (Math.pow(1 + monthlyRate, numPayments) - 1);
    return payment;
  }

  // Calculate ROI
  function calculateROI() {
    // Get input values
    const price = parseFloat(purchasePrice.value) || 1000000;
    const down = parseFloat(downPayment.value) || 250000;
    const rate = parseFloat(interestRate.value) || 3.5;
    const term = parseFloat(loanTerm.value) || 25;
    const rent = parseFloat(monthlyRent.value) || 5000;
    const occupancy = parseFloat(occupancyRate.value) || 90;
    const service = parseFloat(serviceCharge.value) || 15000;
    const holding = parseFloat(holdingPeriod.value) || 5;
    
    // Calculate loan amount
    const loanAmount = price - down;
    
    // Calculate fees
    const dldFee = price * 0.04;
    const agencyFee = price * 0.02;
    const mortgageFee = loanAmount * 0.0025;
    
    // Total initial investment
    const totalInvestment = down + dldFee + agencyFee + mortgageFee;
    
    // Calculate mortgage payment
    const monthlyPayment = calculateMortgage(loanAmount, rate, term);
    const annualPayment = monthlyPayment * 12;
    
    // Calculate rental income
    const annualRent = rent * 12 * (occupancy / 100);
    
    // Calculate expenses
    const maintenance = price * 0.01; // 1% of property value
    const management = annualRent * 0.05; // 5% of rental income
    const insurance = 2500;
    const totalExpenses = maintenance + management + service + insurance;
    
    // Calculate cash flow
    const cashFlow = annualRent - totalExpenses - annualPayment;
    
    // Get appreciation rate from selected location
    const selectedLocation = locationSelect.value;
    const appreciationRate = locationData[selectedLocation].appreciationRate;
    
    // Calculate future value
    const futureValue = price * Math.pow(1 + (appreciationRate / 100), holding);
    
    // Calculate remaining loan balance (simplified)
    let remainingLoan = loanAmount;
    for (let i = 0; i < holding; i++) {
      const yearlyInterest = remainingLoan * (rate / 100);
      const yearlyPrincipal = Math.min(remainingLoan, annualPayment - yearlyInterest);
      remainingLoan -= yearlyPrincipal;
    }
    
    // Calculate profit
    const equity = futureValue - remainingLoan;
    const totalProfit = (equity - totalInvestment) + (cashFlow * holding);
    
    // Calculate ROI
    const roi = (totalProfit / totalInvestment) * 100;
    const annualROI = (Math.pow(1 + (roi / 100), 1 / holding) - 1) * 100;
    
    // Update results
    document.getElementById('roi-value').textContent = formatPercent(roi);
    document.getElementById('roi-annual').textContent = formatPercent(annualROI) + ' annualized';
    document.getElementById('roi-value').style.color = annualROI > 8 ? '#10b981' : annualROI > 5 ? '#3b82f6' : '#f59e0b';
    
    document.getElementById('future-value').textContent = formatCurrency(futureValue);
    document.getElementById('value-period').textContent = 'After ' + holding + ' years';
    
    // Update recommendation
    const recommendation = document.getElementById('recommendation');
    if (annualROI > 8) {
      recommendation.style.borderLeftColor = '#10b981';
      recommendation.innerHTML = `
        <h4 style="margin: 0 0 10px 0; color: #10b981;">Strong Investment Opportunity</h4>
        <p style="margin: 0; font-size: 14px;">This ${locationData[selectedLocation].type} property in ${selectedLocation.split(' - ')[0]} shows strong potential returns with an annualized ROI of ${formatPercent(annualROI)}.</p>
      `;
    } else if (annualROI > 5) {
      recommendation.style.borderLeftColor = '#3b82f6';
      recommendation.innerHTML = `
        <h4 style="margin: 0 0 10px 0; color: #3b82f6;">Good Investment Potential</h4>
        <p style="margin: 0; font-size: 14px;">This ${locationData[selectedLocation].type} property in ${selectedLocation.split(' - ')[0]} shows decent potential with an annualized ROI of ${formatPercent(annualROI)}.</p>
      `;
    } else {
      recommendation.style.borderLeftColor = '#f59e0b';
      recommendation.innerHTML = `
        <h4 style="margin: 0 0 10px 0; color: #f59e0b;">Moderate Investment Potential</h4>
        <p style="margin: 0; font-size: 14px;">This ${locationData[selectedLocation].type} property in ${selectedLocation.split(' - ')[0]} shows moderate potential with an annualized ROI of ${formatPercent(annualROI)}. Consider negotiating a better purchase price or finding properties with higher rental yields.</p>
      `;
    }
    
    // Show results section
    resultsSection.style.display = 'block';
  }

  // Event listeners
  emirateSelect.addEventListener('change', filterLocations);
  locationSelect.addEventListener('change', updateLocationInfo);
  purchasePrice.addEventListener('change', updateLocationInfo);
  calculateButton.addEventListener('click', calculateROI);

  // Initialize on load
  filterLocations();
});
</script>

Tailored UAE Estate

Luxury Real Estate Agency & Consultancy in UAE

Hanken Grotesk

Cabin

<p>Cookie Notice</p>
<p>This website uses cookies to improve your experience. By continuing to use this site, you agree to our use of cookies, similar technologies, and the processing of your data. You can learn more about how we use cookies in our Privacy Policy.</p>