Calculator program

Arunkumar1712 · Jan 13, 2024 · 7828036 · 7828036
1 parent a1d4e29
commit 7828036
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 0 deletions.
diff --git a/day15 Task/Calculator/index.html b/day15 Task/Calculator/index.html
@@ -0,0 +1,49 @@
+<!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="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
+</head>
+
+<body>
+    <h1 id="title">Calculator</h1>
+    <div id="calculator">
+        <input class="display" id="result" readonly>
+        <div id="keys">
+            <button onclick="clearDisplay()" class="oparator-btn" id="clear">C</button>
+            <button onclick="appendToDisplay('%')" class="oparator-btn">%</button>
+            <!-- <button onclick="cl()" id="cl" class="oparator-btn"><i class="bi bi-backspace"></i></button> -->
+            <button onclick="appendToDisplay('+')" class="oparator-btn" id="add">+</button>
+            <button onclick="appendToDisplay('*')" class="oparator-btn">*</button>
+
+            <button onclick="appendToDisplay('7')" id="7">7</button>
+            <button onclick="appendToDisplay('8')" id="8">8</button>
+            <button onclick="appendToDisplay('9')" id="9">9</button>
+            <button onclick="appendToDisplay('-')" class="oparator-btn" id="subtract">-</button>
+
+            <button onclick="appendToDisplay('4')" id="4">4</button>
+            <button onclick="appendToDisplay('5')" id="5">5</button>
+            <button onclick="appendToDisplay('6')" id="6">6</button>
+            <button onclick="appendToDisplay('1')" id="1">1</button>
+            <button onclick="appendToDisplay('2')" id="2">2</button>
+            <button onclick="appendToDisplay('3')" id="3">3</button>
+            <button onclick="appendToDisplay('0')" id="0">0</button>
+            <button onclick="calculate()" id="equal">=</button>
+
+            <button onclick="appendToDisplay('00')" id="00">00</button>
+            <button onclick="appendToDisplay('.')">.</button>
+        </div>
+    </div>
+
+
+
+    <script src="./script.js"></script>
+    <script src="https://app.zenclass.in/sheets/v1/js/zen/suite/bundle.js"></script>
+    <p id="description">In this task I created 18 buttons and it takes input from the user and performs calculations</p>
+</body>
+
+</html>
diff --git a/day15 Task/Calculator/script.js b/day15 Task/Calculator/script.js
@@ -0,0 +1,23 @@
+const display=document.getElementById("display");
+function appendToDisplay(input){
+  result.value += input;
+}
+function clearDisplay(){
+    result.value="";
+}
+function cl(){
+    var an=input.length();
+    var pow=0;
+    for(var i=0;i<an-2;i++){
+       pow+=10;
+    }
+    result.value += (input%(pow));
+}
+function calculate(){
+    try{
+        result.value=eval(result.value);
+    }
+    catch(error){
+        result.value='Error';   
+    }
+}
diff --git a/day15 Task/Calculator/style.css b/day15 Task/Calculator/style.css
@@ -0,0 +1,66 @@
+@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css");
+#title{
+    margin-top: 50px;
+    justify-content: center;
+    color: grey;
+}
+/* body{
+    margin-top: 20px;
+    display:contents;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    height:100vh;
+    background-color: hsl(0, 0%, 95%);
+} */
+#calculator{
+    margin-left:20%;
+    font-family: Arial, Helvetica, sans-serif;
+    background-color: hsl(0, 0%, 15%);
+    border-radius: 15px;
+    max-width: 500px;
+    overflow:hidden;
+}
+.display{
+    width: 100%;
+    padding: 20px;
+    font-size: 3rem;
+    text-align: left;
+    border: none;
+    color: white;
+    background-color:hsl(0, 0%, 75%) ;
+
+}
+#keys{
+    margin-left: 2px;
+    display:grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap:5px;
+    padding: 10px;
+}
+button{
+    width: 80px;
+    height: 80px;;
+    border-radius: 50px;
+    border: none;
+    background-color: grey;
+    color: white;
+    font-size: 3rem;
+    font-weight: bold;
+    cursor: pointer;
+}
+#equal{
+background-color:orange;
+}
+button:hover{
+    background-color: hsl(0, 0%, 65%);
+}
+.oparator-btn{
+    background-color:rgb(92, 90, 90);
+}
+.oparator-btn:hover{
+    background-color:  rgb(224, 196, 144);
+}
+.oparator-btn:active{
+    background-color:  rgb(224, 196, 144);
+}