Spaces:

karaltan
/

mathcalculator

Running

App Files Files Community

karaltan commited on Apr 9, 2025

Commit

562d697

verified ·

1 Parent(s): 1219817

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +343 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Mathcalculator
-emoji: 🏢
 colorFrom: blue
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: mathcalculator
+emoji: 🐳
 colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,343 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MathMagic - Four Operations 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>
+        .calculator-btn {
+            transition: all 0.2s ease;
+            transform: scale(1);
+        }
+        .calculator-btn:active {
+            transform: scale(0.95);
+        }
+        .operation-btn {
+            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
+        }
+        .operation-btn:hover {
+            background: linear-gradient(135deg, #1d4ed8, #3b82f6);
+        }
+        .equals-btn {
+            background: linear-gradient(135deg, #10b981, #059669);
+        }
+        .equals-btn:hover {
+            background: linear-gradient(135deg, #059669, #10b981);
+        }
+        .clear-btn {
+            background: linear-gradient(135deg, #ef4444, #dc2626);
+        }
+        .clear-btn:hover {
+            background: linear-gradient(135deg, #dc2626, #ef4444);
+        }
+        .history-item {
+            transition: all 0.3s ease;
+        }
+        .history-item:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+            transform: translateX(5px);
+        }
+        .display-text {
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+        }
+        @keyframes pulse {
+            0% { opacity: 0.5; }
+            50% { opacity: 1; }
+            100% { opacity: 0.5; }
+        }
+        .pulse-animation {
+            animation: pulse 1.5s infinite;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4">
+    <div class="max-w-md w-full bg-gray-800 rounded-2xl overflow-hidden shadow-2xl">
+        <!-- Header -->
+        <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-6 flex items-center justify-between">
+            <div>
+                <h1 class="text-2xl font-bold">MathMagic</h1>
+                <p class="text-blue-100 text-sm">Four Operations Calculator</p>
+            </div>
+            <div class="bg-white bg-opacity-20 p-2 rounded-full">
+                <i class="fas fa-calculator text-2xl"></i>
+            </div>
+        </div>
+        <!-- Display -->
+        <div class="p-6 bg-gray-700 relative">
+            <div class="bg-gray-800 rounded-xl p-4 min-h-24 flex flex-col justify-end">
+                <div id="history" class="text-gray-400 text-sm h-6 overflow-hidden whitespace-nowrap"></div>
+                <div id="display" class="display-text text-3xl font-semibold text-right overflow-x-auto">0</div>
+            </div>
+            <div id="error-message" class="absolute bottom-1 right-4 text-red-400 text-sm hidden">
+                <i class="fas fa-exclamation-circle mr-1"></i>
+                <span>Invalid input</span>
+            </div>
+        </div>
+        <!-- Calculator Body -->
+        <div class="grid grid-cols-4 gap-3 p-6">
+            <!-- First Row -->
+            <button onclick="clearAll()" class="clear-btn calculator-btn col-span-2 py-4 rounded-xl font-bold text-white shadow-md">
+                <i class="fas fa-eraser mr-2"></i>Clear
+            </button>
+            <button onclick="backspace()" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md">
+                <i class="fas fa-backspace"></i>
+            </button>
+            <button onclick="appendOperation('/')" class="operation-btn calculator-btn py-4 rounded-xl font-bold text-white shadow-md">
+                <i class="fas fa-divide"></i>
+            </button>
+            <!-- Number Rows -->
+            <button onclick="appendNumber('7')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">7</button>
+            <button onclick="appendNumber('8')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">8</button>
+            <button onclick="appendNumber('9')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">9</button>
+            <button onclick="appendOperation('*')" class="operation-btn calculator-btn py-4 rounded-xl font-bold text-white shadow-md">
+                <i class="fas fa-times"></i>
+            </button>
+            <button onclick="appendNumber('4')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">4</button>
+            <button onclick="appendNumber('5')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">5</button>
+            <button onclick="appendNumber('6')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">6</button>
+            <button onclick="appendOperation('-')" class="operation-btn calculator-btn py-4 rounded-xl font-bold text-white shadow-md">
+                <i class="fas fa-minus"></i>
+            </button>
+            <button onclick="appendNumber('1')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">1</button>
+            <button onclick="appendNumber('2')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">2</button>
+            <button onclick="appendNumber('3')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">3</button>
+            <button onclick="appendOperation('+')" class="operation-btn calculator-btn py-4 rounded-xl font-bold text-white shadow-md">
+                <i class="fas fa-plus"></i>
+            </button>
+            <!-- Last Row -->
+            <button onclick="appendNumber('0')" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">0</button>
+            <button onclick="appendDecimal()" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">.</button>
+            <button onclick="toggleSign()" class="calculator-btn bg-gray-600 py-4 rounded-xl font-bold text-white shadow-md hover:bg-gray-500">
+                <i class="fas fa-plus-minus"></i>
+            </button>
+            <button onclick="calculate()" class="equals-btn calculator-btn py-4 rounded-xl font-bold text-white shadow-md">
+                <i class="fas fa-equals"></i>
+            </button>
+        </div>
+        <!-- History Section -->
+        <div class="bg-gray-700 p-4 border-t border-gray-600 max-h-40 overflow-y-auto">
+            <div class="flex items-center justify-between text-gray-400 mb-2">
+                <h3 class="font-medium"><i class="fas fa-history mr-2"></i>History</h3>
+                <button onclick="clearHistory()" class="text-xs hover:text-white">
+                    <i class="fas fa-trash-alt mr-1"></i>Clear
+                </button>
+            </div>
+            <div id="history-list" class="space-y-1">
+                <!-- History items will be added here -->
+            </div>
+        </div>
+    </div>
+    <script>
+        // Calculator state
+        let currentInput = '0';
+        let previousInput = '';
+        let operation = null;
+        let resetInput = false;
+        let calculationHistory = [];
+        // DOM elements
+        const display = document.getElementById('display');
+        const historyDisplay = document.getElementById('history');
+        const historyList = document.getElementById('history-list');
+        const errorMessage = document.getElementById('error-message');
+        // Update the display
+        function updateDisplay() {
+            display.textContent = currentInput;
+            historyDisplay.textContent = previousInput + (operation ? ` ${operation} ` : '');
+        }
+        // Append number to current input
+        function appendNumber(number) {
+            if (currentInput === '0' || resetInput) {
+                currentInput = number;
+                resetInput = false;
+            } else {
+                currentInput += number;
+            }
+            updateDisplay();
+        }
+        // Append decimal point
+        function appendDecimal() {
+            if (resetInput) {
+                currentInput = '0.';
+                resetInput = false;
+            } else if (!currentInput.includes('.')) {
+                currentInput += '.';
+            }
+            updateDisplay();
+        }
+        // Toggle positive/negative
+        function toggleSign() {
+            currentInput = (parseFloat(currentInput) * -1).toString();
+            updateDisplay();
+        }
+        // Handle operations
+        function appendOperation(op) {
+            // If there's a previous operation waiting, calculate it first
+            if (operation && !resetInput) {
+                calculate();
+            }
+            previousInput = currentInput;
+            operation = op;
+            resetInput = true;
+            updateDisplay();
+        }
+        // Calculate the result
+        function calculate() {
+            hideError();
+            if (operation === null || resetInput) return;
+            const prev = parseFloat(previousInput);
+            const current = parseFloat(currentInput);
+            if (isNaN(prev) || isNaN(current)) {
+                showError();
+                return;
+            }
+            let result;
+            switch (operation) {
+                case '+':
+                    result = prev + current;
+                    break;
+                case '-':
+                    result = prev - current;
+                    break;
+                case '*':
+                    result = prev * current;
+                    break;
+                case '/':
+                    if (current === 0) {
+                        showError("Can't divide by zero");
+                        return;
+                    }
+                    result = prev / current;
+                    break;
+                default:
+                    return;
+            }
+            // Add to history
+            const historyItem = `${previousInput} ${operation} ${currentInput} = ${result}`;
+            calculationHistory.unshift(historyItem);
+            updateHistory();
+            currentInput = result.toString();
+            operation = null;
+            resetInput = true;
+            updateDisplay();
+        }
+        // Clear everything
+        function clearAll() {
+            currentInput = '0';
+            previousInput = '';
+            operation = null;
+            hideError();
+            updateDisplay();
+        }
+        // Backspace function
+        function backspace() {
+            if (currentInput.length === 1 || (currentInput.length === 2 && currentInput.startsWith('-'))) {
+                currentInput = '0';
+            } else {
+                currentInput = currentInput.slice(0, -1);
+            }
+            updateDisplay();
+        }
+        // Show error message
+        function showError(message = "Invalid input") {
+            errorMessage.querySelector('span').textContent = message;
+            errorMessage.classList.remove('hidden');
+            display.classList.add('text-red-400');
+            setTimeout(() => {
+                display.classList.remove('text-red-400');
+            }, 1000);
+        }
+        // Hide error message
+        function hideError() {
+            errorMessage.classList.add('hidden');
+            display.classList.remove('text-red-400');
+        }
+        // Update history list
+        function updateHistory() {
+            historyList.innerHTML = '';
+            calculationHistory.slice(0, 5).forEach(item => {
+                const historyElement = document.createElement('div');
+                historyElement.className = 'history-item bg-gray-600 bg-opacity-50 p-2 rounded cursor-pointer';
+                historyElement.textContent = item;
+                historyElement.onclick = function() {
+                    // When clicking a history item, load the result
+                    const parts = item.split(' = ');
+                    if (parts.length === 2) {
+                        currentInput = parts[1];
+                        resetInput = true;
+                        updateDisplay();
+                    }
+                };
+                historyList.appendChild(historyElement);
+            });
+        }
+        // Clear history
+        function clearHistory() {
+            calculationHistory = [];
+            updateHistory();
+            // Add a temporary message
+            const emptyMessage = document.createElement('div');
+            emptyMessage.className = 'text-center text-gray-400 py-2 pulse-animation';
+            emptyMessage.innerHTML = '<i class="fas fa-history mr-2"></i>History is empty';
+            historyList.appendChild(emptyMessage);
+            setTimeout(() => {
+                if (calculationHistory.length === 0 && historyList.contains(emptyMessage)) {
+                    historyList.removeChild(emptyMessage);
+                }
+            }, 2000);
+        }
+        // Keyboard support
+        document.addEventListener('keydown', function(event) {
+            if (/[0-9]/.test(event.key)) {
+                appendNumber(event.key);
+            } else if (event.key === '.') {
+                appendDecimal();
+            } else if (event.key === '+' || event.key === '-' || event.key === '*' || event.key === '/') {
+                appendOperation(event.key);
+            } else if (event.key === 'Enter' || event.key === '=') {
+                calculate();
+            } else if (event.key === 'Escape') {
+                clearAll();
+            } else if (event.key === 'Backspace') {
+                backspace();
+            }
+        });
+        // Initialize
+        updateDisplay();
+        clearHistory();
+    </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=karaltan/mathcalculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>