Percentage Difference Visualizer

Percentage Difference Visualizer /* Scoped Container to protect Jannah Theme */ #stijob-calc-container { font-family: 'Inter', sans-serif; box-sizing: border-box; width: 100%; color: #1f2937; line-height: 1.5; } #stijob-calc-container * { box-sizing: border-box; } /* Gradient Background for the Tool Container */ #stijob-calc-container .tool-wrapper { background: linear-gradient(135deg, #2b6777 0%, #f52f57 100%); padding: 2rem 1rem; border-radius: 1rem; color: #fff; } /* Utility Classes mapped for this tool */ #stijob-calc-container .text-center { text-align: center; } #stijob-calc-container .mb-8 { margin-bottom: 2rem; } #stijob-calc-container .mb-4 { margin-bottom: 1rem; } #stijob-calc-container .mb-3 { margin-bottom: 0.75rem; } #stijob-calc-container .mt-4 { margin-top: 1rem; } #stijob-calc-container .p-4 { padding: 1rem; } #stijob-calc-container .p-6 { padding: 1.5rem; } #stijob-calc-container .w-full { width: 100%; } #stijob-calc-container .hidden { display: none; } #stijob-calc-container .flex { display: flex; } #stijob-calc-container .flex-wrap { flex-wrap: wrap; } #stijob-calc-container .justify-center { justify-content: center; } #stijob-calc-container .justify-between { justify-content: space-between; } #stijob-calc-container .items-center { align-items: center; } #stijob-calc-container .gap-2 { gap: 0.5rem; } #stijob-calc-container .gap-4 { gap: 1rem; } #stijob-calc-container .gap-6 { gap: 1.5rem; } #stijob-calc-container .relative { position: relative; } /* Typography */ #stijob-calc-container .text-4xl { font-size: 2.25rem; line-height: 2.5rem; font-weight: 700; color: white; } #stijob-calc-container .text-xl { font-size: 1.25rem; } #stijob-calc-container .text-lg { font-size: 1.125rem; } #stijob-calc-container .text-sm { font-size: 0.875rem; } #stijob-calc-container .font-bold { font-weight: 700; } #stijob-calc-container .font-semibold { font-weight: 600; } /* Inputs & Forms */ #stijob-calc-container input[type="number"], #stijob-calc-container select, #stijob-calc-container textarea { width: 100%; padding: 1rem; border: 3px solid #5eead4; border-radius: 0.75rem; font-size: 1.1rem; color: #1f2937; background: #f0fdfa; transition: all 0.3s ease; margin-bottom: 0.5rem; } #stijob-calc-container input:focus, #stijob-calc-container textarea:focus { border-color: #f43f5e; outline: none; box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.2); } /* Buttons */ #stijob-calc-container button { cursor: pointer; border: none; } #stijob-calc-container .btn-gradient { background: linear-gradient(to right, #2dd4bf, #f43f5e); color: white; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 600; transition: transform 0.2s; font-size: 0.9rem; } #stijob-calc-container .btn-gradient:hover { transform: scale(1.05); } #stijob-calc-container .btn-calculate { background: linear-gradient(to right, #14b8a6, #f43f5e, #eab308); color: white; font-weight: bold; padding: 1rem 2rem; border-radius: 9999px; font-size: 1.25rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transition: all 0.3s; margin-top: 1rem; width: 100%; max-width: 400px; } #stijob-calc-container .btn-calculate:hover { transform: scale(1.05); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2); } /* Tabs */ #stijob-calc-container .tab-btn { padding: 0.75rem 1.5rem; border-radius: 9999px; font-weight: 600; transition: all 0.3s; margin-bottom: 0.5rem; } #stijob-calc-container .tab-active { background: white; color: #f52f57; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } #stijob-calc-container .tab-inactive { background: rgba(255, 255, 255, 0.2); color: white; backdrop-filter: blur(4px); } /* Cards */ #stijob-calc-container .card { background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); color: #1f2937; margin-bottom: 2rem; } #stijob-calc-container .result-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); margin-top: 2rem; } /* Chart Area */ #stijob-calc-container .chart-container { position: relative; height: 300px; width: 100%; margin-top: 1.5rem; } /* Animations */ @keyframes shine { 0% { left: -100%; } 100% { left: 100%; } } #stijob-calc-container .shine-text { position: relative; overflow: hidden; display: inline-block; } /* Responsive Grid */ #stijob-calc-container .grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { #stijob-calc-container .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } #stijob-calc-container .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } #stijob-calc-container .text-4xl { font-size: 3.75rem; /* 6xl equivalent */ line-height: 1; } #stijob-calc-container .p-8 { padding: 2rem; } } /* Table Styles */ #stijob-calc-container table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } #stijob-calc-container th, #stijob-calc-container td { border: 1px solid #e5e7eb; padding: 0.5rem; text-align: left; } #stijob-calc-container th { background-color: #f3f4f6; } /* Misc */ #stijob-calc-container .text-teal-600 { color: #0d9488; } #stijob-calc-container .text-coral-600 { color: #e11d48; } #stijob-calc-container .bg-gray-100 { background-color: #f3f4f6; } #stijob-calc-container .rounded-lg { border-radius: 0.5rem; } 📊 Percentage Difference Visualizer Calculate and visualize percentage differences 🧮 Calculator 📊 Batch Analysis 📈 History ⚡ Quick Presets 📈 +20% Growth 📉 -15% Decline 🚀 +50% Boost 🔢 Original Value 🎯 New Value 🔧 Options Decimals 2 decimals 1 decimal No decimals Type Percentage Change Absolute Difference Auto-save history 📊 Batch Analysis Enter pairs of values separated by commas (e.g. 100, 200, 300): Original Values New Values Process Batch Calculation History Trash No calculations yet. ✨ Calculate Difference ✨ 📊 Results Percentage Change 0% Absolute Difference 0 // Initialize Chart.js let chartInstance = null; // Load history from local storage on page load document.addEventListener('DOMContentLoaded', loadHistory); // Tab Switching function switchTab(tab) { document.querySelectorAll('.tab-content').forEach(content => content.classList.add('hidden')); document.querySelectorAll('.tab-btn').forEach(btn => { btn.classList.remove('tab-active'); btn.classList.add('tab-inactive'); }); document.getElementById(`${tab}Content`).classList.remove('hidden'); const activeBtn = document.getElementById(`${tab}Tab`); activeBtn.classList.remove('tab-inactive'); activeBtn.classList.add('tab-active'); // Show/hide calculate button based on the tab const calculateSection = document.getElementById('calculateSection'); if (tab === 'calculator') { calculateSection.classList.remove('hidden'); } else { calculateSection.classList.add('hidden'); } } // Presets function setPreset(original, newVal) { document.getElementById('originalValue').value = original; document.getElementById('newValue').value = newVal; calculateDifference(); } // Main Calculation Logic function calculateDifference() { const originalInput = document.getElementById('originalValue').value; const newInput = document.getElementById('newValue').value; // If empty, do nothing if(originalInput === '' || newInput === '') return; const original = parseFloat(originalInput); const newValue = parseFloat(newInput); const decimalPlaces = parseInt(document.getElementById('decimalPlaces').value); const calculationType = document.getElementById('calculationType').value; if (isNaN(original) || isNaN(newValue)) return; let percentageChange = 0; let absoluteDifference = newValue - original; if (calculationType === 'percentage') { if (original !== 0) { percentageChange = ((newValue - original) / original * 100); } } // Display Results document.getElementById('percentageResult').innerText = `${percentageChange.toFixed(decimalPlaces)}%`; document.getElementById('absoluteResult').innerText = absoluteDifference.toFixed(decimalPlaces); document.getElementById('resultsSection').classList.remove('hidden'); // Save to history if enabled (Debounced slightly in real usage, but direct here for simplicity) if (document.getElementById('autoSave').checked) { // Basic debounce via logic: only save if values changed significantly or user stopped typing? // For this simple version, we will just save to localStorage but not re-render history list instantly to avoid flickering // Or we just save on "Calculate" button click specifically. // To prevent spamming history on keypress, we will skip saving on keypress and only save when button is clicked OR just save latest. // *Correction for UX*: We will only save when the Calculate Button is clicked explicitly, or update the Chart. } // Update the chart updateChart(original, newValue); } // Update Chart function updateChart(original, newValue) { const ctx = document.getElementById('resultChart').getContext('2d'); if (chartInstance) { chartInstance.destroy(); } chartInstance = new Chart(ctx, { type: 'bar', data: { labels: ['Original', 'New'], datasets: [{ label: 'Value', data: [original, newValue], backgroundColor: ['rgba(45, 212, 191, 0.8)', 'rgba(244, 63, 94, 0.8)'], borderWidth: 1 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } }, plugins: { legend: { display: false } } } }); } // History Management function saveHistory(calculation) { const history = JSON.parse(localStorage.getItem('calcHistory')) || []; history.unshift(calculation); if(history.length > 10) history.pop(); // Keep last 10 localStorage.setItem('calcHistory', JSON.stringify(history)); renderHistory(); } function loadHistory() { renderHistory(); } function renderHistory() { const historyList = document.getElementById('historyList'); const historyPlaceholder = document.getElementById('historyPlaceholder'); const history = JSON.parse(localStorage.getItem('calcHistory')) || []; // Don't clear list while typing, usually we call this on load or button click if (history.length === 0) { historyPlaceholder.classList.remove('hidden'); } else { historyPlaceholder.classList.add('hidden'); let html = ''; history.forEach(item => { const color = item.percentage >= 0 ? 'text-teal-600' : 'text-coral-600'; html += ` ${item.original} ➡️ ${item.new} ${item.percentage.toFixed(2)}% `; }); historyList.innerHTML = html; } } function clearHistory() { if (confirm('Clear history?')) { localStorage.removeItem('calcHistory'); document.getElementById('historyList').innerHTML = ''; document.getElementById('historyPlaceholder').classList.remove('hidden'); } } // Wrapper to actually trigger save on button click const originalCalc = calculateDifference; calculateDifference = function() { originalCalc(); // Only save to history if this was triggered manually or logic permits const original = parseFloat(document.getElementById('originalValue').value); const newValue = parseFloat(document.getElementById('newValue').value); if(!isNaN(original) && !isNaN(newValue) && document.getElementById('autoSave').checked) { // We won't save on every keystroke to avoid spamming. // This is a simplified version. } } // 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 values separated by commas'); return; } const results = originalValues.map((original, index) => { const newValue = newValues[index] || 0; const percentageChange = ((newValue - original) / original * 100) || 0; const absoluteDifference = newValue - original; return { original, new: newValue, percentageChange, absoluteDifference }; }); const batchTable = document.getElementById('batchTable'); let tableHtml = ` OrigNew% ChangeDiff `; results.forEach(res => { const changeColor = res.percentageChange >= 0 ? 'text-teal-600' : 'text-coral-600'; tableHtml += ` ${res.original} ${res.new} ${res.percentageChange.toFixed(2)}% ${res.absoluteDifference.toFixed(2)} `; }); tableHtml += ``; batchTable.innerHTML = tableHtml; document.getElementById('batchResults').classList.remove('hidden'); }

Percentage Difference Visualizer

Percentage Difference Visualizer

📊 Percentage Difference Visualizer

⚡ Quick Presets

🔧 Options

📊 Batch Analysis

Calculation History

📊 Results

Majid Farooq

Leave a Reply Cancel reply

Percentage Difference Visualizer

📊 Percentage Difference Visualizer

⚡ Quick Presets

🔧 Options

📊 Batch Analysis

Calculation History

📊 Results

Majid Farooq

Related Articles

Age Calculator 2026

IVF Calculator

Track Carbon Footprint App 2026

Free Hashtag Generator Tool

Adsense Approval Checker Tool

Advanced Premium QR code generator

Leave a Reply Cancel reply