my-calculator

Running

File size: 28,101 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Professional Scientific Calculator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&display=swap');
        
        body {
            font-family: 'Roboto Mono', monospace;
        }
        
        .calculator {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
        }
        
        .display {
            min-height: 120px;
            word-break: break-all;
        }
        
        .btn {
            transition: all 0.1s ease;
            transform-origin: center;
        }
        
        .btn:active {
            transform: scale(0.95);
        }
        
        .btn-operator {
            background-color: #3b82f6;
            color: white;
        }
        
        .btn-operator:hover {
            background-color: #2563eb;
        }
        
        .btn-function {
            background-color: #10b981;
            color: white;
        }
        
        .btn-function:hover {
            background-color: #059669;
        }
        
        .btn-equals {
            background-color: #f59e0b;
            color: white;
        }
        
        .btn-equals:hover {
            background-color: #d97706;
        }
        
        .btn-clear {
            background-color: #ef4444;
            color: white;
        }
        
        .btn-clear:hover {
            background-color: #dc2626;
        }
        
        .btn-secondary {
            background-color: #4b5563;
            color: white;
        }
        
        .btn-secondary:hover {
            background-color: #374151;
        }
        
        .btn-number {
            background-color: #1f2937;
            color: white;
        }
        
        .btn-number:hover {
            background-color: #111827;
        }
        
        .history-item:hover {
            background-color: #f3f4f6;
            cursor: pointer;
        }
        
        .tab-active {
            border-bottom: 3px solid #3b82f6;
            font-weight: 500;
        }
        
        .scientific-panel {
            transition: all 0.3s ease;
        }
        
        .angle-unit {
            background-color: #e5e7eb;
            color: #1f2937;
        }
        
        .angle-unit.active {
            background-color: #3b82f6;
            color: white;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
    <div class="calculator w-full max-w-md bg-white rounded-2xl overflow-hidden shadow-xl">
        <!-- Calculator header with tabs -->
        <div class="flex border-b">
            <div class="tab tab-active py-3 px-6 text-center flex-1 cursor-pointer" data-tab="basic">
                <i class="fas fa-calculator mr-2"></i> Basic
            </div>
            <div class="tab py-3 px-6 text-center flex-1 cursor-pointer" data-tab="scientific">
                <i class="fas fa-square-root-alt mr-2"></i> Scientific
            </div>
            <div class="tab py-3 px-6 text-center flex-1 cursor-pointer" data-tab="history">
                <i class="fas fa-history mr-2"></i> History
            </div>
        </div>
        
        <!-- Display area -->
        <div class="display p-4 bg-gray-50 text-right">
            <div id="expression" class="text-gray-500 text-lg min-h-6 overflow-x-auto whitespace-nowrap"></div>
            <div id="result" class="text-3xl font-semibold mt-2 overflow-x-auto whitespace-nowrap">0</div>
        </div>
        
        <!-- Angle unit selector -->
        <div class="scientific-panel hidden px-4 py-2 bg-gray-100 flex justify-center space-x-2">
            <button class="angle-unit active px-3 py-1 rounded-full text-sm" data-unit="deg">DEG</button>
            <button class="angle-unit px-3 py-1 rounded-full text-sm" data-unit="rad">RAD</button>
            <button class="angle-unit px-3 py-1 rounded-full text-sm" data-unit="grad">GRAD</button>
        </div>
        
        <!-- Calculator buttons -->
        <div class="grid grid-cols-5 gap-1 p-2">
            <!-- Row 1 -->
            <button class="btn btn-clear col-span-2 py-4 rounded" data-action="clear">AC</button>
            <button class="btn btn-clear py-4 rounded" data-action="backspace">
                <i class="fas fa-backspace"></i>
            </button>
            <button class="btn btn-secondary py-4 rounded" data-action="percentage">%</button>
            <button class="btn btn-operator py-4 rounded" data-action="divide">÷</button>
            
            <!-- Row 2 -->
            <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="sin">sin</button>
            <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="cos">cos</button>
            <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="tan">tan</button>
            <button class="btn btn-secondary py-4 rounded" data-action="power">x^y</button>
            <button class="btn btn-operator py-4 rounded" data-action="multiply">×</button>
            
            <!-- Row 3 -->
            <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="asin">sin⁻¹</button>
            <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="acos">cos⁻¹</button>
            <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="atan">tan⁻¹</button>
            <button class="btn btn-secondary py-4 rounded" data-action="square">x²</button>
            <button class="btn btn-operator py-4 rounded" data-action="subtract">−</button>
            
            <!-- Row 4 -->
            <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="log">log</button>
            <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="ln">ln</button>
            <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="factorial">x!</button>
            <button class="btn btn-secondary py-4 rounded" data-action="sqrt">√</button>
            <button class="btn btn-operator py-4 rounded" data-action="add">+</button>
            
            <!-- Row 5 -->
            <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="pi">π</button>
            <button class="btn btn-function py-4 rounded scientific-btn hidden" data-action="e">e</button>
            <button class="btn btn-secondary py-4 rounded" data-action="decimal">.</button>
            <button class="btn btn-number py-4 rounded col-span-2" data-action="equals">=</button>
            
            <!-- Row 6 (Numbers) -->
            <button class="btn btn-number py-4 rounded" data-number="7">7</button>
            <button class="btn btn-number py-4 rounded" data-number="8">8</button>
            <button class="btn btn-number py-4 rounded" data-number="9">9</button>
            
            <button class="btn btn-number py-4 rounded" data-number="4">4</button>
            <button class="btn btn-number py-4 rounded" data-number="5">5</button>
            <button class="btn btn-number py-4 rounded" data-number="6">6</button>
            
            <button class="btn btn-number py-4 rounded" data-number="1">1</button>
            <button class="btn btn-number py-4 rounded" data-number="2">2</button>
            <button class="btn btn-number py-4 rounded" data-number="3">3</button>
            
            <button class="btn btn-number py-4 rounded" data-number="0">0</button>
            <button class="btn btn-number py-4 rounded" data-action="sign">±</button>
        </div>
        
        <!-- History panel (hidden by default) -->
        <div id="history-panel" class="hidden max-h-64 overflow-y-auto p-4 border-t">
            <div class="text-center text-gray-500 mb-2">Calculation History</div>
            <div id="history-list"></div>
        </div>
    </div>

    <script>
        // DOM elements
        const resultElement = document.getElementById('result');
        const expressionElement = document.getElementById('expression');
        const historyList = document.getElementById('history-list');
        const tabs = document.querySelectorAll('.tab');
        const scientificPanel = document.querySelector('.scientific-panel');
        const scientificButtons = document.querySelectorAll('.scientific-btn');
        const historyPanel = document.getElementById('history-panel');
        const angleUnitButtons = document.querySelectorAll('.angle-unit');
        
        // Calculator state
        let currentInput = '0';
        let previousInput = '';
        let operation = null;
        let resetInput = false;
        let angleMode = 'deg'; // deg, rad, grad
        let calculationHistory = [];
        
        // Initialize calculator
        updateDisplay();
        
        // Event listeners for number buttons
        document.querySelectorAll('[data-number]').forEach(button => {
            button.addEventListener('click', () => {
                appendNumber(button.getAttribute('data-number'));
            });
        });
        
        // Event listeners for operation buttons
        document.querySelectorAll('[data-action]').forEach(button => {
            button.addEventListener('click', () => {
                const action = button.getAttribute('data-action');
                
                switch(action) {
                    case 'add':
                    case 'subtract':
                    case 'multiply':
                    case 'divide':
                        chooseOperation(action);
                        break;
                    case 'equals':
                        compute();
                        break;
                    case 'clear':
                        clear();
                        break;
                    case 'backspace':
                        backspace();
                        break;
                    case 'decimal':
                        appendDecimal();
                        break;
                    case 'sign':
                        toggleSign();
                        break;
                    case 'percentage':
                        percentage();
                        break;
                    case 'square':
                        square();
                        break;
                    case 'sqrt':
                        squareRoot();
                        break;
                    case 'power':
                        power();
                        break;
                    case 'sin':
                        sin();
                        break;
                    case 'cos':
                        cos();
                        break;
                    case 'tan':
                        tan();
                        break;
                    case 'asin':
                        asin();
                        break;
                    case 'acos':
                        acos();
                        break;
                    case 'atan':
                        atan();
                        break;
                    case 'log':
                        log();
                        break;
                    case 'ln':
                        ln();
                        break;
                    case 'factorial':
                        factorial();
                        break;
                    case 'pi':
                        appendPi();
                        break;
                    case 'e':
                        appendE();
                        break;
                }
            });
        });
        
        // Tab switching
        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                const tabName = tab.getAttribute('data-tab');
                
                // Update active tab
                tabs.forEach(t => t.classList.remove('tab-active'));
                tab.classList.add('tab-active');
                
                // Show/hide panels
                if (tabName === 'scientific') {
                    scientificPanel.classList.remove('hidden');
                    scientificButtons.forEach(btn => btn.classList.remove('hidden'));
                    historyPanel.classList.add('hidden');
                } else if (tabName === 'history') {
                    scientificPanel.classList.add('hidden');
                    scientificButtons.forEach(btn => btn.classList.add('hidden'));
                    historyPanel.classList.remove('hidden');
                    renderHistory();
                } else {
                    scientificPanel.classList.add('hidden');
                    scientificButtons.forEach(btn => btn.classList.add('hidden'));
                    historyPanel.classList.add('hidden');
                }
            });
        });
        
        // Angle unit selection
        angleUnitButtons.forEach(button => {
            button.addEventListener('click', () => {
                angleUnitButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                angleMode = button.getAttribute('data-unit');
            });
        });
        
        // Keyboard support
        document.addEventListener('keydown', (e) => {
            if (e.key >= '0' && e.key <= '9') {
                appendNumber(e.key);
            } else if (e.key === '.') {
                appendDecimal();
            } else if (e.key === '+') {
                chooseOperation('add');
            } else if (e.key === '-') {
                chooseOperation('subtract');
            } else if (e.key === '*') {
                chooseOperation('multiply');
            } else if (e.key === '/') {
                chooseOperation('divide');
            } else if (e.key === 'Enter' || e.key === '=') {
                compute();
            } else if (e.key === 'Escape') {
                clear();
            } else if (e.key === 'Backspace') {
                backspace();
            } else if (e.key === '%') {
                percentage();
            } else if (e.key === '^') {
                power();
            }
        });
        
        // Calculator functions
        function appendNumber(number) {
            if (currentInput === '0' || resetInput) {
                currentInput = number;
                resetInput = false;
            } else {
                currentInput += number;
            }
            updateDisplay();
        }
        
        function appendDecimal() {
            if (resetInput) {
                currentInput = '0.';
                resetInput = false;
                return;
            }
            
            if (currentInput.indexOf('.') === -1) {
                currentInput += '.';
            }
            updateDisplay();
        }
        
        function toggleSign() {
            currentInput = (parseFloat(currentInput) * -1).toString();
            updateDisplay();
        }
        
        function clear() {
            currentInput = '0';
            previousInput = '';
            operation = null;
            updateDisplay();
        }
        
        function backspace() {
            if (currentInput.length === 1 || (currentInput.length === 2 && currentInput.startsWith('-'))) {
                currentInput = '0';
            } else {
                currentInput = currentInput.slice(0, -1);
            }
            updateDisplay();
        }
        
        function chooseOperation(op) {
            if (currentInput === '0' && previousInput !== '') {
                operation = op;
                return;
            }
            
            if (previousInput === '') {
                previousInput = currentInput;
            } else if (operation) {
                const result = computeOperation(previousInput, currentInput, operation);
                previousInput = result.toString();
            }
            
            operation = op;
            currentInput = '0';
            updateDisplay();
        }
        
        function compute() {
            if (operation === null || previousInput === '') return;
            
            const result = computeOperation(previousInput, currentInput, operation);
            
            // Add to history
            const historyEntry = {
                expression: `${previousInput} ${getOperationSymbol(operation)} ${currentInput}`,
                result: result
            };
            calculationHistory.unshift(historyEntry);
            
            currentInput = result.toString();
            operation = null;
            previousInput = '';
            resetInput = true;
            updateDisplay();
        }
        
        function computeOperation(num1, num2, op) {
            const n1 = parseFloat(num1);
            const n2 = parseFloat(num2);
            
            switch(op) {
                case 'add': return n1 + n2;
                case 'subtract': return n1 - n2;
                case 'multiply': return n1 * n2;
                case 'divide': return n1 / n2;
                default: return n2;
            }
        }
        
        function percentage() {
            currentInput = (parseFloat(currentInput) / 100).toString();
            updateDisplay();
        }
        
        function square() {
            const num = parseFloat(currentInput);
            const result = num * num;
            
            // Add to history
            const historyEntry = {
                expression: `${num}²`,
                result: result
            };
            calculationHistory.unshift(historyEntry);
            
            currentInput = result.toString();
            updateDisplay();
        }
        
        function squareRoot() {
            const num = parseFloat(currentInput);
            const result = Math.sqrt(num);
            
            // Add to history
            const historyEntry = {
                expression: `√${num}`,
                result: result
            };
            calculationHistory.unshift(historyEntry);
            
            currentInput = result.toString();
            updateDisplay();
        }
        
        function power() {
            previousInput = currentInput;
            currentInput = '0';
            operation = 'power';
            expressionElement.textContent = `${previousInput}^`;
            resultElement.textContent = currentInput;
        }
        
        function sin() {
            let num = parseFloat(currentInput);
            
            // Convert to radians if needed
            if (angleMode === 'deg') {
                num = degToRad(num);
            } else if (angleMode === 'grad') {
                num = gradToRad(num);
            }
            
            const result = Math.sin(num);
            
            // Add to history
            const historyEntry = {
                expression: `sin(${currentInput}${angleMode})`,
                result: result
            };
            calculationHistory.unshift(historyEntry);
            
            currentInput = result.toString();
            updateDisplay();
        }
        
        function cos() {
            let num = parseFloat(currentInput);
            
            // Convert to radians if needed
            if (angleMode === 'deg') {
                num = degToRad(num);
            } else if (angleMode === 'grad') {
                num = gradToRad(num);
            }
            
            const result = Math.cos(num);
            
            // Add to history
            const historyEntry = {
                expression: `cos(${currentInput}${angleMode})`,
                result: result
            };
            calculationHistory.unshift(historyEntry);
            
            currentInput = result.toString();
            updateDisplay();
        }
        
        function tan() {
            let num = parseFloat(currentInput);
            
            // Convert to radians if needed
            if (angleMode === 'deg') {
                num = degToRad(num);
            } else if (angleMode === 'grad') {
                num = gradToRad(num);
            }
            
            const result = Math.tan(num);
            
            // Add to history
            const historyEntry = {
                expression: `tan(${currentInput}${angleMode})`,
                result: result
            };
            calculationHistory.unshift(historyEntry);
            
            currentInput = result.toString();
            updateDisplay();
        }
        
        function asin() {
            let num = parseFloat(currentInput);
            let result = Math.asin(num);
            
            // Convert from radians if needed
            if (angleMode === 'deg') {
                result = radToDeg(result);
            } else if (angleMode === 'grad') {
                result = radToGrad(result);
            }
            
            // Add to history
            const historyEntry = {
                expression: `sin⁻¹(${currentInput})`,
                result: result
            };
            calculationHistory.unshift(historyEntry);
            
            currentInput = result.toString();
            updateDisplay();
        }
        
        function acos() {
            let num = parseFloat(currentInput);
            let result = Math.acos(num);
            
            // Convert from radians if needed
            if (angleMode === 'deg') {
                result = radToDeg(result);
            } else if (angleMode === 'grad') {
                result = radToGrad(result);
            }
            
            // Add to history
            const historyEntry = {
                expression: `cos⁻¹(${currentInput})`,
                result: result
            };
            calculationHistory.unshift(historyEntry);
            
            currentInput = result.toString();
            updateDisplay();
        }
        
        function atan() {
            let num = parseFloat(currentInput);
            let result = Math.atan(num);
            
            // Convert from radians if needed
            if (angleMode === 'deg') {
                result = radToDeg(result);
            } else if (angleMode === 'grad') {
                result = radToGrad(result);
            }
            
            // Add to history
            const historyEntry = {
                expression: `tan⁻¹(${currentInput})`,
                result: result
            };
            calculationHistory.unshift(historyEntry);
            
            currentInput = result.toString();
            updateDisplay();
        }
        
        function log() {
            const num = parseFloat(currentInput);
            const result = Math.log10(num);
            
            // Add to history
            const historyEntry = {
                expression: `log(${currentInput})`,
                result: result
            };
            calculationHistory.unshift(historyEntry);
            
            currentInput = result.toString();
            updateDisplay();
        }
        
        function ln() {
            const num = parseFloat(currentInput);
            const result = Math.log(num);
            
            // Add to history
            const historyEntry = {
                expression: `ln(${currentInput})`,
                result: result
            };
            calculationHistory.unshift(historyEntry);
            
            currentInput = result.toString();
            updateDisplay();
        }
        
        function factorial() {
            const num = parseInt(currentInput);
            let result = 1;
            
            for (let i = 2; i <= num; i++) {
                result *= i;
            }
            
            // Add to history
            const historyEntry = {
                expression: `${currentInput}!`,
                result: result
            };
            calculationHistory.unshift(historyEntry);
            
            currentInput = result.toString();
            updateDisplay();
        }
        
        function appendPi() {
            if (currentInput === '0' || resetInput) {
                currentInput = Math.PI.toString();
                resetInput = false;
            } else {
                currentInput += Math.PI.toString();
            }
            updateDisplay();
        }
        
        function appendE() {
            if (currentInput === '0' || resetInput) {
                currentInput = Math.E.toString();
                resetInput = false;
            } else {
                currentInput += Math.E.toString();
            }
            updateDisplay();
        }
        
        // Helper functions
        function updateDisplay() {
            resultElement.textContent = currentInput;
            
            if (operation !== null) {
                expressionElement.textContent = `${previousInput} ${getOperationSymbol(operation)}`;
            } else {
                expressionElement.textContent = '';
            }
        }
        
        function getOperationSymbol(op) {
            switch(op) {
                case 'add': return '+';
                case 'subtract': return '−';
                case 'multiply': return '×';
                case 'divide': return '÷';
                case 'power': return '^';
                default: return '';
            }
        }
        
        function degToRad(degrees) {
            return degrees * Math.PI / 180;
        }
        
        function radToDeg(radians) {
            return radians * 180 / Math.PI;
        }
        
        function gradToRad(grads) {
            return grads * Math.PI / 200;
        }
        
        function radToGrad(radians) {
            return radians * 200 / Math.PI;
        }
        
        function renderHistory() {
            historyList.innerHTML = '';
            
            if (calculationHistory.length === 0) {
                historyList.innerHTML = '<div class="text-center text-gray-400 py-4">No history yet</div>';
                return;
            }
            
            calculationHistory.forEach((item, index) => {
                const historyItem = document.createElement('div');
                historyItem.className = 'history-item p-2 border-b hover:bg-gray-50';
                historyItem.innerHTML = `
                    <div class="text-sm text-gray-500">${item.expression}</div>
                    <div class="text-right font-semibold">${item.result}</div>
                `;
                
                historyItem.addEventListener('click', () => {
                    currentInput = item.result.toString();
                    updateDisplay();
                });
                
                historyList.appendChild(historyItem);
            });
        }
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=lior007/my-clock" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>