Virtual Code Runner

Write HTML, CSS & JavaScript - See results instantly

Made with ❤️ by SHIVA

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator App</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

.calculator {
            background: linear-gradient(145deg, #2c3e50, #34495e);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 
                0 20px 40px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.1);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 15px;
            max-width: 350px;
            width: 100%;
        }

.display {
            grid-column: span 4;
            background: linear-gradient(145deg, #1a252f, #2c3e50);
            border: 2px solid #34495e;
            border-radius: 15px;
            padding: 25px 20px;
            text-align: right;
            font-size: 2.5rem;
            font-weight: 600;
            color: #ecf0f1;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-bottom: 10px;
            box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

button {
            background: linear-gradient(145deg, #3498db, #2980b9);
            border: none;
            border-radius: 15px;
            color: white;
            font-size: 1.4rem;
            font-weight: 600;
            cursor: pointer;
            height: 70px;
            transition: all 0.2s ease;
            box-shadow: 
                0 6px 12px rgba(0,0,0,0.2),
                inset 0 1px 0 rgba(255,255,255,0.2);
        }

button:hover {
            transform: translateY(-2px);
            box-shadow: 
                0 8px 16px rgba(0,0,0,0.3),
                inset 0 1px 0 rgba(255,255,255,0.3);
        }

button:active {
            transform: translateY(0);
            box-shadow: 
                0 4px 8px rgba(0,0,0,0.2),
                inset 0 2px 4px rgba(0,0,0,0.2);
        }

.number {
            background: linear-gradient(145deg, #95a5a6, #7f8c8d);
        }

.number:hover {
            background: linear-gradient(145deg, #a4b4b5, #8e9b9c);
        }

.operator {
            background: linear-gradient(145deg, #e67e22, #d35400);
        }

.operator:hover {
            background: linear-gradient(145deg, #f39c12, #e67e22);
        }

.equals {
            background: linear-gradient(145deg, #27ae60, #229954);
            grid-row: span 2;
        }

.equals:hover {
            background: linear-gradient(145deg, #2ecc71, #27ae60);
        }

.clear {
            background: linear-gradient(145deg, #e74c3c, #c0392b);
            grid-column: span 2;
        }

.clear:hover {
            background: linear-gradient(145deg, #ec7063, #e74c3c);
        }

.zero {
            grid-column: span 2;
        }

@media (max-width: 400px) {
            .calculator {
                padding: 15px;
                grid-gap: 10px;
            }
            
            button {
                height: 60px;
                font-size: 1.2rem;
            }
            
            .display {
                font-size: 2rem;
                padding: 20px 15px;
                min-height: 70px;
            }
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="display">0</div>
        <button class="clear">AC</button>
        <button class="clear">±</button>
        <button class="clear">%</button>
        <button class="operator">÷</button>
        <button class="number">7</button>
        <button class="number">8</button>
        <button class="number">9</button>
        <button class="operator">×</button>
        <button class="number">4</button>
        <button class="number">5</button>
        <button class="number">6</button>
        <button class="operator">−</button>
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</button>
        <button class="operator">+</button>
        <button class="number zero">0</button>
        <button class="number decimal">.</button>
        <button class="equals">=</button>
    </div>

// Variables to store calculator state
        let currentInput = '';
        let previousInput = '';
        let operation = undefined;
        let shouldResetDisplay = false;

// Function to update the display
        function updateDisplay() {
            if (currentInput.length > 12) {
                display.innerText = parseFloat(currentInput).toExponential(6);
            } else {
                display.innerText = currentInput === '' ? (previousInput === '' ? '0' : previousInput) : currentInput;
            }
        }

// Function to append a number (or decimal) to the current input
        function appendNumber(number) {
            if (shouldResetDisplay) {
                currentInput = '';
                shouldResetDisplay = false;
            }

// Prevent multiple decimal points
            if (number === '.' && currentInput.includes('.')) return;
            
            // Prevent too many digits
            if (currentInput.length >= 12 && number !== '.') return;
            
            // Handle leading zero
            if (currentInput === '0' && number !== '.') {
                currentInput = number;
            } else {
                currentInput += number;
            }
            updateDisplay();
        }

// Function to choose an operation
        function chooseOperation(selectedOperation) {
            // Convert display symbols to calculation symbols
            const operationMap = {
                '÷': '/',
                '×': '*',
                '−': '-',
                '+': '+'
            };
            
            selectedOperation = operationMap[selectedOperation] || selectedOperation;

if (currentInput === '' && previousInput === '') return;

if (previousInput !== '' && currentInput !== '' && !shouldResetDisplay) {
                calculate();
            }

operation = selectedOperation;
            previousInput = currentInput || previousInput;
            currentInput = '';
            shouldResetDisplay = false;
            updateDisplay();
        }

// Function to perform the calculation
        function calculate() {
            let computation;
            const prev = parseFloat(previousInput);
            const current = parseFloat(currentInput);

if (isNaN(prev) || isNaN(current)) return;

switch (operation) {
                case '+':
                    computation = prev + current;
                    break;
                case '-':
                    computation = prev - current;
                    break;
                case '*':
                    computation = prev * current;
                    break;
                case '/':
                    if (current === 0) {
                        display.innerText = 'Error';
                        setTimeout(clear, 2000);
                        return;
                    }
                    computation = prev / current;
                    break;
                default:
                    return;
            }

// Round to prevent floating point errors
            computation = Math.round((computation + Number.EPSILON) * 100000000) / 100000000;
            
            currentInput = computation.toString();
            operation = undefined;
            previousInput = '';
            shouldResetDisplay = true;
            updateDisplay();
        }

// Function to clear the calculator
        function clear() {
            currentInput = '';
            previousInput = '';
            operation = undefined;
            shouldResetDisplay = false;
            updateDisplay();
        }

// Function to handle percentage
        function percentage() {
            if (currentInput !== '') {
                currentInput = (parseFloat(currentInput) / 100).toString();
                updateDisplay();
            }
        }

// Function to toggle sign
        function toggleSign() {
            if (currentInput !== '' && currentInput !== '0') {
                currentInput = currentInput.startsWith('-') 
                    ? currentInput.slice(1) 
                    : '-' + currentInput;
                updateDisplay();
            }
        }

// Add event listeners to the buttons
        numberButtons.forEach(button => {
            button.addEventListener('click', () => {
                appendNumber(button.innerText);
            });
        });

operatorButtons.forEach(button => {
            button.addEventListener('click', () => {
                chooseOperation(button.innerText);
            });
        });

equalsButton.addEventListener('click', calculate);

clearButtons.forEach(button => {
            button.addEventListener('click', () => {
                const buttonText = button.innerText;
                if (buttonText === 'AC') {
                    clear();
                } else if (buttonText === '±') {
                    toggleSign();
                } else if (buttonText === '%') {
                    percentage();
                }
            });
        });

// Keyboard support
        document.addEventListener('keydown', (event) => {
            const key = event.key;
            
            if (key >= '0' && key <= '9' || key === '.') {
                appendNumber(key);
            } else if (key === '+' || key === '-') {
                chooseOperation(key);
            } else if (key === '*') {
                chooseOperation('*');
            } else if (key === '/') {
                event.preventDefault();
                chooseOperation('/');
            } else if (key === 'Enter' || key === '=') {
                event.preventDefault();
                calculate();
            } else if (key === 'Escape' || key === 'c' || key === 'C') {
                clear();
            } else if (key === 'Backspace') {
                if (currentInput.length > 0) {
                    currentInput = currentInput.slice(0, -1);
                    updateDisplay();
                }
            }
        });

// Initialize display on load
        updateDisplay();
    </script>
</body>
</html>

Lines: 363 | Chars: 11451

Preview

Live Output

💡 Quick Tips

• Auto-run: Code runs automatically as you type

• Full HTML: Include CSS in <style> and JS in <script> tags

• Download: Save your work as an HTML file

• Libraries: Include external libraries via CDN links

• Responsive: Test different screen sizes

• Debug: Use console.log() for debugging