Want to become a Vibe Coder? Join Vibe Coding Training here
x
C# Corner
Tech
News
Videos
Forums
Jobs
Books
Events
More
Interviews
Live
Learn
Training
Career
Members
Blogs
Challenges
Certification
Contribute
Article
Blog
Video
Ebook
Interview Question
Collapse
Feed
Dashboard
Wallet
Learn
Achievements
Network
Refer
Rewards
SharpGPT
Premium
Contribute
Article
Blog
Video
Ebook
Interview Question
Register
Login
Creating a JavaScript Calculator
WhatsApp
Manish Pipaliya
May 05
2015
2.2
k
0
1
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"
;
}
Calculator
javascript calculator
Up Next
Creating a JavaScript Calculator