suyashkumar · google-labs-jules · Dec 13, 2025
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pink Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="calculator">
+        <div class="display-container">
+            <div class="memory-indicator">MEMORY</div>
+            <div class="display" id="display">0</div>
+        </div>
+        <div class="buttons">
+            <!-- Row 1 -->
+            <button class="btn" data-action="memory-recall">MRC</button>
+            <button class="btn" data-action="memory-minus">M-</button>
+            <button class="btn" data-action="memory-plus">M+</button>
+            <button class="btn" data-action="sqrt">&radic;</button>
+            <button class="btn" data-action="percent">%</button>
+
+            <!-- Row 2 -->
+            <button class="btn" data-action="backspace">&rarr;</button>
+            <button class="btn" data-num="7">7</button>
+            <button class="btn" data-num="8">8</button>
+            <button class="btn" data-num="9">9</button>
+            <button class="btn" data-op="/">&div;</button>
+
+            <!-- Row 3 -->
+            <button class="btn btn-dark" data-action="clear-entry">CE</button>
+            <button class="btn" data-num="4">4</button>
+            <button class="btn" data-num="5">5</button>
+            <button class="btn" data-num="6">6</button>
+            <button class="btn" data-op="*">&times;</button>
+
+            <!-- Row 4 -->
+            <button class="btn btn-dark" data-action="all-clear">AC</button>
+            <button class="btn" data-num="1">1</button>
+            <button class="btn" data-num="2">2</button>
+            <button class="btn" data-num="3">3</button>
+            <button class="btn" data-op="-">&minus;</button>
+
+            <!-- Row 5 -->
+            <button class="btn" data-num="0">0</button>
+            <button class="btn" data-num="00">00</button>
+            <button class="btn" data-action="decimal">.</button>
+            <button class="btn" data-action="calculate">=</button>
+            <button class="btn" data-op="+">+</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,167 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const displayElement = document.getElementById('display');
+    const memoryIndicator = document.querySelector('.memory-indicator');
+
+    let currentInput = '0';
+    let previousInput = null;
+    let operator = null;
+    let memory = 0;
+    let resetDisplay = false;
+
+    const updateDisplay = () => {
+        // Limit display length to avoid overflow, though CSS handles scrolling
+        displayElement.textContent = currentInput.length > 12 ? currentInput.slice(0, 12) : currentInput;
+    };
+
+    const handleNumber = (num) => {
+        if (currentInput === '0' || resetDisplay) {
+            currentInput = num;
+            resetDisplay = false;
+        } else {
+            currentInput += num;
+        }
+        updateDisplay();
+    };
+
+    const handleDecimal = () => {
+        if (resetDisplay) {
+            currentInput = '0.';
+            resetDisplay = false;
+        } else if (!currentInput.includes('.')) {
+            currentInput += '.';
+        }
+        updateDisplay();
+    };
+
+    const handleOperator = (op) => {
+        if (operator !== null && !resetDisplay) {
+            calculate();
+        }
+        previousInput = currentInput;
+        operator = op;
+        resetDisplay = true;
+    };
+
+    const calculate = () => {
+        if (operator === null || previousInput === null) return;
+
+        let result;
+        const prev = parseFloat(previousInput);
+        const current = parseFloat(currentInput);
+
+        switch (operator) {
+            case '+':
+                result = prev + current;
+                break;
+            case '-':
+                result = prev - current;
+                break;
+            case '*':
+                result = prev * current;
+                break;
+            case '/':
+                result = prev / current;
+                break;
+            default:
+                return;
+        }
+
+        currentInput = String(result);
+        operator = null;
+        previousInput = null;
+        updateDisplay();
+        resetDisplay = true;
+    };
+
+    const handlePercentage = () => {
+        currentInput = String(parseFloat(currentInput) / 100);
+        updateDisplay();
+    };
+
+    const handleSqrt = () => {
+        currentInput = String(Math.sqrt(parseFloat(currentInput)));
+        updateDisplay();
+    };
+
+    const handleClearEntry = () => {
+        currentInput = '0';
+        updateDisplay();
+    };
+
+    const handleAllClear = () => {
+        currentInput = '0';
+        previousInput = null;
+        operator = null;
+        updateDisplay();
+    };
+
+    const handleBackspace = () => {
+        if (currentInput.length > 1) {
+            currentInput = currentInput.slice(0, -1);
+        } else {
+            currentInput = '0';
+        }
+        updateDisplay();
+    };
+
+    const handleMemoryRecall = () => {
+        currentInput = String(memory);
+        updateDisplay();
+        resetDisplay = true;
+    };
+
+    const handleMemoryPlus = () => {
+        memory += parseFloat(currentInput);
+        showMemoryIndicator();
+    };
+
+    const handleMemoryMinus = () => {
+        memory -= parseFloat(currentInput);
+        showMemoryIndicator();
+    };
+
+    const showMemoryIndicator = () => {
+        // Just show MEMORY text if memory is not 0
+        if (memory !== 0) {
+            memoryIndicator.style.visibility = 'visible';
+            memoryIndicator.classList.add('visible');
+        } else {
+            memoryIndicator.style.visibility = 'hidden';
+            memoryIndicator.classList.remove('visible');
+        }
+    };
+
+    document.querySelectorAll('.btn').forEach(button => {
+        button.addEventListener('click', () => {
+            const action = button.dataset.action;
+            const num = button.dataset.num;
+            const op = button.dataset.op;
+
+            if (num !== undefined) {
+                handleNumber(num);
+            } else if (op !== undefined) {
+                handleOperator(op);
+            } else if (action === 'decimal') {
+                handleDecimal();
+            } else if (action === 'calculate') {
+                calculate();
+            } else if (action === 'all-clear') {
+                handleAllClear();
+            } else if (action === 'clear-entry') {
+                handleClearEntry();
+            } else if (action === 'backspace') {
+                handleBackspace();
+            } else if (action === 'percent') {
+                handlePercentage();
+            } else if (action === 'sqrt') {
+                handleSqrt();
+            } else if (action === 'memory-recall') {
+                handleMemoryRecall();
+            } else if (action === 'memory-plus') {
+                handleMemoryPlus();
+            } else if (action === 'memory-minus') {
+                handleMemoryMinus();
+            }
+        });
+    });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,139 @@
+body {
+    background-color: #f0f0f0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    margin: 0;
+    font-family: 'Arial', sans-serif;
+}
+
+.calculator {
+    background-color: #F8C8DC; /* Light pink body */
+    padding: 20px;
+    border-radius: 25px;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+    width: 320px;
+}
+
+.display-container {
+    background-color: #a8a8a8; /* Grey display bg */
+    border-radius: 15px;
+    padding: 10px 15px;
+    margin-bottom: 20px;
+    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
+    border: 8px solid #F0A8C0; /* Border around display */
+}
+
+.memory-indicator {
+    font-size: 10px;
+    color: #333;
+    text-align: center;
+    margin-bottom: 2px;
+    font-weight: bold;
+    visibility: hidden; /* Hide by default */
+}
+.memory-indicator.visible {
+    visibility: visible;
+}
+
+.display {
+    font-family: 'Courier New', Courier, monospace; /* Monospaced for digital look */
+    font-size: 32px;
+    color: #000;
+    text-align: right;
+    letter-spacing: 2px;
+    overflow-x: auto;
+    white-space: nowrap;
+    height: 40px;
+    line-height: 40px;
+}
+
+.buttons {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 12px;
+}
+
+.btn {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%; /* Circular buttons */
+    border: none;
+    font-size: 16px;
+    color: #555;
+    cursor: pointer;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    /* 3D effect */
+    background-color: #F48FB1; /* Button face color */
+    box-shadow: 0 4px 0 #C2708D; /* Button side/shadow color */
+    transition: all 0.1s;
+}
+
+.btn:active {
+    transform: translateY(4px);
+    box-shadow: 0 0 0 #C2708D;
+}
+
+/* Specific styles for dark pink buttons */
+.btn.btn-dark {
+    background-color: #E91E63;
+    box-shadow: 0 4px 0 #AD1457;
+    color: #fff; /* White text for better contrast on dark buttons? Image shows dark text actually. */
+}
+/* Looking at the image, text on dark buttons is still dark/black?
+   Actually, looking closely at CE and AC, the text looks dark pink or dark red on top of the button.
+   Let's stick to dark grey/black for text on all buttons as it's safe and readable.
+*/
+.btn.btn-dark {
+    color: #5C0020;
+}
+
+/* Adjust colors to match image better */
+.calculator {
+    background-color: #FCE4EC;
+}
+
+.display-container {
+    background-color: #BDBDBD;
+    border-color: #F8BBD0; /* Inner border color match */
+}
+
+.btn {
+    background-color: #F8BBD0; /* Lighter pink for regular buttons */
+    box-shadow: 0 5px 0 #D88AA5;
+    color: #7B4B5E;
+    font-size: 14px;
+}
+
+.btn:active {
+    box-shadow: 0 0 0 #D88AA5;
+}
+
+.btn.btn-dark {
+    background-color: #EC407A; /* Hot pink */
+    box-shadow: 0 5px 0 #AD1457;
+    color: #880E4F;
+}
+
+.btn.btn-dark:active {
+    box-shadow: 0 0 0 #AD1457;
+}
+
+/* Specific font adjustments */
+.display {
+    font-family: 'Orbitron', 'Courier New', monospace; /* Fallback */
+    font-weight: bold;
+}
+
+/* Import a digital font if possible, but standard monospace works */
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
+
+.display {
+    font-family: 'Share Tech Mono', monospace;
+    font-size: 28px;
+}