on Statistics, Programmer, Financial currenlty its showng nothing add al the advance feature on this

index.html

@@ -139,7 +139,6 @@
                                 <button class="calculator-btn bg-secondary hover:bg-purple-600 text-white font-bold py-4 rounded-xl" onclick="calculateResult()">=</button>
                                 <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-4 rounded-xl" onclick="appendToDisplay('+')">+</button>
                     </div>
-
                     <!-- Statistics Calculator -->
                     <div id="statisticsCalculator" class="hidden">
                         <div class="result-display">
@@ -170,8 +169,6 @@
                                             <span>Median:</span>
                                             <span id="statMedian" class="font-bold">0</span>
                                         </div>
-                                    </div>
-                                    <div>
                                         <div class="flex justify-between mb-2">
                                             <span>Mode:</span>
                                             <span id="statMode" class="font-bold">0</span>
@@ -180,6 +177,8 @@
                                             <span>Range:</span>
                                             <span id="statRange" class="font-bold">0</span>
                                         </div>
+                                    </div>
+                                    <div>
                                         <div class="flex justify-between mb-2">
                                             <span>Variance:</span>
                                             <span id="statVariance" class="font-bold">0</span>
@@ -188,12 +187,30 @@
                                             <span>Std Deviation:</span>
                                             <span id="statStdDev" class="font-bold">0</span>
                                         </div>
+                                        <div class="flex justify-between mb-2">
+                                            <span>Quartile Q1:</span>
+                                            <span id="statQ1" class="font-bold">0</span>
+                                        </div>
+                                        <div class="flex justify-between mb-2">
+                                            <span>Quartile Q3:</span>
+                                            <span id="statQ3" class="font-bold">0</span>
+                                        </div>
+                                        <div class="flex justify-between mb-2">
+                                            <span>Interquartile Range:</span>
+                                            <span id="statIQR" class="font-bold">0</span>
+                                        </div>
+                                        <div class="flex justify-between mb-2">
+                                            <span>Skewness:</span>
+                                            <span id="statSkewness" class="font-bold">0</span>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
+                            <div class="mt-4">
+                                <canvas id="statisticsChart" height="200"></canvas>
+                            </div>
                         </div>
                     </div>
-
                     <!-- Programmer Calculator -->
                     <div id="programmerCalculator" class="hidden">
                         <div class="result-display">
@@ -238,9 +255,25 @@
                                 </div>
                                 <div class="mt-2 text-center font-bold" id="bitwiseResult">Result: 0</div>
                             </div>
+                            <div class="mb-4">
+                                <label class="block text-gray-700 mb-2">Advanced Operations</label>
+                                <div class="grid grid-cols-2 md:grid-cols-4 gap-2 mt-2">
+                                    <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="shiftBits('left')">Shift Left</button>
+                                    <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="shiftBits('right')">Shift Right</button>
+                                    <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="rotateBits('left')">Rotate Left</button>
+                                    <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="rotateBits('right')">Rotate Right</button>
+                                </div>
+                            </div>
+                            <div class="mb-4">
+                                <label class="block text-gray-700 mb-2">Logic Operations</label>
+                                <div class="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
+                                    <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="logicOperation('nand')">NAND</button>
+                                    <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="logicOperation('nor')">NOR</button>
+                                    <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-xl" onclick="logicOperation('xnor')">XNOR</button>
+                                </div>
+                            </div>
                         </div>
                     </div>
-
                     <!-- Financial Calculator -->
                     <div id="financialCalculator" class="hidden">
                         <div class="result-display">
@@ -269,10 +302,10 @@
                                 </div>
                             </div>
                             <div class="grid grid-cols-2 gap-4 mb-4">
-                                <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateCompoundInterest()">Calculate</button>
+                                <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateCompoundInterest()">Calculate Compound Interest</button>
                                 <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearFinancial()">Clear</button>
                             </div>
-                            <div class="bg-gray-100 rounded-xl p-4">
+                            <div class="bg-gray-100 rounded-xl p-4 mb-4">
                                 <div class="flex justify-between mb-2">
                                     <span>Future Value:</span>
                                     <span id="futureValue" class="font-bold">$1,280.08</span>
@@ -286,6 +319,42 @@
                                     <span id="apyRate" class="font-bold">5.12%</span>
                                 </div>
                             </div>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                                <div>
