khafisparmar-khafis.github.io/Calculator.html at main · khafisparmar-khafis/khafisparmar-khafis.github.io

Feb 6, 2026

3f837d2 · · Feb 6, 2026

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ultimate Calculator</title>
    <style>
        /* --- CSS STYLING --- */
        :root {
            --bg-color: #111;
            --calc-bg: #1a1a1a;
            --text-color: #fff;
            --btn-bg: #333;
            --btn-hover: #444;
            --accent: #00ff88; /* Matrix Green */
            --shadow: rgba(0, 255, 136, 0.2);
        }

/* Feature 2: Theme Switcher Classes */
        body.cyberpunk {
            --bg-color: #0f0f1b;
            --calc-bg: #161625;
            --text-color: #e0e0e0;
            --btn-bg: #2a2a40;
            --btn-hover: #3b3b55;
            --accent: #ff00ff; /* Neon Pink */
            --shadow: rgba(255, 0, 255, 0.3);
        }

body {
            font-family: 'Segoe UI', monospace;
            background-color: var(--bg-color);
            color: var(--text-color);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            transition: 0.3s;
        }

.main-container {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

/* CALCULATOR BODY */
        .calculator {
            background-color: var(--calc-bg);
            padding: 25px;
            border-radius: 15px;
            width: 320px;
            border: 2px solid var(--accent);
            box-shadow: 0 0 30px var(--shadow);
            transition: 0.3s;
        }

/* Feature 1: Number Analyst Bar */
        #analyst-bar {
            text-align: center;
            font-size: 0.8rem;
            color: var(--accent);
            margin-bottom: 10px;
            height: 20px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

/* DISPLAY SCREEN */
        input[type="text"] {
            width: 100%;
            height: 70px;
            background-color: #000;
            border: 1px solid #333;
            border-radius: 8px;
            color: white;
            font-size: 2.5rem;
            text-align: right;
            padding: 15px;
            box-sizing: border-box;
            margin-bottom: 20px;
            font-family: monospace;
        }

/* BUTTONS */
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }

button {
            padding: 20px;
            font-size: 1.2rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            background-color: var(--btn-bg);
            color: var(--text-color);
            transition: 0.2s;
            font-weight: bold;
        }

button:hover {
            background-color: var(--btn-hover);
            transform: translateY(-2px);
        }

