TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Creating a JavaScript Calculator
Manish Pipaliya
May 05
2015
Code
2.1
k
0
1
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
expand
calculator.rar
Html File
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>
Calculator
</
title
>
<
script
type
=
"text/javascript"
src
=
"calculator.js"
>
</
script
>
<
link
rel
=
"stylesheet"
media
=
"screen, print, handheld"
type
=
"text/css"
href
=
"calculator.css"
/>
</
head
>
<
body
>
<
table
class
=
"calculator"
id
=
"calc"
>
<
tr
>
<
td
colspan
=
"4"
class
=
"calc_td_result"
>
<
center
>
<
h3
>
Calculator
</
h3
>
</
center
>
<
textbox
id
=
"calc_result1"
class
=
"calc_result1"
>
</
textbox
>
<
input
type
=
"text"
readonly
=
"readonly"
name
=
"calc_result"
id
=
"calc_result"
class
=
"calc_result"
onkeydown
=
"javascript:key_detect('calc',event);"
/>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"CE"
onclick
=
"javascript:f_calc('calc','ce');"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #FF0000"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"←"
onclick
=
"javascript:f_calc('calc','nbs');"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #FF0000"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"%"
onclick
=
"javascript:f_calc('calc','%');"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #FF0000"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"+"
onclick
=
"javascript:f_calc('calc','+');"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #FF0000"
/>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"7"
onclick
=
"javascript:add_calc('calc',7);"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #0000FF"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"8"
onclick
=
"javascript:add_calc('calc',8);"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #0000FF"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"9"
onclick
=
"javascript:add_calc('calc',9);"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #0000FF"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"-"
onclick
=
"javascript:f_calc('calc','-');"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #FF0000"
/>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"4"
onclick
=
"javascript:add_calc('calc',4);"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #0000FF"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"5"
onclick
=
"javascript:add_calc('calc',5);"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #0000FF"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"6"
onclick
=
"javascript:add_calc('calc',6);"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #0000FF"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"x"
onclick
=
"javascript:f_calc('calc','*');"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #FF0000"
/>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"1"
onclick
=
"javascript:add_calc('calc',1);"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #0000FF"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"2"
onclick
=
"javascript:add_calc('calc',2);"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #0000FF"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"3"
onclick
=
"javascript:add_calc('calc',3);"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #0000FF"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"/"
onclick
=
"javascript:f_calc('calc','/');"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #FF0000"
/>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"0"
onclick
=
"javascript:add_calc('calc',0);"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #0000FF"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"±"
onclick
=
"javascript:f_calc('calc','+-');"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #0000FF"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"."
onclick
=
"javascript:add_calc('calc','.');"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #0000FF"
/>
</
td
>
<
td
class
=
"calc_td_btn"
>
<
input
type
=
"button"
class
=
"calc_btn"
value
=
"="
onclick
=
"javascript:f_calc('calc','=');"
onmouseover
=
"mOver(this)"
onmouseout
=
"mOut(this)"
style
=
"color: #FF0000"
/>
</
td
>
</
tr
>
</
table
>
<
script
type
=
"text/javascript"
>
document.getElementById('calc')
.onload
=
init_calc
('calc');
</
script
>
</
body
>
</
html
>
Css File
body {
background-color
:
#DBDBFF
;
}
.calculator {
width
:
300px
;
height
:
300px
;
background-color
:
#FFFFE2
;
border
:
2px
solid
#CCCCCC
;
margin-top
:
150px
;
margin-left
:
500px
;
}
.calculator td {
height
:
16.66%
;
}
.calc_td_result {
text-align
:
center
;
}
.calc_result {
width
:
96%
;
text-align
:
right
;
height
:
37px
;
font-size
:
x-large
;
background-color
: White;
}
.calc_td_calculs {
text-align
:
center
;
}
.calc_calculs {
width
:
90%
;
text-align
:
left
;
}
.calc_td_btn {
width
:
25%
;
height
:
100%
;
}
.calc_btn {
width
:
90%
;
height
:
90%
;
font-size
:
20px
;
}
td.calc_td_result h
3
{
/*background-color:#521252;*/
color
: Blue;
font-size
:
x-large
;
}
.calc_result
1
{
text-align
:
right
;
}
JS File
calc_array =
new
Array();
var
calcul = 0;
var
pas = 0;
var
temp = 0;
function
$id(id) {
return
document.getElementById(id);
}
function
f_calc(id, n) {
var
out = $id(id +
'_result'
).value;
$id(id +
'_result1'
).innerHTML += $id(id +
'_result1'
).innerHTML = out + n;
if
(n ==
'ce'
) {
$id(id +
'_result1'
).innerHTML =
""
;
init_calc(id);
}
else
if
(n ==
'='
) {
$id(id +
'_result1'
).innerHTML =
""
;
if
(calc_array[id][0] !=
'='
&& calc_array[id][1] != 1) {
eval(
'calcul='
+ calc_array[id][2] + calc_array[id][0] + calc_array[id][3] +
';'
);
calc_array[id][0] =
'='
;
$id(id +
'_result'
).value = calcul;
calc_array[id][2] = calcul;
calc_array[id][3] = 0;
}
}
else
if
(n ==
'+-'
) {
$id(id +
'_result'
).value = $id(id +
'_result'
).value * (-1);
if
(calc_array[id][0] ==
'='
) {
calc_array[id][2] = $id(id +
'_result'
).value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id +
'_result'
).value;
}
pas = 1;
}
else
if
(n ==
'nbs'
) {
$id(id +
'_result1'
).innerHTML =
""
;
if
($id(id +
'_result'
).value < 10 && $id(id +
'_result'
).value > -10) {
$id(id +
'_result'
).value = 0;
}
else
{
$id(id +
'_result'
).value = $id(id +
'_result'
).value.slice(0, $id(id +
'_result'
).value.length - 1);
}
if
(calc_array[id][0] ==
'='
) {
calc_array[id][2] = $id(id +
'_result'
).value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id +
'_result'
).value;
}
}
else
{
if
(calc_array[id][0] !=
'='
&& calc_array[id][1] != 1) {
eval(
'calcul='
+ calc_array[id][2] + calc_array[id][0] + calc_array[id][3] +
';'
);
$id(id +
'_result'
).value = calcul;
calc_array[id][2] = calcul;
calc_array[id][3] = 0;
}
calc_array[id][0] = n;
}
if
(pas == 0) {
calc_array[id][1] = 1;
}
else
{
pas = 0;
}
document.getElementById(id +
'_result'
).focus();
return
true
;
}
function
add_calc(id, n) {
if
(calc_array[id][1] == 1) {
$id(id +
'_result'
).value = n;
}
else
{
$id(id +
'_result'
).value += n;
}
if
(calc_array[id][0] ==
'='
) {
calc_array[id][2] = $id(id +
'_result'
).value;
calc_array[id][3] = 0;
}
else
{
calc_array[id][3] = $id(id +
'_result'
).value;
}
calc_array[id][1] = 0;
document.getElementById(id +
'_result'
).focus();
return
true
;
}
function
init_calc(id) {
$id(id +
'_result'
).value = 0;
calc_array[id] =
new
Array(
'='
, 1,
'0'
,
'0'
, 0);
document.getElementById(id +
'_result'
).focus();
return
true
;
}
function
key_detect(id, evt) {
if
((evt.keyCode > 95) && (evt.keyCode < 106)) {
var
nbr = evt.keyCode - 96;
add_calc(id, nbr);
}
else
if
((evt.keyCode > 47) && (evt.keyCode < 58)) {
var
nbr = evt.keyCode - 48;
add_calc(id, nbr);
}
else
if
(evt.keyCode == 107) {
f_calc(id,
'+'
);
}
else
if
(evt.keyCode == 109) {
f_calc(id,
'-'
);
}
else
if
(evt.keyCode == 106) {
f_calc(id,
'*'
);
}
else
if
(evt.keyCode == 111) {
f_calc(id,
'/'
);
}
else
if
(evt.keyCode == 110) {
add_calc(id,
'.'
);
}
else
if
(evt.keyCode == 190) {
add_calc(id,
'.'
);
}
else
if
(evt.keyCode == 188) {
add_calc(id,
'.'
);
}
else
if
(evt.keyCode == 13) {
f_calc(id,
'='
);
}
else
if
(evt.keyCode == 46) {
f_calc(id,
'ce'
);
}
else
if
(evt.keyCode == 8) {
f_calc(id,
'nbs'
);
}
else
if
(evt.keyCode == 27) {
f_calc(id,
'ce'
);
}
return
true
;
}
function
mOver(obj) {
obj.style.backgroundColor =
"#FFD4E9"
;
}
function
mOut(obj) {
obj.style.backgroundColor =
"#E6E6E6"
;
}
javascript calculator
Calculator