Add files via upload

adityalaxkar123 · Jul 13, 2024 · 91e1716 · 91e1716
1 parent 4377049
commit 91e1716
Show file tree

Hide file tree

Showing 4 changed files with 248 additions and 0 deletions.
diff --git a/calculator/index.html b/calculator/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/calculator/style.css">
+    <link rel="stylesheet" href="/calculator/responsive.css">
+    <title>calculator</title>
+</head>
+<body>
+    <div id="size"><header><h1 id="heading">calculator</h1></header>
+
+    <main>
+        <div id="calculator">
+            <div id="display">
+                <input id="displaytext" type="text" >
+            </div>
+
+            <div id="button"> 
+        <div id="row1">   
+                          <div id="btn1"><button id="btn">AC</button></div>
+                          <div id="btn1"><button id="btn">+</button></div>
+                          <div id="btn1"><button id="btn">-</button></div>
+                          <div id="btn1"><button id="btn">*</button></div>
+
+        </div>        
+
+        <div id="row2">   
+
+                           <div id="btn1"><button id="btn">7</button></div>
+                           <div id="btn1"><button id="btn">8</button></div>
+                           <div id="btn1"><button id="btn">9</button></div>
+                            <div id="btn1"><button id="btn">/</button></div>
+        </div>            
+
+        <div id="row3">
+
+                            <div id="btn1"><button id="btn">6</button></div>
+                            <div id="btn1"><button id="btn">5</button></div>
+                            <div id="btn1"><button id="btn">4</button></div>
+                            <div id="btn2"><button id="btn" style="background-color: #FFCC00;">=</button></div>
+        </div>    
+
+        <div id="row4"> 
+            <div id="btn1"><button id="btn">1</button></div>      
+            <div id="btn1"><button id="btn">2</button></div>      
+            <div id="btn1"><button id="btn">3</button></div>      
+            <div id="btn1"><button id="btn">0</button></div>      
+        </div>       
+
+
+            </div>
+
+        </div>
+    </main></div>
+    <footer></footer>
+    <script src="/calculator/script.js">
+
+    </script>
+</body>
+</html>
diff --git a/calculator/responsive.css b/calculator/responsive.css
@@ -0,0 +1,67 @@
+/*300px to 500px*/
+@media (min-width:300px) and (max-width:500px) {
+/*main*/
+#size{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+#calculator{
+    display: inline-block;
+    position: relative;
+    margin-left: 7px;
+    border: 2px solid black;
+    border-radius: 20px;
+    width: 280px;
+    height: 350px;
+    background-color: black;
+}
+#display{
+    display: inline-block;
+    position: relative;
+    margin-left: 0px;
+    width: 100%;
+    background-color: gray;
+   border-top-left-radius: 16px;
+   border-top-right-radius: 16px;
+}
+#displaytext{
+    margin-top: 20px;
+    height: 70px;
+    width: 200px;
+    border-radius: 20px;
+    font-size: 20px;
+    margin-left: 40px;
+    margin-bottom: 20px;
+}
+#btn{
+height: 52px;
+width: 60px;
+font-size: 20px;
+cursor: pointer;
+opacity: .80;
+border-radius: 20px;
+background-color: white;
+margin-bottom: 3px;
+}
+#btn:hover{
+    height: 52px;
+    width: 60px;
+    font-size: 20px;
+    opacity: .90;
+    cursor: pointer;
+    border-radius: 20px;
+    background-color: white;
+    margin-bottom: 3px;
+}
+#btn:active{
+    height: 52px;
+    width: 60px;
+    font-size: 20px;
+    opacity: .80;
+    cursor: pointer;
+    border-radius: 20px;
+    background-color: white;
+    margin-bottom: 3px;
+}
+}
diff --git a/calculator/script.js b/calculator/script.js
@@ -0,0 +1,19 @@
+let string ="";
+let buttons =document.querySelectorAll("button");
+Array.from(buttons).forEach((btn) => {
+    btn.addEventListener("click",(e)=>{
+        if (e.target.innerHTML == '=') {
+            string = eval(string);
+            document.querySelector("input").value = string;
+        }
+        else if(e.target.innerHTML == "AC"){
+          string ="";
+          document.querySelector("input").value = string;
+        }
+        else{console.log(e.target);
+        string =string +e.target.innerHTML;
+        document.querySelector("input").value = string;
+        }
+    })
+});
+
diff --git a/calculator/style.css b/calculator/style.css
@@ -0,0 +1,101 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quicksand:[email protected]&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+}
+/*header*/
+
+#heading{
+    margin-top: 20px;
+    text-align: center;
+    margin-bottom: 20px;
+    font-family: "Quicksand", sans-serif;
+    font-weight: 500;
+}
+#size{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+/*main*/
+#calculator{
+    display: inline-block;
+    position: relative;
+    border: 2px solid black;
+    border-radius: 20px;
+    width: 450px;
+    height: 420px;
+  background-color: black;
+}
+#display{
+    display: inline-block;
+    position: relative;
+    margin-left: 0px;
+    width: 100%;
+    background-color: gray;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+#displaytext{
+    margin-top: 20px;
+    height: 70px;
+    width: 350px;
+    border-radius: 20pxz;
+    font-size: 30px;
+    margin-left: 50px;
+    margin-bottom: 20px;
+}
+#btn{
+height: 70px;
+width: 100px;
+font-size: 20px;
+cursor: pointer;
+opacity: .80;
+border-radius: 20px;
+background-color: white;
+}
+#btn:hover{
+    height: 70px;
+    width: 100px;
+    font-size: 20px;
+    opacity: .90;
+    cursor: pointer;
+    border-radius: 20px;
+    background-color: white;
+}
+#btn:active{
+    height: 70px;
+    width: 100px;
+    font-size: 20px;
+    opacity: .80;
+    cursor: pointer;
+    border-radius: 20px;
+    background-color: white;
+}
+#button{
+    padding-top: 20px;
+}
+#row1{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+#row2{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+#row3{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+#row4{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.button{
+    font-size: 20px;
+}