Added files

AddisionS · Sep 24, 2024 · 2dfb3c2 · 2dfb3c2
1 parent 280c2cf
commit 2dfb3c2
Show file tree

Hide file tree

Showing 4 changed files with 252 additions and 0 deletions.
diff --git a/favicon.png b/favicon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calculator App</title>
+    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="body">
+        <input class="screen" readonly>
+        <div class="buttonHolder">
+            <button class="btn normal-btn" onclick="showDisplay('7')">7</button>
+            <button class="btn normal-btn" onclick="showDisplay('8')">8</button>
+            <button class="btn normal-btn" onclick="showDisplay('9')">9</button>
+            <button class="btn operations" onclick="showDisplay('/')">/</button>
+            <button class="btn normal-btn" onclick="showDisplay('4')">4</button>
+            <button class="btn normal-btn" onclick="showDisplay('5')">5</button>
+            <button class="btn normal-btn" onclick="showDisplay('6')">6</button>
+            <button class="btn operations" onclick="showDisplay('*')">*</button>
+            <button class="btn normal-btn" onclick="showDisplay('1')">1</button>
+            <button class="btn normal-btn" onclick="showDisplay('2')">2</button>
+            <button class="btn normal-btn" onclick="showDisplay('3')">3</button>
+            <button class="btn operations" onclick="showDisplay('-')">-</button>
+            <button class="btn normal-btn" onclick="showDisplay('0')">0</button>
+            <button class="btn normal-btn" onclick="showDisplay('.')">.</button>
+            <button class="btn normal-btn" onclick="calculate()">=</button>
+            <button class="btn operations" onclick="showDisplay('+')">+</button>
+            <button class="btn normal-btn" onclick="showDisplay('(')">(</button>
+            <button class="btn normal-btn" onclick="showDisplay(')')">)</button>            
+            <button class="btn normal-btn" onclick="backspace()">⇐</button>
+            <button class="btn operations" onclick="wipe()">C</button>
+        </div>
+    </div>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,132 @@
+const screen = document.querySelector(".screen");
+
+let troll = 0;
+let result = 0; 
+let countLP = 0;
+let countRP = 0;
+let lastChar = screen.value.slice(-1);
+
+function backspace() {
+
+    if (troll || result) {
+        screen.value = "";
+        troll = 0;
+        result = 0;
+    }
+
+    let removedChar = screen.value.slice(-1);
+
+    screen.value = screen.value.slice(0, -1);
+
+    if (removedChar === ')') {
+        countRP -= 1;
+    } else if (removedChar === '(') {
+        countLP -= 1;
+    }
+
+    lastChar = screen.value.slice(-1);
+}
+
+function getLastNumber(expression) {
+    const numbers = expression.split(/[\+\-\*\/]/);
+    return numbers[numbers.length - 1]; 
+}
+
+const operators = ['+','-','*','/'];
+const numbers = ['0','1','2','3','4','5','6','7','8','9','.'];
+const forbiddenFromFirst = ['/','*',')'];
+
+function isLastCharNum() {
+    if (numbers.includes(lastChar)) {
+        return 1;
+    } else {
+        return 0;
+    }
+}
+
+function isLastCharOperator() {
+    if (operators.includes(lastChar)) {
+        return 1;
+    } else {
+        return 0;
+    }
+}
+
+function showDisplay(input) {
+
+    lastChar = screen.value.slice(-1);
+
+    if (troll || result) {
+        screen.value = "";
+        troll = 0;
+        result = 0;
+    }
+
+    if (input === '.') {
+        const lastNumber = getLastNumber(screen.value);
+        if (lastNumber.includes('.')) {
+            return; 
+        }
+    }
+
+    if (screen.value.length === 0 && forbiddenFromFirst.includes(input)) {
+        return;
+    }
+
+    if (operators.includes(input) && isLastCharOperator()) {
+        return;
+    }
+
+    if (input === '(') {
+        if (isLastCharNum()) {
+            return;
+        }
+        countLP += 1
+    }
+
+    if (input === ')') {
+        if (countLP === 0) {
+            return;
+        }
+        countRP += 1
+    }
+
+    if (numbers.includes(input) && lastChar === ')') {
+        return;
+    }
+
+    screen.value += input;
+}
+
+function wipe() {
+    screen.value = "";
+    troll = 0;
+    result = 0; 
+    countLP = 0;
+    countRP = 0;
+}
+
+function calculate() {
+    try{
+        if (screen.value.trim() === "") {
+            screen.value = "Enter an expression"; 
+            return;
+        }
+        if (countLP === countRP) {
+            screen.value = eval(screen.value);
+            result = 1;
+            countLP = 0;
+            countRP = 0;
+        } else {
+            screen.value = "Close all parenthesis"
+            troll = 1;
+            countLP = 0;
+            countRP = 0;
+        }
+    }catch(e) {
+        screen.value = "Quit Trolling";
+        troll = 1;
+        countLP = 0;
+        countRP = 0;
+    }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=Playwrite+DE+Grund:wght@100..400&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: "Playwrite DE Grund", cursive;
+}
+
+.body {
+    max-width: 500px;
+    overflow: hidden;
+    margin-top: 80px;
+    border-radius: 20px;
+    background-color: rgba(0, 0, 0, 0.782);
+    padding: 15px;
+}
+
+.screen {
+    width: 100%;
+    padding: 20px;
+    border: none;
+    border-radius: 20px;
+    text-align: right;
+    font-family: "Playwrite DE Grund", cursive;
+    font-weight: bold;
+    font-size: 1.5rem;
+    background-color: rgba(0, 0, 0, 0.236);
+    color: white;
+    outline: none;
+
+}
+
+.btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    width: 75px;
+    height: 75px;
+    border-radius: 50px;
+    border: none;
+    font-family: "Playwrite DE Grund", cursive;
+    font-weight: bold;
+    font-size: 1rem;
+    transition: transform 0.2s ease-in-out;
+}
+
+.btn:hover{
+    transform: scale(1.1);
+}
+
+.buttonHolder {
+    padding: 10px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+}
+
+.normal-btn {
+    background-color: rgb(181, 181, 181);
+}
+
+.normal-btn:active {
+    background-color: rgba(181, 181, 181, 0.637);
+
+}
+
+.operations {
+    background-color: rgb(0, 213, 255);
+}
+
+.operations:active {
+    background-color: rgb(0, 213, 255, 0.637);
+}
+