-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcalc.html
104 lines (90 loc) · 3.44 KB
/
calc.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(function() {
var input = $('input');
var equals = $('[name="equals"]');
$('.num-button').on('click', function() {
input.val(input.val() + $(this).attr('name'));
});
$('.operation').on('click', function() {
var opname = $(this).attr('name');
if (opname == 'subtract' && input.val() == 0) {
input.val('-');
}
else {
input.attr('name', input.val());
input.val('');
equals.removeClass();
equals.addClass(opname);
}
});
equals.on('click', function() {
var firstInput;
var secondInput;
if ( equals.hasClass( 'add' )) {
firstInput = parseInt(input.attr('name'));
secondInput = parseInt(input.val());
input.val(firstInput + secondInput);
}
else if ( equals.hasClass( 'subtract' )) {
firstInput = parseInt(input.attr('name'));
secondInput = parseInt(input.val());
input.val(firstInput - secondInput);
}
else if ( equals.hasClass( 'multiply' )) {
firstInput = parseInt(input.attr('name'));
secondInput = parseInt(input.val());
input.val(firstInput * secondInput);
}
else if ( equals.hasClass( 'divide' )) {
firstInput = parseInt(input.attr('name'));
secondInput = parseInt(input.val());
input.val(firstInput / secondInput);
}
});
$('.clear').on('click', function () {
input.val('');
});
});
});
</script>
</head>
<body>
<div>
<h1>Calculator</h1>
<table>
<input>
<tr>
<td><button name="1" class="num-button">1</button></td>
<td><button name="2" class="num-button">2</button></td>
<td><button name="3" class="num-button">3</button></td>
<td><button name="add" class="operation">+</button></td>
</tr>
<tr>
<td><button name="4" class="num-button">4</button></td>
<td><button name="5" class="num-button">5</button></td>
<td><button name="6" class="num-button">6</button></td>
<td><button name="subtract" class="operation">-</button></td>
</tr>
<tr>
<td><button name="7" class="num-button">7</button></td>
<td><button name="8" class="num-button">8</button></td>
<td><button name="9" class="num-button">9</button></td>
<td><button name="multiply" class="operation">x</button></td>
</tr>
<tr>
<td><button name="0" class="num-button">0</button></td>
<td><button name="." class="num-button">.</button></td>
<td><button name="equals">=</button></td>
<td><button name="divide" class="operation">/</button></td>
</tr>
</table>
<button class="clear">Clear</button>
</section>
</div>
</body>
</html>