diff --git a/App.js b/App.js new file mode 100644 index 0000000..45d7b0d --- /dev/null +++ b/App.js @@ -0,0 +1,18 @@ +let fn1=(num)=>{ + document.getElementById("output").value+=num; +} + +let equalsf=()=>{ + let data=document.getElementById("output").value; + document.getElementById("output").value=eval(data); +} + +let clrscr=()=>{ + document.querySelector("input").value=""; +} + +let bckspc=()=>{ + let val=document.querySelector("input").value; + + document.querySelector("input").value=val.substring(0,val.length-1); +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..04c99ea --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + + Calculator App + + + +
+
+
+ +
+
+
C
+
←
+
÷
+
x
+
7
+
8
+
9
+
-
+
4
+
5
+
6
+
+
+
1
+
2
+
3
+
%
+
0
+
00
+
.
+
=
+
+
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..62d04e8 --- /dev/null +++ b/style.css @@ -0,0 +1,71 @@ +* { + padding: 0%; + margin: 0%; + box-sizing: border-box; +} + +.container { + height: 100vh; + width: 100vw; + background-color: blanchedalmond; + display: flex; + justify-content: center; + align-items: center; +} + +.inner { + height: 500px; + width: 350px; + background-color: black; + border-radius: 10px; +} + +.out>.input { + height: 50px; + width: 95%; + border: 1px solid grey; + border-radius: 5px; + background-color: rgb(221, 242, 235); + padding-right: 10px; + display: flex; + text-align: end; + align-items: center; + justify-content: end; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +.out { + height: 15%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.btns { + height: calc(100% - 70px); + width: 100%; + display: grid; + grid-template-columns: 70px 70px 70px 70px; + grid-template-rows: 70px 70px 70px 70px 70px; + padding: 15px; + gap: 12px; +} + +.btn { + border: none; + border-radius: 5px; + background-color: rgb(34, 33, 33); + display: flex; + justify-content: center; + align-items: center; + color: white; + font-size: x-large; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} + +input{ + font-size: 2em; + font-weight: bolder; + color: rgb(5, 5, 5); +} \ No newline at end of file