diff --git a/README.md b/README.md new file mode 100644 index 0000000..c623c04 --- /dev/null +++ b/README.md @@ -0,0 +1,144 @@ +# Mutual Fund Calculator for Zoho Snippets + +A comprehensive mutual fund calculator with a dark blue and white theme, designed specifically for integration with Zoho snippets. This calculator includes all major mutual fund calculation types with interactive charts and real-time calculations. + +## Features + +### 🧮 Calculator Types +- **SIP Calculator** - Systematic Investment Plan calculations +- **Lumpsum Calculator** - One-time investment calculations +- **SWP Calculator** - Systematic Withdrawal Plan calculations +- **STP Calculator** - Systematic Transfer Plan calculations +- **Goal Calculator** - Target-based investment planning + +### 🎨 Design Features +- **Dark Blue & White Theme** - Professional color scheme with emphasis on white backgrounds +- **Responsive Design** - Works perfectly on desktop, tablet, and mobile devices +- **Interactive Sliders** - Real-time input adjustment with visual feedback +- **Dynamic Charts** - Beautiful doughnut charts showing investment breakdown +- **Smooth Animations** - Enhanced user experience with CSS transitions + +### ⚡ Functionality +- **Real-time Calculations** - Updates results as you type +- **Input Validation** - Ensures accurate calculations with proper ranges +- **Currency Formatting** - Indian Rupee formatting with K, L, Cr notations +- **Reset Functions** - Quick reset to default values for each calculator +- **Keyboard Shortcuts** - Ctrl+Enter to calculate, Ctrl+R to reset + +## Files Included + +1. **`zoho-mutual-fund-calculator.html`** - Single-file version optimized for Zoho snippets +2. **`mutual-fund-calculator.html`** - Main HTML structure (separate files version) +3. **`styles.css`** - CSS styling with dark blue and white theme +4. **`script.js`** - JavaScript functionality and calculations + +## Zoho Integration Instructions + +### Option 1: Single File Integration (Recommended) +Use the `zoho-mutual-fund-calculator.html` file which contains everything in one file: + +1. Copy the entire content of `zoho-mutual-fund-calculator.html` +2. Create a new snippet in Zoho +3. Paste the content as HTML +4. Save and publish + +### Option 2: Separate Files Integration +If you prefer to keep files separate: + +1. Upload `styles.css` and `script.js` to your Zoho file manager +2. Update the file paths in `mutual-fund-calculator.html` to point to your uploaded files +3. Copy the HTML content to your Zoho snippet + +## Calculator Formulas + +### SIP Calculator +``` +Future Value = PMT × [((1 + r)^n - 1) / r] × (1 + r) +``` +Where: +- PMT = Monthly investment amount +- r = Monthly interest rate (Annual rate / 12) +- n = Total number of months + +### Lumpsum Calculator +``` +Maturity Amount = Principal × (1 + Annual Rate)^Years +``` + +### SWP Calculator +Simulates month-by-month withdrawals with compound growth on remaining balance. + +### STP Calculator +Simulates systematic transfers between two funds with different return rates. + +### Goal Calculator +``` +Required Monthly SIP = Target Amount × r / [(1 + r)^n - 1] / (1 + r) +Required Lumpsum = Target Amount / (1 + Annual Rate)^Years +``` + +## Customization Options + +### Color Theme +The calculator uses a dark blue and white theme. To customize colors, modify these CSS variables: + +```css +/* Primary Colors */ +--primary-blue: #1e40af; +--secondary-blue: #3b82f6; +--background-white: #ffffff; +--light-gray: #f8fafc; +``` + +### Input Ranges +Adjust the min/max values for inputs by modifying the HTML attributes: + +```html + + +``` + +### Default Values +Change default calculator values by modifying the `value` attributes in the HTML. + +## Browser Compatibility + +- ✅ Chrome (recommended) +- ✅ Firefox +- ✅ Safari +- ✅ Edge +- ✅ Mobile browsers + +## Dependencies + +The calculator uses these external libraries (loaded via CDN): +- **Chart.js** - For interactive charts +- **Font Awesome** - For icons +- **Google Fonts (Inter)** - For typography + +All dependencies are loaded from reliable CDNs and don't require local installation. + +## Performance Features + +- **Debounced Calculations** - Prevents excessive calculations during rapid input changes +- **Optimized Chart Updates** - Charts are destroyed and recreated only when necessary +- **Lazy Loading** - Charts are only created when their respective calculator is active + +## Accessibility Features + +- **Keyboard Navigation** - Full keyboard support +- **Screen Reader Compatible** - Proper ARIA labels and semantic HTML +- **High Contrast** - Meets WCAG accessibility guidelines +- **Mobile Friendly** - Touch-optimized interface + +## Support + +For any issues or customization requests, please refer to the code comments or modify the calculator according to your specific needs. + +## License + +This calculator is provided as-is for integration with Zoho snippets. Feel free to modify and customize according to your requirements. + +--- + +**Note**: The calculations are based on assumed rates of return and are for illustration purposes only. Mutual fund investments are subject to market risks. Please read all scheme-related documents carefully before investing. \ No newline at end of file diff --git a/mutual-fund-calculator.html b/mutual-fund-calculator.html new file mode 100644 index 0000000..0d4fb13 --- /dev/null +++ b/mutual-fund-calculator.html @@ -0,0 +1,451 @@ + + + + + + Mutual Fund Calculator + + + + + +
+ +
+

