AddedNewCalculator

Designed New Calculator
Sulagna-Dutta-Roy · May 17, 2024 · 871997f · 871997f
1 parent f957f41
commit 871997f
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 154 deletions.
diff --git a/Calculator/index.html b/Calculator/index.html
diff --git a/Calculator/scripts/script.js b/Calculator/scripts/script.js
diff --git a/Calculator/src/calci.css b/Calculator/src/calci.css
@@ -0,0 +1,68 @@
+body{
+    background-color: aliceblue;
+}
+*{
+    margin:0;
+    padding:0;
+    box-sizing:border-box;
+    background-color: #ecf0f3;
+    font-family: sans-serif;
+    outline:none;
+}
+.container{
+    height:100vh;
+    display:flex;
+    justify-content:center;
+    align-items:center;
+}
+.calci{
+    padding:15px;
+    border-radius:30px;
+    display:grid;
+    grid-template-columns: repeat(4,68px);
+    box-shadow: inset 5px 5px 12px #ffffff,
+                      5px 5px 12px rgba(0,0,0,.16);
+}
+input{
+    grid-column:span 4 ;
+    height:60px;
+    width:250px;
+    background-color: #ecf0f3;
+    box-shadow: inset -5px -5px 12px #ffffff,
+                      5px 5px 12px rgba(0,0,0,.16);
+    border:none;
+    border-radius:30px;
+    font-size: 50px;
+    text-align: end;
+    margin:auto;
+    margin-top:40px;
+    margin-bottom:30px;
+    padding:20px;
+    color:rgba(70,70,70);
+
+}
+input:hover{
+    background-color: aqua;
+}
+button{
+    height:48px;
+    width:48px;
+    background-color: #ecf0f3;
+    box-shadow: inset -5px -5px 12px #ffffff,
+                      5px 5px 12px rgba(0,0,0,.16);
+    border:none;
+    border-radius:30px;
+    margin:8px;
+    font-size: 15px;
+}
+.equal{
+    width:115px;
+    border-radius: 40px;
+    background-color:#ecf0f3;
+    box-shadow: inset -5px -5px 12px #ffffff,
+                      5px 5px 12px rgba(0,0,0,.16);
+}
+button:hover{
+    background-color:aqua;
+}
+
diff --git a/Calculator/src/index.html b/Calculator/src/index.html
@@ -0,0 +1,56 @@
+<!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="calci.css">
+</head>
+<body>
+    <div class="container">
+        <div class="calci">
+            <input type="text" placeholder="0" id="output">
+            <button onclick="Clear()">C</button>
+            <button onclick="del()">DEL</button>
+            <button onclick="display('%')">%</button>
+            <button onclick="display('/')">/</button>
+            <button onclick="display('7')">7</button>
+            <button onclick="display('8')">8</button>
+            <button onclick="display('9')">9</button>
+            <button onclick="display('+')">+</button>
+            <button onclick="display('4')">4</button>
+            <button onclick="display('5')">5</button>
+            <button onclick="display('6')">6</button>
+            <button onclick="display('-')">-</button>
+            <button onclick="display('1')">1</button>
+            <button onclick="display('2')">2</button>
+            <button onclick="display('3')">3</button>
+            <button onclick="display('*')">*</button>
+            <button onclick="display('0')">0</button>
+            <button onclick="display('00')">00</button>
+            <button onclick="caliculate('=')" class="equal">=</button>
+
+        </div>
+    </div>
+    <script>
+        let output=document.getElementById('output');
+        function display(num){
+            output.value+=num;
+        }
+        function caliculate(){
+            try{
+                output.value=eval(output.value);
+            }
+            catch(err){
+                alert('Invalid');
+            }
+        }
+        function Clear(){
+            output.value="";
+        }
+        function del(){
+            output.value=output.value.slice(0,-1);
+        }
+    </script>
+</body>
+</html>
diff --git a/Calculator/src/style.css b/Calculator/src/style.css