init

JaveriyaSaleem · Aug 11, 2024 · a78e5c3 · a78e5c3
commit a78e5c3
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,57 @@
+
+function element(inputValue){
+var inputGet = document.getElementById("input").value
+inputGet +=  inputValue.innerText;
+document.getElementById("input").value = inputGet;
+}
+// RESULT 
+function result(equal){
+    var inputGet = document.getElementById("input")
+    inputGet.value = eval(inputGet.value)
+}
+
+
+
+// FOR AC 
+function clearOp(){
+    var inputGet = document.getElementById("input")
+    inputGet.value = ""
+}
+// FOR DELETE 
+function deleteOp(){
+    var inputGet = document.getElementById("input")
+    inputGet.value =inputGet.value.slice(0,-1);
+}
+// FOR NOT LETTING ANY OPERATOR BEING CLICKED MORE THAN ONCE 
+var lastOperator = '';
+
+function operator(key) {
+    var inputField = document.getElementById("input");
+    var inputValue = inputField.value;
+    var newOperator = key.innerText; //OPERATOR VALUE 
+
+    // Check if the last character is an operator
+    if (inputValue.length > 0) {
+        var lastChar = inputValue.charAt(inputValue.length - 1);
+
+        // valid operators
+        var validOperators = ['+', '-', '*', '/', '%'];
+
+        if (validOperators.includes(lastChar)) {
+            // Replace the last operator with the new one
+            inputField.value = inputValue.slice(0, -1) + newOperator;
+            console.log("replace"+inputField.value)
+        } else if (validOperators.includes(newOperator)) {
+            // Append the new operator if the last character is not an operator
+            inputField.value += newOperator;
+        }
+
+        // Update the lastOperator to the new one
+        lastOperator = newOperator;
+        console.log(lastOperator)
+    } else if (validOperators.includes(newOperator)) {
+        // If input is empty and an operator is clicked, do nothing or handle as needed
+        // For example, you could initialize the input with the operator if needed
+        inputField.value = newOperator;
+    }
+}
diff --git a/bootstrap.css b/bootstrap.css
diff --git a/bootstrap.js b/bootstrap.js
diff --git a/index.html b/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="bootstrap.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+        integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+
+<body>
+
+
+    <div class="container mt-5">
+        <div class="row">
+            <div class="col-12 col-md-4 mx-auto">
+                <div class="border p-3">
+                    <!-- Calculator display -->
+                    <div class="">
+                        <input type="text" name="input" id="input" class="w-100 py-3 mb-3">
+                    </div>
+
+                    <!-- Calculator buttons -->
+                    <div class="row">
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="deleteOp(this)">DEL</button></div>
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="clearOp(this)">AC</button></div>
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="operator(this)">%</button></div>
+                        <div class="col-3"><button class="btn btn-danger w-100" onclick="operator(this)">/</button></div>
+                    </div>
+                    <div class="row">
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="element(this)"onclick="element(this)"> 7 </button></div>
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="element(this)">8</button></div>
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="element(this)">9</button></div>
+                        <div class="col-3"><button class="btn btn-danger w-100" onclick="operator(this)">*</button></div>
+                    </div>
+                    <div class="row">
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="element(this)">4</button></div>
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="element(this)">5</button></div>
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="element(this)">6</button></div>
+                        <div class="col-3"><button class="btn btn-danger w-100" onclick="operator(this)">-</button></div>
+                    </div>
+                    <div class="row">
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="element(this)">1</button></div>
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="element(this)">2</button></div>
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="element(this)">3</button></div>
+                        <div class="col-3"><button class="btn btn-danger w-100" onclick="operator(this)">+</button></div>
+                    </div>
+                    <div class="row">
+                        <div class="col-3"><button class="btn btn-primary w-100" onclick="element(this)">0</button></div>
+                        <div class="col-3"><button class="btn btn-primary w-100"onclick="element(this)">0</button></div>
+                        <div class="col-3"><button class="btn btn-primary w-100"onclick="element(this)">.</button></div>
+                        <div class="col-3"><button class="btn btn-danger w-100"onclick="result(this)">=</button></div>
+                    </div>
+                    <!-- Add more rows for other buttons -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+
+    <script src="app.js"></script>
+    <script src="bootstrap.js"></script>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,19 @@
+.dark-purple{
+    background-color: #4C4D6B;
+}
+.light-purple{
+    background-color: #8E83CF;
+}
+.medium-purple{
+    background-color: #d8d3f1;
+}
+.dark-fonts{
+    color: #4C4D6B;
+}
+button{
+    width: 60px;
+    border: hidden;
+    padding: 19px 15px !important;
+    border-radius: 90px !important;
+
+}