Mutual Fund Calculator

+

Calculate your mutual fund investments with precision

+
+ + +
+ + + + + +
+ + +
+
+
+

SIP Calculator

+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ + % +
+ +
+
+
+ +
+ +
+ + Years +
+ +
+
+
+ +
+ + +
+
+ +
+
+

Investment Summary

+
+ Total Investment + ₹6,00,000 +
+
+ Expected Returns + ₹5,27,678 +
+
+ Maturity Amount + ₹11,27,678 +
+
+ +
+ +
+
+
+
+ + +
+
+
+

Lumpsum Calculator

+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ + % +
+ +
+
+
+ +
+ +
+ + Years +
+ +
+
+
+ +
+ + +
+
+ +
+
+

Investment Summary

+
+ Principal Amount + ₹1,00,000 +
+
+ Expected Returns + ₹2,10,585 +
+
+ Maturity Amount + ₹3,10,585 +
+
+ +
+ +
+
+
+
+ + +
+
+
+

SWP Calculator

+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ + % +
+ +
+
+
+ +
+ +
+ + Years +
+ +
+
+
+ +
+ + +
+
+ +
+
+

Withdrawal Summary

+
+ Initial Investment + ₹5,00,000 +
+
+ Total Withdrawal + ₹6,00,000 +
+
+ Final Value + ₹4,50,000 +
+
+ +
+ +
+
+
+
+ + +
+
+
+

STP Calculator

+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ + % +
+ +
+
+
+ +
+ +
+ + % +
+ +
+
+
+ +
+ +
+ + Years +
+ +
+
+
+ +
+ + +
+
+ +
+
+

Transfer Summary

+
+ Source Fund Value + ₹2,50,000 +
+
+ Target Fund Value + ₹3,50,000 +
+
+ Total Portfolio Value + ₹6,00,000 +
+
+ +
+ +
+
+
+
+ + +
+
+
+

Goal Calculator

+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ + Years +
+ +
+
+
+ +
+ +
+ + % +
+ +
+
+
+ +
+ + +
+
+ +
+
+

Goal Summary

+
+ Target Amount + ₹10,00,000 +
+
+ Monthly SIP Required + ₹4,347 +
+
+ Lumpsum Required + ₹3,22,000 +
+
+ +
+ +
+
+
+
+ + +
+

Calculations are based on assumed rate of returns and are for illustration purposes only.

+

Mutual fund investments are subject to market risks. Please read all scheme related documents carefully.

