Simple_calculator/index.html at main · Akshayapaval/Simple_calculator · GitHub

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	 }
     body
     {
     	background-image: linear-gradient(to right top, #f4de75, #d8e27b, #bce487, #a0e596, #84e5a8, #5ee4c0, #35e1d7, #00ddec, #1bd4ff, #66c7ff, #a0b7ff, #cda5f2);
     	background-repeat: no-repeat;
     }
	 #wrapper
	{
		width: 300px;
		height: 500px;
		margin: 130px  auto;
		border:  solid black;
		border-radius: 30px;
		box-shadow: 0 0 5px rgba(0,0,0,0.5);
	}
	  input[type="text"]
	{
		color: black;
		float: right;
		padding-top: 10px;
		font-size: 35px;
		font-weight: bold;
		height: 100px;
		width: 295px;
		border-radius: 50px;
	}

	.operation
	{
		height: 50px;
		width: 50px;
		border-radius: 50px;
		text-align: center;
		background-color: white;
		font-size: 20px;
		font-weight: bold;


	}
    table
	{

		border-radius: 30px;
	}
	td{
		text-align: center;

	}
	#foot
	{
		padding-bottom:30px;
		padding-left: 30px;
	}
</style>
</head>
<body>

	<div id="wrapper">

		<div id="disp"><input type="text" id="result"></input></div>
		<div id="op">
			<table style="height:390px;width:290px;">
				<tr>
					<td colspan="3"><input type="button" value="AC" onclick="clr()" class="operation" style="background-color:#D83A56;height:50px;width:200px;"></td>
					<td><input type="button" class="operation" onclick="dis('/')" value="/"/></td>
				</tr>
				<tr>
					<td><input type="button" onclick="dis('7')" class="operation" value="7"></td>
					<td ><input type="button" class="operation" onclick="dis('8')" value="8"></td>
					<td><input type="button" class="operation" onclick="dis('9')" value="9"></td>
					<td><input type="button" class="operation" onclick="dis('*')" value="x"></td>
				</tr>
				<tr>
					<td><input type="button" onclick="dis('4')" class="operation" value="4" ></td>
					<td ><input type="button" onclick="dis('5')" class="operation" value="5"></td>
					<td><input type="button" onclick="dis('6')" class="operation" value="6" ></td>
					<td><input type="button" onclick="dis('-')" class="operation" value="-" ></td>
				</tr>
				<tr>
					<td><input type="button" onclick="dis('1')" class="operation" value="1"></td>
					<td ><input type="button" onclick="dis('2')" class="operation" value="2"></td>
					<td><input type="button" onclick="dis('3')" class="operation" value="3"></td>
					<td><input type="button" onclick="dis('+')" class="operation" value="+"></td>
				</tr>
				<tr>
					<td colspan="2"><input type="button" onclick="dis('0')" value="0" style="height:50px;width:150px;" class="operation" ></td>
					<td><input type="button" onclick="dis('.')" class="operation" value="." ></td>
					<td><input type="button" onclick="solve()" class="operation" value="=" ></td>
				</tr>
		</table>
	</div>
  </div>
  <div id="foot"><bold> Made by AP Akshaya</bold></div>
<script>
function dis(val)
         {

             document.getElementById("result").value+=val;


         }


         function solve()
         {
             let x = document.getElementById("result").value
             let y = eval(x)
             document.getElementById("result").value = y
         }


         function clr()
         {
             document.getElementById("result").value = ""
         }
</script>
</body>
</html>