Programmable Calculator

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>NEO-CALC 2077</title>

    <style>

        @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

        

        body {

            margin: 0;

            padding: 0;

            background-color: #0b0b14;

            color: #c2fbff;

            font-family: 'Share Tech Mono', monospace;

            display: flex;

            justify-content: center;

            align-items: center;

            min-height: 100vh;

        }

        

        .calculator {

            width: 320px;

            border: 2px solid #00f3ff;

            border-radius: 8px;

            box-shadow: 0 0 15px rgba(0, 243, 255, 0.5);

            background-color: rgba(11, 11, 20, 0.9);

            overflow: hidden;

        }

        

        .header {

            padding: 12px;

            background-color: rgba(0, 0, 0, 0.4);

            border-bottom: 1px solid #00f3ff;

            text-align: center;

        }

        

        .title {

            margin: 0;

            color: #00f3ff;

            text-shadow: 0 0 5px #00f3ff;

            font-size: 24px;

            letter-spacing: 2px;

        }

        

        .display {

            padding: 15px;

            background-color: rgba(0, 0, 0, 0.5);

            border-bottom: 1px solid #00f3ff;

        }

        

        .input-display {

            height: 24px;

            margin-bottom: 8px;

            text-align: right;

            color: #c2fbff;

            font-size: 16px;

            overflow: hidden;

        }

        

        .result-display {

            height: 40px;

            text-align: right;

            color: #00f3ff;

            font-size: 32px;

            text-shadow: 0 0 5px #00f3ff;

            overflow: hidden;

        }

        

        .keypad {

            display: grid;

            grid-template-columns: repeat(4, 1fr);

            grid-template-rows: repeat(5, 60px);

            gap: 1px;

            background-color: #000;

        }

        

        .key {

            display: flex;

            justify-content: center;

            align-items: center;

            background-color: rgba(20, 20, 35, 0.9);

            cursor: pointer;

            user-select: none;

            transition: all 0.2s;

        }

        

        .key:hover {

            background-color: rgba(40, 40, 60, 0.9);

        }

        

        .key:active {

            background-color: #00f3ff;

            color: #0b0b14;

        }

        

        .key.operation {

            background-color: rgba(132, 0, 255, 0.2);

            color: #8400ff;

        }

        

        .key.clear {

            background-color: rgba(255, 50, 68, 0.2);

            color: #ff3244;

        }

        

        .key.equals {

            background-color: rgba(0, 255, 170, 0.2);

            color: #00ffaa;

        }

        

        .key.function {

            background-color: rgba(0, 243, 255, 0.15);

            color: #00f3ff;

        }

        

        .footer {

            padding: 8px;

            text-align: center;

            font-size: 12px;

            color: #c2fbff;

            background-color: rgba(0, 0, 0, 0.4);

            border-top: 1px solid #00f3ff;

        }

    </style>

</head>

