Add files via upload

aakashdinkarh · Jun 16, 2021 · 4224434 · 4224434
1 parent 3f7dc03
commit 4224434
Showing 1 changed file with 150 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
+        <title>Calculator</title>
+        <style>
+            * {
+                box-sizing: border-box;
+            }
+            body {
+                font-family: Verdana, Geneva, Tahoma, sans-serif;
+            }
+            .container, .clear-container, #input-display {
+                display: flex;
+                width: 100%;
+                max-width: 400px;
+                border: 5px solid rgb(0, 134, 250);
+            }
+            .clear-container {
+                border-bottom: none;
+            }
+            .col {
+                flex: 25%;
+                display: flex;
+                flex-direction: column;
+            }
+            button {
+                height: 60px;
+                width: 100%;
+                border: 1px solid black;
+                background-color: rgb(213, 212, 212);
+                opacity: 0.8;
+                font-size: x-large;
+            }
+            button:hover {
+                opacity: 1;
+            }
+            input {
+                width: 100%;
+                max-width: 400px;
+                border: 5px double rgb(0, 134, 250);
+                padding: 10px 10px;
+                font-size: large;
+                text-align: right;
+            }
+            .operator {
+                background-color: rgb(255, 98, 0);
+                color: white;
+            }
+            #input-display {
+                display: block;
+                border-bottom: none;
+                height: 40px;
+                text-align: right;
+                font-size: large;
+                line-height: 15px;
+                padding: 10px 5px;
+            }
+            .clearBtn {
+                background-color: rgb(255, 70, 133);
+                color: white;
+            }
+            .answer {
+                background-color: green;
+                color: white;
+            }
+
+        </style>
+    </head>
+    <body>
+        <div id="input-display"></div>
+        <input type="hidden" id="input">
+
+        <div class="clear-container">
+            <button class="clearBtn" onclick="empty()">C</button>
+            <button class="clearBtn"onclick="backspcae()">&larr;</button>
+        </div>
+        <div class="container">
+            <div class="col">
+                <button class="btn" onclick="toInput('1')">1</button>
+                <button class="btn" onclick="toInput('4')">4</button>
+                <button class="btn" onclick="toInput('7')">7</button>
+                <button class="btn" onclick="toInput('.')">.</button>
+            </div>
+            <div class="col">
+                <button class="btn" onclick="toInput('2')">2</button>
+                <button class="btn" onclick="toInput('5')">5</button>
+                <button class="btn" onclick="toInput('8')">8</button>
+                <button class="btn" onclick="toInput('0')">0</button>
+            </div>
+            <div class="col">
+                <button class="btn" onclick="toInput('3')">3</button>
+                <button class="btn" onclick="toInput('6')">6</button>
+                <button class="btn" onclick="toInput('9')">9</button>
+                <button class="btn answer" onclick="calculate()">=</button>
+            </div>
+            <div class="col">
+                <button class="btn operator" onclick="operation('+')">+</button>
+                <button class="btn operator" onclick="operation('-')">-</button>
+                <button class="btn operator" onclick="operation('*')">*</button>
+                <button class="btn operator" onclick="operation('/')">/</button>
+            </div>
+        </div>
+
+        <script>
+            var input_display = document.getElementById("input-display");
+            var inputBox = document.getElementById("input");
+            var value1, value2, operator;
+            function toInput(input_value) {
+                inputBox.value += input_value;
+                input_display.innerHTML = inputBox.value;
+            }
+            function operation(real_operator) {
+                operator = real_operator;
+                value1 = inputBox.value;
+                inputBox.value += operator;
+                input_display.innerHTML = inputBox.value;
+            }
+            function empty() {
+                inputBox.value = "";
+                input_display.innerHTML = inputBox.value;
+            }
+            function backspcae() {
+                let x = inputBox.value;
+                let y = x.substring(0, x.length-1);
+
+                inputBox.value = y;
+                input_display.innerHTML = inputBox.value;
+            }
+            function calculate() {
+                let temp = inputBox.value;
+                value2 = temp.substring(value1.length + 1);
+
+                let valueFirst = parseFloat(value1);
+                let valueSecond = parseFloat(value2);
+
+                if( operator == '-' )
+                inputBox.value = valueFirst - valueSecond;
+                if(operator == '+')
+                inputBox.value = valueFirst + valueSecond;
+                if(operator == '*')
+                inputBox.value = valueFirst * valueSecond;
+                if( operator == '/')
+                inputBox.value = valueFirst / valueSecond;
+                input_display.innerHTML = inputBox.value;
+            }
+
+        </script>
+    </body>
+</html>