Upload folder using huggingface_hub

assets/css/styles.css

@@ -0,0 +1,220 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary-color: #2c3e50;
+    --secondary-color: #3498db;
+    --accent-color: #e74c3c;
+    --bg-color: #ecf0f1;
+    --text-color: #2c3e50;
+    --display-bg: #34495e;
+    --button-bg: #ffffff;
+    --button-hover: #f8f9fa;
+    --operator-bg: #3498db;
+    --operator-hover: #2980b9;
+    --equals-bg: #27ae60;
+    --equals-hover: #229954;
+    --clear-bg: #e74c3c;
+    --clear-hover: #c0392b;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    color: var(--text-color);
+}
+
+header {
+    padding: 1rem;
+    text-align: center;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.built-with {
+    color: white;
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: opacity 0.3s ease;
+}
+
+.built-with:hover {
+    opacity: 0.8;
+    text-decoration: underline;
+}
+
+main {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem 1rem;
+}
+
+.calculator {
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    padding: 1.5rem;
+    max-width: 400px;
+    width: 100%;
+}
+
+.display {
+    background: var(--display-bg);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-end;
+    word-wrap: break-word;
+    word-break: break-all;
+}
+
+.display-previous {
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 1.2rem;
+    min-height: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.display-current {
+    color: white;
+    font-size: 2.5rem;
+    font-weight: 300;
+    min-height: 2.5rem;
+}
+
+.buttons {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.75rem;
+}
+
+.btn {
+    border: none;
+    border-radius: 10px;
+    font-size: 1.5rem;
+    padding: 1.25rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-weight: 500;
+    background: var(--button-bg);
+    color: var(--text-color);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+.btn:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.btn-number:hover {
+    background: var(--button-hover);
+}
+
+.btn-operator {
+    background: var(--operator-bg);
+    color: white;
+}
+
+.btn-operator:hover {
+    background: var(--operator-hover);
+}
+
+.btn-clear {
+    background: var(--clear-bg);
+    color: white;
+    grid-column: span 2;
+}
+
+.btn-clear:hover {
+    background: var(--clear-hover);
+}
+
+.btn-delete {
+    background: var(--accent-color);
+    color: white;
+}
+
+.btn-delete:hover {
+    background: #c0392b;
+}
+
+.btn-equals {
+    background: var(--equals-bg);
+    color: white;
+    grid-row: span 2;
+}
+
+.btn-equals:hover {
+    background: var(--equals-hover);
+}
+
+.btn-zero {
+    grid-column: span 2;
+}
+
+footer {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    color: white;
+    text-align: center;
+    padding: 1rem;
+    font-size: 0.9rem;
+}
+
+@media (max-width: 480px) {
+    .calculator {
+        padding: 1rem;
+        border-radius: 15px;
+    }
+
+    .display {
+        padding: 1rem;
+        min-height: 80px;
+    }
+
+    .display-current {
+        font-size: 2rem;
+    }
+
+    .display-previous {
+        font-size: 1rem;
+    }
+
+    .btn {
+        font-size: 1.25rem;
+        padding: 1rem;
+    }
+
+    .buttons {
+        gap: 0.5rem;
+    }
+}
+
+@media (max-width: 320px) {
+    .btn {
+        font-size: 1rem;
+        padding: 0.75rem;
+    }
+
+    .display-current {
+        font-size: 1.5rem;
+    }
+}

assets/js/calculator.js

@@ -0,0 +1,154 @@
+class Calculator {
+    constructor() {
+        this.currentValue = '0';
+        this.previousValue = '';
+        this.operator = null;
+        this.shouldResetDisplay = false;
+        this.currentDisplay = document.getElementById('currentDisplay');
+        this.previousDisplay = document.getElementById('previousDisplay');
+        
+        this.initEventListeners();
+    }
+
+    initEventListeners() {
+        const numberButtons = document.querySelectorAll('[data-number]');
+        const operatorButtons = document.querySelectorAll('[data-operator]');
+        const clearButton = document.querySelector('[data-action="clear"]');
+        const deleteButton = document.querySelector('[data-action="delete"]');
+        const equalsButton = document.querySelector('[data-action="equals"]');
+
+        numberButtons.forEach(button => {
+            button.addEventListener('click', () => this.appendNumber(button.dataset.number));
+        });
+
+        operatorButtons.forEach(button => {
+            button.addEventListener('click', () => this.chooseOperator(button.dataset.operator));
+        });
+
+        clearButton.addEventListener('click', () => this.clear());
+        deleteButton.addEventListener('click', () => this.delete());
+        equalsButton.addEventListener('click', () => this.calculate());
+
+        // Keyboard support
+        document.addEventListener('keydown', (e) => this.handleKeyboard(e));
+    }
+
+    handleKeyboard(e) {
+        if (e.key >= '0' && e.key <= '9') this.appendNumber(e.key);
+        if (e.key === '.') this.appendNumber(e.key);
+        if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
+            this.chooseOperator(e.key);
+        }
+        if (e.key === 'Enter' || e.key === '=') this.calculate();
+        if (e.key === 'Backspace') this.delete();
+        if (e.key === 'Escape') this.clear();
+    }
+
+    appendNumber(number) {
+        if (this.shouldResetDisplay) {
+            this.currentValue = '0';
+            this.shouldResetDisplay = false;
+        }
+
+        if (number === '.' && this.currentValue.includes('.')) return;
+        
+        if (this.currentValue === '0') {
+            this.currentValue = number === '.' ? '0.' : number;
+        } else {
+            this.currentValue += number;
+        }
+
+        this.updateDisplay();
+    }
+
+    chooseOperator(operator) {
+        if (this.operator !== null && !this.shouldResetDisplay) {
+            this.calculate();
+        }
+
+        this.operator = operator;
+        this.previousValue = this.currentValue;
+        this.shouldResetDisplay = true;
+        this.updateDisplay();
+    }
+
+    calculate() {
+        if (this.operator === null || this.shouldResetDisplay) return;
+
+        const prev = parseFloat(this.previousValue);
+        const current = parseFloat(this.currentValue);
+
+        if (isNaN(prev) || isNaN(current)) return;
+
+        let result;
+        switch (this.operator) {
+            case '+':
+                result = prev + current;
+                break;
+            case '-':
+                result = prev - current;
+                break;
+            case '*':
+                result = prev * current;
+                break;
+            case '/':
+                if (current === 0) {
+                    alert('Cannot divide by zero!');
+                    this.clear();
+                    return;
+                }
+                result = prev / current;
+                break;
+            default:
+                return;
+        }
+
+        // Round to avoid floating point errors
+        result = Math.round(result * 100000000) / 100000000;
+        
+        this.currentValue = result.toString();
+        this.operator = null;
+        this.previousValue = '';
+        this.shouldResetDisplay = true;
+        this.updateDisplay();
+    }
+
+    clear() {
+        this.currentValue = '0';
+        this.previousValue = '';
+        this.operator = null;
+        this.shouldResetDisplay = false;
+        this.updateDisplay();
+    }
+
+    delete() {
+        if (this.shouldResetDisplay) return;
+        
+        this.currentValue = this.currentValue.slice(0, -1);
+        if (this.currentValue === '' || this.currentValue === '-') {
+            this.currentValue = '0';
+        }
+        this.updateDisplay();
+    }
+
+    updateDisplay() {
+        this.currentDisplay.textContent = this.currentValue;
+        
+        if (this.operator !== null) {
+            const operatorSymbols = {
+                '+': '+',
+                '-': '−',
+                '*': '×',
+                '/': '÷'
+            };
+            this.previousDisplay.textContent = `${this.previousValue} ${operatorSymbols[this.operator]}`;
+        } else {
+            this.previousDisplay.textContent = '';
+        }
+    }
+}
+
+// Initialize calculator when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new Calculator();
+});