+                                    <label class="block text-gray-700 mb-2">Loan Amount ($)</label>
+                                    <input type="number" id="loanAmount" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Loan amount" value="10000">
+                                </div>
+                                <div>
+                                    <label class="block text-gray-700 mb-2">Annual Interest Rate (%)</label>
+                                    <input type="number" id="loanInterestRate" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Annual interest rate" value="6">
+                                </div>
+                                <div>
+                                    <label class="block text-gray-700 mb-2">Loan Term (Years)</label>
+                                    <input type="number" id="loanTerm" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Loan term" value="5">
+                                </div>
+                                <div>
+                                    <label class="block text-gray-700 mb-2">Payments Per Year</label>
+                                    <input type="number" id="paymentsPerYear" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Payments per year" value="12">
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-2 gap-4 mb-4">
+                                <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateLoanPayment()">Calculate Loan Payment</button>
+                                <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearLoan()">Clear Loan</button>
+                            </div>
+                            <div class="bg-gray-100 rounded-xl p-4">
+                                <div class="flex justify-between mb-2">
+                                    <span>Monthly Payment:</span>
+                                    <span id="monthlyPayment" class="font-bold">$193.33</span>
+                                </div>
+                                <div class="flex justify-between mb-2">
+                                    <span>Total Payment:</span>
+                                    <span id="totalPayment" class="font-bold">$11,599.80</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span>Total Interest:</span>
+                                    <span id="loanTotalInterest" class="font-bold">$1,599.80</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
 </div>
@@ -890,7 +959,6 @@
             }
             document.getElementById('matrixResult').innerHTML = 'Result will appear here';
         }
-
         // Statistics functions
         function calculateStatistics() {
             const dataInput = document.getElementById('dataSet').value;
@@ -907,7 +975,7 @@
                     return;
                 }
                 
-                // Calculate statistics
+                // Calculate basic statistics
                 const count = dataArray.length;
                 const sum = dataArray.reduce((acc, num) => acc + num, 0);
                 const mean = sum / count;
@@ -946,6 +1014,18 @@
                 const variance = squaredDifferences.reduce((acc, val) => acc + val, 0) / count;
                 const stdDev = Math.sqrt(variance);
                 
+                // Quartiles
+                const q1Index = Math.floor(0.25 * (count - 1));
+                const q3Index = Math.floor(0.75 * (count - 1));
+                const q1 = sortedArray[q1Index];
+                const q3 = sortedArray[q3Index];
+                const iqr = q3 - q1;
+                
+                // Skewness
+                const skewness = (count * squaredDifferences.reduce((acc, val, i) => 
+                    acc + Math.pow(dataArray[i] - mean, 3), 0)) / 
+                    ((count - 1) * (count - 2) * Math.pow(stdDev, 3));
+                
                 // Update UI
                 document.getElementById('statCount').textContent = count;
                 document.getElementById('statSum').textContent = sum.toFixed(2);
@@ -955,11 +1035,78 @@
                 document.getElementById('statRange').textContent = range.toFixed(2);
                 document.getElementById('statVariance').textContent = variance.toFixed(4);
                 document.getElementById('statStdDev').textContent = stdDev.toFixed(4);
+                document.getElementById('statQ1').textContent = q1.toFixed(4);
+                document.getElementById('statQ3').textContent = q3.toFixed(4);
+                document.getElementById('statIQR').textContent = iqr.toFixed(4);
+                document.getElementById('statSkewness').textContent = skewness.toFixed(4);
+                
+                // Update chart
+                updateStatisticsChart(sortedArray);
             } catch (error) {
                 alert("Error calculating statistics: " + error.message);
             }
         }
 
+        function updateStatisticsChart(data) {
+            const ctx = document.getElementById('statisticsChart').getContext('2d');
+            
+            // Destroy existing chart if it exists
+            if (window.statisticsChart) {
+                window.statisticsChart.destroy();
+            }
+            
+            // Create histogram data
+            const min = Math.min(...data);
+            const max = Math.max(...data);
+            const binCount = Math.min(10, data.length);
+            const binWidth = (max - min) / binCount;
+            
+            const bins = Array(binCount).fill(0);
+            const labels = [];
+            
+            for (let i = 0; i < binCount; i++) {
+                labels.push(`${(min + i * binWidth).toFixed(1)} - ${(min + (i + 1) * binWidth).toFixed(1)}`);
+            }
+            
+            data.forEach(value => {
+                const binIndex = Math.min(Math.floor((value - min) / binWidth), binCount - 1);
+                bins[binIndex]++;
+            });
+            
+            window.statisticsChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Frequency',
+                        data: bins,
+                        backgroundColor: 'rgba(99, 102, 241, 0.7)',
+                        borderColor: 'rgba(99, 102, 241, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Frequency'
+                            }
+                        },
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Value Range'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+
         function clearStatistics() {
             document.getElementById('dataSet').value = '';
             document.getElementById('statCount').textContent = '0';
@@ -970,9 +1117,16 @@
             document.getElementById('statRange').textContent = '0';
             document.getElementById('statVariance').textContent = '0';
             document.getElementById('statStdDev').textContent = '0';
+            document.getElementById('statQ1').textContent = '0';
+            document.getElementById('statQ3').textContent = '0';
+            document.getElementById('statIQR').textContent = '0';
+            document.getElementById('statSkewness').textContent = '0';
+            
+            // Clear chart
+            const ctx = document.getElementById('statisticsChart').getContext('2d');
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
         }
