-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (88 loc) · 4.17 KB
/
index.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Weight Converter</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container-fluid"> <!--- Container for the weight converter-->
<div class="row justify-content-center">
<div class="col-"> <!--- using bootstrap here for the weight converter-->
<h1 class="display-4 text-center mb-3">Weight Converter</h1> <!--- The title of program-->
<form name="weight Converter">
<div class="form-group "> <!--- Define div class for the form--->
<!----> <input id="lbsInput" oninput="convert_to_grams(), pounds_to_kilograms() " type="number" class="form-control form-control-lg" placeholder="Enter Pounds..."> <!--- input for the form. Large form. --->
</div>
</form>
<p id="notice"> All results are rounded off and truncated(except for metric ton, Imperial Ton, US Ton and Stone).</p>
</div>
</div>
<div id="output"> <!--- Division for the output. --->
<div class="row justify-content-center"> <!--- row for output --->
<!--- Grams -->
<div class="col- card card-primary mb-2" style="margin-right: 1%;"> <!--- Grams --> <!--- Defines the kind of card to be used. --->
<div class="card-block">
<h4>Grams:</h4>
<div id="gramsOutput"></div>
</div>
</div>
<!--- Grams -->
<!--- Kilograms -->
<div class="col- card card-primary mb-2" style="margin-right: 1%;"> <!--- Kilograms --> <!--- Defines the kind of card to be used. --->
<div class="card-block">
<h4>Kilograms:</h4>
<div id="kgOutput"></div>
</div>
</div>
<!--- Kilograms -->
<div class="col- card card-primary mb-2" style="margin-right: 1%;" > <!--- ounces --> <!--- Defines the kind of card to be used. --->
<div class="card-block">
<h4>Ounces:</h4>
<div id="ozOutput"></div>
</div>
</div>
<div class="col- card card-primary mb-2" style="margin-right: 1%;" > <!--- Milligrams --> <!--- Defines the kind of card to be used. --->
<div class="card-block">
<h4>Milligrams:</h4>
<div id="milligramsOutput"></div>
</div>
</div>
<div class="col- card card-primary mb-2"style="margin-right: 1%;" > <!--- Metric Ton --> <!--- Defines the kind of card to be used. --->
<div class="card-block">
<h4>Metric Ton:</h4>
<div id="MetricTonsOutput"></div>
</div>
</div>
</div> <!--- End of row-->
<div class ="row justify-content-center">
<div class="col- card card-primary mb-2" style="margin-right: 1%;" > <!--- Microgram --> <!--- Defines the kind of card to be used. --->
<div class="card-block">
<h4>Microgram:</h4>
<div id="microgramoutput"></div>
</div>
</div>
<div class="col- card card-primary mb-2" style="margin-right: 1%;"> <!--- Imperial Ton --> <!--- Defines the kind of card to be used. --->
<div class="card-block">
<h4>Imperial Ton:</h4>
<div id="imperailtonoutput"></div>
</div>
</div>
<div class="col- card card-primary mb-2" style="margin-right: 1%;"> <!--- US Ton --> <!--- Defines the kind of card to be used. --->
<div class="card-block">
<h4>US Ton:</h4>
<div id="ustonoutput"></div>
</div>
</div>
<div class="col- card card-primary mb-2" style="margin-right: 1%;"> <!--- Stone output --> <!--- Defines the kind of card to be used. --->
<div class="card-block">
<h4>Stone:</h4>
<div id="Stoneoutput"></div>
</div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>