Simple Calculator Using HTML, CSS and Javascript
A basic implementation of calculator in Javascript.
Please note that some button are not yet implemeted such as % and decimal point .
HTML
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <title>Calculator</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 }
11 body {
12 background-color: white;
13 }
14 .container {
15 display: flex;
16 width: 100vw;
17 height: 100vh;
18 flex-direction: column;
19 justify-content: flex-end;
20 }
21 .header {
22 display: flex;
23 flex-direction: column;
24 box-sizing: border-box;
25 border-bottom: 2px solid grey;
26 margin-bottom: 30px;
27 }
28 .num-pad {
29 display: flex;
30 flex-direction: row;
31 justify-content: space-evenly;
32 margin-bottom: 10px;
33 }
34 .pad {
35 width: 60px;
36 height: 60px;
37 border-radius: 50%;
38 border: 0;
39 font-size: 24px;
40 }
41 .pad:focus, .pad:hover {
42 outline: none;
43 background-color: #bdbdbd;
44 }
45 .oper {
46 font-weight: 500;
47 font-size: 32px;
48 color: #00838f;
49 }
50 .rem {
51 color: #ff9800;
52 }
53 .input {
54 height: 100px;
55 font-size: 50px;
56 font-weight: 300;
57 border: none;
58 text-align: right;
59 padding-right: 8%;
60 color: #424242;
61 }
62 .input:focus {
63 outline: none;
64 }
65 .ans {
66 height: 100px;
67 text-align: right;
68 padding-right: 20px;
69 font-weight: 400;
70 font-size: 35px;
71 color: #616161;
72 }
73 </style>
74 </head>
75 <body>
76 <div class="container">
77 <div class="header">
78 <input type="text" id="input" class="input">
79 <div class="ans" id="result"></div>
80 </div>
81 <div class="num-pad">
82 <button class="pad rem" id="clear">C</button>
83 <button class="pad">%</button>
84 <button class="pad rem" id="delete">X</button>
85 <button class="pad oper">/</button>
86 </div>
87 <div class="num-pad">
88 <button class="pad l">7</button>
89 <button class="pad l">8</button>
90 <button class="pad l">9</button>
91 <button class="pad oper l">x</button>
92 </div>
93 <div class="num-pad">
94 <button class="pad l">4</button>
95 <button class="pad l">5</button>
96 <button class="pad l">6</button>
97 <button class="pad oper l">-</button>
98 </div>
99 <div class="num-pad">
100 <button class="pad l">1</button>
101 <button class="pad l">2</button>
102 <button class="pad l">3</button>
103 <button class="pad oper l">+</button>
104 </div>
105 <div class="num-pad">
106 <button class="pad">+/-</button>
107 <button class="pad l">0</button>
108 <button class="pad l">.</button>
109 <button class="pad oper" id="equal">=</button>
110 </div>
111 </div>
112 <script>
113 var numbers = document.getElementsByClassName( "l" )
114 var input = document.getElementById( "input" )
115 var clear = document.getElementById( "clear" )
116 var del = document.getElementById( "delete" )
117 var result = document.getElementById( "result" )
118 var equal = document.getElementById( "equal" )
119
120 for( var i=0; i<numbers.length; i++ )
121 {
122 numbers[i].addEventListener( "click", AppendNumber )
123 }
124
125 clear.addEventListener( "click", Clear )
126 equal.addEventListener( "click", Calculate )
127
128 function AppendNumber()
129 {
130 input.value = input.value + this.innerText
131 }
132
133 function Clear()
134 {
135 input.value = ""
136 }
137
138 function Calculate()
139 {
140 var str = input.value
141 str = str.replace( /X/gi, "*" )
142 try
143 {
144 var answer = eval( str )
145 result.innerText = answer
146 }
147 catch( err )
148 {
149 result.innerText = "Math error"
150 }
151 }
152 </script>
153 </body>
154 </html>
