Spaces:

Tralalabs
/

calcmaster-pro

Running

App Files Files Community

Erik commited on Dec 29, 2025

Commit

407127f

verified ·

1 Parent(s): 818aaa8

Calculator

Browse files

Files changed (4) hide show

README.md +7 -4
index.html +66 -19
script.js +185 -0
style.css +27 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Calcmaster Pro
-emoji: 😻
-colorFrom: green
 colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: CalcMaster Pro 🧮
+colorFrom: purple
 colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,66 @@
-<!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>CalcMaster Pro</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gradient-to-br from-gray-900 to-black min-h-screen flex items-center justify-center p-4">
+    <div class="w-full max-w-md">
+        <div class="bg-gray-800 rounded-3xl shadow-2xl overflow-hidden">
+            <!-- Display -->
+            <div class="p-6 bg-gray-900">
+                <div class="text-right">
+                    <div id="previous-operand" class="text-gray-400 text-xl h-7 overflow-hidden"></div>
+                    <div id="current-operand" class="text-white text-4xl font-bold h-12 overflow-hidden">0</div>
+                </div>
+            </div>
+            <!-- Keypad -->
+            <div class="p-5">
+                <div class="grid grid-cols-4 gap-4">
+                    <button data-action="clear" class="bg-red-500 hover:bg-red-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">C</button>
+                    <button data-action="delete" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">
+                        <i data-feather="delete"></i>
+                    </button>
+                    <button data-action="operation" data-operation="%" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">%</button>
+                    <button data-action="operation" data-operation="÷" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">÷</button>
+                    <button data-number="7" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">7</button>
+                    <button data-number="8" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">8</button>
+                    <button data-number="9" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">9</button>
+                    <button data-action="operation" data-operation="×" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">×</button>
+                    <button data-number="4" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">4</button>
+                    <button data-number="5" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">5</button>
+                    <button data-number="6" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">6</button>
+                    <button data-action="operation" data-operation="-" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">-</button>
+                    <button data-number="1" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">1</button>
+                    <button data-number="2" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">2</button>
+                    <button data-number="3" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">3</button>
+                    <button data-action="operation" data-operation="+" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">+</button>
+                    <button data-number="0" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl col-span-2 transition duration-200 active:scale-95">0</button>
+                    <button data-number="." class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">.</button>
+                    <button data-action="calculate" class="bg-green-500 hover:bg-green-600 text-white font-bold py-4 rounded-xl transition duration-200 active:scale-95">=</button>
+                </div>
+            </div>
+        </div>
+        <div class="mt-8 text-center">
+            <h1 class="text-3xl font-bold text-white mb-2">CalcMaster Pro 🧮</h1>
+            <p class="text-gray-400">The ultimate calculator experience</p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,185 @@

