hackclub · Praveenkushinpi · Jun 11, 2025 · Jun 11, 2025 · Jun 13, 2025 · Jun 13, 2025
diff --git a/submissions/Calculator/Readme.md b/submissions/Calculator/Readme.md
@@ -0,0 +1,2 @@
+#CALCULATOR
+## this is a brutalism designed calculator but in 90's style 
diff --git a/submissions/Calculator/icon128.png b/submissions/Calculator/icon128.png
diff --git a/submissions/Calculator/icon16.png b/submissions/Calculator/icon16.png
diff --git a/submissions/Calculator/icon48.png b/submissions/Calculator/icon48.png
diff --git a/submissions/Calculator/manifest.json b/submissions/Calculator/manifest.json
@@ -0,0 +1,16 @@
+{
+  "manifest_version": 3,
+  "name": "CALCULATOR",
+  "version": "1.0",
+  "description": "A brutalist-style calculator extension",
+  "action": {
+    "default_popup": "popup.html",
+    "default_title": "CALCULATOR"
+  },
+  "icons": {
+    "16": "icon16.png",
+    "48": "icon48.png",
+    "128": "icon128.png"
+  },
+  "permissions": []
+}
diff --git a/submissions/Calculator/popup.css b/submissions/Calculator/popup.css
@@ -0,0 +1,144 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'MS Sans Serif', 'Segoe UI', sans-serif;
+    font-size: 11px;
+    background: #c0c0c0;
+    width: 280px;
+    height: 350px;
+    overflow: hidden;
+}
+
+.window {
+    background: #c0c0c0;
+    border: 2px outset #c0c0c0;
+    width: 100%;
+    height: 100%;
+}
+
+.title-bar {
+    background: linear-gradient(90deg, #000080 0%, #000060 100%);
+    color: white;
+    padding: 3px 6px;
+    font-weight: bold;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.content {
+    padding: 8px;
+    height: calc(100% - 22px);
+    display: flex;
+    flex-direction: column;
+}
+
+.display {
+    background: white;
+    border: 2px inset #c0c0c0;
+    padding: 4px 8px;
+    text-align: right;
+    font-family: 'Courier New', monospace;
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 8px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    overflow: hidden;
+    word-break: break-all;
+}
+
+.memory-display {
+    font-size: 9px;
+    color: #666;
+    margin-bottom: 2px;
+    text-align: right;
+    height: 12px;
+    font-family: 'Courier New', monospace;
+}
+
+.buttons {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    gap: 3px;
+    flex: 1;
+}
+
+.btn {
+    background: #c0c0c0;
+    border: 2px outset #c0c0c0;
+    font-family: 'MS Sans Serif', 'Segoe UI', sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 32px;
+    user-select: none;
+    transition: none;
+}
+
+.btn:hover {
+    background: #d4d4d4;
+}
+
+.btn:active {
+    border: 2px inset #c0c0c0;
+    background: #b8b8b8;
+}
+
+.btn.operator {
+    background: #dfdfdf;
+    color: #000;
+}
+
+.btn.operator:hover {
+    background: #e8e8e8;
+}
+
+.btn.clear {
+    background: #ff9999;
+    color: #000;
+}
+
+.btn.clear:hover {
+    background: #ffaaaa;
+}
+
+.btn.clear:active {
+    background: #ff8888;
+}
+
+.btn.equals {
+    background: #99ff99;
+    color: #000;
+    grid-row: span 2;
+}
+
+.btn.equals:hover {
+    background: #aaffaa;
+}
+
+.btn.equals:active {
+    background: #88ff88;
+}
+
+.btn.zero {
+    grid-column: span 2;
+}
+
+.btn.number {
+    background: #c0c0c0;
+}
+
+.btn.number:hover {
+    background: #d4d4d4;
+}
diff --git a/submissions/Calculator/popup.html b/submissions/Calculator/popup.html
@@ -0,0 +1,47 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CALCULATOR</title>
+    <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+    <div class="window">
+        <div class="title-bar">
+            <span>CALCULATOR</span>
+        </div>
+        <div class="content">
+            <div class="memory-display" id="memory"></div>
+            <div class="display" id="display">0</div>
+            <div class="buttons">
+                <button class="btn clear" data-action="clear-all">C</button>
+                <button class="btn clear" data-action="clear-entry">CE</button>
+                <button class="btn operator" data-action="operator" data-value="/">/</button>
+                <button class="btn operator" data-action="operator" data-value="*">*</button>
+
+                <button class="btn number" data-action="number" data-value="7">7</button>
+                <button class="btn number" data-action="number" data-value="8">8</button>
+                <button class="btn number" data-action="number" data-value="9">9</button>
+                <button class="btn operator" data-action="operator" data-value="-">-</button>
+
+                <button class="btn number" data-action="number" data-value="4">4</button>
+                <button class="btn number" data-action="number" data-value="5">5</button>
+                <button class="btn number" data-action="number" data-value="6">6</button>
+                <button class="btn operator" data-action="operator" data-value="+">+</button>
+
+                <button class="btn number" data-action="number" data-value="1">1</button>
+                <button class="btn number" data-action="number" data-value="2">2</button>
+                <button class="btn number" data-action="number" data-value="3">3</button>
+                <button class="btn equals" data-action="equals">=</button>
+
+                <button class="btn number zero" data-action="number" data-value="0">0</button>
+                <button class="btn" data-action="decimal">.</button>
+            </div>
+        </div>
+    </div>
+    <script src="popup.js"></script>
+</body>
+</html>
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		#CALCULATOR
		## this is a brutalism designed calculator but in 90's style