Programing_Tasks/CALCULATOR.html at main · CreativeNob/Programing_Tasks · 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
<html>
	<head><title>calculator</title>

	</head>

		<style>

			div.calculator{

			    padding:100px;
				margin:180px;
				top: -100px;
				left: 200px;
				right: 200px;
			    position: relative;
				box-shadow: 3px 3px 5px #699ac7;
				border: 1px solid #ccc;
                border-radius: 8px;


			}
			.button{

			    height: 6%;
             	width:31%;
		        background="transparent";
		        size: 10px;

			}

			.button1{

				height: 6%;
				width:31%;

			}

			#form1 input{

			    background: transparent;
			    color: white;

			}
	        #a{

			   left: 105px;
			   right: 400px;
	           position: absolute;
	           width: 54%;
               padding: 12px 20px;
               margin: -20px 0;
               display: inline-block;
               border: 1px solid #ccc;
               border-radius: 4px;
               box-sizing: border-box;
		       color: white;
			   font-size: 20px;
			}


		</style>
	<body background="c.png">

<div class="calculator" style="width:20%;" align="center" >
		<form id="form1" name="forms" />
		<h1>CALCULATER</h1><br>
		<input  type="text" name="result" id="a" /><br><br>
	    <input class="button" type="button" value="1" style="font-size : 20px; " onclick="forms.result.value+='1'"/>
		<input class="button" type="button" value="2" style="font-size : 20px; " onclick="forms.result.value+='2'"/>
		<input class="button" type="button" value="3" style="font-size : 20px; " onclick="forms.result.value+='3'"/><br>
		<input class="button" type="button" value="4" style="font-size : 20px; " onclick="forms.result.value+='4'"/>
		<input class="button" type="button" value="5" style="font-size : 20px; " onclick="forms.result.value+='5'"/>
		<input class="button" type="button" value="6" style="font-size : 20px; " onclick="forms.result.value+='6'"/><br>
		<input class="button" type="button" value="7" style="font-size : 20px; " onclick="forms.result.value+='7'"/>
		<input class="button" type="button" value="8" style="font-size : 20px; " onclick="forms.result.value+='8'"/>
		<input class="button" type="button" value="9" style="font-size : 20px; " onclick="forms.result.value+='9'"/><br>
		<input class="button" type="button" value="." style="font-size : 27px; " onclick="forms.result.value+='.'"/>
		<input class="button" type="button" value="0" style="font-size : 20px; " onclick="forms.result.value+='0'"/>
		<input class="button" type="button" value="=" style="font-size : 20px; " onclick="forms.result.value=eval(forms.result.value)"/><br>


		<input class="button1" type="button" value="+" style="font-size : 20px; " onclick="forms.result.value+='+'"/>
		<input class="button1" type="button" value="-" style="font-size : 20px; " onclick="forms.result.value+='-'"/>
		<input class="button1" type="button" value="*" style="font-size : 20px; " onclick="forms.result.value+='*'"/><br>
		<input class="button1" type="button" value="/" style="font-size : 20px; " onclick="forms.result.value+='/'"/>
		<input class="button" type="button" value="C" style="font-size : 20px; " onclick="forms.result.value=null"/>
</div>
	</body>

</html>