+class Calculator {
+    constructor(previousOperandElement, currentOperandElement) {
+        this.previousOperandElement = previousOperandElement;
+        this.currentOperandElement = currentOperandElement;
+        this.clear();
+    }
+    clear() {
+        this.currentOperand = '0';
+        this.previousOperand = '';
+        this.operation = undefined;
+        this.resetNextInput = false;
+    }
+    delete() {
+        if (this.resetNextInput) return;
+        this.currentOperand = this.currentOperand.toString().slice(0, -1);
+        if (this.currentOperand === '') {
+            this.currentOperand = '0';
+        }
+    }
+    appendNumber(number) {
+        if (this.resetNextInput) {
+            this.currentOperand = '0';
+            this.resetNextInput = false;
+        }
+        if (number === '.' && this.currentOperand.includes('.')) return;
+        if (this.currentOperand === '0' && number !== '.') {
+            this.currentOperand = number.toString();
+        } else {
+            this.currentOperand = this.currentOperand.toString() + number.toString();
+        }
+    }
+    chooseOperation(operation) {
+        if (this.currentOperand === '') return;
+        if (this.previousOperand !== '') {
+            this.calculate();
+        }
+        this.operation = operation;
+        this.previousOperand = this.currentOperand;
+        this.resetNextInput = true;
+    }
+    calculate() {
+        let computation;
+        const prev = parseFloat(this.previousOperand);
+        const current = parseFloat(this.currentOperand);
+        if (isNaN(prev) || isNaN(current)) return;
+        switch (this.operation) {
+            case '+':
+                computation = prev + current;
+                break;
+            case '-':
+                computation = prev - current;
+                break;
+            case '×':
+                computation = prev * current;
+                break;
+            case '÷':
+                if (current === 0) {
+                    computation = 'Error';
+                } else {
+                    computation = prev / current;
+                }
+                break;
+            case '%':
+                computation = prev % current;
+                break;
+            default:
+                return;
+        }
+        this.currentOperand = computation.toString();
+        this.operation = undefined;
+        this.previousOperand = '';
+        this.resetNextInput = true;
+    }
+    getDisplayNumber(number) {
+        if (number === 'Error') return number;
+        const stringNumber = number.toString();
+        const integerDigits = parseFloat(stringNumber.split('.')[0]);
+        const decimalDigits = stringNumber.split('.')[1];
+        let integerDisplay;
+        if (isNaN(integerDigits)) {
+            integerDisplay = '';
+        } else {
+            integerDisplay = integerDigits.toLocaleString('en', {
+                maximumFractionDigits: 0
+            });
+        }
+        if (decimalDigits != null) {
+            return `${integerDisplay}.${decimalDigits}`;
+        } else {
+            return integerDisplay;
+        }
+    }
+    updateDisplay() {
+        this.currentOperandElement.innerText = this.getDisplayNumber(this.currentOperand);
+        if (this.operation != null) {
+            this.previousOperandElement.innerText =
+                `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`;
+        } else {
+            this.previousOperandElement.innerText = '';
+        }
+    }
+}
+// Initialize calculator
+const previousOperandElement = document.getElementById('previous-operand');
+const currentOperandElement = document.getElementById('current-operand');
+const calculator = new Calculator(previousOperandElement, currentOperandElement);
+// Event listeners
+document.querySelectorAll('[data-number]').forEach(button => {
+    button.addEventListener('click', () => {
+        calculator.appendNumber(button.getAttribute('data-number'));
+        calculator.updateDisplay();
+    });
+});
+document.querySelectorAll('[data-operation]').forEach(button => {
+    button.addEventListener('click', () => {
+        calculator.chooseOperation(button.getAttribute('data-operation'));
+        calculator.updateDisplay();
+    });
+});
+document.querySelector('[data-action="calculate"]').addEventListener('click', () => {
+    calculator.calculate();
+    calculator.updateDisplay();
+});
+document.querySelector('[data-action="clear"]').addEventListener('click', () => {
+    calculator.clear();
+    calculator.updateDisplay();
+});
+document.querySelector('[data-action="delete"]').addEventListener('click', () => {
+    calculator.delete();
+    calculator.updateDisplay();
+});
+// Keyboard support
+document.addEventListener('keydown', event => {
+    if (event.key >= 0 && event.key <= 9) {
+        calculator.appendNumber(event.key);
+        calculator.updateDisplay();
+    }
+    if (event.key === '.') {
+        calculator.appendNumber('.');
+        calculator.updateDisplay();
+    }
+    if (event.key === '+' || event.key === '-' || event.key === '*' || event.key === '/') {
+        let op = event.key;
+        if (op === '*') op = '×';
+        if (op === '/') op = '÷';
+        calculator.chooseOperation(op);
+        calculator.updateDisplay();
+    }
+    if (event.key === '%') {
+        calculator.chooseOperation('%');
+        calculator.updateDisplay();
+    }
+    if (event.key === 'Enter' || event.key === '=') {
+        calculator.calculate();
+        calculator.updateDisplay();
+    }
+    if (event.key === 'Escape') {
+        calculator.clear();
+        calculator.updateDisplay();
+    }
+    if (event.key === 'Backspace') {
+        calculator.delete();
+        calculator.updateDisplay();
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,36 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
+body {
+    font-family: 'Roboto', sans-serif;
+    background: linear-gradient(135deg, #1a202c, #2d3748);
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
+button {
+    outline: none;
+    border: none;
+    cursor: pointer;
 }
+button:focus {
+    outline: none;
 }
+#previous-operand {
+    word-wrap: break-word;
+    word-break: break-all;
 }
+#current-operand {
+    word-wrap: break-word;
+    word-break: break-all;
+}