Typescript version of calculator project

leonw3 · Aug 20, 2024 · 1394b91 · 1394b91
1 parent d9f6f2f
commit 1394b91
Show file tree

Hide file tree

Showing 8 changed files with 536 additions and 0 deletions.
diff --git a/.package-lock.json b/.package-lock.json
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!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 id="calculator">
+        <div id="display">
+            <span id="result">0</span>
+        </div>
+        <div id="buttons">
+            <div class="button-row">
+                <button class="function-button" id="all-clear-button">AC</button>
+                <button class="function-button" id="negative-button">+/-</button>
+                <button class="function-button" id="percentage-button">%</button>
+                <button class="operator-button">÷</button>
+            </div>
+            <div class="button-row">
+                <button class="number-button">7</button>
+                <button class="number-button">8</button>
+                <button class="number-button">9</button>
+                <button class="operator-button">×</button>
+            </div>
+            <div class="button-row">
+                <button class="number-button">4</button>
+                <button class="number-button">5</button>
+                <button class="number-button">6</button>
+                <button class="operator-button">–</button>
+            </div>
+            <div class="button-row">
+                <button class="number-button">1</button>
+                <button class="number-button">2</button>
+                <button class="number-button">3</button>
+                <button class="operator-button">+</button>
+            </div>
+            <div class="button-row" id="bottom-button-row">
+                <button class="number-button" id="button-0">0</button>
+                <button id="dot-button">.</button>
+                <button id="equal-button">=</button>
+            </div>
+        </div>
+    </div>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,113 @@
+"use strict";
+const result = document.querySelector("#result");
+const allClearBtn = document.querySelector("#all-clear-button");
+const numberButtons = document.querySelectorAll(".number-button");
+const operatorButtons = document.querySelectorAll(".operator-button");
+const equalButton = document.querySelector("#equal-button");
+const dotButton = document.querySelector("#dot-button");
+const negativeButton = document.querySelector("#negative-button");
+const percentageButton = document.querySelector("#percentage-button");
+let num1 = '';
+let num2 = '';
+let operatorApplied = false;
+let operator = '';
+equalButton.addEventListener("click", () => {
+    let resultValue;
+    if (num1 && !num2 && operatorApplied == false) {
+        resultValue = num1;
+    }
+    else if (num1 && num2 && operatorApplied == true) {
+        let parsedNum1 = parseFloat(num1);
+        let parsedNum2 = parseFloat(num2);
+        if (operator == '÷') {
+            if (parsedNum2 == 0) {
+                result.textContent = 'Error';
+                num1 = '';
+                num2 = '';
+                operator = '';
+                operatorApplied = false;
+                return;
+            }
+            resultValue = parsedNum1 / parsedNum2;
+        }
+        else if (operator == '×') {
+            resultValue = parsedNum1 * parsedNum2;
+        }
+        else if (operator == '–') {
+            resultValue = parsedNum1 - parsedNum2;
+        }
+        else if (operator == '+') {
+            resultValue = parsedNum1 + parsedNum2;
+        }
+    }
+    result.textContent = String(resultValue);
+    num1 = String(resultValue);
+    num2 = '';
+    operator = '';
+    operatorApplied = false;
+});
+negativeButton.addEventListener("click", () => {
+    if (num2 == '') {
+        let parsedNum1 = parseFloat(num1);
+        parsedNum1 *= -1;
+        num1 = String(parsedNum1);
+        result.textContent = num1;
+    }
+    else {
+        let parsedNum2 = parseFloat(num2);
+        parsedNum2 *= -1;
+        num2 = String(parsedNum2);
+        result.textContent = num2;
+    }
+});
+percentageButton.addEventListener("click", () => {
+    if (num2 == '') {
+        let parsedNum1 = parseFloat(num1);
+        parsedNum1 *= 0.01;
+        num1 = String(parsedNum1);
+        result.textContent = num1;
+    }
+    else {
+        let parsedNum2 = parseFloat(num2);
+        parsedNum2 *= 0.01;
+        num2 = String(parsedNum2);
+        result.textContent = num2;
+    }
+});
+allClearBtn.addEventListener("click", () => {
+    result.textContent = '0';
+    num1 = '';
+    num2 = '';
+    operator = '';
+    operatorApplied = false;
+});
+dotButton.addEventListener("click", () => {
+    if (operatorApplied == false && num1.includes('.') == false) {
+        num1 += '.';
+        result.textContent = num1;
+    }
+    else if (operatorApplied == true && num2.includes('.') == false) {
+        num2 += '.';
+        result.textContent = num2;
+    }
+});
+operatorButtons.forEach((operatorButton) => {
+    operatorButton.addEventListener("click", () => {
+        if (operatorApplied == false) {
+            operator = operatorButton.textContent || '';
+            operatorApplied = true;
+        }
+    });
+});
+numberButtons.forEach((numberButton) => {
+    numberButton.addEventListener("click", () => {
+        if (operatorApplied == false) {
+            num1 += numberButton.textContent;
+            result.textContent = num1;
+        }
+        else {
+            num2 += numberButton.textContent;
+            result.textContent = num2;
+        }
+    });
+});
diff --git a/index.ts b/index.ts
@@ -0,0 +1,123 @@
+const result = document.querySelector("#result") as HTMLElement;
+const allClearBtn = document.querySelector("#all-clear-button") as HTMLButtonElement;
+const numberButtons = document.querySelectorAll(".number-button") as NodeListOf<HTMLElement>;
+const operatorButtons = document.querySelectorAll(".operator-button") as NodeListOf<HTMLElement>;
+const equalButton = document.querySelector("#equal-button") as HTMLButtonElement;
+const dotButton = document.querySelector("#dot-button") as HTMLButtonElement;
+const negativeButton = document.querySelector("#negative-button") as HTMLButtonElement;
+const percentageButton = document.querySelector("#percentage-button") as HTMLButtonElement;
+
+let num1: string = '';
+let num2: string = '';
+let operatorApplied: boolean = false;
+let operator: string = '';
+
+equalButton.addEventListener("click", () => {
+    let resultValue;
+    if (num1 && !num2 && operatorApplied == false) {
+        resultValue = num1;
+    }
+    else if (num1 && num2 && operatorApplied == true) {
+        let parsedNum1: number = parseFloat(num1);
+        let parsedNum2: number = parseFloat(num2);
+
+        if (operator == '÷') {
+            if (parsedNum2 == 0) {
+                result.textContent = 'Error';
+                num1 = '';
+                num2 = '';
+                operator = '';
+                operatorApplied = false;
+                return;
+            }
+            resultValue = parsedNum1 / parsedNum2;
+        }
+        else if (operator == '×') {
+            resultValue = parsedNum1 * parsedNum2;
+        }
+        else if (operator == '–') {
+            resultValue = parsedNum1 - parsedNum2;
+        }
+        else if (operator == '+') {
+            resultValue = parsedNum1 + parsedNum2;
+        }
+    }
+
+    result.textContent = String(resultValue);
+    num1 = String(resultValue);
+    num2 = '';
+    operator = '';
+    operatorApplied = false;
+});
+
+negativeButton.addEventListener("click", () => {
+    if (num2 == '') {
+        let parsedNum1: number = parseFloat(num1);
+        parsedNum1 *= -1;
+        num1 = String(parsedNum1);
+        result.textContent = num1;
+    }
+    else {
+        let parsedNum2: number = parseFloat(num2);
+        parsedNum2 *= -1;
+        num2 = String(parsedNum2);
+        result.textContent = num2;
+    }
+});
+
+percentageButton.addEventListener("click", () => {
+    if (num2 == '') {
+        let parsedNum1: number = parseFloat(num1);
+        parsedNum1 *= 0.01;
+        num1 = String(parsedNum1);
+        result.textContent = num1;
+    }
+    else {
+        let parsedNum2: number = parseFloat(num2);
+        parsedNum2 *= 0.01;
+        num2 = String(parsedNum2);
+        result.textContent = num2;
+    }
+});
+
+allClearBtn.addEventListener("click", () => {
+    result.textContent = '0';
+    num1 = '';
+    num2 = '';
+    operator = '';
+    operatorApplied = false;
+});
+
+
+dotButton.addEventListener("click", () => {
+    if (operatorApplied == false && num1.includes('.') == false) {
+        num1 += '.';
+        result.textContent = num1;
+    }
+    else if (operatorApplied == true && num2.includes('.') == false) {
+        num2 += '.';
+        result.textContent = num2;
+    }
+});
+
+operatorButtons.forEach((operatorButton) => {
+    operatorButton.addEventListener("click", () => {
+        if (operatorApplied == false) {
+            operator = operatorButton.textContent || ''; 
+            operatorApplied = true;
+        }
+    });
+}); 
+
+numberButtons.forEach((numberButton) => {
+    numberButton.addEventListener("click", () => {
+        if (operatorApplied == false) {
+            num1 += numberButton.textContent
+            result.textContent = num1;
+        }
+        else {
+            num2 += numberButton.textContent
+            result.textContent = num2;
+        }
+    });
+}); 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "@types/node": "^22.4.1"
+  }
+}