+
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..b0ee734 --- /dev/null +++ b/script.js @@ -0,0 +1,742 @@ +// Global variables for charts +let sipChart, lumpsumChart, swpChart, stpChart, goalChart; + +// Initialize the calculator +document.addEventListener('DOMContentLoaded', function() { + initializeCalculator(); + setupEventListeners(); + calculateSIP(); // Calculate default SIP values +}); + +function initializeCalculator() { + // Setup calculator type switching + const calcButtons = document.querySelectorAll('.calc-btn'); + const calcSections = document.querySelectorAll('.calculator-section'); + + calcButtons.forEach(button => { + button.addEventListener('click', () => { + const calcType = button.dataset.calc; + + // Update active button + calcButtons.forEach(btn => btn.classList.remove('active')); + button.classList.add('active'); + + // Update active section + calcSections.forEach(section => section.classList.remove('active')); + document.getElementById(`${calcType}-calculator`).classList.add('active'); + + // Calculate default values for the selected calculator + switch(calcType) { + case 'sip': + calculateSIP(); + break; + case 'lumpsum': + calculateLumpsum(); + break; + case 'swp': + calculateSWP(); + break; + case 'stp': + calculateSTP(); + break; + case 'goal': + calculateGoal(); + break; + } + }); + }); +} + +function setupEventListeners() { + // SIP Calculator Event Listeners + setupSliderSync('sip-amount', 'sip-amount-slider'); + setupSliderSync('sip-rate', 'sip-rate-slider'); + setupSliderSync('sip-period', 'sip-period-slider'); + + // Lumpsum Calculator Event Listeners + setupSliderSync('lumpsum-amount', 'lumpsum-amount-slider'); + setupSliderSync('lumpsum-rate', 'lumpsum-rate-slider'); + setupSliderSync('lumpsum-period', 'lumpsum-period-slider'); + + // SWP Calculator Event Listeners + setupSliderSync('swp-investment', 'swp-investment-slider'); + setupSliderSync('swp-withdrawal', 'swp-withdrawal-slider'); + setupSliderSync('swp-rate', 'swp-rate-slider'); + setupSliderSync('swp-period', 'swp-period-slider'); + + // STP Calculator Event Listeners + setupSliderSync('stp-investment', 'stp-investment-slider'); + setupSliderSync('stp-transfer', 'stp-transfer-slider'); + setupSliderSync('stp-source-rate', 'stp-source-rate-slider'); + setupSliderSync('stp-target-rate', 'stp-target-rate-slider'); + setupSliderSync('stp-period', 'stp-period-slider'); + + // Goal Calculator Event Listeners + setupSliderSync('goal-amount', 'goal-amount-slider'); + setupSliderSync('goal-period', 'goal-period-slider'); + setupSliderSync('goal-rate', 'goal-rate-slider'); + + // Add input event listeners for real-time calculation + addRealTimeCalculation(); +} + +function setupSliderSync(inputId, sliderId) { + const input = document.getElementById(inputId); + const slider = document.getElementById(sliderId); + + if (!input || !slider) return; + + // Sync slider to input + input.addEventListener('input', () => { + const value = parseFloat(input.value) || 0; + const min = parseFloat(slider.min); + const max = parseFloat(slider.max); + + if (value >= min && value <= max) { + slider.value = value; + } + + // Trigger calculation based on calculator type + triggerCalculation(inputId); + }); + + // Sync input to slider + slider.addEventListener('input', () => { + input.value = slider.value; + triggerCalculation(inputId); + }); +} + +function addRealTimeCalculation() { + const inputs = document.querySelectorAll('input[type="number"]'); + inputs.forEach(input => { + input.addEventListener('input', () => { + triggerCalculation(input.id); + }); + }); +} + +function triggerCalculation(inputId) { + // Debounce calculations to avoid excessive calls + clearTimeout(window.calculationTimeout); + window.calculationTimeout = setTimeout(() => { + if (inputId.includes('sip')) { + calculateSIP(); + } else if (inputId.includes('lumpsum')) { + calculateLumpsum(); + } else if (inputId.includes('swp')) { + calculateSWP(); + } else if (inputId.includes('stp')) { + calculateSTP(); + } else if (inputId.includes('goal')) { + calculateGoal(); + } + }, 300); +} + +// SIP Calculator Functions +function calculateSIP() { + const monthlyAmount = parseFloat(document.getElementById('sip-amount').value) || 0; + const annualRate = parseFloat(document.getElementById('sip-rate').value) || 0; + const years = parseFloat(document.getElementById('sip-period').value) || 0; + + const monthlyRate = annualRate / 100 / 12; + const months = years * 12; + + // SIP Future Value Formula: FV = PMT * [((1 + r)^n - 1) / r] * (1 + r) + let maturityAmount = 0; + if (monthlyRate > 0) { + maturityAmount = monthlyAmount * (Math.pow(1 + monthlyRate, months) - 1) / monthlyRate * (1 + monthlyRate); + } else { + maturityAmount = monthlyAmount * months; + } + + const totalInvestment = monthlyAmount * months; + const returns = maturityAmount - totalInvestment; + + // Update display + document.getElementById('sip-total-investment').textContent = formatCurrency(totalInvestment); + document.getElementById('sip-returns').textContent = formatCurrency(returns); + document.getElementById('sip-maturity').textContent = formatCurrency(maturityAmount); + + // Update chart + updateSIPChart(totalInvestment, returns); +} + +function resetSIP() { + document.getElementById('sip-amount').value = 5000; + document.getElementById('sip-rate').value = 12; + document.getElementById('sip-period').value = 10; + document.getElementById('sip-amount-slider').value = 5000; + document.getElementById('sip-rate-slider').value = 12; + document.getElementById('sip-period-slider').value = 10; + calculateSIP(); +} + +// Lumpsum Calculator Functions +function calculateLumpsum() { + const principal = parseFloat(document.getElementById('lumpsum-amount').value) || 0; + const annualRate = parseFloat(document.getElementById('lumpsum-rate').value) || 0; + const years = parseFloat(document.getElementById('lumpsum-period').value) || 0; + + // Compound Interest Formula: A = P(1 + r/n)^(nt) + const maturityAmount = principal * Math.pow(1 + annualRate / 100, years); + const returns = maturityAmount - principal; + + // Update display + document.getElementById('lumpsum-principal').textContent = formatCurrency(principal); + document.getElementById('lumpsum-returns').textContent = formatCurrency(returns); + document.getElementById('lumpsum-maturity').textContent = formatCurrency(maturityAmount); + + // Update chart + updateLumpsumChart(principal, returns); +} + +function resetLumpsum() { + document.getElementById('lumpsum-amount').value = 100000; + document.getElementById('lumpsum-rate').value = 12; + document.getElementById('lumpsum-period').value = 10; + document.getElementById('lumpsum-amount-slider').value = 100000; + document.getElementById('lumpsum-rate-slider').value = 12; + document.getElementById('lumpsum-period-slider').value = 10; + calculateLumpsum(); +} + +// SWP Calculator Functions +function calculateSWP() { + const initialInvestment = parseFloat(document.getElementById('swp-investment').value) || 0; + const monthlyWithdrawal = parseFloat(document.getElementById('swp-withdrawal').value) || 0; + const annualRate = parseFloat(document.getElementById('swp-rate').value) || 0; + const years = parseFloat(document.getElementById('swp-period').value) || 0; + + const monthlyRate = annualRate / 100 / 12; + const months = years * 12; + + let balance = initialInvestment; + let totalWithdrawn = 0; + + // Simulate month by month + for (let i = 0; i < months; i++) { + balance = balance * (1 + monthlyRate) - monthlyWithdrawal; + totalWithdrawn += monthlyWithdrawal; + + if (balance < 0) { + balance = 0; + break; + } + } + + // Update display + document.getElementById('swp-initial').textContent = formatCurrency(initialInvestment); + document.getElementById('swp-total-withdrawal').textContent = formatCurrency(totalWithdrawn); + document.getElementById('swp-final-value').textContent = formatCurrency(Math.max(0, balance)); + + // Update chart + updateSWPChart(initialInvestment, totalWithdrawn, balance); +} + +function resetSWP() { + document.getElementById('swp-investment').value = 500000; + document.getElementById('swp-withdrawal').value = 5000; + document.getElementById('swp-rate').value = 12; + document.getElementById('swp-period').value = 10; + document.getElementById('swp-investment-slider').value = 500000; + document.getElementById('swp-withdrawal-slider').value = 5000; + document.getElementById('swp-rate-slider').value = 12; + document.getElementById('swp-period-slider').value = 10; + calculateSWP(); +} + +// STP Calculator Functions +function calculateSTP() { + const initialInvestment = parseFloat(document.getElementById('stp-investment').value) || 0; + const monthlyTransfer = parseFloat(document.getElementById('stp-transfer').value) || 0; + const sourceRate = parseFloat(document.getElementById('stp-source-rate').value) || 0; + const targetRate = parseFloat(document.getElementById('stp-target-rate').value) || 0; + const years = parseFloat(document.getElementById('stp-period').value) || 0; + + const sourceMonthlyRate = sourceRate / 100 / 12; + const targetMonthlyRate = targetRate / 100 / 12; + const months = years * 12; + + let sourceBalance = initialInvestment; + let targetBalance = 0; + + // Simulate month by month transfers + for (let i = 0; i < months; i++) { + // Grow source fund + sourceBalance = sourceBalance * (1 + sourceMonthlyRate); + + // Transfer amount + if (sourceBalance >= monthlyTransfer) { + sourceBalance -= monthlyTransfer; + targetBalance += monthlyTransfer; + } + + // Grow target fund + targetBalance = targetBalance * (1 + targetMonthlyRate); + } + + // Continue growing source fund for remaining period + const remainingYears = Math.max(0, 10 - years); // Assume 10 year total period + sourceBalance = sourceBalance * Math.pow(1 + sourceRate / 100, remainingYears); + + const totalValue = sourceBalance + targetBalance; + + // Update display + document.getElementById('stp-source-value').textContent = formatCurrency(sourceBalance); + document.getElementById('stp-target-value').textContent = formatCurrency(targetBalance); + document.getElementById('stp-total-value').textContent = formatCurrency(totalValue); + + // Update chart + updateSTPChart(sourceBalance, targetBalance); +} + +function resetSTP() { + document.getElementById('stp-investment').value = 500000; + document.getElementById('stp-transfer').value = 10000; + document.getElementById('stp-source-rate').value = 8; + document.getElementById('stp-target-rate').value = 12; + document.getElementById('stp-period').value = 5; + document.getElementById('stp-investment-slider').value = 500000; + document.getElementById('stp-transfer-slider').value = 10000; + document.getElementById('stp-source-rate-slider').value = 8; + document.getElementById('stp-target-rate-slider').value = 12; + document.getElementById('stp-period-slider').value = 5; + calculateSTP(); +} + +// Goal Calculator Functions +function calculateGoal() { + const targetAmount = parseFloat(document.getElementById('goal-amount').value) || 0; + const years = parseFloat(document.getElementById('goal-period').value) || 0; + const annualRate = parseFloat(document.getElementById('goal-rate').value) || 0; + + const monthlyRate = annualRate / 100 / 12; + const months = years * 12; + + // Calculate required monthly SIP + let monthlySIP = 0; + if (monthlyRate > 0) { + monthlySIP = targetAmount * monthlyRate / (Math.pow(1 + monthlyRate, months) - 1) / (1 + monthlyRate); + } else { + monthlySIP = targetAmount / months; + } + + // Calculate required lumpsum + const requiredLumpsum = targetAmount / Math.pow(1 + annualRate / 100, years); + + // Update display + document.getElementById('goal-target').textContent = formatCurrency(targetAmount); + document.getElementById('goal-monthly-sip').textContent = formatCurrency(monthlySIP); + document.getElementById('goal-lumpsum').textContent = formatCurrency(requiredLumpsum); + + // Update chart + updateGoalChart(monthlySIP * months, targetAmount - (monthlySIP * months)); +} + +function resetGoal() { + document.getElementById('goal-amount').value = 1000000; + document.getElementById('goal-period').value = 10; + document.getElementById('goal-rate').value = 12; + document.getElementById('goal-amount-slider').value = 1000000; + document.getElementById('goal-period-slider').value = 10; + document.getElementById('goal-rate-slider').value = 12; + calculateGoal(); +} + +// Chart Functions +function updateSIPChart(investment, returns) { + const ctx = document.getElementById('sip-chart').getContext('2d'); + + if (sipChart) { + sipChart.destroy(); + } + + sipChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: ['Total Investment', 'Expected Returns'], + datasets: [{ + data: [investment, returns], + backgroundColor: ['#3b82f6', '#1e40af'], + borderWidth: 0, + cutout: '60%' + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + position: 'bottom', + labels: { + padding: 20, + usePointStyle: true, + font: { + size: 12, + weight: '500' + } + } + } + } + } + }); +} + +function updateLumpsumChart(principal, returns) { + const ctx = document.getElementById('lumpsum-chart').getContext('2d'); + + if (lumpsumChart) { + lumpsumChart.destroy(); + } + + lumpsumChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: ['Principal Amount', 'Expected Returns'], + datasets: [{ + data: [principal, returns], + backgroundColor: ['#3b82f6', '#1e40af'], + borderWidth: 0, + cutout: '60%' + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + position: 'bottom', + labels: { + padding: 20, + usePointStyle: true, + font: { + size: 12, + weight: '500' + } + } + } + } + } + }); +} + +function updateSWPChart(initial, withdrawn, remaining) { + const ctx = document.getElementById('swp-chart').getContext('2d'); + + if (swpChart) { + swpChart.destroy(); + } + + swpChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: ['Total Withdrawn', 'Remaining Value'], + datasets: [{ + data: [withdrawn, Math.max(0, remaining)], + backgroundColor: ['#1e40af', '#3b82f6'], + borderWidth: 0, + cutout: '60%' + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + position: 'bottom', + labels: { + padding: 20, + usePointStyle: true, + font: { + size: 12, + weight: '500' + } + } + } + } + } + }); +} + +function updateSTPChart(sourceValue, targetValue) { + const ctx = document.getElementById('stp-chart').getContext('2d'); + + if (stpChart) { + stpChart.destroy(); + } + + stpChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: ['Source Fund', 'Target Fund'], + datasets: [{ + data: [sourceValue, targetValue], + backgroundColor: ['#3b82f6', '#1e40af'], + borderWidth: 0, + cutout: '60%' + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + position: 'bottom', + labels: { + padding: 20, + usePointStyle: true, + font: { + size: 12, + weight: '500' + } + } + } + } + } + }); +} + +function updateGoalChart(investment, returns) { + const ctx = document.getElementById('goal-chart').getContext('2d'); + + if (goalChart) { + goalChart.destroy(); + } + + goalChart = new Chart(ctx, { + type: 'doughnut', + data: { + labels: ['Total Investment', 'Expected Returns'], + datasets: [{ + data: [investment, returns], + backgroundColor: ['#3b82f6', '#1e40af'], + borderWidth: 0, + cutout: '60%' + }] + }, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + position: 'bottom', + labels: { + padding: 20, + usePointStyle: true, + font: { + size: 12, + weight: '500' + } + } + } + } + } + }); +} + +// Utility Functions +function formatCurrency(amount) { + if (amount >= 10000000) { + return '₹' + (amount / 10000000).toFixed(2) + ' Cr'; + } else if (amount >= 100000) { + return '₹' + (amount / 100000).toFixed(2) + ' L'; + } else if (amount >= 1000) { + return '₹' + (amount / 1000).toFixed(2) + ' K'; + } else { + return '₹' + Math.round(amount).toLocaleString('en-IN'); + } +} + +function addButtonClickEffect(button) { + button.classList.add('calculating'); + setTimeout(() => { + button.classList.remove('calculating'); + }, 1000); +} + +// Add click effects to calculate buttons +document.addEventListener('DOMContentLoaded', function() { + const calculateButtons = document.querySelectorAll('.calculate-btn'); + calculateButtons.forEach(button => { + button.addEventListener('click', () => { + addButtonClickEffect(button); + }); + }); +}); + +// Advanced Features + +// Export functionality +function exportResults(calculatorType) { + const results = getCalculatorResults(calculatorType); + const csvContent = convertToCSV(results); + downloadCSV(csvContent, `${calculatorType}-calculator-results.csv`); +} + +function getCalculatorResults(type) { + switch(type) { + case 'sip': + return { + 'Calculator Type': 'SIP Calculator', + 'Monthly Investment': document.getElementById('sip-amount').value, + 'Annual Return Rate': document.getElementById('sip-rate').value + '%', + 'Investment Period': document.getElementById('sip-period').value + ' years', + 'Total Investment': document.getElementById('sip-total-investment').textContent, + 'Expected Returns': document.getElementById('sip-returns').textContent, + 'Maturity Amount': document.getElementById('sip-maturity').textContent + }; + // Add other calculator types as needed + default: + return {}; + } +} + +function convertToCSV(data) { + const headers = Object.keys(data).join(','); + const values = Object.values(data).join(','); + return headers + '\n' + values; +} + +function downloadCSV(content, filename) { + const blob = new Blob([content], { type: 'text/csv' }); + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = filename; + a.click(); + window.URL.revokeObjectURL(url); +} + +// Print functionality +function printResults() { + window.print(); +} + +// Share functionality +function shareResults(calculatorType) { + const results = getCalculatorResults(calculatorType); + const text = Object.entries(results) + .map(([key, value]) => `${key}: ${value}`) + .join('\n'); + + if (navigator.share) { + navigator.share({ + title: 'Mutual Fund Calculator Results', + text: text + }); + } else { + // Fallback: copy to clipboard + navigator.clipboard.writeText(text).then(() => { + alert('Results copied to clipboard!'); + }); + } +} + +// Keyboard shortcuts +document.addEventListener('keydown', function(e) { + if (e.ctrlKey || e.metaKey) { + switch(e.key) { + case 'Enter': + e.preventDefault(); + const activeSection = document.querySelector('.calculator-section.active'); + const calculateBtn = activeSection.querySelector('.calculate-btn'); + calculateBtn.click(); + break; + case 'r': + e.preventDefault(); + const resetBtn = document.querySelector('.calculator-section.active .reset-btn'); + resetBtn.click(); + break; + } + } +}); + +// Accessibility improvements +function announceResult(message) { + const announcement = document.createElement('div'); + announcement.setAttribute('aria-live', 'polite'); + announcement.setAttribute('aria-atomic', 'true'); + announcement.className = 'sr-only'; + announcement.textContent = message; + document.body.appendChild(announcement); + + setTimeout(() => { + document.body.removeChild(announcement); + }, 1000); +} + +// Performance optimization +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + +// Error handling +function handleCalculationError(error, calculatorType) { + console.error(`Error in ${calculatorType} calculator:`, error); + + // Show user-friendly error message + const errorMessage = document.createElement('div'); + errorMessage.className = 'error-message'; + errorMessage.textContent = 'An error occurred during calculation. Please check your inputs and try again.'; + + const activeSection = document.querySelector('.calculator-section.active'); + activeSection.insertBefore(errorMessage, activeSection.firstChild); + + setTimeout(() => { + errorMessage.remove(); + }, 5000); +} + +// Input validation +function validateInput(value, min, max, fieldName) { + if (isNaN(value) || value < min || value > max) { + throw new Error(`${fieldName} must be between ${min} and ${max}`); + } + return true; +} + +// Local storage for saving preferences +function saveCalculatorState(calculatorType, values) { + const state = { + type: calculatorType, + values: values, + timestamp: new Date().toISOString() + }; + localStorage.setItem('mf-calculator-state', JSON.stringify(state)); +} + +function loadCalculatorState() { + const saved = localStorage.getItem('mf-calculator-state'); + if (saved) { + try { + return JSON.parse(saved); + } catch (e) { + console.error('Error loading saved state:', e); + } + } + return null; +} + +// Initialize saved state on load +document.addEventListener('DOMContentLoaded', function() { + const savedState = loadCalculatorState(); + if (savedState && savedState.values) { + // Restore saved values + Object.entries(savedState.values).forEach(([id, value]) => { + const element = document.getElementById(id); + if (element) { + element.value = value; + } + }); + } +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..ef0bee8 --- /dev/null +++ b/styles.css @@ -0,0 +1,565 @@ +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); + color: #1e293b; + line-height: 1.6; + min-height: 100vh; +} + +/* Container */ +.calculator-container { + max-width: 1200px; + margin: 0 auto; + padding: 20px; + background: #ffffff; + border-radius: 20px; + box-shadow: 0 20px 60px rgba(30, 41, 59, 0.1); + margin-top: 20px; + margin-bottom: 20px; +} + +/* Header */ +.header { + text-align: center; + padding: 30px 0 40px; + background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); + color: white; + border-radius: 16px; + margin-bottom: 30px; + position: relative; + overflow: hidden; +} + +.header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; +} + +.header h1 { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 10px; + position: relative; + z-index: 1; +} + +.header p { + font-size: 1.1rem; + opacity: 0.9; + position: relative; + z-index: 1; +} + +.header i { + margin-right: 10px; + font-size: 2.2rem; +} + +/* Calculator Selector */ +.calculator-selector { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 30px; + justify-content: center; + padding: 20px; + background: #f8fafc; + border-radius: 16px; + border: 2px solid #e2e8f0; +} + +.calc-btn { + background: white; + border: 2px solid #e2e8f0; + color: #64748b; + padding: 15px 25px; + border-radius: 12px; + cursor: pointer; + font-weight: 500; + font-size: 0.95rem; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + align-items: center; + gap: 8px; + min-width: 160px; + justify-content: center; + position: relative; + overflow: hidden; +} + +.calc-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent); + transition: left 0.5s; +} + +.calc-btn:hover::before { + left: 100%; +} + +.calc-btn:hover { + border-color: #3b82f6; + color: #1e40af; + transform: translateY(-2px); + box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15); +} + +.calc-btn.active { + background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); + color: white; + border-color: #1e40af; + box-shadow: 0 8px 25px rgba(30, 64, 175, 0.3); +} + +.calc-btn i { + font-size: 1.1rem; +} + +/* Calculator Sections */ +.calculator-section { + display: none; + animation: fadeIn 0.5s ease-in-out; +} + +.calculator-section.active { + display: block; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + +.calculator-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + align-items: start; +} + +/* Input Section */ +.input-section { + background: white; + padding: 30px; + border-radius: 16px; + border: 2px solid #f1f5f9; + box-shadow: 0 4px 20px rgba(148, 163, 184, 0.1); +} + +.input-section h3 { + color: #1e40af; + font-size: 1.4rem; + font-weight: 600; + margin-bottom: 25px; + display: flex; + align-items: center; + gap: 10px; +} + +.input-group { + margin-bottom: 25px; +} + +.input-group label { + display: block; + font-weight: 500; + color: #374151; + margin-bottom: 8px; + font-size: 0.95rem; +} + +.input-wrapper { + position: relative; + background: #f8fafc; + border: 2px solid #e2e8f0; + border-radius: 12px; + padding: 15px; + transition: all 0.3s ease; +} + +.input-wrapper:focus-within { + border-color: #3b82f6; + background: white; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); +} + +.input-wrapper input[type="number"] { + border: none; + background: transparent; + font-size: 1.1rem; + font-weight: 600; + color: #1e293b; + width: 100%; + outline: none; + padding-left: 25px; + padding-right: 30px; +} + +.currency, .percentage, .unit { + position: absolute; + color: #64748b; + font-weight: 500; +} + +.currency { + left: 15px; + top: 50%; + transform: translateY(-50%); +} + +.percentage, .unit { + right: 15px; + top: 50%; + transform: translateY(-50%); +} + +/* Sliders */ +.slider-container { + margin-top: 15px; +} + +.slider-container input[type="range"] { + width: 100%; + height: 6px; + border-radius: 3px; + background: #e2e8f0; + outline: none; + -webkit-appearance: none; +} + +.slider-container input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 20px; + height: 20px; + border-radius: 50%; + background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); + cursor: pointer; + box-shadow: 0 2px 10px rgba(30, 64, 175, 0.3); + transition: all 0.2s ease; +} + +.slider-container input[type="range"]::-webkit-slider-thumb:hover { + transform: scale(1.1); + box-shadow: 0 4px 15px rgba(30, 64, 175, 0.4); +} + +.slider-container input[type="range"]::-moz-range-thumb { + width: 20px; + height: 20px; + border-radius: 50%; + background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); + cursor: pointer; + border: none; + box-shadow: 0 2px 10px rgba(30, 64, 175, 0.3); +} + +/* Buttons */ +.button-group { + display: flex; + gap: 15px; + margin-top: 30px; +} + +.calculate-btn, .reset-btn { + flex: 1; + padding: 15px 20px; + border: none; + border-radius: 12px; + font-weight: 600; + font-size: 1rem; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + position: relative; + overflow: hidden; +} + +.calculate-btn { + background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); + color: white; + box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3); +} + +.calculate-btn:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(30, 64, 175, 0.4); +} + +.calculate-btn:active { + transform: translateY(0); +} + +.reset-btn { + background: white; + color: #64748b; + border: 2px solid #e2e8f0; +} + +.reset-btn:hover { + background: #f8fafc; + border-color: #cbd5e1; + color: #475569; +} + +/* Result Section */ +.result-section { + background: white; + border-radius: 16px; + border: 2px solid #f1f5f9; + overflow: hidden; + box-shadow: 0 4px 20px rgba(148, 163, 184, 0.1); +} + +.result-card { + padding: 30px; + background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); +} + +.result-card h4 { + color: #1e40af; + font-size: 1.3rem; + font-weight: 600; + margin-bottom: 20px; + display: flex; + align-items: center; + gap: 8px; +} + +.result-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 0; + border-bottom: 1px solid #f1f5f9; + font-size: 1rem; +} + +.result-item:last-child { + border-bottom: none; +} + +.result-item.total { + background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); + color: white; + margin: 15px -30px -30px; + padding: 20px 30px; + font-weight: 600; + font-size: 1.1rem; +} + +.result-item span:first-child { + color: #64748b; + font-weight: 500; +} + +.result-item.total span:first-child { + color: rgba(255, 255, 255, 0.9); +} + +.amount { + font-weight: 700; + color: #1e40af; + font-size: 1.1rem; +} + +.result-item.total .amount { + color: white; + font-size: 1.2rem; +} + +/* Chart Container */ +.chart-container { + padding: 30px; + background: white; + height: 300px; + display: flex; + align-items: center; + justify-content: center; +} + +.chart-container canvas { + max-height: 100%; + max-width: 100%; +} + +/* Footer */ +.footer { + margin-top: 40px; + padding: 25px; + background: #f8fafc; + border-radius: 12px; + border: 2px solid #e2e8f0; + text-align: center; +} + +.footer p { + color: #64748b; + font-size: 0.9rem; + margin-bottom: 5px; +} + +.footer p:last-child { + margin-bottom: 0; +} + +.footer i { + color: #3b82f6; + margin-right: 5px; +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .calculator-grid { + grid-template-columns: 1fr; + gap: 20px; + } + + .calculator-container { + margin: 10px; + padding: 15px; + } + + .header h1 { + font-size: 2rem; + } +} + +@media (max-width: 768px) { + .calculator-selector { + flex-direction: column; + align-items: stretch; + } + + .calc-btn { + min-width: auto; + width: 100%; + } + + .button-group { + flex-direction: column; + } + + .input-section, .result-section { + padding: 20px; + } + + .header { + padding: 20px 0 30px; + } + + .header h1 { + font-size: 1.8rem; + } +} + +@media (max-width: 480px) { + .calculator-container { + margin: 5px; + padding: 10px; + border-radius: 12px; + } + + .input-section, .result-section { + padding: 15px; + } + + .header h1 { + font-size: 1.5rem; + } + + .header p { + font-size: 1rem; + } +} + +/* Loading Animation */ +.loading { + display: inline-block; + width: 20px; + height: 20px; + border: 3px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + border-top-color: #ffffff; + animation: spin 1s ease-in-out infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +/* Hover Effects */ +.input-wrapper:hover { + border-color: #cbd5e1; +} + +.result-card:hover { + box-shadow: 0 8px 30px rgba(148, 163, 184, 0.15); +} + +/* Success Animation */ +@keyframes pulse { + 0% { transform: scale(1); } + 50% { transform: scale(1.05); } + 100% { transform: scale(1); } +} + +.calculate-btn.calculating { + animation: pulse 1s infinite; +} + +/* Custom Scrollbar */ +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: #f1f5f9; + border-radius: 4px; +} + +::-webkit-scrollbar-thumb { + background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); +} + +/* Print Styles */ +@media print { + .calculator-container { + box-shadow: none; + border: 1px solid #e2e8f0; + } + + .calculate-btn, .reset-btn { + display: none; + } + + .chart-container { + display: none; + } +} \ No newline at end of file diff --git a/zoho-mutual-fund-calculator.html b/zoho-mutual-fund-calculator.html new file mode 100644 index 0000000..d266c25 --- /dev/null +++ b/zoho-mutual-fund-calculator.html @@ -0,0 +1,1542 @@ + + + + + + Mutual Fund Calculator + + + + + + + +
+ +
+

