add all the Calculus related things in calculator

index.html

@@ -100,8 +100,9 @@
                         <button id="trigMode" class="mode-selector px-4 py-2 rounded-lg">Trigonometry</button>
                         <button id="matrixMode" class="mode-selector px-4 py-2 rounded-lg">Matrix</button>
                         <button id="scientificMode" class="mode-selector px-4 py-2 rounded-lg">Scientific</button>
+                        <button id="calculusMode" class="mode-selector px-4 py-2 rounded-lg">Calculus</button>
                     </div>
-                    <!-- Display -->
+<!-- Display -->
                     <div class="result-display">
                         <div class="text-right text-gray-500 text-sm h-6 overflow-x-auto whitespace-nowrap" id="historyDisplay"></div>
                         <div class="text-right text-3xl font-bold mt-2 h-12 overflow-x-auto whitespace-nowrap" id="mainDisplay">0</div>
@@ -326,10 +327,47 @@
                             </div>
                         </div>
                     </div>
+                    <!-- Calculus Calculator -->
+                    <div id="calculusCalculator" class="hidden">
+                        <div class="result-display">
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
+                                <div>
+                                    <label class="block text-gray-700 mb-2">Function f(x)</label>
+                                    <input type="text" id="functionInput" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="e.g., x^2 + 3*x + 2" value="x^2">
+                                </div>
+                                <div>
+                                    <label class="block text-gray-700 mb-2">Point (for derivative)</label>
+                                    <input type="number" id="pointInput" class="w-full p-3 rounded-lg bg-gray-100 text-black" placeholder="Enter x-value" value="2">
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                                <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateDerivative()">Derivative</button>
+                                <button class="calculator-btn bg-primary hover:bg-indigo-600 text-white font-bold py-3 rounded-xl" onclick="calculateIntegral()">Integral</button>
+                                <button class="calculator-btn bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-xl" onclick="clearCalculus()">Clear</button>
+                            </div>
+                            <div class="bg-gray-100 rounded-xl p-4">
+                                <div class="flex justify-between mb-2">
+                                    <span>Derivative f'(x):</span>
+                                    <span id="derivativeResult" class="font-bold">2*x</span>
+                                </div>
+                                <div class="flex justify-between mb-2">
+                                    <span>f'(<span id="pointValue">2</span>) =</span>
+                                    <span id="derivativeAtPoint" class="font-bold">4</span>
+                                </div>
+                                <div class="flex justify-between">
+                                    <span>∫f(x)dx =</span>
+                                    <span id="integralResult" class="font-bold">(1/3)*x^3 + C</span>
+                                </div>
+                            </div>
+                            <div class="mt-4">
+                                <canvas id="functionChart" height="200"></canvas>
+                            </div>
+                        </div>
+                    </div>
 </div>
             </div>
 
-            <!-- History and Info Section -->
+<!-- History and Info Section -->
             <div>
                 <div class="bg-white rounded-2xl p-6 shadow-xl mb-8 border border-gray-200">
                     <h2 class="text-xl font-bold mb-4 flex items-center">
@@ -374,6 +412,7 @@
         let currentInput = '0';
         let calculationHistory = [];
         let currentMode = 'basic';
+        let functionChart = null;
 
         // DOM Elements
         const mainDisplay = document.getElementById('mainDisplay');
@@ -385,6 +424,7 @@
             generateMatrixInputs(3);
             updateDisplay();
             loadHistory();
+            initializeChart();
         });
         // Mode switching
         document.querySelectorAll('.mode-selector').forEach(button => {
@@ -399,10 +439,16 @@
                 document.getElementById('trigCalculator').classList.add('hidden');
                 document.getElementById('matrixCalculator').classList.add('hidden');
                 document.getElementById('scientificCalculator').classList.add('hidden');
+                document.getElementById('calculusCalculator').classList.add('hidden');
                 
                 // Show selected calculator
                 currentMode = this.id.replace('Mode', '');
                 document.getElementById(currentMode + 'Calculator').classList.remove('hidden');
+                
+                // Update chart when switching to calculus mode
+                if (currentMode === 'calculus') {
+                    updateChart();
+                }
             });
         });
         // Basic calculator functions