.btn-op { color: var(--accent); }
        .btn-eq { 
            background-color: var(--accent); 
            color: #000; 
            grid-column: span 2; 
        }
        .btn-ac { background-color: #ff4757; color: white; }

/* Feature 3: History Sidebar */
        .history-panel {
            background-color: var(--calc-bg);
            border: 1px solid #333;
            width: 150px;
            height: 480px;
            border-radius: 15px;
            padding: 15px;
            display: flex;
            flex-direction: column;
        }

.history-title {
            color: var(--accent);
            font-size: 0.9rem;
            border-bottom: 1px solid #444;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

.history-list {
            list-style: none;
            padding: 0;
            margin: 0;
            overflow-y: auto;
        }

.history-item {
            font-size: 0.85rem;
            margin-bottom: 8px;
            color: #888;
            border-bottom: 1px solid #222;
            padding-bottom: 4px;
        }

/* THEME TOGGLE BUTTON */
        .theme-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            background: var(--accent);
            color: black;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-weight: bold;
        }

</style>
</head>
<body>

<button class="theme-btn" onclick="toggleTheme()">Switch Theme</button>

<div class="main-container">
        
        <div class="calculator">
            <div id="analyst-bar">Waiting for data...</div>

<div class="history-panel">
            <div class="history-title">HISTORY</div>
            <ul class="history-list" id="history-list">
                </ul>
        </div>

</div>

// --- CORE CALCULATOR LOGIC ---

function appendInput(val) {
            // Prevent multiple decimals
            if (val === '.' && display.value.includes('.') && !/[+\-×÷]/.test(display.value)) return;
            
            // Logic to prevent double operators (e.g. ++ or ×÷)
            const lastChar = display.value.slice(-1);
            const operators = ['+', '-', '×', '÷', '%'];

if (operators.includes(val) && operators.includes(lastChar)) {
                // Replace the old operator with the new one
                display.value = display.value.slice(0, -1) + val;
            } else {
                display.value += val;
            }
        }

function clearDisplay() {
            display.value = '';
            analystBar.innerText = "Waiting for data...";
        }

function deleteLast() {
            display.value = display.value.toString().slice(0, -1);
        }

function calculate() {
            if (display.value === '') return;

try {
                // 1. Prepare the string for Math (Replace visual symbols)
                let expression = display.value
                    .replace(/×/g, '*')
                    .replace(/÷/g, '/');

// 2. Safe Evaluate
                let result = eval(expression);

// 3. Handle Errors (Infinity)
                if (!isFinite(result)) {
                    display.value = "Error";
                    return;
                }

// 4. Format Decimals (Max 4 digits)
                if (result % 1 !== 0) {
                    result = parseFloat(result.toFixed(4));
                }

// 5. Update Screen
                display.value = result;

// 6. Trigger Unique Features
                analyzeNumber(result);
                addToHistory(expression, result);

} catch (error) {
                display.value = "Error";
            }
        }

// --- FEATURE 1: NUMBER ANALYST ---
        function analyzeNumber(num) {
            if (num === 0) {
                analystBar.innerText = "Zero";
                return;
            }
            
            let traits = [];
            
            // Check Even/Odd
            if (num % 2 === 0) traits.push("Even");
            else traits.push("Odd");

// Check if Integer for Prime calc
            if (Number.isInteger(num) && num > 1) {
                let isPrime = true;
                for (let i = 2; i <= Math.sqrt(num); i++) {
                    if (num % i === 0) {
                        isPrime = false;
                        break;
                    }
                }
                if (isPrime) traits.push("Prime");
            }

if (num < 0) traits.push("Negative");

analystBar.innerText = traits.join(" • ");
        }

// --- FEATURE 2: THEME SWITCHER ---
        function toggleTheme() {
            document.body.classList.toggle('cyberpunk');
        }

// --- FEATURE 3: HISTORY SIDEBAR ---
        function addToHistory(expr, res) {
            // Convert math symbols back to visual ones for history
            let visualExpr = expr.replace(/\*/g, '×').replace(/\//g, '÷');
            
            const li = document.createElement('li');
            li.className = 'history-item';
            li.innerHTML = `<strong>${res}</strong><br><small>${visualExpr}</small>`;
            
            // Add to top of list
            historyList.prepend(li);

// Limit to 8 items
            if (historyList.children.length > 8) {
                historyList.removeChild(historyList.lastChild);
            }
        }
    </script>
</body>
</html>ocument.createElement('li');
            li.className = 'history-item';
            li.innerHTML = `<strong>${res}</strong><br><small>${visualExpr}</small>`;
            
            // Add to top of list
            historyList.prepend(li);

// Limit to 8 items
            if (historyList.children.length > 8) {
                historyList.removeChild(historyList.lastChild);
            }
        }
    </script>
</body>
</html></small>`;
            
            // Add to top of list
            historyList.prepend(li);

// Limit to 8 items
            if (historyList.children.length > 8) {
                historyList.removeChild(historyList.lastChild);
            }
        }
    </script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

>gt;

html lang="en">gt;

head>gt;

meta charset="UTF-8">gt;

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

title>gt;Ultimate Calculatortitle>gt;

style>gt;

/* --- CSS STYLING --- */

:root {

--bg-color: #111;

--calc-bg: #1a1a1a;

--text-color: #fff;

--btn-bg: #333;

--btn-hover: #444;

--accent: #00ff88; /* Matrix Green */

--shadow: rgba(0, 255, 136, 0.2);

}

/* Feature 2: Theme Switcher Classes */

body.cyberpunk {

--bg-color: #0f0f1b;

--calc-bg: #161625;

--text-color: #e0e0e0;

--btn-bg: #2a2a40;

--btn-hover: #3b3b55;

--accent: #ff00ff; /* Neon Pink */

--shadow: rgba(255, 0, 255, 0.3);

}

body {

font-family: 'Segoe UI', monospace;

background-color: var(--bg-color);

color: var(--text-color);

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

transition: 0.3s;

}

.main-container {

display: flex;

gap: 20px;

align-items: flex-start;

}

/* CALCULATOR BODY */

.calculator {

background-color: var(--calc-bg);

padding: 25px;

border-radius: 15px;

width: 320px;

border: 2px solid var(--accent);

box-shadow: 0 0 30px var(--shadow);

transition: 0.3s;

}

/* Feature 1: Number Analyst Bar */

#analyst-bar {

text-align: center;

font-size: 0.8rem;

color: var(--accent);

margin-bottom: 10px;

height: 20px;

text-transform: uppercase;

letter-spacing: 2px;

}

/* DISPLAY SCREEN */

input[type="text"] {

width: 100%;

height: 70px;

background-color: #000;

border: 1px solid #333;

border-radius: 8px;

color: white;

font-size: 2.5rem;

text-align: right;

padding: 15px;

box-sizing: border-box;

margin-bottom: 20px;

font-family: monospace;

}

/* BUTTONS */

.buttons {

display: grid;

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

gap: 10px;

}

button {

padding: 20px;

font-size: 1.2rem;

border: none;

border-radius: 8px;

cursor: pointer;

background-color: var(--btn-bg);

color: var(--text-color);

transition: 0.2s;

font-weight: bold;

}

button:hover {

background-color: var(--btn-hover);

transform: translateY(-2px);

}

.btn-op { color: var(--accent); }

.btn-eq {

background-color: var(--accent);

color: #000;

grid-column: span 2;

}

.btn-ac { background-color: #ff4757; color: white; }

/* Feature 3: History Sidebar */

.history-panel {

background-color: var(--calc-bg);

border: 1px solid #333;

width: 150px;

height: 480px;

border-radius: 15px;

padding: 15px;

display: flex;

flex-direction: column;

}

.history-title {

color: var(--accent);

font-size: 0.9rem;

border-bottom: 1px solid #444;

padding-bottom: 5px;

margin-bottom: 10px;

}

// 4. Format Decimals (Max 4 digits)

if (result % 1 !== 0) {

result = parseFloat(result.toFixed(4));

}

// 5. Update Screen

display.value = result;

// 6. Trigger Unique Features

analyzeNumber(result);

addToHistory(expression, result);

} catch (error) {

display.value = "Error";

}

// --- FEATURE 1: NUMBER ANALYST ---

function analyzeNumber(num) {

if (num === 0) {

analystBar.innerText = "Zero";

return;

}

let traits = [];

// Check Even/Odd

if (num % 2 === 0) traits.push("Even");

else traits.push("Odd");

// Check if Integer for Prime calc

if (Number.isInteger(num) &∓& num >gt; 1) {

let isPrime = true;

for (let i = 2; i <=t;= Math.sqrt(num); i++) {

if (num % i === 0) {

isPrime = false;

break;

}

if (isPrime) traits.push("Prime");

}

if (num 0) traits.push("Negative");

analystBar.innerText = traits.join(" • ");

}

// --- FEATURE 2: THEME SWITCHER ---

function toggleTheme() {

document.body.classList.toggle('cyberpunk');

}

// --- FEATURE 3: HISTORY SIDEBAR ---

function addToHistory(expr, res) {

// Convert math symbols back to visual ones for history

let visualExpr = expr.replace(/\*/g, '×').replace(/\//g, '÷');

const li = document.createElement('li');

li.className = 'history-item';

li.innerHTML = `ng>${res}
r><small>${visualExpr}`l>`;

// Add to top of list

historyList.prepend(li);

// Limit to 8 items

if (historyList.children.length >gt; 8) {

historyList.removeChild(historyList.lastChild);

}

script>gt;

body>gt;

html>gt;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Files

Collapse file tree

Files

Calculator.html

Latest commit

History

Calculator.html

File metadata and controls