iWaqf Impact Calculator

by Shabeer Sheffa

HTML

<div class="waqf-calculator">
  <div class="calculator-header">
    <h2>Waqf Calculator</h2>
    <p>How much will you give to charity this year?</p>
  </div>

  <div class="calculator-input">
    <div class="input-group">
      <span class="currency">£</span>
      <input
        type="number"
        id="waqf-amount"
        placeholder="1000"
        min="1"
        value="1000"
      />
    </div>
    <button id="calculate-btn">Calculate</button>
  </div>

  <div id="results-container" class="results-container">
    <div class="result-card highlight">
      <h3>In just <span id="years-display">100</span> years,</h3>
      <div class="result-item">
        <p class="result-label">Your Waqf will have donated over</p>
        <p class="result-value" id="total-donated">£104,401</p>
        <p class="result-subtext">to the causes you care about the most.</p>
      </div>

      <div class="result-item">
        <p class="result-label">Your Waqf itself will have grown to be worth</p>
        <p class="result-value" id="waqf-value">£131,501</p>
      </div>
    </div>

    <div class="breakdown">
      <h4>Detailed Breakdown:</h4>
      <table>
        <thead>
          <tr>
            <th>Years</th>
            <th>Waqf Value</th>
            <th>Total Donated</th>
            <th>Combined Impact</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Today</td>
            <td id="waqf-0">£1,000</td>
            <td id="donated-0">£0</td>
            <td id="combined-0">£1,000</td>
          </tr>
          <tr>
            <td>10</td>
            <td id="waqf-10">£1,629</td>
            <td id="donated-10">£503</td>
            <td id="combined-10">£2,132</td>
          </tr>
          <tr>
            <td>50</td>
            <td id="waqf-50">£11,467</td>
            <td id="donated-50">£8,374</td>
            <td id="combined-50">£19,841</td>
          </tr>
         ...

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #d0d0d0 0%);
  padding: 20px;
  margin: 0;
}

.waqf-calculator {
  max-width: 700px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.calculator-header {
  background: linear-gradient(135deg, #1a8754 0%, #156b43 100%);
  color: white;
  padding: 30px;
  text-align: center;
}

.calculator-header h2 {
  margin: 0 0 10px 0;
  font-size: 28px;
}

.calculator-header p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.calculator-input {
  padding: 30px;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
}

.currency {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #666;
  font-weight: bold;
}

#waqf-amount {
  width: 100%;
  padding: 15px 15px 15px 45px;
  font-size: 24px;
  border: 2px solid #ddd;
  border-radius: 8px;
  transition: border-color 0.3s;
}

#waqf-amount:focus {
  outline: none;
  border-color: #1a8754;
}

#calculate-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, #1a8754 0%, #156b43 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

#calculate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(26, 135, 84, 0.3);
}

#calculate-btn:active {
  transform: translateY(0);
}

.results-container {
  padding: 0 30px 30px 30px;
  display: none;
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.result-card {
  background: linear-gradient(135deg, #f5f7fa 0%,...

JavaScript

document.addEventListener('DOMContentLoaded', function () {
  const calculateBtn = document.getElementById('calculate-btn');
  const amountInput = document.getElementById('waqf-amount');
  const resultsContainer = document.getElementById('results-container');

  function calculateWaqf(
    amount,
    years,
    growthRate = 0.05,
    donationRate = 0.04,
  ) {
    const waqfValue = amount * Math.pow(1 + growthRate, years);
    const totalDonated =
      ((amount * donationRate) / growthRate) *
      (Math.pow(1 + growthRate, years) - 1);

    return {
      waqfValue: Math.round(waqfValue),
      totalDonated: Math.round(totalDonated),
      combinedImpact: Math.round(waqfValue + totalDonated),
    };
  }

  function formatNumber(num) {
    return '£' + num.toLocaleString('en-GB');
  }

  function updateResults() {
    const amount = parseFloat(amountInput.value);

    // Validate input
    if (isNaN(amount) || amount <= 0) {
      alert('Please enter a valid amount (greater than 0)');
      return;
    }

    // Calculate for different time periods
    const results0 = calculateWaqf(amount, 0);
    const results10 = calculateWaqf(amount, 10);
    const results50 = calculateWaqf(amount, 50);
    const results100 = calculateWaqf(amount, 100);

    // Update main results (100 years)
    document.getElementById('years-display').textContent = '100';
    document.getElementById('total-donated').textContent = formatNumber(
      results100.totalDonated,
    );
    document.getElementById('waqf-value').textContent = formatNumber(
      results100.waqfValue,
    );

    // Update breakdown table
    // Today (0 years)
    document.getElementById('waqf-0').textContent = formatNumber(
      results0.waqfValue,
    );
    document.getElementById('donated-0').textContent = formatNumber(
      results0.totalDonated,
    );
    document.getElementById('combined-0').textContent = formatNumber(
     ...