how to make a scientific calculator in html and css

Solutions on MaxInterview for how to make a scientific calculator in html and css by the best coders in the world

showing results for - "how to make a scientific calculator in html and css"

04 Oct 2016

1<!doctype html>
2<html>
3<head>
4<style>
5body {
6    margin: 0;
7    background: radial-gradient(#1e8fa5,#08506b, black)no-repeat fixed;
8    padding: 50px 0px;
9}
10button.clear {
11    background: #FF5722;
12    color: #fff;
13}
14table {
15    background: black;
16    padding: 7px 5px;
17    border: 6px solid #00000000;
18    text-align: center;
19    padding-bottom: 0px;
20    box-shadow: 0px 0px 27px #0d5569;
21    border-radius: 10px;
22    margin-top: 90px;
23}
24button.equal {
25    width: 88%;
26    background: #210b04;
27}
28button.equal:hover{
29	background: #000803;
30}
31input[type="text"] {
32    width: 450px;
33    height: 81px;
34    border: 1px solid #000;
35    padding: 10px 20px;
36    font-size: 29px;
37    background: #000000;
38    font-weight: bold;
39    margin-bottom: 25px;
40    font-family: cursive;
41    margin-top: 10px;
42    color: #dedede;
43    border-bottom: 2px solid #cc4014;
44}
45button {
46    padding: 10px 20px;
47    width: 100px;
48    height: 60px;
49    margin-bottom: 20px;
50    font-size: 26px;
51    font-weight: bold;
52    font-family: cursive;
53    background: #000803;
54    border: none;
55    color: #d23200;
56    border-radius: 6px;
57    cursor: pointer;
58}
59button:hover{
60	background: #210b04;
61}
62</style>
63</head>
64
65
66<body>
67<form name="calcul">
68<table align="center">
69
70	<tr>
71		<td colspan="4"> <input type="text" name="result" placeholder="0" style="text-align:right"> </td>
72	</tr>
73
74	<tr>
75		<td><button type="button" value="sin" onclick="sin()"> sin </button> </td>
76		<td><button type="button" value="cos" onclick="cos()"> cos</button> </td>
77		<td><button type="button" value="tan" onclick="tan()"> tan </button> </td>
78		<td colspan="2">
79		 <button type="button" value="C" class="clear" onclick="remv()"> C </button>
80	 </td>
81	</tr>
82
83	<tr>
84		<td><button type="button" value="x^2" onclick="square()"> x<sup>2 </button> </td>
85		<td><button type="button" value="x^3" onclick="cubed()"> x<sup>3 </button> </td>
86		<td><button type="button" value="sqrt2" onclick="sqrt2()"> &radic; </button> </td>
87		<td><button type="button" value="sqrt3" onclick="sqrt3()"> &#8731; </button> </td>
88	</tr>
89
90	<tr>
91		<td><button type="button" value="1" onclick="number(value)"> 1 </button> </td>
92		<td><button type="button" value="2" onclick="number(value)"> 2 </button> </td>
93		<td><button type="button" value="3" onclick="number(value)"> 3 </button> </td>
94		<td><button type="button" value="BACKSPC" onclick="BACKSPC()"> < </button> </td>
95	</tr>
96
97	<tr>
98		<td><button type="button" value="4" onclick="number(value)"> 4</button> </td>
99		<td><button type="button" value="5" onclick="number(value)"> 5 </button> </td>
100		<td><button type="button" value="6" onclick="number(value)"> 6 </button> </td>
101		<td><button type="button" value="-" onclick="number(value)"> - </button> </td>
102	</tr>
103
104	<tr>
105		<td><button type="button" value="7" onclick="number(value)"> 7 </button> </td>
106		<td><button type="button" value="8" onclick="number(value)"> 8 </button> </td>
107		<td><button type="button" value="9" onclick="number(value)"> 9 </button> </td>
108		<td><button type="button" value="/" onclick="number(value)"> / </button> </td>
109	</tr>
110
111	<tr>
112		<td><button type="button" value="." onclick="number(value)"> . </button> </td>
113		<td><button type="button" value="0" onclick="number(value)"> 0 </button> </td>
114		<td><button type="button" value="*" onclick="number(value)"> * </button> </td>
115		<td><button type="button" value="%" onclick="number(value)"> % </button> </td>
116	</tr>
117
118	<tr>
119		<td colspan="2"> <button type="button" value="=" onclick="equal()" class="equal">=</button> </td>
120		<td><button type="button" value="+" onclick="number(value)"> + </button> </td>
121	</tr>
122
123</table>
124</form>
125
126
127<script>
128	function sin(){
129	document.calcul.result.value=Math.sin(document.calcul.result.value);
130	}
131
132	function cos(){
133	document.calcul.result.value=Math.cos(document.calcul.result.value);
134	}
135
136	function tan(){
137	document.calcul.result.value=Math.tan(document.calcul.result.value);
138	}
139
140	function BACKSPC(){
141	var a = document.calcul.result.value;
142	document.calcul.result.value = a.substr(0, a.length-1);
143	}
144
145	function square(){
146	document.calcul.result.value = Math.pow(document.calcul.result.value, 2);
147	}
148
149	function cubed(){
150	document.calcul.result.value = Math.pow(document.calcul.result.value, 3);
151	}
152
153	function sqrt2(){
154	document.calcul.result.value = Math.pow(document.calcul.result.value, 1/2);
155	}
156
157	function sqrt3(){
158	document.calcul.result.value = Math.pow(document.calcul.result.value, 1/3);
159	}
160
161	function number(value){
162	document.calcul.result.value += value;
163	}
164
165	function remv(){
166	document.calcul.result.value=" ";
167	}
168
169	function equal(){
170	document.calcul.result.value=eval(document.calcul.result.value);
171	}
172</script>
173</body>
174</html>

Adrián

21 Feb 2016

1Scientific Calculator