Add files via upload

stark-AI-ML · Oct 5, 2024 · 7931e4d · 7931e4d
1 parent e6d36f5
commit 7931e4d
Show file tree

Hide file tree

Showing 5 changed files with 261 additions and 0 deletions.
diff --git a/calculator.html b/calculator.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Calculator</title>
+    <link rel="stylesheet" href="./style/button.css">
+    <link rel="stylesheet" href="./style/display.css">
+    <link rel="stylesheet" href="./style/calc.css">
+    <link rel="stylesheet" href="./style/body.css">
+</head>
+
+<body>
+
+
+    <div class="calculator">
+        <input type="text" id="display" readonly>
+        <div class=buttons>
+
+            <button onclick="clearDisplay()">C</button>
+            <button onclick="appendToDisplay('+')">+</button>
+            <button onclick="appendToDisplay('-')">-</button>
+            <button onclick="appendToDisplay('*')">*</button>
+
+            <button onclick="appendToDisplay('1')">1</button>
+            <button onclick="appendToDisplay('2')">2</button>
+            <button onclick="appendToDisplay('3')">3</button>
+            <button onclick="appendToDisplay('/')">/</button>
+            <button onclick="appendToDisplay('4')">4</button>
+            <button onclick="appendToDisplay('5')">5</button>
+            <button onclick="appendToDisplay('6')">6</button>
+            <button onclick="appendToDisplay('!')">!</button>
+            <button onclick="appendToDisplay('7')">7</button>
+            <button onclick="appendToDisplay('8')">8</button>
+            <button onclick="appendToDisplay('9')">9</button>
+            <button onclick="appendToDisplay('0')">0</button>
+
+
+            <button onclick="result()">=</button>
+
+        </div>
+
+
+    </div>
+
+    </div>
+
+
+
+
+    <script>
+        const arr = [0, 0];
+
+        function appendToDisplay(value) {
+            displayValue += value;
+            document.getElementById('display').value = displayValue;
+        }
+
+        function clearDisplay() {
+            displayValue = '';
+            document.getElementById('display').value = displayValue;
+        }
+        function operators(value) {
+            displayValue += '+';
+            document.getElementById('display').value = displayValue;
+        }
+        function result() {
+            const result = result_1(displayValue)
+            document.getElementById('display').value = result;
+            result = toString(displayValue);
+        }
+
+        let displayValue = '';
+
+
+
+
+
+
+
+        function result_1(displayValue) {
+
+
+            count = 0;
+
+            str = "";
+
+            for (i = 0; i < displayValue.length; i++) {
+
+                if (displayValue[i] == '!') {
+                    arr[0] = Number(str);
+                    return result_2('!');
+                }
+                if (displayValue[i] == '+' || displayValue[i] == '-' || displayValue[i] == '*' || displayValue[i] == '/' || i == displayValue.length - 1) {
+
+                    if (i == displayValue.length - 1)
+                        str += displayValue[i];
+
+                    if (count < 1) {
+                        arr[0] = Number(str);
+                        sign = displayValue[i];
+                    }
+
+                    else {
+                        arr[1] = Number(str);
+
+                        arr[0] = result_2(sign);
+                        sign = displayValue[i];
+                    }
+                    str = "";
+                    count++;
+                }
+
+                else {
+                    str += displayValue[i];
+                }
+            }
+            return arr[0];
+        }
+
+        function result_2(cases) {
+
+            switch (cases) {
+                case '+':
+                    {
+                        return arr[0] + arr[1];
+                    }
+                case '*':
+                    {
+                        return arr[0] * arr[1];
+                    }
+                case '-':
+                    {
+                        return arr[0] - arr[1];
+                    }
+                case '/':
+                    {
+                        return arr[0] / arr[1]
+                    }
+                case '!':
+                    {
+                        let fact = 1;
+                        while (arr[0] > 1) {
+
+                            fact *= arr[0];
+                            arr[0] = arr[0] - 1;
+                        }
+
+                        return fact
+                    }
+
+            }
+        }
+
+
+        // var result = result_1(displayValue);
+    </script>
+</body>
+
+</html>
diff --git a/style/body.css b/style/body.css
@@ -0,0 +1,8 @@
+body {
+    height: calc(100vh);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #021b44;
+
+}
diff --git a/style/button.css b/style/button.css
@@ -0,0 +1,49 @@
+.buttons {
+    /* height: 60%;
+    width: 80%;
+
+    background-color: red;
+    display: flex;
+    align-items: center;*/
+
+    margin-bottom: 10%;
+    height: 60%;
+    width: 80%;
+    display: flex;
+    flex-wrap: wrap;
+    /* background-color: rgb(146, 12, 224); */
+    border-radius: 5%;
+    align-items: center;
+    justify-content: space-evenly;
+    padding: 1px;
+
+
+}
+
+
+button {
+    color: rgb(28, 52, 184);
+    font-style: bold;
+    height: 17%;
+    width: 23%;
+    border: 2px solid black;
+    margin: 2px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+    font-size: 1em;
+    font-weight: 400;
+
+}
+
+.buttons :hover {
+    transform: scale(1.05);
+    color: black;
+    background-color: rgb(35, 35, 77);
+    font-size: 1.4em;
+    box-shadow: 5px 5px 5px;
+    border-color: transparent;
+
+
+}
diff --git a/style/calc.css b/style/calc.css
@@ -0,0 +1,28 @@
+/* :root {
+    background-color: rgb(0, 179, 255);
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center; 
+}  */
+
+.calculator {
+    width: 60vmin;
+    height: 60vmin;
+    /* background-color: rgb(4, 27, 80); */
+    /* background-color: rgba(255, 255, 255, 0.3); */
+    box-shadow: 12px 12px 12px;
+
+    backdrop-filter: blur(10px);
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 15px;
+    padding: 10px 10px;
+    position: relative;
+}
+
+/*  */
diff --git a/style/display.css b/style/display.css
@@ -0,0 +1,14 @@
+#display {
+    height: 10%;
+    width: 80%;
+    background-color: black;
+    padding: 2px;
+    font-size: 120%;
+    /* direction:rtl; */
+    margin-top: 15px;
+    border: 3px solid black;
+    border-radius: 15px;
+    box-shadow: 12px 12px 12px black;
+    color: aliceblue;
+
+}