thinkswell · bhpranit08 · Apr 14, 2025 · Apr 14, 2025
diff --git a/Calculator/bhpranit08/README.md b/Calculator/bhpranit08/README.md
@@ -0,0 +1,14 @@
+# Calculator
+ - A simple calculator using HTML, CSS, and JS <br>
+ - It can calculate some of the basic operations like addition, subtraction, multiplication, and division. <br>
+ - It has validaton to not let the user enter more than one decimal point in one number. <br>
+ - It has validaton to not let the user enter symbols (+, &divide;, &minus;, &times;) right after one another. <br>
+
+ ## Built using:
+
+ - HTML
+ - CSS
+ - Javascript 
+
+ ## Screenshot
+ ![Screenshot](images/screenshot.png)
diff --git a/Calculator/bhpranit08/images/screenshot.png b/Calculator/bhpranit08/images/screenshot.png
diff --git a/Calculator/bhpranit08/index.html b/Calculator/bhpranit08/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <title>Calculator</title>
+</head>
+<body>
+    <div class="calculator">
+        <h1>The Calculator</h1>
+        <input type="text" disabled class="input-box" id="input-el">
+        <input type="text" hidden class="input-box" id="real-input-el">
+        <div class="row">
+            <button class="mega-btn" onclick="clearScreen()">AC</button>
+            <button class="mega-btn" onclick="deleteEl()">DEL</button>
+        </div>
+        <div class="row">
+            <button onclick="addItem('7')" class="num-btn">7</button>
+            <button onclick="addItem('8')" class="num-btn">8</button>
+            <button onclick="addItem('9')" class="num-btn">9</button>
+            <button onclick="addItem('+')" class="action-btn">+</button>
+        </div>
+        <div class="row">
+            <button onclick="addItem('4')" class="num-btn">4</button>
+            <button onclick="addItem('5')" class="num-btn">5</button>
+            <button onclick="addItem('6')" class="num-btn">6</button>
+            <button onclick="addItem('-')" class="action-btn">&minus;</button>
+        </div>
+        <div class="row">
+            <button onclick="addItem('1')" class="num-btn">1</button>
+            <button onclick="addItem('2')" class="num-btn">2</button>
+            <button onclick="addItem('3')" class="num-btn">3</button>
+            <button onclick="addItem('*')" class="action-btn">&times;</button>
+        </div>
+        <div class="row">
+            <button onclick="addItem('0')" class="num-btn">0</button>
+            <button onclick="addItem('.')" class="num-btn">.</button>
+            <button onclick="addItem('/')" class="action-btn">&divide;</button>
+            <button onclick="equal()" class="action-btn">=</button>
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
diff --git a/Calculator/bhpranit08/script.js b/Calculator/bhpranit08/script.js
@@ -0,0 +1,61 @@
+const addItem = (item) => {
+    const inputEl = document.getElementById("input-el")
+    const realInput = document.getElementById("real-input-el")
+
+    const specials = ["*", "/", "-", "+"]
+    const currentValue = inputEl.value
+
+    const replacements = {
+        "*": "×",
+        "-": "−", 
+        "/": "÷", 
+        "+": "+",
+        "+": "+",
+    }
+
+    if(specials.includes(item)) {
+        inputEl.value += replacements[item]
+        realInput.value += item
+        return
+    }
+
+    if (item === '.') {
+        const numberSegments = currentValue.split(/[\*\+\-\/]/)
+        const currentSegment = numberSegments.at(-1)
+        if (currentSegment.includes('.')) {
+            return; 
+        }
+    }
+
+    const lastChar = currentValue.slice(-1)
+    if (specials.includes(item) && specials.includes(lastChar)) {
+        return
+    }
+
+    realInput.value += item
+    inputEl.value += item
+}
+
+const clearScreen = () => {
+    document.getElementById("input-el").value = ""
+    document.getElementById("real-input-el").value = ""
+}
+
+const deleteEl = () => {
+    const inputEl = document.getElementById("input-el")
+    const realInput = document.getElementById("real-input-el")
+    inputEl.value = inputEl.value.slice(0, -1)
+    realInput.value = realInput.value.slice(0, -1)
+}
+
+const equal = () => {
+    const realInput = document.getElementById("real-input-el")
+    const inputEl = document.getElementById("input-el")
+    try {
+        realInput.value = eval(realInput.value)
+        inputEl.value = realInput.value
+    } catch (err) {
+        realInput.value = "Error"
+        inputEl.value = "Error"
+    }
+}
diff --git a/Calculator/bhpranit08/style.css b/Calculator/bhpranit08/style.css
@@ -0,0 +1,102 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Roboto', sans-serif;
+}
+
+.calculator {
+
+    min-width: 20%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+    gap: 2px;
+}
+
+input {
+    width: 100%;
+    border: 2px solid rgb(52, 216, 52);
+    border-radius: 0.3rem;
+    background-color: rgba(52, 216, 52, 0.527);
+    height: 7%;
+    font-size: 2rem;
+    text-align: right;
+    padding-right: 4px;
+    color: black;
+}
+
+button {
+    width: 100%;
+    height: 3rem;
+    transition: transform 0.1s ease-in-out;
+}
+
+button:active {
+    transform: scale(0.9);
+}
+
+.num-btn {
+    background-color: rgba(163, 88, 218, 0.527);
+    border: 2px solid rgb(162, 88, 214);
+    color: rgb(162, 88, 214);
+    border-radius: 0.14rem;
+    font-size: 1.4rem;
+}
+
+.num-btn:active {
+    background-color: rgb(81, 41, 110);
+    border: 2px solid rgb(81, 41, 110);
+    color: white;
+}
+
+.action-btn {
+    background-color: rgba(51, 104, 173, 0.527);
+    border: 2px solid rgb(51, 104, 173);
+    color: rgb(51, 104, 173);
+    border-radius: 0.15rem;
+    font-size: 1.5rem;
+}
+
+.action-btn:active {
+    border: 2px solid rgb(35, 74, 124);
+    background-color: rgb(35, 74, 124);
+    color: white;
+}
+
+.mega-btn {
+    background-color: rgba(233, 171, 55, 0.527);
+    border: 2px solid rgb(233, 171, 55);
+    border-radius: 0.15rem;
+    font-size: 1rem;
+    color: black;
+}
+
+.mega-btn:active {
+    background-color: rgb(233, 171, 55);
+    color: black;
+}