-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathBase_Con_Calc.html
115 lines (105 loc) · 3.39 KB
/
Base_Con_Calc.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>CALCULATOR</title>
<style>
.header {
text-align: center;
background-color: darkblue;
color: white;
padding-top: 6px;
}
.header p {
color: darkgrey;
padding-bottom: 20px;
}
.main {
display: grid;
grid-template-columns: 15% 70% 15%;
}
.sideleft {
background-color: darkgrey;
height: 636%;
margin-top: -14px;
}
.sideright {
background-color: darkgrey;
height: 636%;
margin-top: -14px;
}
input[type=text] {
width: 25%;
height: 25%;
font-size: 20px;
background-color: white;
color: black;
border-color: black;
}
input[type=text]:hover {
background-color: green;
}
input[type=button] {
width: 25%;
height: 40px;
border-color: black;
margin-top: 25px;
margin-bottom: 25px;
margin-left: 400px;
color: white;
font-size: 15px;
background-color: dimgrey;
}
input[type=button]:hover {
background-color: black;
}
label {
padding-left: 280px;
line-height: 60px;
}
</style>
</head>
<body>
<div class="header">
<h1>CALCULATOR</h1>
<p>(Base Conversion)</p>
</div>
<div class="main">
<div class="sideleft"></div>
<div class="middle">
<form name="cal">
<label for="value">Enter Value:</label>  
<input type="text" id="value" name="value" /><br>
<label for="to base">From Base:</label>   
<input type="text" id="from" name="from base" /><br>
<label for="to base">To Base:</label>    
<input type="text" id="to" name="to base" /><br>
<input type="button" value="CONVERT" id="convert" onclick="calculate()" /><br />
<label for="converted">Converted Value:</label>
<input type="text" id="cv" name="converted" /><br>
<input type="button" value="CLEAR" id="clr" onclick="clearvalue()" /><br />
</form>
</div>
<div class="sideright"></div>
</div>
<script type="text/javascript">
function calculate()
{
val=document.getElementById('value').value;
fromB=document.getElementById('from').value;
toB=document.getElementById('to').value;
h=parseInt(val,fromB);
dis=h.toString(toB);
document.getElementById('cv').value=dis;
}
function clearvalue()
{
document.getElementById('cv').value='';
document.getElementById('value').value='';
document.getElementById('from').value='';
document.getElementById('to').value='';
}
</script>
</body>
</html>