@@ -690,6 +736,135 @@ function clearMatrix() {
             }
             document.getElementById('matrixResult').innerHTML = 'Result will appear here';
         }
+        // Calculus functions
+        function initializeChart() {
+            const ctx = document.getElementById('functionChart').getContext('2d');
+            functionChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'f(x)',
+                        data: [],
+                        borderColor: '#6366f1',
+                        backgroundColor: 'rgba(99, 102, 241, 0.1)',
+                        borderWidth: 2,
+                        fill: true,
+                        tension: 0.4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'x'
+                            }
+                        },
+                        y: {
+                            title: {
+                                display: true,
+                                text: 'f(x)'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+
+        function updateChart() {
+            const funcStr = document.getElementById('functionInput').value || 'x^2';
+            const points = [];
+            const values = [];
+            
+            // Generate data points
+            for (let x = -10; x <= 10; x += 0.5) {
+                try {
+                    const expr = funcStr.replace(/\^/g, '**').replace(/x/g, x);
+                    const y = eval(expr);
+                    if (isFinite(y)) {
+                        points.push(x);
+                        values.push(y);
+                    }
+                } catch (e) {
+                    // Skip invalid points
+                }
+            }
+            
+            functionChart.data.labels = points;
+            functionChart.data.datasets[0].data = values;
+            functionChart.data.datasets[0].label = `f(x) = ${funcStr}`;
+            functionChart.update();
+        }
+
+        function calculateDerivative() {
+            const funcStr = document.getElementById('functionInput').value || 'x^2';
+            const point = parseFloat(document.getElementById('pointInput').value) || 2;
+            
+            // Update point display
+            document.getElementById('pointValue').textContent = point;
+            
+            // Simple derivative calculation using numerical differentiation
+            const h = 1e-5;
+            const expr1 = funcStr.replace(/\^/g, '**').replace(/x/g, `(${point + h})`);
+            const expr2 = funcStr.replace(/\^/g, '**').replace(/x/g, `(${point - h})`);
+            
+            try {
+                const f1 = eval(expr1);
+                const f2 = eval(expr2);
+                const derivative = (f1 - f2) / (2 * h);
+                
+                // Symbolic derivative for simple cases
+                let symbolicDerivative = "Unknown";
+                if (funcStr.includes('x^2')) {
+                    symbolicDerivative = funcStr.replace('x^2', '2*x');
+                } else if (funcStr.includes('x^3')) {
+                    symbolicDerivative = funcStr.replace('x^3', '3*x^2');
+                } else if (funcStr === 'x') {
+                    symbolicDerivative = '1';
+                } else if (!isNaN(parseFloat(funcStr))) {
+                    symbolicDerivative = '0';
+                }
+                
+                document.getElementById('derivativeResult').textContent = symbolicDerivative;
+                document.getElementById('derivativeAtPoint').textContent = derivative.toFixed(4);
+                
+                // Update integral result
+                let integral = "Unknown";
+                if (funcStr.includes('x^2')) {
+                    integral = funcStr.replace('x^2', '(1/3)*x^3');
+                } else if (funcStr === 'x') {
+                    integral = '(1/2)*x^2';
+                } else if (!isNaN(parseFloat(funcStr))) {
+                    integral = `${funcStr}*x`;
+                }
+                document.getElementById('integralResult').textContent = `${integral} + C`;
+                
+                // Update chart
+                updateChart();
+            } catch (e) {
+                document.getElementById('derivativeResult').textContent = "Error";
+                document.getElementById('derivativeAtPoint').textContent = "Error";
+                document.getElementById('integralResult').textContent = "Error";
+            }
+        }
+
+        function calculateIntegral() {
+            // This function is now integrated into calculateDerivative
+            calculateDerivative();
+        }
+
+        function clearCalculus() {
+            document.getElementById('functionInput').value = 'x^2';
+            document.getElementById('pointInput').value = '2';
+            document.getElementById('derivativeResult').textContent = '2*x';
+            document.getElementById('pointValue').textContent = '2';
+            document.getElementById('derivativeAtPoint').textContent = '4';
+            document.getElementById('integralResult').textContent = '(1/3)*x^3 + C';
+            updateChart();
+        }
         // History functions
         function addToHistory(expression, result) {
             const historyItem = {