index.html

@@ -1,19 +1,55 @@
-<!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">
+    <meta name="description" content="A simple, modern calculator with basic arithmetic operations">
+    <title>Calculator - Basic Arithmetic</title>
+    <link rel="stylesheet" href="assets/css/styles.css">
+</head>
+<body>
+    <header>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener noreferrer" class="built-with">Built with anycoder</a>
+    </header>
+
+    <main>
+        <div class="calculator">
+            <div class="display">
+                <div class="display-previous" id="previousDisplay"></div>
+                <div class="display-current" id="currentDisplay">0</div>
+            </div>
+            
+            <div class="buttons">
+                <button class="btn btn-clear" data-action="clear">C</button>
+                <button class="btn btn-delete" data-action="delete">DEL</button>
+                <button class="btn btn-operator" data-operator="/">÷</button>
+                <button class="btn btn-operator" data-operator="*">×</button>
+                
+                <button class="btn btn-number" data-number="7">7</button>
+                <button class="btn btn-number" data-number="8">8</button>
+                <button class="btn btn-number" data-number="9">9</button>
+                <button class="btn btn-operator" data-operator="-">−</button>
+                
+                <button class="btn btn-number" data-number="4">4</button>
+                <button class="btn btn-number" data-number="5">5</button>
+                <button class="btn btn-number" data-number="6">6</button>
+                <button class="btn btn-operator" data-operator="+">+</button>
+                
+                <button class="btn btn-number" data-number="1">1</button>
+                <button class="btn btn-number" data-number="2">2</button>
+                <button class="btn btn-number" data-number="3">3</button>
+                <button class="btn btn-equals" data-action="equals" id="equalsBtn">=</button>
+                
+                <button class="btn btn-number btn-zero" data-number="0">0</button>
+                <button class="btn btn-number" data-number=".">.</button>
+            </div>
+        </div>
+    </main>
+
+    <footer>
+        <p>&copy; 2024 Calculator App. Simple & Efficient.</p>
+    </footer>
+
+    <script src="assets/js/calculator.js"></script>
+</body>
+</html>