Skip to content

Commit 7f0d4f8

Browse files
Furkan-GulsenFurkan-Gulsen
authored
Merge pull request #1 from tusharpatil96/master
Added simple JavaScript calculator.
2 parents 6a7c9e3 + 306c347 commit 7f0d4f8

File tree

2 files changed

+95
-0
lines changed

2 files changed

+95
-0
lines changed

‎ReadMe.txt

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
HTML | Calculator
2+
Here a Calculator is going to be formed with HTML code.
3+
4+
Calculator Title: This is the title at the top of our application, �HTML Calculator�.
5+
Output Screen: This will be our output screen, where all text will be shown. Like the input that the user will type and the answer calculated from the user input. So, we can again break down this into two smaller pieces as shown below:
6+
Question Output: This will be the input given by the user.
7+
Answer Output: This will be the result calculated from user input.

‎calculator.html

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<html>
2+
<head>
3+
<script>
4+
//function that display value
5+
function dis(val)
6+
{
7+
document.getElementById("result").value+=val
8+
}
9+
10+
//function that evaluates the digit and return result
11+
function solve()
12+
{
13+
let x = document.getElementById("result").value
14+
let y = eval(x)
15+
document.getElementById("result").value = y
16+
}
17+
18+
//function that clear the display
19+
function clr()
20+
{
21+
document.getElementById("result").value = ""
22+
}
23+
</script>
24+
<!-- for styling -->
25+
<style>
26+
.title{
27+
margin-bottom: 10px;
28+
text-align:center;
29+
width: 210px;
30+
color:green;
31+
border: solid black 2px;
32+
}
33+
34+
input[type="button"]
35+
{
36+
background-color:green;
37+
color: black;
38+
border: solid black 2px;
39+
width:100%
40+
}
41+
42+
input[type="text"]
43+
{
44+
background-color:white;
45+
border: solid black 2px;
46+
width:100%
47+
}
48+
</style>
49+
</head>
50+
<!-- create table -->
51+
<body>
52+
<div class = title >HTML Calculator</div>
53+
<table border="1">
54+
<tr>
55+
<td colspan="3"><input type="text" id="result"/></td>
56+
<!-- clr() function will call clr to clear all value -->
57+
<td><input type="button" value="c" onclick="clr()"/> </td>
58+
</tr>
59+
<tr>
60+
<!-- create button and assign value to each button -->
61+
<!-- dis("1") will call function dis to display value -->
62+
<td><input type="button" value="1" onclick="dis('1')"/> </td>
63+
<td><input type="button" value="2" onclick="dis('2')"/> </td>
64+
<td><input type="button" value="3" onclick="dis('3')"/> </td>
65+
<td><input type="button" value="/" onclick="dis('/')"/> </td>
66+
</tr>
67+
<tr>
68+
<td><input type="button" value="4" onclick="dis('4')"/> </td>
69+
<td><input type="button" value="5" onclick="dis('5')"/> </td>
70+
<td><input type="button" value="6" onclick="dis('6')"/> </td>
71+
<td><input type="button" value="-" onclick="dis('-')"/> </td>
72+
</tr>
73+
<tr>
74+
<td><input type="button" value="7" onclick="dis('7')"/> </td>
75+
<td><input type="button" value="8" onclick="dis('8')"/> </td>
76+
<td><input type="button" value="9" onclick="dis('9')"/> </td>
77+
<td><input type="button" value="+" onclick="dis('+')"/> </td>
78+
</tr>
79+
<tr>
80+
<td><input type="button" value="." onclick="dis('.')"/> </td>
81+
<td><input type="button" value="0" onclick="dis('0')"/> </td>
82+
<!-- solve function call function solve to evaluate value -->
83+
<td><input type="button" value="=" onclick="solve()"/> </td>
84+
<td><input type="button" value="*" onclick="dis('*')"/> </td>
85+
</tr>
86+
</table>
87+
</body>
88+
</html>

0 commit comments

Comments
 (0)