-
-        // Programmer functions
+// Programmer functions
         function convertNumberSystems() {
             const decInput = document.getElementById('decInput');
             const binInput = document.getElementById('binInput');
@@ -1006,7 +1160,6 @@
                 // Invalid input - do nothing
             }
         }
-
         function performBitwise(operation) {
             const num1 = parseInt(document.getElementById('bitNum1').value) || 0;
             const num2 = parseInt(document.getElementById('bitNum2').value) || 0;
@@ -1032,6 +1185,56 @@
             document.getElementById('bitwiseResult').textContent = `Result: ${result} (0b${result.toString(2)})`;
         }
 
+        function shiftBits(direction) {
+            const num1 = parseInt(document.getElementById('bitNum1').value) || 0;
+            const positions = parseInt(document.getElementById('bitNum2').value) || 1;
+            let result;
+            
+            if (direction === 'left') {
+                result = num1 << positions;
+            } else {
+                result = num1 >> positions;
+            }
+            
+            document.getElementById('bitwiseResult').textContent = `Result: ${result} (0b${result.toString(2)})`;
+        }
+
+        function rotateBits(direction) {
+            const num1 = parseInt(document.getElementById('bitNum1').value) || 0;
+            const positions = parseInt(document.getElementById('bitNum2').value) || 1;
+            let result;
+            
+            // 32-bit rotation
+            if (direction === 'left') {
+                result = (num1 << positions) | (num1 >>> (32 - positions));
+            } else {
+                result = (num1 >>> positions) | (num1 << (32 - positions));
+            }
+            
+            document.getElementById('bitwiseResult').textContent = `Result: ${result} (0b${result.toString(2)})`;
+        }
+
+        function logicOperation(operation) {
+            const num1 = parseInt(document.getElementById('bitNum1').value) || 0;
+            const num2 = parseInt(document.getElementById('bitNum2').value) || 0;
+            let result;
+            
+            switch(operation) {
+                case 'nand':
+                    result = ~(num1 & num2);
+                    break;
+                case 'nor':
+                    result = ~(num1 | num2);
+                    break;
+                case 'xnor':
+                    result = ~(num1 ^ num2);
+                    break;
+                default:
+                    result = 0;
+            }
+            
+            document.getElementById('bitwiseResult').textContent = `Result: ${result} (0b${result.toString(2)})`;
+        }
         // Financial functions
         function calculateCompoundInterest() {
             const principal = parseFloat(document.getElementById('principal').value) || 0;
@@ -1052,6 +1255,26 @@
             document.getElementById('apyRate').textContent = `${apy.toFixed(2)}%`;
         }
 
+        function calculateLoanPayment() {
+            const loanAmount = parseFloat(document.getElementById('loanAmount').value) || 0;
+            const annualInterestRate = (parseFloat(document.getElementById('loanInterestRate').value) || 0) / 100;
+            const loanTerm = parseFloat(document.getElementById('loanTerm').value) || 0;
+            const paymentsPerYear = parseInt(document.getElementById('paymentsPerYear').value) || 12;
+            
+            const monthlyRate = annualInterestRate / paymentsPerYear;
+            const totalPayments = loanTerm * paymentsPerYear;
+            
+            // Monthly payment calculation
+            const monthlyPayment = (loanAmount * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -totalPayments));
+            const totalPayment = monthlyPayment * totalPayments;
+            const totalInterest = totalPayment - loanAmount;
+            
+            // Update UI
+            document.getElementById('monthlyPayment').textContent = `${monthlyPayment.toFixed(2)}`;
+            document.getElementById('totalPayment').textContent = `${totalPayment.toFixed(2)}`;
+            document.getElementById('loanTotalInterest').textContent = `${totalInterest.toFixed(2)}`;
+        }
+
         function clearFinancial() {
             document.getElementById('principal').value = '1000';
             document.getElementById('interestRate').value = '5';
@@ -1062,7 +1285,16 @@
             document.getElementById('apyRate').textContent = '5.12%';
         }
 
-        // Calculus functions
+        function clearLoan() {
+            document.getElementById('loanAmount').value = '10000';
+            document.getElementById('loanInterestRate').value = '6';
+            document.getElementById('loanTerm').value = '5';
+            document.getElementById('paymentsPerYear').value = '12';
+            document.getElementById('monthlyPayment').textContent = '$193.33';
+            document.getElementById('totalPayment').textContent = '$11,599.80';
+            document.getElementById('loanTotalInterest').textContent = '$1,599.80';
+        }
+// Calculus functions
         function initializeChart() {
             const ctx = document.getElementById('functionChart').getContext('2d');
             functionChart = new Chart(ctx, {