From 8af63e0bd8661b80a084cd4a68c580b451366007 Mon Sep 17 00:00:00 2001
From: spf <1547532927@qq.com>
Date: Thu, 10 Oct 2024 16:49:47 +0800
Subject: [PATCH] v1

---
 mycpt.html | 213 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 213 insertions(+)
 create mode 100644 mycpt.html
diff --git a/mycpt.html b/mycpt.html
new file mode 100644
index 0000000..297c546
--- /dev/null
+++ b/mycpt.html
@@ -0,0 +1,213 @@
+<!DOCTYPE html>  
+<style>
+  /* styles.css */  
+body {  
+    font-family: Arial, sans-serif;  
+    display: flex;  
+    justify-content: center;  
+    align-items: center;  
+    height: 100vh;  
+    background-color: #f0f0f0;  
+    margin: 0;  
+}  
+  
+.calculator {  
+    border: 1px solid #ccc;  
+    border-radius: 5px;  
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
+    background-color: #fff;  
+    padding: 20px;  
+}  
+  
+.calculator-screen {  
+    width: 100%;  
+    height: 80px;  
+    border: none;  
+    background-color: #eee;  
+    text-align: right;  
+    font-size: 2em;  
+    padding: 20px;  
+    box-sizing: border-box;  
+    border-radius: 5px;  
+    margin-bottom: 10px;  
+}  
+  
+.calculator-keys {  
+    display: grid;  
+    grid-template-columns: repeat(4, 1fr);  
+    gap: 10px;  
+}  
+  
+button {  
+    height: 60px;  
+    font-size: 1.5em;  
+    border: none;  
+    border-radius: 5px;  
+    background-color: #eee;  
+    cursor: pointer;  
+    transition: background-color 0.3s;  
+}  
+  
+button:hover {  
+    background-color: #ddd;  
+}  
+  
+button.operator {  
+    background-color: #007BFF;  
+    color: #fff;  
+}  
+  
+button.operator:hover {  
+    background-color: #0056b3;  
+}  
+  
+button.all-clear, button.equal-sign {  
+    grid-column: span 2;  
+    background-color: #28a745;  
+    color: #fff;  
+}  
+  
+button.all-clear:hover, button.equal-sign:hover {  
+    background-color: #218838;  
+}
+</style>
+<html lang="en">  
+<head>  
+    <meta charset="UTF-8">  
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
+    <title>Simple Calculator</title>  
+</head>  
+<body>  
+    <div class="calculator">  
+        <input type="text" class="calculator-screen" value="" disabled />  
+        <div class="calculator-keys">  
+            <button type="button" class="operator" value="+">+</button>  
+            <button type="button" class="operator" value="-">-</button>  
+            <button type="button" class="operator" value="*">&times;</button>  
+            <button type="button" class="operator" value="/">&divide;</button>  
+            <button type="button" class="operator" value="%">%</button>  
+              
+            <button type="button" value="7">7</button>  
+            <button type="button" value="8">8</button>  
+            <button type="button" value="9">9</button>  
+              
+            <button type="button" value="4">4</button>  
+            <button type="button" value="5">5</button>  
+            <button type="button" value="6">6</button>  
+              
+            <button type="button" value="1">1</button>  
+            <button type="button" value="2">2</button>  
+            <button type="button" value="3">3</button>  
+              
+            <button type="button" value="0">0</button>  
+            <button type="button" class="decimal" value=".">.</button>  
+              
+            <button type="button" class="all-clear" value="all-clear">AC</button>  
+            <button type="button" class="equal-sign operator" value="=">=</button>  
+        </div>  
+    </div>  
+    <script src="script.js"></script>  
+</body>  
+</html>
+<script>
+    // script.js  
+document.addEventListener('DOMContentLoaded', (event) => {  
+    const calculator = {  
+        displayValue: '0',  
+        firstOperand: null,  
+        waitingForSecondOperand: false,  
+        operator: null,  
+    };  
+  
+    function updateDisplay() {  
+        const display = document.querySelector('.calculator-screen');  
+        display.value = calculator.displayValue;  
+    }  
+  
+    const inputKeys = document.querySelector('.calculator-keys');  
+  
+    inputKeys.addEventListener('click', (event) => {  
+        const { target } = event;  
+        const { value } = target;  
+  
+        if (!target.matches('button')) {  
+            return;  
+        }  
+  
+        switch (value) {  
+            case '+':  
+            case '-':  
+            case '*':  
+            case '/':  
+            case '%':  
+                if (calculator.waitingForSecondOperand) {  
+                    calculate(calculator.firstOperand, calculator.displayValue, calculator.operator);  
+                } else {  
+                    calculator.firstOperand = parseFloat(calculator.displayValue);  
+                    calculator.waitingForSecondOperand = true;  
+                    calculator.operator = value;  
+                }  
+                calculator.displayValue = '';  
+                break;  
+            case '=':  
+                if (calculator.waitingForSecondOperand) {  
+                    calculate(calculator.firstOperand, calculator.displayValue, calculator.operator);  
+                }  
+                break;  
+            case '.':  
+                if (!calculator.displayValue.includes('.')) {  
+                    calculator.displayValue += value;  
+                }  
+                break;  
+            case 'all-clear':  
+                calculator.displayValue = '0';  
+                calculator.firstOperand = null;  
+                calculator.waitingForSecondOperand = false;  
+                calculator.operator = null;  
+                break;  
+            default:  
+                if (Number.isInteger(parseFloat(value))) {  
+                    if (calculator.displayValue === '0' && value !== '0') {  
+                        calculator.displayValue = value;  
+                    } else {  
+                        calculator.displayValue += value;  
+                    }  
+                }  
+        }  
+  
+        updateDisplay();  
+    });  
+  
+    function calculate(firstOperand, secondOperand, operator) {  
+        let result;  
+        const secondOperandNumber = parseFloat(secondOperand);  
+  
+        switch (operator) {  
+            case '+':  
+                result = firstOperand + secondOperandNumber;  
+                break;  
+            case '-':  
+                result = firstOperand - secondOperandNumber;  
+                break;  
+            case '*':  
+                result = firstOperand * secondOperandNumber;  
+                break;  
+            case '/':  
+                result = firstOperand / secondOperandNumber;  
+                break;  
+            case '%':  
+                result = firstOperand % secondOperandNumber;  
+                break;  
+            default:  
+                return;  
+        }  
+  
+        calculator.displayValue = result;  
+        calculator.firstOperand = result;  
+        calculator.waitingForSecondOperand = false;  
+        calculator.operator = null;  
+    }  
+  
+    updateDisplay();  
+});
+</script>
\ No newline at end of file
