king of javascript logo
  1. Home
  2. Tutorial
  3. JavaScript
  4. How to Make Calculator in JavaScript
  5. Online HTML Editor : Calculator App
Run Output

Output Rosolution: 1264 x 154

​x
 
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta name="viewport" content="width=device-width, initial-scale=1">
5
<title>Calculator App with JavaScript</title>
6
<style>
7
html, body, div, span, applet, object, iframe,
8
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
9
a, abbr, acronym, address, big, cite, code,
10
del, dfn, em, img, ins, kbd, q, s, samp,
11
small, strike, strong, sub, sup, tt, var,
12
b, u, i, center,
13
dl, dt, dd, ol, ul, li,
14
fieldset, form, label, legend,
15
table, caption, tbody, tfoot, thead, tr, th, td,
16
article, aside, canvas, details, embed, 
17
figure, figcaption, footer, header, hgroup, 
18
menu, nav, output, ruby, section, summary,
19
time, mark, audio, video {
20
    margin: 0;
21
    padding: 0;
22
}
23
body{
24
     background: #94cdde;
25
}
26
 *{
27
    box-sizing:border-box;
28
}
29
 .calculator{
30
     width: 100%;
31
     max-width: 280px;
32
     margin: 50px auto;
33
     border-radius: 10px;
34
     overflow: hidden;
35
     box-shadow: 0 0 5px #999999;
36
}
37
 .screen{
38
     background-color: orange;
39
     width: 100%;
40
     min-height: 100px;
41
     text-align: right;
42
     font-size: 24px;
43
     padding: 10px;
44
     padding-top: 20px;
45
}
46
 .cal-buttons{
47
     background: #ffffff;
48
     padding: 15px;
49
}
50
 ul#buttons{
51
     list-style-type: none;
52
     display: flex;
53
     flex-wrap: wrap;
54
     justify-content: space-between;
55
}
56
 ul#buttons li{
57
     font-size: 24px;
58
     color: #000000;
59
     background: #ecedef;
60
     width: 20%;
61
     margin:5px 2.5%;
62
     padding-top: 11px;
63
     height: 50px;
64
     border-radius: 50%;
65
     font-weight: bold;
66
     cursor: pointer;
67
     text-align: center;
68
     transition: all 0.3s;
69
}
70
 ul#buttons li:hover,ul#buttons li:visited{
71
     background: #777777;
72
     color: #ffffff;
73
}
74
 ul#buttons li:active{
75
     background: #000000;
76
}
77
 li#equals{
78
     width: 100% !important;
79
     border-radius: 10px !important;
80
}
81
</style>
82
</head>
83
<body>
84
<div class="calculator">
85
   <div class="screen">
86
      <h1 id="result"></h1>
87
   </div>
88
   <div class="cal-buttons">
89
      <ul id="buttons">
90
         <li>1</li>
91
         <li>2</li>
92
         <li>3</li>
93
         <li id="clear">C</li>
94
         <li>4</li>
95
         <li>5</li>
96
         <li>6</li>
97
         <li>+</li>
98
         <li>7</li>
99
         <li>8</li>
100
         <li>9</li>
101
         <li>-</li>
102
         <li>0</li>
103
         <li>x</li>
104
         <li>.</li>
105
         <li>÷</li>
106
         <li id="equals">=</li>
107
      </ul>
108
   </div>
109
</div>
110
​
111
<script>
112
var buttons = document.getElementById("buttons");
113
var li = buttons.querySelectorAll("li");
114
var result = document.getElementById("result");
115
​
116
​
117
for (let i = 0; i < li.length; i++) {
118
    li[i].addEventListener("click", function() {
119
        if (this.innerHTML == "=") {
120
            result.innerHTML = eval(result.innerHTML);
121
        } else {
122
            if (this.innerHTML == "÷") {
123
                result.innerHTML += "/";
124
            } else if (this.innerHTML == "x") {
125
                result.innerHTML += "*";
126
            } else if (this.innerHTML == 'C') {
127
                result.innerHTML = "";
128
            } else {
129
                result.innerHTML += this.innerHTML;
130
            }
131
        }
132
    });
133
}
134
</script>
135
</body>
136
</html>