ParziVaal
DevOps Ninja
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
We all know that calculator is very useful in terms of using it in our daily lives. In this article, I created a Simple Math Calculator Using JavaScript. What this the program does?
Is that we have two (2) text box for the user to input the two (2) value of number then the simple program will do the sum, difference, product, and quotient of the two (2) value of number input by the user after clicking the OK button.
HTML Tag
This is the HTML tag where the two (2) value number is needed to input.
JavaScript
This is the script to work the function and to get the sum, difference, product and quotient of two (2) value numbers.
CSS
And, this is the style.
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Is that we have two (2) text box for the user to input the two (2) value of number then the simple program will do the sum, difference, product, and quotient of the two (2) value of number input by the user after clicking the OK button.
HTML Tag
This is the HTML tag where the two (2) value number is needed to input.
- <center
>
- <h3
>
Simple Math Calculator Using JavaScript</
h3
>
- <br
>
- <div
class
=
"text"
>
- <label
for
=
"valueNumber1"
>
Value No. 1</
label
>
- <input
type
=
"number"
autofocus=
"autofocus"
step=
"1"
min=
"0"
name
=
"valueNumber1"
id
=
"valueNumber1"
/
>
- </
div
>
- <div
class
=
"text"
>
- <label
for
=
"valueNumber2"
>
Value No. 2</
label
>
- <input
type
=
"number"
autofocus=
"autofocus"
step=
"1"
min=
"0"
name
=
"valueNumber2"
id
=
"valueNumber2"
/
>
- </
div
>
- <button
onclick
=
"computeAll()"
style
=
"font-size:18px; background:azure; color:red; margin-right:100px;"
title
=
"Click here to find the result."
>
Enter </
button
>
- <button
onclick
=
"clearAll_Input()"
style
=
"font-size:18px; background:azure; color:red;"
title
=
"Click here to clear the text fields."
>
Reset </
button
>
- <br
/
>
- <br
/
>
- <br
/
>
- <p
id
=
"display1"
>
</
p
>
- <p
id
=
"display2"
>
</
p
>
- <p
id
=
"display3"
>
</
p
>
- <p
id
=
"display4"
>
</
p
>
- </
center
>
JavaScript
This is the script to work the function and to get the sum, difference, product and quotient of two (2) value numbers.
- <
script>
- function
computeAll(
)
- {
- var
valueNumber1 =
document.getElementById
(
'valueNumber1'
)
.value
;
- var
valueNumber2 =
document.getElementById
(
'valueNumber2'
)
.value
;
- var
sum =
parseInt(
valueNumber1)
+
parseInt(
valueNumber2)
;
- var
subtract =
parseInt(
valueNumber1)
-
parseInt(
valueNumber2)
;
- var
product =
parseInt(
valueNumber1)
*
parseInt(
valueNumber2)
;
- var
quotient =
parseInt(
valueNumber1)
/
parseInt(
valueNumber2)
;
- document.getElementById
(
"display1"
)
.innerHTML
=
"The sum of "
+
valueNumber1 +
" and "
+
valueNumber2 +
" is "
+
sum +
"."
;
- document.getElementById
(
"display2"
)
.innerHTML
=
"The difference between "
+
valueNumber1 +
" and "
+
valueNumber2 +
" is "
+
subtract +
"."
;
- document.getElementById
(
"display3"
)
.innerHTML
=
"The product between "
+
valueNumber1 +
" and "
+
valueNumber2 +
" is "
+
product +
"."
;
- document.getElementById
(
"display4"
)
.innerHTML
=
"The quotient between "
+
valueNumber1 +
" and "
+
valueNumber2 +
" is "
+
quotient +
"."
;
- }
- function
clearAll_Input(
)
- {
- document.getElementById
(
"display1"
)
.innerHTML
=
""
;
- document.getElementById
(
"display2"
)
.innerHTML
=
""
;
- document.getElementById
(
"display3"
)
.innerHTML
=
""
;
- document.getElementById
(
"display4"
)
.innerHTML
=
""
;
- document.getElementById
(
"valueNumber1"
)
.value
=
""
;
- document.getElementById
(
"valueNumber2"
)
.value
=
""
;
- document.getElementById
(
"valueNumber1"
)
.focus
(
)
;
- }
- </
script>
CSS
And, this is the style.
- <style type=
"text/css"
>
- p {
- font-family
:
monospace
;
- font-size
:
18px
;
- font-weight
:
bold
;
- color
:
red
;
- }
- div.text
{
- margin
:
0
;
- padding
:
0
;
- padding-bottom
:
1.25em
;
- }
- div.text
label {
- margin
:
0
;
- padding
:
0
;
- display
:
block
;
- font-size
:
100%
;
- width
:
8em
;
- font-size
:
18px
;
- font-weight
:
bold
;
- color
:
red
;
- }
- div.text
input,
- div.text
textarea {
- margin
:
0
;
- padding
:
0
;
- display
:
block
;
- font-size
:
100%
;
- }
- input:
active
,
- input:
focus
,
- input:
hover
,
- textarea:
active
,
- textarea:
focus
,
- textarea:
hover
{
- background-color
:
aliceblue
;
- border-color
:
blue
;
- }
- h3 {
- color
:
red
;
- }
- #valueNumber1
{
- font-size
:
18px
;
- text-align
:
center
;
- width
:
100px
;
- }
- #valueNumber2
{
- font-size
:
18px
;
- text-align
:
center
;
- width
:
100px
;
- }
- </style>
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.