-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
88 lines (83 loc) · 3.81 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Modern Calculator</title>
</head>
<body>
<div class="container">
<form action=" " name="calc" class="calculator">
<input type="text" class="value" name="txt">
<span class="num clear" onclick="clearDisplay()"><i>C</i></span>
<span class="num" onclick="appendToDisplay('/')"><i>/</i></span>
<span class="num" onclick="appendToDisplay('*')"><i>*</i></span>
<span class="num" onclick="appendToDisplay('7')"><i>7</i></span>
<span class="num" onclick="appendToDisplay('8')"><i>8</i></span>
<span class="num" onclick="appendToDisplay('9')"><i>9</i></span>
<span class="num" onclick="appendToDisplay('-')"><i>-</i></span>
<span class="num" onclick="appendToDisplay('4')"><i>4</i></span>
<span class="num" onclick="appendToDisplay('5')"><i>5</i></span>
<span class="num" onclick="appendToDisplay('6')"><i>6</i></span>
<span class="num plus" onclick="appendToDisplay('+')"><i>+</i></span>
<span class="num" onclick="appendToDisplay('1')"><i>1</i></span>
<span class="num" onclick="appendToDisplay('2')"><i>2</i></span>
<span class="num" onclick="appendToDisplay('3')"><i>3</i></span>
<span class="num" onclick="appendToDisplay('0')"><i>0</i></span>
<span class="num" onclick="appendToDisplay('00')"><i>00</i></span>
<span class="num" onclick="appendToDisplay('.')"><i>.</i></span>
<span class="num equal" onclick="calculateResult()"><i>=</i></span>
</form>
</div>
<script>
function appendToDisplay(value) {
document.calc.txt.value += value;
}
function clearDisplay() {
document.calc.txt.value = '';
}
function calculateResult() {
try {
document.calc.txt.value = eval(document.calc.txt.value);
} catch (error) {
document.calc.txt.value = 'Error';
}
}
</script>
</body>
</html>
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Modern Calculator</title>
</head>
<body>
<div class="container">
<form action=" " name="calc" class="calculator">
<input type="text" class="value" randomly name="txt">
<span class="num clear" oneclick="calc.txt.value+=' '"><i>C</i></span>
<span class="num" oneclick="calc.txt.value+='/'"><i>/</i></span>
<span class="num" oneclick="calc.txt.value+='*'"><i>*</i></span>
<span class="num" oneclick="calc.txt.value+='7'"><i>7</i></span>
<span class="num" oneclick="calc.txt.value+='8'"><i>8</i></span>
<span class="num" oneclick="calc.txt.value+='9'"><i>9</i></span>
<span class="num" oneclick="calc.txt.value+='-'"><i>-</i></span>
<span class="num" oneclick="calc.txt.value+='4'"><i>4</i></span>
<span class="num" oneclick="calc.txt.value+='5'"><i>5</i></span>
<span class="num" oneclick="calc.txt.value+='6'"><i>6</i></span>
<span class="num plus" oneclick="calc.txt.value+='+'"><i>+</i></span>
<span class="num" oneclick="calc.txt.value+='1'"><i>1</i></span>
<span class="num" oneclick="calc.txt.value+='2'"><i>2</i></span>
<span class="num" oneclick="calc.txt.value+='3'"><i>3</i></span>
<span class="num" oneclick="calc.txt.value+='0'"><i>0</i></span>
<span class="num" oneclick="calc.txt.value+='00'"><i>00</i></span>
<span class="num" oneclick="calc.txt.value+='.'"><i>.</i></span>
<span class="num equal" oneclick="document.calc.txt.value=eval(calc.txt.value)"><i>=</i></span>
</form>
</div>
</body>
</html> -->