Free Percentage Difference Visualizer 2025

Free Percentage Difference Visualizer 2025 Free Percentage Difference Visualizer 2025 Free Percentage Difference Visualizer 2025 Percentage Difference Visualizer @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; } .gradient-bg { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .shine-animation { position: relative; overflow: hidden; } .shine-animation::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shine 2s infinite; } @keyframes shine { 0% { left: -100%; } 100% { left: 100%; } } .pulse-glow { animation: pulse-glow 2s ease-in-out infinite alternate; } @keyframes pulse-glow { from { box-shadow: 0 0 20px rgba(245, 158, 11, 0.5); } to { box-shadow: 0 0 30px rgba(245, 158, 11, 0.8); } } .bounce-in { animation: bounceIn 0.6s ease-out; } @keyframes bounceIn { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } } .slide-up { animation: slideUp 0.5s ease-out; } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .chart-bar { transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .number-display { background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3); background-size: 400% 400%; animation: gradient-shift 3s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .tab-active { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4); } .tab-inactive { background: rgba(255, 255, 255, 0.9); color: #f59e0b; backdrop-filter: blur(10px); } .premium-card { background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.3); } .history-item { transition: all 0.3s ease; } .history-item:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .chart-container { position: relative; height: 300px; } .floating-action { position: fixed; bottom: 20px; right: 20px; z-index: 1000; } @media (max-width: 768px) { .floating-action { bottom: 15px; right: 15px; } } .tooltip { position: relative; } .tooltip:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; white-space: nowrap; z-index: 1000; } 📊 Percentage Difference Visualizer Calculate and visualize percentage differences with beautiful charts and animations 🧮 Calculator 📊 Batch Analysis 📈 History & Trends 💾 Export & Share ⚡ Quick Presets 📈 +20% Growth 📉 -15% Decline 🚀 +50% Boost ⚡ 50% Cut 🔢 Original Value ❌ 🎯 New Value ❌ 🔧 Advanced Options Decimal Places 2 decimals 1 decimal No decimals 3 decimals 4 decimals Calculation Type Percentage Change Absolute Difference Relative Change Auto-save to history 📊 Batch Analysis Analyze multiple values at once. Enter pairs of values separated by commas: Original Values New Values 🚀 Process Batch 📈 Batch Results Average Change 0% Highest Change 0% Lowest Change 0% 📈 Calculation History 🗑️ Clear History No calculations yet. Start calculating to see your history! 💾 Export & Share 📊 Export Options 📄 Export to CSV 📑 Export to PDF 📋 Copy to Clipboard 🔗 Share Results 🔗 Generate Share Link 🐦 Share on Twitter 💼 Share on LinkedIn ✨ Calculate Difference ✨ Percentage Difference 0% 📈 Visual Comparison Original: New: Absolute Difference 0 Change Type - Ratio 1:1 📚 Formula Used: Percentage Difference = |(New Value - Original Value)| ÷ Original Value × 100 🧮 🚀 Developed by Majid Farooq 📧 majidfarooq295@gmail.com // Global variables for premium features let calculationHistory = JSON.parse(localStorage.getItem('calculationHistory') || '[]'); let currentTab = 'calculator'; // Tab switching functionality function switchTab(tabName) { // Hide all tab contents document.querySelectorAll('.tab-content').forEach(content => { content.classList.add('hidden'); }); // Remove active class from all tabs document.querySelectorAll('[id$="Tab"]').forEach(tab => { tab.className = tab.className.replace('tab-active', 'tab-inactive'); }); // Show selected tab content document.getElementById(tabName + 'Content').classList.remove('hidden'); document.getElementById(tabName + 'Tab').className = document.getElementById(tabName + 'Tab').className.replace('tab-inactive', 'tab-active'); // Show/hide calculate button based on tab const calculateSection = document.getElementById('calculateSection'); if (tabName === 'calculator') { calculateSection.classList.remove('hidden'); } else { calculateSection.classList.add('hidden'); } currentTab = tabName; // Load history when switching to history tab if (tabName === 'history') { loadHistory(); } } // Quick presets functionality function setPreset(original, newVal) { document.getElementById('originalValue').value = original; document.getElementById('newValue').value = newVal; realTimeCalculation(); } // Clear input functionality function clearInput(inputId) { document.getElementById(inputId).value = ''; realTimeCalculation(); } // Real-time calculation function realTimeCalculation() { const originalValue = parseFloat(document.getElementById('originalValue').value); const newValue = parseFloat(document.getElementById('newValue').value); if (!isNaN(originalValue) && !isNaN(newValue) && originalValue !== 0) { calculateDifference(false); // Don't save to history for real-time } } // Enhanced calculation function function calculateDifference(saveToHistory = true) { const originalValue = parseFloat(document.getElementById('originalValue').value); const newValue = parseFloat(document.getElementById('newValue').value); const decimalPlaces = parseInt(document.getElementById('decimalPlaces').value); const calculationType = document.getElementById('calculationType').value; // Validation if (isNaN(originalValue) || isNaN(newValue)) { if (saveToHistory) alert('⚠️ Please enter valid numbers for both values!'); return; } if (originalValue === 0 && calculationType === 'percentage') { if (saveToHistory) alert('⚠️ Original value cannot be zero for percentage calculation!'); return; } // Calculate based on type let result, resultText; const absoluteDifference = Math.abs(newValue - originalValue); switch (calculationType) { case 'percentage': result = (absoluteDifference / Math.abs(originalValue)) * 100; resultText = result.toFixed(decimalPlaces) + '%'; break; case 'absolute': result = absoluteDifference; resultText = result.toFixed(decimalPlaces); break; case 'relative': result = ((newValue - originalValue) / originalValue) * 100; resultText = result.toFixed(decimalPlaces) + '%'; break; } // Determine change type let changeType = ''; let changeEmoji = ''; if (newValue > originalValue) { changeType = 'Increase'; changeEmoji = '📈'; } else if (newValue < originalValue) { changeType = 'Decrease'; changeEmoji = '📉'; } else { changeType = 'No Change'; changeEmoji = '➡️'; } // Calculate ratio const ratio = originalValue !== 0 ? (newValue / originalValue).toFixed(2) : 'N/A'; // Update results document.getElementById('percentageResult').textContent = resultText; document.getElementById('absoluteDiff').textContent = absoluteDifference.toLocaleString(); document.getElementById('changeType').textContent = changeEmoji + ' ' + changeType; document.getElementById('ratio').textContent = ratio + ':1'; // Update visual bars const maxValue = Math.max(Math.abs(originalValue), Math.abs(newValue)); const originalWidth = maxValue > 0 ? (Math.abs(originalValue) / maxValue) * 100 : 0; const newWidth = maxValue > 0 ? (Math.abs(newValue) / maxValue) * 100 : 0; const originalBar = document.getElementById('originalBar'); const newBar = document.getElementById('newBar'); // Animate bars setTimeout(() => { originalBar.style.width = originalWidth + '%'; newBar.style.width = newWidth + '%'; document.getElementById('originalBarText').textContent = originalValue.toLocaleString(); document.getElementById('newBarText').textContent = newValue.toLocaleString(); }, 100); // Show results section with animation const resultsSection = document.getElementById('resultsSection'); resultsSection.classList.remove('hidden'); resultsSection.classList.add('bounce-in'); // Save to history if enabled and this is a manual calculation if (saveToHistory && document.getElementById('autoSave').checked) { saveCalculation(originalValue, newValue, resultText, changeType); } // Scroll to results on mobile if (saveToHistory) { setTimeout(() => { resultsSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }, 300); } } // Save calculation to history function saveCalculation(original, newVal, result, changeType) { const calculation = { id: Date.now(), timestamp: new Date().toLocaleString(), original: original, new: newVal, result: result, changeType: changeType }; calculationHistory.unshift(calculation); if (calculationHistory.length > 50) calculationHistory.pop(); // Keep only last 50 localStorage.setItem('calculationHistory', JSON.stringify(calculationHistory)); } // Load and display history function loadHistory() { const historyList = document.getElementById('historyList'); if (calculationHistory.length === 0) { historyList.innerHTML = 'No calculations yet. Start calculating to see your history!'; return; } historyList.innerHTML = calculationHistory.map(calc => ` ${calc.timestamp} ${calc.original.toLocaleString()} → ${calc.new.toLocaleString()} ${calc.result} ${calc.changeType} 🔄 `).join(''); } // Reload calculation from history function reloadCalculation(id) { const calc = calculationHistory.find(c => c.id === id); if (calc) { document.getElementById('originalValue').value = calc.original; document.getElementById('newValue').value = calc.new; switchTab('calculator'); calculateDifference(false); } } // Clear history function clearHistory() { if (confirm('Are you sure you want to clear all calculation history?')) { calculationHistory = []; localStorage.removeItem('calculationHistory'); loadHistory(); } } // Batch processing function processBatch() { const originalValues = document.getElementById('batchOriginal').value.split(',').map(v => parseFloat(v.trim())).filter(v => !isNaN(v)); const newValues = document.getElementById('batchNew').value.split(',').map(v => parseFloat(v.trim())).filter(v => !isNaN(v)); if (originalValues.length === 0 || newValues.length === 0) { alert('⚠️ Please enter valid numbers in both fields!'); return; } if (originalValues.length !== newValues.length) { alert('⚠️ Number of original and new values must match!'); return; } const results = []; let totalChange = 0; for (let i = 0; i < originalValues.length; i++) { const original = originalValues[i]; const newVal = newValues[i]; if (original === 0) continue; const percentageChange = ((newVal - original) / original) * 100; const absoluteChange = Math.abs(newVal - original); results.push({ index: i + 1, original: original, new: newVal, percentage: percentageChange, absolute: absoluteChange }); totalChange += percentageChange; } // Display results const batchTable = document.getElementById('batchTable'); batchTable.innerHTML = ` # Original New % Change Absolute ${results.map(r => ` ${r.index} ${r.original.toLocaleString()} ${r.new.toLocaleString()} ${r.percentage.toFixed(2)}% ${r.absolute.toLocaleString()} `).join('')} `; // Update statistics const avgChange = totalChange / results.length; const maxChange = Math.max(...results.map(r => r.percentage)); const minChange = Math.min(...results.map(r => r.percentage)); document.getElementById('avgChange').textContent = avgChange.toFixed(2) + '%'; document.getElementById('maxChange').textContent = maxChange.toFixed(2) + '%'; document.getElementById('minChange').textContent = minChange.toFixed(2) + '%'; document.getElementById('batchResults').classList.remove('hidden'); } // Export functions function exportToCSV() { if (calculationHistory.length === 0) { alert('No data to export!'); return; } const csvContent = [ ['Timestamp', 'Original Value', 'New Value', 'Result', 'Change Type'], ...calculationHistory.map(calc => [ calc.timestamp, calc.original, calc.new, calc.result, calc.changeType ]) ].map(row => row.join(',')).join('\n'); const blob = new Blob([csvContent], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'percentage_calculations.csv'; a.click(); URL.revokeObjectURL(url); } function exportToPDF() { alert('📑 PDF export feature coming soon! For now, you can use your browser\'s print function.'); } function copyToClipboard() { if (calculationHistory.length === 0) { alert('No data to copy!'); return; } const textContent = calculationHistory.map(calc => `${calc.timestamp}: ${calc.original} → ${calc.new} = ${calc.result} (${calc.changeType})` ).join('\n'); navigator.clipboard.writeText(textContent).then(() => { alert('📋 Data copied to clipboard!'); }); } function generateShareLink() { const original = document.getElementById('originalValue').value; const newVal = document.getElementById('newValue').value; if (!original || !newVal) { alert('Please enter values first!'); return; } const shareUrl = `${window.location.origin}${window.location.pathname}?original=${original}&new=${newVal}`; navigator.clipboard.writeText(shareUrl).then(() => { alert('🔗 Share link copied to clipboard!'); }); } function shareOnSocial(platform) { const original = document.getElementById('originalValue').value; const newVal = document.getElementById('newValue').value; const result = document.getElementById('percentageResult').textContent; if (!original || !newVal) { alert('Please calculate something first!'); return; } const text = `Check out this percentage calculation: ${original} → ${newVal} = ${result} change! 📊`; const url = window.location.href; let shareUrl = ''; if (platform === 'twitter') { shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`; } else if (platform === 'linkedin') { shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`; } window.open(shareUrl, '_blank'); } // Quick calculate floating button function quickCalculate() { if (currentTab !== 'calculator') { switchTab('calculator'); } const original = document.getElementById('originalValue'); const newVal = document.getElementById('newValue'); if (!original.value) { original.focus(); return; } if (!newVal.value) { newVal.focus(); return; } calculateDifference(); } // Initialize app document.addEventListener('DOMContentLoaded', function() { // Check for URL parameters const urlParams = new URLSearchParams(window.location.search); const original = urlParams.get('original'); const newVal = urlParams.get('new'); if (original && newVal) { document.getElementById('originalValue').value = original; document.getElementById('newValue').value = newVal; calculateDifference(false); } // Add input event listeners for real-time validation document.getElementById('originalValue').addEventListener('input', function() { this.style.borderColor = this.value ? '#10b981' : '#3b82f6'; }); document.getElementById('newValue').addEventListener('input', function() { this.style.borderColor = this.value ? '#10b981' : '#22c55e'; }); // Allow Enter key to calculate document.addEventListener('keypress', function(e) { if (e.key === 'Enter' && currentTab === 'calculator') { calculateDifference(); } }); }); (function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'97511caec3d1f9e9',t:'MTc1NjE4ODA2MC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();