From 3cd37f740e2ee76c40ce55de396b8b35fd73031d Mon Sep 17 00:00:00 2001 From: Zeshawn Ahmed Date: Fri, 3 May 2024 20:25:44 -0700 Subject: [PATCH] calculator project --- index.html | 32 ++++++++++++++++++++++++++++++++ script.js | 16 ++++++++++++++++ styles.css | 39 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 87 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 00000000..8f501ff3 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + Calculator + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 00000000..a687fc6f --- /dev/null +++ b/script.js @@ -0,0 +1,16 @@ +let expression = ''; + +function press(num) { + expression += num; + document.getElementById('display').value = expression; +} + +function calculate() { + try { + document.getElementById('display').value = eval(expression); + expression = ''; + } catch (e) { + document.getElementById('display').value = 'Error'; + expression = ''; + } +} diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..8a91fae6 --- /dev/null +++ b/styles.css @@ -0,0 +1,39 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f0f0; +} + +.calculator { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + width: 300px; + background: black; + padding: 20px; +} + +.calculator input { + grid-column: span 4; + height: 50px; + text-align: right; + font-size: 24px; + border: none; + background: white; + color: black; +} + +.calculator button { + height: 50px; + font-size: 20px; + border: none; + cursor: pointer; + background: white; + color: black; +} + +.calculator button:hover { + background: #e0e0e0; +}