tajulafreen · tajulafreen · Jul 22, 2024 · Jul 22, 2024 · Jul 22, 2024 · Jul 22, 2024
diff --git a/README.md b/README.md
@@ -243,6 +243,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Calculator</summary>
+<p>Calculator is a straightforward and user-friendly tool developed using HTML, CSS, and JavaScript. This beginner-friendly web development project is designed to help users perform basic arithmetic operations such as addition, subtraction, multiplication, and division seamlessly. Users can input numbers and choose an operator to instantly see the calculated result. The calculator also includes functionalities for clearing the input and handling decimal numbers.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/Calculator/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/Calculator">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

diff --git a/Source-Code/Calculator/index.html b/Source-Code/Calculator/index.html
@@ -0,0 +1,39 @@
+<!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="style.css">
+</head>
+<body>
+    <div class="calculator">
+        <input type="text" class="calculator-screen" value="" disabled placeholder="0" />
+        <div class="calculator-keys">
+
+            <button type="button" value="7">7</button>
+            <button type="button" value="8">8</button>
+            <button type="button" value="9">9</button>
+            <button type="button" class="operator" value="+">+</button>
+
+            <button type="button" value="4">4</button>
+            <button type="button" value="5">5</button>
+            <button type="button" value="6">6</button>
+            <button type="button" class="operator" value="-">-</button>
+
+            <button type="button" value="1">1</button>
+            <button type="button" value="2">2</button>
+            <button type="button" value="3">3</button>
+            <button type="button" class="operator" value="*">&times;</button>
+
+            <button type="button" value="0">0</button>
+            <button type="button" class="decimal" value=".">.</button>
+            <button type="button" class="all-clear" value="all-clear">AC</button>
+            <button type="button" class="operator" value="/">&divide;</button>
+
+            <button type="button" class="equal-sign operator" value="=">=</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Source-Code/Calculator/script.js b/Source-Code/Calculator/script.js
@@ -0,0 +1,111 @@
+let firstOperand = '';
+let secondOperand = '';
+let currentOperator = null;
+let awaitingSecondOperand = false;
+
+const display = document.querySelector('.calculator-screen');
+const keys = document.querySelector('.calculator-keys');
+
+const updateDisplay = () => {
+  display.value = awaitingSecondOperand ? secondOperand : firstOperand;
+};
+
+const resetCalculator = () => {
+  firstOperand = '';
+  secondOperand = '';
+  currentOperator = null;
+  awaitingSecondOperand = false;
+  updateDisplay();
+};
+
+const inputNumber = (number) => {
+  if (awaitingSecondOperand) {
+    secondOperand += number;
+  } else {
+    firstOperand += number;
+  }
+  updateDisplay();
+};
+
+const inputDecimal = () => {
+  if (awaitingSecondOperand) {
+    if (!secondOperand.includes('.')) {
+      secondOperand += '.';
+    }
+  } else if (!firstOperand.includes('.')) {
+    firstOperand += '.';
+  }
+  updateDisplay();
+};
+
+const calculate = () => {
+  let result;
+  const first = parseFloat(firstOperand);
+  const second = parseFloat(secondOperand);
+
+  if (Number.isNaN(first) || Number.isNaN(second)) return;
+
+  switch (currentOperator) {
+    case '+':
+      result = first + second;
+      break;
+    case '-':
+      result = first - second;
+      break;
+    case '*':
+      result = first * second;
+      break;
+    case '/':
+      result = first / second;
+      break;
+    default:
+      return;
+  }
+
+  firstOperand = String(result);
+  secondOperand = '';
+  awaitingSecondOperand = false;
+  currentOperator = null;
+  updateDisplay();
+};
+const inputOperator = (operator) => {
+  if (!firstOperand) return;
+
+  if (secondOperand) {
+    calculate();
+  }
+
+  currentOperator = operator;
+  awaitingSecondOperand = true;
+};
+
+keys.addEventListener('click', (event) => {
+  const { target } = event;
+  const { value } = target;
+
+  if (!target.matches('button')) return;
+
+  switch (value) {
+    case 'all-clear':
+      resetCalculator();
+      break;
+    case '=':
+      calculate();
+      break;
+    case '.':
+      inputDecimal();
+      break;
+    case '+':
+    case '-':
+    case '*':
+    case '/':
+      inputOperator(value);
+      break;
+    default:
+      if (Number.isInteger(parseFloat(value))) {
+        inputNumber(value);
+      }
+  }
+});
+
+document.addEventListener('DOMContentLoaded', updateDisplay);
diff --git a/Source-Code/Calculator/style.css b/Source-Code/Calculator/style.css
@@ -0,0 +1,82 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: #f9f6ee;
+  font-family: 'Roboto', sans-serif;
+}
+
+.calculator {
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+}
+
+.calculator-screen {
+  width: 100%;
+  height: 100px;
+  border: none;
+  background-color: #252525;
+  color: white;
+  text-align: right;
+  padding: 10px 20px;
+  font-size: 2.5rem;
+}
+
+.calculator-keys {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 10px;
+  padding: 20px;
+  background-color: #f1f3f6;
+}
+
+button {
+  height: 60px;
+  border-radius: 5px;
+  border: none;
+  font-size: 1.5rem;
+  color: white;
+  background-color: #333;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+button:hover {
+  background-color: #555;
+}
+
+.operator {
+  background-color: #f39c12;
+}
+
+.operator:hover {
+  background-color: #d87a0d;
+}
+
+.equal-sign {
+  height: calc(80px + 10px);
+  grid-column: span 4;
+  font-size: 30px;
+}
+
+.all-clear {
+  background-color: #e74c3c;
+}
+
+.all-clear:hover {
+  background-color: #c0392b;
+}
+
+.decimal {
+  background-color: #9b59b6;
+}
+
+.decimal:hover {
+  background-color: #8e44ad;
+}