Mutual Fund Calculator

+

Calculate your mutual fund investments with precision

+
+ + +
+ + + + + +
+ + +
+
+
+

SIP Calculator

+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ + % +
+ +
+
+
+ +
+ +
+ + Years +
+ +
+
+
+ +
+ + +
+
+ +
+
+

Investment Summary

+
+ Total Investment + ₹6,00,000 +
+
+ Expected Returns + ₹5,27,678 +
+
+ Maturity Amount + ₹11,27,678 +
+
+ +
+ +
+
+
+
+ + +
+
+
+

Lumpsum Calculator

+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ + % +
+ +
+
+
+ +
+ +
+ + Years +
+ +
+
+
+ +
+ + +
+
+ +
+
+

Investment Summary

+
+ Principal Amount + ₹1,00,000 +
+
+ Expected Returns + ₹2,10,585 +
+
+ Maturity Amount + ₹3,10,585 +
+
+ +
+ +
+
+
+
+ + +
+
+
+

SWP Calculator

+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ + % +
+ +
+
+
+ +
+ +
+ + Years +
+ +
+
+
+ +
+ + +
+
+ +
+
+

Withdrawal Summary

+
+ Initial Investment + ₹5,00,000 +
+
+ Total Withdrawal + ₹6,00,000 +
+
+ Final Value + ₹4,50,000 +
+
+ +
+ +
+
+
+
+ + +
+
+
+

STP Calculator

+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ + % +
+ +
+
+
+ +
+ +
+ + % +
+ +
+
+
+ +
+ +
+ + Years +
+ +
+
+
+ +
+ + +
+
+ +
+
+

Transfer Summary

+
+ Source Fund Value + ₹2,50,000 +
+
+ Target Fund Value + ₹3,50,000 +
+
+ Total Portfolio Value + ₹6,00,000 +
+
+ +
+ +
+
+
+
+ + +
+
+
+

Goal Calculator

+ +
+ +
+ ₹ + +
+ +
+
+
+ +
+ +
+ + Years +
+ +
+
+
+ +
+ +
+ + % +
+ +
+
+
+ +
+ + +
+
+ +
+
+

Goal Summary

+
+ Target Amount + ₹10,00,000 +
+
+ Monthly SIP Required + ₹4,347 +
+
+ Lumpsum Required + ₹3,22,000 +
+
+ +
+ +
+
+
+
+ + +
+

Calculations are based on assumed rate of returns and are for illustration purposes only.

+

Mutual fund investments are subject to market risks. Please read all scheme related documents carefully.

+
+
+ + + + \ No newline at end of file