From 370a37daffdaf956f55226d6abc0fb05da0562c9 Mon Sep 17 00:00:00 2001
From: ishabaral <baralisha.16@gmail.com>
Date: Tue, 6 Jul 2021 09:43:54 +0545
Subject: [PATCH] basic calculator function

---
 images/calc-icon.webp | Bin 0 -> 2584 bytes
 index.html            |  48 ++++++++++++++++++++++++++++++++++++
 script.js             |   9 +++++++
 style.css             |  56 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 113 insertions(+)
 create mode 100644 images/calc-icon.webp
 create mode 100644 index.html
 create mode 100644 script.js
 create mode 100644 style.css

diff --git a/images/calc-icon.webp b/images/calc-icon.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6485309717411355c292a4bec04336ac1ce6b0bd
GIT binary patch
literal 2584
zcmZWpc|6qp7XFRB8oRD7kv&U|ElVP6wvZ`OwgwThWhX|A>^nmmyvDvvGWNz`EFokD
zS+ZuyYilHXaYygH_r3RXzki+2_j8u#obx=#OkY=*<tzYL=xCann<@#=Q0(M%00oi|
zpeBISCSawerB{UtO4OBP=6KIIxzBrhtB$KMtK1I2?DP`x#m{#~mDM54!}yF`JJr<|
z!N4Y8b`OKl1;=YaX~Q}b+1i|b(07-o(>MG49k17*CXClh{{JJsJEJ#2GL6SVR32mW
z#43x_Bva&VZ!q_TEtK-%yaY0FKwYgm3xDr`82d&sEB!3U!aq+PD-?f6(tK;+XO$6?
z+hp{tMVGXS)EFZ_A#OTGbb9U`?maZxm!;%kx+Jz>u-LBL@dwxyZEc6I4q=fDzMrV>
zF$O6=I+4<Lt>kP?+oIGJpzf1E_wPd{qr-Dh1+3alPmQiBkrl>t3wJ}f)p_m(-m|43
zl?7h$Fhcl0izlhOUk)s3t9naxHB4djajoRuK>vpSMxtPiPRh?7%a?7lByfmnGFL0z
z|C0|vvkYhLPBmTw!%Fqku-24_e;1~mdP?L)_jYqXRYR!q4WQ=L+7459JUb&VG-x5T
zz7uedJv;5KMhM$U)Yd*OCQj`XycQXE&?&g}kq!+@|1wyaYl&K}`uE!}HuUzve)6TL
zMNiWtw%=pqp{KOpoiqUc7$G)y2t5<<Ja2L7Fn80=6_em=lyy3yzu=Sy69(3|ViD8*
zjJ`xnSsI-QWj*wtC~kL=h%u-Db=|7$qWJN7TiO53+#Ebg*<$3~tF1HYJ2ba`h8U+z
zl)qP5-><hI8Cdj1Xz6?WH<Cm;(;J_6KuE{c+vl>pTGnb-x?O2a!eh{InxJ7Xjrdwg
zx1>~=)tm~FkhR^%@K>#;1Yv;g8>5L}RWQ-#qB#*r+d8O`^Usx}tFfo_mSKrIrBAXw
zf~`}xaZT;o#*{mPWPj@l@9@Rg=R9k4AzU!K-hEP&!27d8qsHIDFC0-judc{;>3Y<5
zXSB0D<z%3tv>G4K|C?HUr5|uBV(GxVU~{I{=O8)ur*Ultc)J|0RkYIt?ky|k&AR64
zXd;Ruk@PdU&bk?x2br+1RN;jo*WTQWF7Od$FfMfD63u&6`eFW3RwL*4PTl5WBMOBq
zgt_K5^&h^#eq9QkxV=3p|9~0ACOIk}ZFyVeiC~49o&u)YsXa;*oR=V(3ie_;`e><k
ze~v{k`-Oc{$$4Lv+^|lhCP8jOC}OccODC~!_LL9zZBF@s-puxV_SoB6$ZTabTb+ks
zD}eS1UeHVMjZhZ&Ev7j~h7!`P@He479>UPj2QT8>A3t)vZ)L>>rO4x7ieo=FfzSbr
ztSC^QWqnKII7mVnvhqQG!M{Y*ME*_i?<?XreN_?(incAOUN*Iy${G9`W9_}HrRv+9
z>-Zw)GpCxqF?%X4ZnDFvUS~D+%XJQvY$YoagPcbOsak!+PS_#G!y5eA6o<bU`tMV)
zWA$udm5EIZx%Brb`1>|cwtadsxblJHU++|;fOBLBps_uE9w>m`8N-hNDl+yCS%LJI
zqprM;JxH0?8ej|k9wYglU3yiaP8@fsYfhO}W?KjmLfew-OtYjKb*{pf)qT1CiBO8b
znr8XZ^Go>v@L+lt;WyL+aHJdHCl_vDvvF#<nlhcJ{l#u5$<f6&FQ#iG)}XE}IMIqj
zbaT)}+w8EZNHN!?s45+>1w?oQ_{m)oB5660qm0r<B1wO`ZdcK*RR$i}9x@drToQP$
zQn2|%d40&-24H>rlKB#q7ONf=ln~cb<iQjs*JP}5U~dA&A$By4v3q}l$kpn}#th<s
zq$z*@?vWA0y9w&U=k|sM^=Ft$aQII`zUm%TW1F$GLJ3A<VX{zx9n)l;%q8yemA)Pu
zfQC;h1T@oFSR*$ms02{uNpKJ|Jv_+(UB-$Itg#(xt+tm;jP}ZhWE#5YwYn^hJ*K(y
zBNpJLSNsJ-a)EVT7vz!e!mqwu-A&uxI3o0`kOta)mF`SXC)!uu!cG$RCdixv!JXrU
zePB)AG?5>i@)%Zm%mP6qi}S>FW^huJqdRaL$>-2auYBb3u*xlapeLqEq4AKpaBoV~
zz@Jg|tF-Cn1zdRp6`wX}Kf${CLN1l}4G*6`*hlgL3uTzy(fL6=E+P}DXV`_`SDY}x
zTvJ*@Fkge82v;8}-E24z3f2O%EsZ!L2ZHPjaXHJg-r>Qu>*gOI=4ENeZV=iz2R=f~
zV&HTzB6!e#x}P)e{rbnSCciye)wby!M7_(G3^W{Ksk>0&^mV98a?zh9#hUI4f!5{#
zsZS`+;cc^R7|gD1oV(ui;AcUJ7}f+5HN!PBc6KF-Hnlq#QwRo$EDt&7x$nRiEpZ%j
zx<jC5)?LE^-X)hu&9=1dF|(HDrUnm{YhLE?{}6Y~*g*;=O976N;d4#iwexQqa#!-b
zFE&2{UDqkA(?ulqaom$LApU&4!Lj4M>@`9nGj#x0+<aP5(xDk{C7aqRmQPynu<O$e
zL`HmCFnb%MC#g87x8qY7I_37zyv{i;+IXz0lRTDXdK~#dHZz_1vI2dCUA_jiQ6DCp
zRO8fEWC6z7ariC|z;mSQgZ{Bld}JbAkQ+}M9~i=QI2@I-s2{q!$cTdjY7(?|W?HXd
zxj(q)>I9=Ys?GdIwI4>81%$Qboh1DFlRNd=n{^`l<f>!&T6(;_R@XZY&c3-q*68xj
z9DfAxR)@eD1LzCpzlghOFcxH7hNC=?k?*`Bd4?yCo`Fax5MC)7FuM4<gm(9G%3EMY
zr{*|@v(jjsEOgQvhD*0;3f;bUv<E*Mo4U1yhf$k^K30oMAFG*~2`sj?z8EV!W8oe*
z>yIv*rwVI@Y)JpaDx)^#uP>VH*h#km*S<SxCQjAEzB%9FPinvV>6Jcq>-<67%WH0R
z!8f~v(;_zj<)@6M{>zm<`Cnh&g<XlHKQDD*MdFcBqq1O3=CMZz$l;by_byc%rg<{%
zsFXB9FPPG%STeZviBU5^Y*SR~LG=y+n*xAZN;}j?f6Ua3vcLLV7Vnw)B#Aw*Th(}O
z{@xdEFEatW!PHreqU52h^Erf%1BR=9#OI>2P^DhIIzU_+%Q1)y(4g)I`|%~{H_nh1
zFkj*;6xm&#y<ximuzP9Ow^pnVRFSkhmXzM5kac%hvX{dw@daiwWGd3(_P7%xek`{5
z$p2%rv3L+pSSq1<&=W3JR4@Q*f=i+_5iP#s+}g)C?}d>SXg9BuP!3Mgm+A``PP)WV
cKkD@H?(@U@;rwzvriS9bvf`Q}f&aXJ0-P}Sl>h($

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..e0ddae9
--- /dev/null
+++ b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <script src="./script.js"></script>
+    <link rel="shortcut icon" href="./images/calc-icon.webp">
+    <title>Calculator App</title>
+</head>
+
+<body>
+    <div id="calc-box">
+        <div id="calc">
+            <div class="input-section">
+                <input id="input-box" type="text" placeholder="0" autofocus pattern="[0-9]">
+            </div>
+
+            <div class="btn-groups">
+
+                <button id="reset" onclick="reset()" class="sign">AC </button>
+                <button id="reset" onclick="reset()" class="sign">C </button>
+                <button onclick="displayNum('%')" class="sign">%</button>
+                <button value="/" onclick="displayNum('/')" class="sign">÷</button>
+                <button value="7" onclick="displayNum('7')">7</button>
+                <button value="8" onclick="displayNum('8')">8</button>
+                <button value="9" onclick="displayNum('9')">9</button>
+                <button value="*" onclick="displayNum('*')" class="sign">×</button>
+                <button value="4" onclick="displayNum('4')">4</button>
+                <button value="5" onclick="displayNum('5')">5</button>
+                <button value="6" onclick="displayNum('6')">6</button>
+                <button value="-" onclick="displayNum('-')" class="sign">-</button>
+                <button value="1" onclick="displayNum('1')">1</button>
+                <button value="2" onclick="displayNum('2')">2</button>
+                <button value="3" onclick="displayNum('3')">3</button>
+                <button value="+" onclick="displayNum('+')" class="sign">+</button>
+                <button value="^" onclick="displayNum('00')">00</button>
+                <button value="0" onclick="displayNum('0')">0</button>
+                <button value="." onclick="displayNum('.')">.</button>
+                <button onclick="result()" class="sign">=</button>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..eee1826
--- /dev/null
+++ b/script.js
@@ -0,0 +1,9 @@
+const reset = () => document.getElementById("input-box").value = "";
+
+const displayNum = (num) => document.getElementById("input-box").value += num;
+
+const result = () => {
+    let a = document.getElementById("input-box").value;
+    let b = eval(a);
+    document.getElementById("input-box").value = b;
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..4d3fc47
--- /dev/null
+++ b/style.css
@@ -0,0 +1,56 @@
+
+#calc-box{
+    position: relative;
+    height: 600px;
+    width: 400px;
+    margin: 0 auto;
+    background-image: url("https://i.imgur.com/mSPU63U.jpg");
+    background-size: cover;
+}
+#calc{
+    position: absolute;
+    height: 580px;
+    width: 370px;
+    left:13px;
+}
+
+.input-section{
+    width: 99.4%;
+    height: 30%;
+    background-color: #44403b;
+    color: white;
+    margin-top: 3px;
+}
+
+#input-box{
+    position: absolute;
+    margin: 15px;
+    padding: 20px;
+    top: 76px;
+    left: 27px;
+    font-size: 24px;
+    border: none;
+    color: white;
+    background-color: #44403b;
+    outline: none;
+    direction: rtl;
+    letter-spacing: 0.5;
+}
+.btn-groups{
+    display: flex;
+    flex-wrap: wrap;
+}
+.btn-groups > button{
+    background-color: #736c62;
+    font-size: 35px;
+    color: white;
+    margin: 1px;
+    padding:0 auto;
+    width: 90px;
+    height: 82px;
+    text-align: center;
+}
+
+.sign{
+    background-color: chocolate !important;
+}
\ No newline at end of file