<body>

    <div class="calculator">

        <div class="header">

            <h1 class="title">NEO-CALC 2077</h1>

        </div>

        

        <div class="display">

            <div class="input-display" id="input-display">0</div>

            <div class="result-display" id="result-display">0</div>

        </div>

        

        <div class="keypad">

            <div class="key clear" onclick="clearAll()">AC</div>

            <div class="key clear" onclick="clearEntry()">CE</div>

            <div class="key function" onclick="calculate('sqrt')">√</div>

            <div class="key operation" onclick="setOperation('/')">/</div>

            

            <div class="key" onclick="appendNumber(7)">7</div>

            <div class="key" onclick="appendNumber(8)">8</div>

            <div class="key" onclick="appendNumber(9)">9</div>

            <div class="key operation" onclick="setOperation('*')">×</div>

            

            <div class="key" onclick="appendNumber(4)">4</div>

            <div class="key" onclick="appendNumber(5)">5</div>

            <div class="key" onclick="appendNumber(6)">6</div>

            <div class="key operation" onclick="setOperation('-')">-</div>

            

            <div class="key" onclick="appendNumber(1)">1</div>

            <div class="key" onclick="appendNumber(2)">2</div>

            <div class="key" onclick="appendNumber(3)">3</div>

            <div class="key operation" onclick="setOperation('+')">+</div>

            

            <div class="key function" onclick="toggleSign()">+/-</div>

            <div class="key" onclick="appendNumber(0)">0</div>

            <div class="key" onclick="appendDecimal()">.</div>

            <div class="key equals" onclick="performCalculation()">=</div>

        </div>

        

        <div class="footer">

            CYBERPUNK EDITION • 2077

        </div>

    </div>


    <script>

        let currentInput = '0';

        let currentResult = '0';

        let currentOperation = null;

        let resetInput = false;

        

        const inputDisplay = document.getElementById('input-display');

        const resultDisplay = document.getElementById('result-display');

        

        function updateDisplay() {

            inputDisplay.textContent = currentInput;

            resultDisplay.textContent = currentResult;

            

            // Add glitch effect

            resultDisplay.style.textShadow = "0 0 10px #00f3ff, 0 0 20px #00f3ff";

            setTimeout(() => {

                resultDisplay.style.textShadow = "0 0 5px #00f3ff";

            }, 300);

        }

        

        function appendNumber(number) {

            if (currentInput === '0' || resetInput) {

                currentInput = number.toString();

                resetInput = false;

            } else {

                currentInput += number;

            }

            updateDisplay();

        }

        

        function appendDecimal() {

            if (resetInput) {

                currentInput = '0.';

                resetInput = false;

            } else if (!currentInput.includes('.')) {

                currentInput += '.';

            }

            updateDisplay();

        }

        

        function clearAll() {

            currentInput = '0';

            currentResult = '0';

            currentOperation = null;

            updateDisplay();

        }

        

        function clearEntry() {

            currentInput = '0';

            updateDisplay();

        }

        

        function toggleSign() {

            currentInput = (parseFloat(currentInput) * -1).toString();

            updateDisplay();

        }

        

        function setOperation(operation) {

            if (currentOperation !== null) {

                performCalculation();

            }

            

            currentOperation = operation;

            currentResult = currentInput;

            resetInput = true;

            updateDisplay();

        }

        

        function performCalculation() {

            if (currentOperation === null) return;

            

            const prev = parseFloat(currentResult);

            const current = parseFloat(currentInput);

            let result;

            

            switch(currentOperation) {

                case '+':

                    result = prev + current;

                    break;

                case '-':

                    result = prev - current;

                    break;

                case '*':

                    result = prev * current;

                    break;

                case '/':

                    result = prev / current;

                    break;

                default:

                    return;

            }

            

            currentResult = formatResult(result);

            currentInput = currentResult;

            currentOperation = null;

            resetInput = true;

            updateDisplay();

        }

        

        function calculate(func) {

            const value = parseFloat(currentInput);

            let result;

            

            switch(func) {

                case 'sqrt':

                    result = Math.sqrt(value);

                    break;

                default:

                    return;

            }

            

            currentInput = formatResult(result);

            updateDisplay();

        }

        

        function formatResult(value) {

            // Handle potential floating point precision issues

            return parseFloat(value.toFixed(10)).toString();

        }

        

        // Keyboard support

        document.addEventListener('keydown', (event) => {

            if (event.key >= '0' && event.key <= '9') {

                appendNumber(parseInt(event.key));

            } else if (event.key === '.') {

                appendDecimal();

            } else if (event.key === '+' || event.key === '-' || event.key === '*' || event.key === '/') {

                setOperation(event.key);

            } else if (event.key === 'Enter' || event.key === '=') {

                performCalculation();

            } else if (event.key === 'Escape') {

                clearAll();

            } else if (event.key === 'Backspace') {

                if (currentInput.length > 1) {

                    currentInput = currentInput.slice(0, -1);

                } else {

                    currentInput = '0';

                }

                updateDisplay();

            }

        });

        

        // Initialize display

        updateDisplay();

    </script>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Articles for Calculator.ist

 #1 How to Add Multiple Numbers Fast on a Basic Calculator Introduction: Adding a long list of numbers one by one can be time-consuming, especially if you're using a basic calculator without advanced features. Luckily, there are simple tricks to speed up the process and avoid mistakes. 1. Use the Plus Button Efficiently As you input numbers, press + after each one — but don’t press = until the last number. Example: 23 + 45 + 19 + 72 + 11 = This way, you get the total sum at once. 2. Use M+ for Longer Lists If your calculator has a memory button: Enter a number. Press M+. Repeat for each number. At the end, press MR (Memory Recall) to get the total. 3. Group Similar Numbers Break the list into chunks. Group tens, twenties, or similar values. Add each group separately, then total them. This reduces the chance of input errors. Conclusion: A basic calculator can handle big addition tasks—if you know these tricks. Try it now on your phone or desktop calculator to see the difference. ___...
Read more

Calc.ist: List of all Calculators: Total of 592.

Image
Hey Muhammed, David’s got a badass project for you: 592 calculators in 15 categories to make his site the ultimate calculator destination. He’s thinking one web tool per category (e.g., one for all 74 Financial Calculators), but big categories like Math (148) can get messy. Here’s the smartest way to build this—simple, efficient, and set to make the site shine without killing your vibe. Smartest Approach: Targeted Hybrid Model One tool for each of the 15 categories is possible but tough for giants like Math (148) or Physics (78). Instead, use a targeted hybrid model for max impact: Unified Tools for Small Categories (3-9 Calculators) : Build one tool for Medical (3), Rocket Science (3), Construction (7), Sports (7), and Engineering (9). These are easy and clean. Sub-Group Tools for Medium Categories (13-46 Calculators) : For Health (46), Chemistry (34), Unit Conversion (35), Cooking (23), Creative (16), Time (13), and Statistics (8), create 2-4 smaller tools per category, grouping re...
Read more

HP-65 Calculator Simulator (1974)

  < <! DOCTYPE html > < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > HP-65 Calculator Simulator (1974) </ title > < style > body { font-family : Arial , sans-serif ; display : flex ; justify-content : center ; align-items : center ; height : 100vh ; background-color : #f0f0f0 ; margin : 0 ; } .calculator { width : 340px ; background-color : #333 ; border-radius : 10px ; padding : 20px ; box-shadow : 0 10px 20px rgba ( 0 , 0 , 0 , 0.5 ) ; } .display { background-color : #a5a58d ; color : #222 ; ...
Read more