Upload src/App.svelte with huggingface_hub

src/App.svelte

@@ -1,47 +1,137 @@
+<!-- src/App.svelte -->
 <script lang="ts">
-  import svelteLogo from './assets/svelte.svg'
-  import viteLogo from '/vite.svg'
-  import Counter from './lib/Counter.svelte'
+  let display = '0';
+  let previous = 0;
+  let operator: string | null = null;
+  let waitingForOperand = false;
+  let error = '';
+
+  const clear = () => {
+    display = '0';
+    previous = 0;
+    operator = null;
+    waitingForOperand = false;
+    error = '';
+  };
+
+  const inputDigit = (digit: number) => {
+    if (waitingForOperand) {
+      display = String(digit);
+      waitingForOperand = false;
+    } else {
+      display = display === '0' ? String(digit) : display + digit;
+    }
+  };
+
+  const inputDecimal = () => {
+    if (waitingForOperand) {
+      display = '0.';
+      waitingForOperand = false;
+    } else if (display.indexOf('.') === -1) {
+      display += '.';
+    }
+  };
+
+  const performOperation = (nextOperator: string) => {
+    const inputValue = parseFloat(display);
+
+    if (isNaN(inputValue)) return;
+
+    if (operator && !waitingForOperand) {
+      const result = calculate(previous, inputValue, operator);
+      if (typeof result === 'string') {
+        error = result;
+        display = 'Error';
+        return;
+      }
+      display = String(result);
+      previous = result;
+    } else {
+      previous = inputValue;
+    }
+
+    waitingForOperand = true;
+    operator = nextOperator;
+  };
+
+  const calculate = (first: number, second: number, op: string): number | string => {
+    switch (op) {
+      case '+':
+        return first + second;
+      case '-':
+        return first - second;
+      case '*':
+        return first * second;
+      case '/':
+        if (second === 0) return 'Cannot divide by zero';
+        return first / second;
+      default:
+        return second;
+    }
+  };
+
+  const handleEquals = () => {
+    if (!operator || waitingForOperand) return;
+
+    const inputValue = parseFloat(display);
+    const result = calculate(previous, inputValue, operator);
+    
+    if (typeof result === 'string') {
+      error = result;
+      display = 'Error';
+    } else {
+      display = String(result);
+      previous = result;
+    }
+
+    waitingForOperand = true;
+    operator = null;
+  };
+
+  const handlePercent = () => {
+    const value = parseFloat(display);
+    display = String(value / 100);
+  };
+
+  const handleNegate = () => {
+    const value = parseFloat(display);
+    display = String(value * -1);
+  };
 </script>
 
 <main>
-  <div>
-    <a href="https://vite.dev" target="_blank" rel="noreferrer">
-      <img src={viteLogo} class="logo" alt="Vite Logo" />
-    </a>
-    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
-      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
-    </a>
-  </div>
-  <h1>Vite + Svelte</h1>
-
-  <div class="card">
-    <Counter />
+  <div class="calculator">
+    <div class="display">
+      <div class="display-text">{display}</div>
+      {#if error}
+        <div class="error">{error}</div>
+      {/if}
+    </div>
+    
+    <div class="buttons">
+      <button class="function" on:click={clear}>C</button>
+      <button class="function" on:click={handleNegate}>±</button>
+      <button class="function" on:click={handlePercent}>%</button>
+      <button class="operator" on:click={() => performOperation('/')}>/</button>
+      
+      <button on:click={() => inputDigit(7)}>7</button>
+      <button on:click={() => inputDigit(8)}>8</button>
+      <button on:click={() => inputDigit(9)}>9</button>
+      <button class="operator" on:click={() => performOperation('*')}>×</button>
+      
+      <button on:click={() => inputDigit(4)}>4</button>
+      <button on:click={() => inputDigit(5)}>5</button>
+      <button on:click={() => inputDigit(6)}>6</button>
+      <button class="operator" on:click={() => performOperation('-')}>−</button>
+      
+      <button on:click={() => inputDigit(1)}>1</button>
+      <button on:click={() => inputDigit(2)}>2</button>
+      <button on:click={() => inputDigit(3)}>3</button>
+      <button class="operator" on:click={() => performOperation('+')}>+</button>
+      
+      <button class="zero" on:click={() => inputDigit(0)}>0</button>
+      <button on:click={inputDecimal}>.</button>
+      <button class="equals" on:click={handleEquals}>=</button>
+    </div>
   </div>
-
-  <p>
-    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
-  </p>
-
-  <p class="read-the-docs">
-    Click on the Vite and Svelte logos to learn more
-  </p>
-</main>
-
-<style>
-  .logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-    transition: filter 300ms;
-  }
-  .logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
-  }
-  .logo.svelte:hover {
-    filter: drop-shadow(0 0 2em #ff3e00aa);
-  }
-  .read-the-docs {
-    color: #888;
-  }
-</style>
+</main>