diff --git a/index.html b/index.html new file mode 100644 index 00000000..7c8e1ddc --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + + Pink Calculator + + + +
+
+
MEMORY
+
0
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 00000000..b67a435f --- /dev/null +++ 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 new file mode 100644 index 00000000..2a2f2483 --- /dev/null +++ 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; +}