HTML Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device=width, intial-scale=1.0">
<title>AF Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="calculator">
<form>
<div class="display">
<input type="text" name="display">
</div>
<div>
<input type="button" value="AC" onclick="display.value = '' " class="operator">
<input type="button" value="DE" onclick="display.value = display.value.toString().slice (0,-1)" class="operator">
<input type="button" value="." onclick="display.value += '.' " class="operator">
<input type="button" value="/" onclick="display.value += '/' " class="operator">
</div>
<div>
<input type="button" value="7" onclick="display.value += '7' ">
<input type="button" value="8" onclick="display.value += '8' ">
<input type="button" value="9" onclick="display.value += '9' ">
<input type="button" value="*" onclick="display.value += '*' " class="operator">
</div>
<div>
<input type="button" value="4" onclick="display.value += '4' ">
<input type="button" value="5" onclick="display.value += '5' ">
<input type="button" value="6" onclick="display.value += '6' ">
<input type="button" value="-" onclick="display.value += '-' " class="operator">
</div>
<div>
<input type="button" value="1" onclick="display.value += '1' ">
<input type="button" value="2" onclick="display.value += '2' ">
<input type="button" value="3" onclick="display.value += '3' ">
<input type="button" value="+" onclick="display.value += '+' " class="operator">
</div>
<div>
<input type="button" value="00" onclick="display.value += '00' ">
<input type="button" value="0" onclick="display.value += '0' ">
<input type="button" value="=" onclick="display.value = eval(display.value)" class="equal operator">
</div>
</form>
</div>
</div>
</body>
</html>
Style with CSS
{
m a r g i n : 0 ;
p a d d i n g : 0 ;
f o n t - f a m i l y : ' p o p p i n s ' , s a n s - s e r i f ;
b o x - s i z i n g : b o r d e r - b o x ;
}
. c o n t a i n e r {
w i d t h : 1 0 0 % ;
h e i g h t : 1 0 0 v h ;
b a c k g r o u n d : # b a d 3 d 3 ;
d i s p l a y : f l e x ;
a l i g n - i t e m s : c e n t e r ;
j u s t i f y - c o n t e n t : c e n t e r ;
}
. c a l c u l a t o r {
b a c k g r o u n d : # 2 9 2 a 2 b ;
p a d d i n g : 2 0 p x ;
b o r d e r - r a d i u s : 1 0 p x ;
}
. c a l c u l a t o r f o r m i n p u t {
b o r d e r : 1 0 0 % ;
o u t l i n e : 1 0 0 % ;
w i d t h : 6 0 p x ;
h e i g h t : 6 0 p x ;
b o r d e r - r a d i u s : 1 0 p x ;
b o x - s h a d o w : - 8 p x - 8 p x 1 5 p x r g b a ( 9 4 , 9 2 , 9 2 , 0 . 1 ) , 5 p x 5 p x 1 5 p x r g b a ( 0 , 0 , 0 , 0 . 2 ) ;
b a c k g r o u n d : t r a n s p a r e n t ;
f o n t - s i z e : 2 0 p x ;
c o l o r : # f 8 f 4 f 4 ;
c u r s o r : p o i n t e r ;
m a r g i n : 1 0 p x ;
}
f o r m . d i s p l a y {
d i s p l a y : f l e x ;
j u s t i f y - c o n t e n t : f l e x - e n d ;
m a r g i n : 2 0 p x 0 ;
}
f o r m . d i s p l a y i n p u t {
t e x t - a l i g n : r i g h t ;
f l e x : 1 ;
f o n t - s i z e : 4 5 p x ;
b o x - s h a d o w : n o n e ;
}
f o r m i n p u t . e q u a l {
w i d t h : 1 4 5 p x ;
}
f o r m i n p u t . o p e r a t o r {
c o l o r : # 3 3 f f d 8 ; ;
}
