-
Notifications
You must be signed in to change notification settings - Fork 0
/
Calculator.html
94 lines (93 loc) · 5 KB
/
Calculator.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
<!--
@author Firstname Lastname <firstname.lastname@example.com>
@file Description
@desc Created on 2019-09-13 12:51:16 pm
@copyright APPI SASU
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="kate.css">
<link rel="stylesheet" href="delcy.css">
<link rel="stylesheet" href="./fontawesome/css/all.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body class=" bg-gray-200 w-screen" onkeyup="keyb(event)" >
<div class="flex flex-col justify-center align-center ">
<div class=" w-screen flex flex-col pt-24 pl-2 pr-2">
<input id="entry1" type="text"
class="flex-grow w-full mb-2 border border-transparent text-3xl font-bold bg-gray-100 text-right">
<input id="entry2" type="number"
class="flex-grow w-full mb-2 border border-transparent text-3xl font-bold bg-gray-100 text-right">
</div>
<div class="">
<div class="flex">
<button class="w-3/4 rounded-lg text-white m-1 bg-gray-800 md:hidden shadow-lg p-6 " onclick="clicked(event)"></button>
<button class="w-1/4 rounded-lg text-white m-1 bg-orange-600 shadow-sm p-6" onclick="pressdel()" >Delete</button>
</div>
<div class="flex mt-2">
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-200 border-2 shadow-lg" onclick="press('7')" >7</button>
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-200 border-2 shadow-lg" onclick="press('8')" >8</button>
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-200 border-2 shadow-lg" onclick="press('9')" >9</button>
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-800 border-2 text-white shadow-lg" onclick="press('/')" >/</button>
</div>
<div class="flex mt-2">
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-200 border-2 shadow-lg" onclick="press('4')" >4</button>
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-200 border-2 shadow-lg" onclick="press('5')" >5</button>
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-200 border-2 shadow-lg" onclick="press('6')" >6</button>
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-800 border-2 text-white shadow-lg" onclick="press('*')" >*</button>
</div>
<div class="flex mt-2">
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-200 border-2 shadow-lg" onclick="press('1')" >1</button>
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-200 border-2 shadow-lg" onclick="press('2')" >2</button>
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-200 border-2 shadow-lg" onclick="press('3')" >3</button>
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-800 border-2 text-white shadow-lg" onclick="press('-')" >-</button>
</div>
<div class="flex mt-2">
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-200 border-2 shadow-lg" onclick="press('·')" >·</button>
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-200 border-2 shadow-lg" onclick="press('0')" >0</button>
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-orange-600 border-2 text-white shadow-lg" onclick=" pressequal()" >=</button>
<button class="flex-grow rounded-lg p-6 m-1 text-2xl bg-gray-800 border-2 text-white shadow-lg" onclick="press('+')" >+</button>
</div>
</div>
</div>
<script>
function press(num) {
document.getElementById("entry1").value = document.getElementById("entry1").value + num;
val = document.getElementById("entry1").value;
document.getElementById('entry2').value = val;
}
function pressdel() {
v = document.getElementById('entry1').value;
document.getElementById('entry1').value = v.slice(0, -1);
}
function pressequal() {
val = eval(document.getElementById('entry1').value);
document.getElementById('entry2').value = val;
}
function keyb(event){
alert(event.which);
switch(event.which){
case 49 : press(1); break;
case 50 : press(2); break;
case 48: press(0); break;
case 51: press(3); break;
case 52: press(4); break;
case 55: press(5); break;
case 56: press(6); break;
case 57: press(7); break;
case 58: press(8); break;
case 59: press(9); break;
case 187: press('='); break;
case 107: press('+'); break;
case 189: press('-'); break;
case 191: press('/'); break;
case 106: press('*'); break;
}
}
</script>
</body>
</html>