Spaces:

TarSh8654
/

Calculator

Sleeping

App Files Files Community

TarSh8654 commited on Jul 14, 2025

Commit

c4e7d42

verified ·

1 Parent(s): b87fa64

Update app.py

Browse files

Files changed (1) hide show

app.py +264 -88

app.py CHANGED Viewed

@@ -1,88 +1,264 @@
-def add(a, z):
-    return a + z
-# This function takes two numbers and subtracts them.
-def subtract(a, z):
-    return a - z
-# This function takes two numbers and multiplies them.
-def multiply(a, z):
-    return a * z
-# This function takes two numbers and divides them.
-def divide(a, z):
-    return a / z
-print("Select operation.")
-print("1.Addition")
-print("2.Subtraction")
-print("3.Multiplication")
-print("4.Division")
-while True:
-    # Take input from the user
-    choice = input("Enter choice(1/2/3/4): ")
-    # Check to see if your choice is one of the four options
-    if choice in ('1', '2', '3', '4'):
-        numb1 = float(input("Enter first number: "))
-        numb2 = float(input("Enter second number: "))
-        if choice == '1':
-            print(numb1, "+", numb2, "=", add(numb1, numb2))
-        elif choice == '2':
-            print(numb1, "-", numb2, "=", subtract(numb1, numb2))
-        elif choice == '3':
-            print(numb1, "*", numb2, "=", multiply(numb1, numb2))
-        elif choice == '4':
-            print(numb1, "/", numb2, "=", divide(numb1, numb2))
-        input()
-    else:
-        print("Invalid Input")

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Calculator</title>
+    <!-- Tailwind CSS CDN for styling -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Custom styles for the calculator */
+        body {
+            font-family: 'Inter', sans-serif; /* Using Inter font as per instructions */
+            background-color: #f0f2f5; /* Light gray background */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            margin: 0;
+            padding: 20px; /* Add some padding for smaller screens */
+            box-sizing: border-box;
+        }
+        .calculator-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr); /* 4 columns for buttons */
+            gap: 10px; /* Space between buttons */
+        }
+        .calculator-button {
+            padding: 20px;
+            font-size: 1.5rem;
+            border: none;
+            cursor: pointer;
+            transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+            user-select: none; /* Prevent text selection on buttons */
+        }
+        .calculator-button:hover {
+            transform: translateY(-2px); /* Slight lift on hover */
+        }
+        .calculator-button:active {
+            transform: translateY(0); /* Return to normal on click */
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Smaller shadow on click */
+        }
+        .span-two {
+            grid-column: span 2; /* Make button span two columns */
+        }
+        .output {
+            grid-column: span 4; /* Output display spans all columns */
+            background-color: #222; /* Dark background for output */
+            color: #fff; /* White text */
+            padding: 20px;
+            text-align: right;
+            font-size: 2.5rem;
+            overflow: hidden; /* Hide overflow text */
+            white-space: nowrap; /* Prevent wrapping */
+            text-overflow: ellipsis; /* Add ellipsis for overflow */
+            min-height: 80px; /* Ensure minimum height */
+            display: flex;
+            align-items: flex-end; /* Align text to bottom */
+            justify-content: flex-end; /* Align text to right */
+        }
+        /* Responsive adjustments for smaller screens */
+        @media (max-width: 640px) {
+            .calculator-container {
+                width: 100%; /* Full width on small screens */
+                max-width: 350px; /* Limit max width even on full width */
+            }
+            .calculator-button {
+                padding: 15px;
+                font-size: 1.2rem;
+            }
+            .output {
+                font-size: 2rem;
+                min-height: 60px;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-blue-100 to-purple-200">
+    <!-- Calculator Container -->
+    <div class="calculator-container bg-white p-6 rounded-2xl shadow-xl max-w-sm w-full border border-gray-200">
+        <!-- Calculator Display Output -->
+        <div id="output" class="output rounded-t-xl mb-4 shadow-inner">0</div>
+        <!-- Calculator Buttons Grid -->
+        <div class="calculator-grid">
+            <!-- Clear and Delete Buttons -->
+            <button class="calculator-button bg-red-500 text-white rounded-xl span-two hover:bg-red-600" onclick="clearDisplay()">AC</button>
+            <button class="calculator-button bg-yellow-500 text-white rounded-xl hover:bg-yellow-600" onclick="deleteLast()">DEL</button>
+            <button class="calculator-button bg-blue-500 text-white rounded-xl hover:bg-blue-600" onclick="appendOperator('/')">/</button>
+            <!-- Number Buttons (7-9) and Multiplication -->
+            <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('7')">7</button>
+            <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('8')">8</button>
+            <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('9')">9</button>
+            <button class="calculator-button bg-blue-500 text-white rounded-xl hover:bg-blue-600" onclick="appendOperator('*')">*</button>
+            <!-- Number Buttons (4-6) and Subtraction -->
+            <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('4')">4</button>
+            <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('5')">5</button>
+            <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('6')">6</button>
+            <button class="calculator-button bg-blue-500 text-white rounded-xl hover:bg-blue-600" onclick="appendOperator('-')">-</button>
+            <!-- Number Buttons (1-3) and Addition -->
+            <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('1')">1</button>
+            <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('2')">2</button>
+            <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('3')">3</button>
+            <button class="calculator-button bg-blue-500 text-white rounded-xl hover:bg-blue-600" onclick="appendOperator('+')">+</button>
+            <!-- Number Button (0), Decimal, and Equals -->
+            <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl span-two hover:bg-gray-300" onclick="appendNumber('0')">0</button>
+            <button class="calculator-button bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300" onclick="appendNumber('.')">.</button>
+            <button class="calculator-button bg-green-500 text-white rounded-xl hover:bg-green-600" onclick="calculateResult()">=</button>
+        </div>
+    </div>
+    <script>
+        let currentInput = '0'; // Stores the current number or expression
+        let operator = null; // Stores the last operator clicked
+        let previousInput = ''; // Stores the previous number for calculations
+        let shouldResetDisplay = false; // Flag to clear display after an operation
+        const outputElement = document.getElementById('output');
+        /**
+         * Updates the calculator display.
+         * Ensures '0' is shown if input is empty.
+         */
+        function updateDisplay() {
+            outputElement.innerText = currentInput === '' ? '0' : currentInput;
+        }
+        /**
+         * Appends a number to the current input.
+         * Handles leading zeros and decimal points.
+         * @param {string} number - The number string to append.
+         */
+        function appendNumber(number) {
+            if (shouldResetDisplay) {
+                currentInput = number;
+                shouldResetDisplay = false;
+            } else {
+                // Prevent multiple leading zeros (e.g., 007 -> 7)
+                if (currentInput === '0' && number !== '.') {
+                    currentInput = number;
+                } else if (number === '.' && currentInput.includes('.')) {
+                    // Prevent multiple decimal points
+                    return;
+                } else {
+                    currentInput += number;
+                }
+            }
+            updateDisplay();
+        }
+        /**
+         * Appends an operator to the current input.
+         * If an operator already exists, it calculates the intermediate result.
+         * @param {string} nextOperator - The operator string to append.
+         */
+        function appendOperator(nextOperator) {
+            if (currentInput === '0' && previousInput === '') {
+                // Allow starting with a negative sign
+                if (nextOperator === '-') {
+                    currentInput = '-';
+                }
+                return;
+            }
+            if (operator !== null && !shouldResetDisplay) {
+                // If there's a pending operation and we're not starting a new number
+                calculateResult(); // Calculate intermediate result
+            }
+            operator = nextOperator;
+            previousInput = currentInput;
+            shouldResetDisplay = true; // Next number input will clear the display
+            updateDisplay(); // Display the previous input (before operator)
+        }
+        /**
+         * Clears the entire calculator display and resets all states.
+         */
+        function clearDisplay() {
+            currentInput = '0';
+            operator = null;
+            previousInput = '';
+            shouldResetDisplay = false;
+            updateDisplay();
+        }
+        /**
+         * Deletes the last character from the current input.
+         * If input becomes empty, sets it to '0'.
+         */
+        function deleteLast() {
+            if (currentInput === '0' || currentInput === '') return;
+            currentInput = currentInput.slice(0, -1);
+            if (currentInput === '') {
+                currentInput = '0';
+            }
+            updateDisplay();
+        }
+        /**
+         * Calculates the final result of the expression.
+         * Handles basic arithmetic operations.
+         */
+        function calculateResult() {
+            if (operator === null || shouldResetDisplay) return; // No pending operation
+            const prev = parseFloat(previousInput);
+            const current = parseFloat(currentInput);
+            if (isNaN(prev) || isNaN(current)) {
+                currentInput = 'Error';
+                updateDisplay();
+                shouldResetDisplay = true;
+                operator = null;
+                previousInput = '';
+                return;
+            }
+            let result;
+            switch (operator) {
+                case '+':
+                    result = prev + current;
+                    break;
+                case '-':
+                    result = prev - current;
+                    break;
+                case '*':
+                    result = prev * current;
+                    break;
+                case '/':
+                    if (current === 0) {
+                        currentInput = 'Error: Div by 0';
+                        updateDisplay();
+                        shouldResetDisplay = true;
+                        operator = null;
+                        previousInput = '';
+                        return;
+                    }
+                    result = prev / current;
+                    break;
+                default:
+                    return;
+            }
+            // Handle floating point precision issues (optional, but good for calculators)
+            result = parseFloat(result.toFixed(10)); // Limit to 10 decimal places
+            currentInput = result.toString();
+            operator = null;
+            previousInput = '';
+            shouldResetDisplay = true; // Next number input will clear the display
+            updateDisplay();
+        }
+        // Initialize display on load
+        window.onload = updateDisplay;
+    </script>
+</body>
+</html>