Embeddable freelance rate calculator widget - add to any site with one script tag

rate-widget.js

(function() {
  const container = document.getElementById('freelance-rate-calc');
  if (!container) return;
  
  container.innerHTML = `
    <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 320px; padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;">
      <h3 style="margin: 0 0 16px 0; font-size: 18px; color: #111;">Freelance Rate Calculator</h3>
      <div style="margin-bottom: 12px;">
        <label style="display: block; font-size: 14px; color: #374151; margin-bottom: 4px;">Desired Annual Income</label>
        <input type="number" id="frc-income" value="80000" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 16px; box-sizing: border-box;">
      </div>
      <div style="margin-bottom: 16px;">
        <label style="display: block; font-size: 14px; color: #374151; margin-bottom: 4px;">Hours/Week You Can Bill</label>
        <input type="number" id="frc-hours" value="25" style="width: 100%; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 16px; box-sizing: border-box;">
      </div>
      <button onclick="window.frcCalculate()" style="width: 100%; padding: 12px; background: #2563eb; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer;">Calculate Rate</button>
      <div id="frc-result" style="margin-top: 16px; display: none;">
        <div style="font-size: 14px; color: #374151;">Minimum hourly rate:</div>
        <div id="frc-rate" style="font-size: 32px; font-weight: bold; color: #059669;"></div>
        <div style="font-size: 12px; color: #6b7280; margin-top: 8px;">Includes 15.3% self-employment tax + 25% income tax</div>
        <a href="https://hourly-rate-calculator.tp-business.workers.dev" target="_blank" style="display: block; margin-top: 12px; text-align: center; color: #2563eb; font-size: 14px;">Get full breakdown with expenses →</a>
      </div>
    </div>
  `;
  
  window.frcCalculate = function() {
    const income = parseFloat(document.getElementById('frc-income').value) || 80000;
    const hours = parseFloat(document.getElementById('frc-hours').value) || 25;
    const taxRate = 0.403; // 15.3% SE + ~25% income
    const weeksPerYear = 48; // accounting for vacation
    const grossNeeded = income / (1 - taxRate);
    const billableHours = hours * weeksPerYear;
    const hourlyRate = Math.ceil(grossNeeded / billableHours);
    document.getElementById('frc-rate').textContent = '$' + hourlyRate + '/hr';
    document.getElementById('frc-result').style.display = 'block';
  };
})();