Update index.html

index.html

@@ -5,172 +5,41 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Calculator</title>
 <style>
-        * {
+    * { margin:0; padding:0; box-sizing:border-box; }
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
     body {
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
-            display: flex;
+        display:flex; justify-content:center; align-items:center; min-height:100vh; overflow:hidden;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            overflow: hidden;
     }
-
     .calculator {
-            background: #2d3748;
+        background:#2d3748; border-radius:20px; padding:30px; box-shadow:0 20px 60px rgba(0,0,0,0.5); width:400px;
-            border-radius: 20px;
-            padding: 30px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-            width: 400px;
     }
-
     .display {
-            background: #1a202c;
+        background:#1a202c; border-radius:10px; padding:20px; margin-bottom:20px; text-align:right; min-height:100px; display:flex; flex-direction:column; justify-content:flex-end;
-            border-radius: 10px;
-            padding: 20px;
-            margin-bottom: 20px;
-            text-align: right;
-            min-height: 100px;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
     }
-
+    .equation { color:#a0aec0; font-size:18px; min-height:25px; margin-bottom:10px; }
-        .equation {
+    .current { color:#fff; font-size:36px; font-weight:600; }
-            color: #a0aec0;
+    .buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
-            font-size: 18px;
+    button { padding:24px; font-size:20px; font-weight:600; border:none; border-radius:10px; cursor:pointer; transition:all 0.2s; color:#fff; }
-            min-height: 25px;
+    button:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.3); }
-            margin-bottom: 10px;
+    button:active { transform:translateY(0); }
-        }
+    .number { background:#4a5568; }
-
+    .operator { background:#ed8936; }
-        .current {
+    .clear { background:#e53e3e; grid-column:span 2; }
-            color: #fff;
+    .equals { background:#48bb78; grid-column:span 2; }
-            font-size: 36px;
-            font-weight: 600;
-        }
-
-        .buttons {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 12px;
-        }
-
-        button {
-            padding: 24px;
-            font-size: 20px;
-            font-weight: 600;
-            border: none;
-            border-radius: 10px;
-            cursor: pointer;
-            transition: all 0.2s;
-            color: #fff;
-        }
-
-        button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-        }
-
-        button:active {
-            transform: translateY(0);
-        }
-
-        .number {
-            background: #4a5568;
-        }
-
-        .operator {
-            background: #ed8936;
-        }
-
-        .clear {
-            background: #e53e3e;
-            grid-column: span 2;
-        }
-
-        .equals {
-            background: #48bb78;
-            grid-column: span 2;
-        }
-
     .bsod {
-            display: none;
+        display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:#0078d7; color:white; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; z-index:9999; padding:60px; overflow:hidden;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background: #0078d7;
-            color: white;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            z-index: 9999;
-            padding: 60px;
-            overflow: hidden;
-        }
-
-        .bsod.show {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
-
-        .bsod-content {
-            max-width: 800px;
-        }
-
-        .sad-face {
-            font-size: 120px;
-            margin-bottom: 40px;
-        }
-
-        .bsod h1 {
-            font-size: 48px;
-            font-weight: 400;
-            margin-bottom: 30px;
-        }
-
-        .bsod p {
-            font-size: 20px;
-            line-height: 1.6;
-            margin-bottom: 20px;
-        }
-
-        .progress {
-            margin: 40px 0;
-            font-size: 18px;
-        }
-
-        .error-details {
-            margin-top: 40px;
-            font-size: 14px;
-            opacity: 0.8;
-        }
-
-        .restart-btn {
-            display: none;
-            margin-top: 30px;
-            padding: 15px 40px;
-            font-size: 18px;
-            background: white;
-            color: #0078d7;
-            border: none;
-            cursor: pointer;
-            border-radius: 5px;
-            font-weight: 600;
-        }
-
-        .restart-btn.show {
-            display: inline-block;
-        }
-
-        .restart-btn:hover {
-            background: #f0f0f0;
     }
+    .bsod.show { display:flex; flex-direction:column; justify-content:center; }
+    .bsod-content { max-width:800px; }
+    .sad-face { font-size:120px; margin-bottom:40px; }
+    .bsod h1 { font-size:48px; font-weight:400; margin-bottom:30px; }
+    .bsod p { font-size:20px; line-height:1.6; margin-bottom:20px; }
+    .progress { margin:40px 0; font-size:18px; }
+    .error-details { margin-top:40px; font-size:14px; opacity:0.8; }
+    .restart-btn { display:none; margin-top:30px; padding:15px 40px; font-size:18px; background:white; color:#0078d7; border:none; cursor:pointer; border-radius:5px; font-weight:600; }
+    .restart-btn.show { display:inline-block; }
+    .restart-btn:hover { background:#f0f0f0; }
 </style>
 </head>
 <body>
@@ -181,6 +50,7 @@
     </div>
     <div class="buttons">
         <button class="clear" onclick="clearCalculator()">C</button>
+        <button class="clear" onclick="wipeCalculator()">💥 Wipe</button>
         <button class="operator" onclick="appendOperator('/')">/</button>
         <button class="operator" onclick="appendOperator('*')">×</button>
         
@@ -213,7 +83,7 @@
             <span id="progress">0</span>% complete
         </div>
         <div class="error-details">
-                <p>If you'd like to know more, you can search online later for this error: CALCULATOR_OVERFLOW</p>
+            <p>If you'd like to know more, search online later for this error: CALCULATOR_OVERFLOW</p>
             <p>Stop code: 0x0000007B (0x00000034, 0xC0000034, 0x00000000, 0x00000000)</p>
             <p>What failed: math.sys</p>
         </div>
@@ -228,11 +98,9 @@
 let shouldResetScreen = false;
 
 function updateDisplay() {
-            document.getElementById('current').textContent = currentValue;
+    document.getElementById('current').textContent = currentValue || '';
     let equationText = previousValue;
-            if (operation) {
+    if (operation) equationText += ' ' + operation;
-                equationText += ' ' + operation;
-            }
     document.getElementById('equation').textContent = equationText;
 }
 
@@ -247,9 +115,7 @@
 }
 
 function appendOperator(op) {
-            if (operation && !shouldResetScreen) {
+    if (operation && !shouldResetScreen) calculate();
-                calculate();
-            }
     previousValue = currentValue;
     operation = op;
     shouldResetScreen = true;
@@ -259,27 +125,15 @@
 function calculate() {
     const prev = parseFloat(previousValue);
     const current = parseFloat(currentValue);
-            
     if (isNaN(prev) || isNaN(current)) return;
-            
     let result;
     switch(operation){
-                case '+':
+        case '+': result=prev+current; break;
-                    result = prev + current;
+        case '-': result=prev-current; break;
-                    break;
+        case '*': result=prev*current; break;
-                case '-':
+        case '/': result=prev/current; break;
-                    result = prev - current;
+        default: return;
-                    break;
-                case '*':
-                    result = prev * current;
-                    break;
-                case '/':
-                    result = prev / current;
-                    break;
-                default:
-                    return;
     }
-            
     currentValue = result.toString();
     operation='';
     previousValue='';
@@ -295,11 +149,25 @@
     updateDisplay();
 }
 
+function wipeCalculator() {
+    currentValue='';
+    previousValue='';
+    operation='';
+    shouldResetScreen=false;
+    updateDisplay();
+}
+
 function triggerBSOD() {
     const bsod = document.getElementById('bsod');
     const progressElement = document.getElementById('progress');
     const restartBtn = document.getElementById('restartBtn');
 
+    // fullscreen
+    if (document.documentElement.requestFullscreen) document.documentElement.requestFullscreen();
+    
+    // hide mouse
+    document.body.style.cursor = 'none';
+
     bsod.classList.add('show');
     
     let progress=0;
@@ -308,9 +176,7 @@
         if(progress>=100){
             progress=100;
             clearInterval(interval);
-                    setTimeout(() => {
+            setTimeout(()=>{ restartBtn.classList.add('show'); },500);
-                        restartBtn.classList.add('show');
-                    }, 500);
         }
         progressElement.textContent = progress;
     },200);
@@ -318,18 +184,11 @@
 
 // Keyboard support
 document.addEventListener('keydown',(e)=>{
-            if (e.key >= '0' && e.key <= '9') {
+    if(e.key>='0' && e.key<='9') appendNumber(e.key);
-                appendNumber(e.key);
+    else if(e.key==='.') appendNumber('.');
-            } else if (e.key === '.') {
+    else if(e.key==='+'||e.key==='-'||e.key==='*'||e.key==='/') appendOperator(e.key);
-                appendNumber('.');
+    else if(e.key==='Enter'||e.key==='='){ e.preventDefault(); triggerBSOD(); }
-            } else if (e.key === '+' || e.key === '-' || e.key === '*' || e.key === '/') {
+    else if(e.key==='Escape'||e.key==='c'||e.key==='C') clearCalculator();
-                appendOperator(e.key);
-            } else if (e.key === 'Enter' || e.key === '=') {
-                e.preventDefault();
-                triggerBSOD();
-            } else if (e.key === 'Escape' || e.key === 'c' || e.key === 'C') {
-                clearCalculator();
-            }
 });
 
 updateDisplay();