Skip to content

Commit befcfb7

Browse files
cuthbert86cuthbert86
authored
Add files via upload
imperial weight converter web page
1 parent 9a4251d commit befcfb7

1 file changed

Lines changed: 259 additions & 0 deletions

File tree

‎imperial_weights.html‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Imperial Measurements Weight Converter: Baines Services</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.2/dist/flatly/bootstrap.min.css" rel="stylesheet">
8+
<style>
9+
body {
10+
background: #e6e5e5;
11+
font-family: 'Lato', 'Arial', 'sans-serif';
12+
margin: 0;
13+
padding: 0;
14+
color:blueviolet
15+
}
16+
.container {
17+
max-width: 700px;
18+
margin: 30px auto;
19+
background: #fff;
20+
padding: 28px 36px;
21+
border-radius: 15px;
22+
box-shadow: 0 2px 10px #0001;
23+
}
24+
h1 {
25+
text-align: center;
26+
font-size: 1.8em;
27+
font-weight: bold;
28+
margin-bottom: 30px;
29+
color: #212121;
30+
}
31+
label {
32+
font-weight: bold;
33+
font-size: 1.15em;
34+
margin-top: 22px;
35+
display: block;
36+
}
37+
input, select {
38+
font-size: 1em;
39+
padding: 8px;
40+
width: 70%;
41+
margin: 6px 0 20px 0;
42+
border: 1px solid #aaa;
43+
border-radius: 5px;
44+
}
45+
.row {
46+
display: flex;
47+
justify-content: space-between;
48+
align-items: center;
49+
}
50+
.row label, .row input, .row select {
51+
width: 47%;
52+
}
53+
.buttons {
54+
text-align: center;
55+
margin: 23px 0 10px 0;
56+
}
57+
.buttons button {
58+
background: #42a5f5;
59+
color: #fff;
60+
font-size: 1.1em;
61+
font-weight: bold;
62+
border: none;
63+
padding: 12px 28px;
64+
border-radius: 6px;
65+
margin: 0 14px;
66+
cursor: pointer;
67+
transition: background 0.16s;
68+
}
69+
.buttons button:hover {
70+
background: #215ba6;
71+
}
72+
@media (max-width: 799px) {
73+
.container { width: 97%; min-width: unset; }
74+
.row { flex-direction: column; }
75+
.row label, .row input, .row select { width: 100%; }
76+
}
77+
.dropdown button {
78+
background: #262626;
79+
color: #4da3ff;
80+
border: 1px solid #333;
81+
padding: 10px 15px;
82+
font-size: 1rem;
83+
border-radius: 8px;
84+
cursor: pointer;
85+
}
86+
87+
.dropdown-content {
88+
background: #1a1a1a;
89+
border: 1px solid #333;
90+
}
91+
.dropdown {
92+
position: relative;
93+
display: inline-block;
94+
margin-bottom: 20px;
95+
}
96+
97+
.dropdown-content {
98+
display: none;
99+
position: absolute;
100+
background-color: #1a1a1a;
101+
min-width: 180px;
102+
z-index: 1000;
103+
border-radius: 8px;
104+
padding: 8px 0;
105+
box-shadow: 0 0 10px rgba(0,0,0,0.5);
106+
}
107+
108+
.dropdown-content a {
109+
color: #4da3ff;
110+
padding: 10px 15px;
111+
text-decoration: none;
112+
display: block;
113+
}
114+
115+
.dropdown-content a:hover {
116+
background-color: #333;
117+
}
118+
119+
.show {
120+
display: block;
121+
}
122+
123+
</style>
124+
</head>
125+
<body class="bg-secondary text-white">
126+
<div class="container-fluid p-3 mb-2 bg-info text-dark border border-warning">
127+
<h1>Imperial Measurements Weight Converter: Baines Services</h1>
128+
<div class="dropdown">
129+
<button onclick="toggleDropdown()">More Tools ▼</button>
130+
<div id="dropdown-content" class="dropdown-content">
131+
<a href="#">Volume Converter</a>
132+
<a href="#">length Converter</a>
133+
<a href="#">Temperature Converter</a>
134+
</div>
135+
</div>
136+
<div class="row justify-content-md-center">
137+
<label for="amount1">Amount:</label>
138+
<input class="form-control" type="number" id="amount1" min="0" placeholder="Enter amount">
139+
</div>
140+
<div class="row justify-content-md-center">
141+
<label for="unit1">From Unit:</label>
142+
<select class="form-select" id="unit1" aria-label="select unit"></select>
143+
</div>
144+
<div class="row justify-content-md-center">
145+
<label for="unit2">To Unit:</label>
146+
<select class="form-select" id="unit2" aria-label="select output"></select>
147+
</div>
148+
<div class="row justify-content-md-center">
149+
<label for="amount2">Converted Amount:</label>
150+
<input type="text" id="amount2" disabled>
151+
</div>
152+
<div class="buttons btn btn-dark">
153+
<button id="convertBtn">Convert</button>
154+
<button id="clearBtn" style="background:#888;">Clear All</button>
155+
</div>
156+
</div>
157+
158+
<script>
159+
const units = {
160+
Grain: {base: 1},
161+
scruple: {base: 20},
162+
pennyweight:{base: 24},
163+
dram: {base: 27.34},
164+
ounce: {base: 437.5},
165+
troy_ounce: {base: 480},
166+
troy_pound: {base: 5760},
167+
pound: {base: 7000},
168+
stone: {base: 98000},
169+
quarter: {base: 196000},
170+
hundredweight:{base: 784000},
171+
ton: {base: 15680000}
172+
};
173+
const unitNames = Object.keys(units);
174+
const unitSymbols = {Grain:"G", scruple:"scruple", pennyweight:"pw", dram:"dran", ounce:"oz",
175+
troy_ounce:"toz", troy_ound:"tpd", pound:"Ib", stone:"st", quarter:"quarter", hundredweight:"cent", ton:"ton"};
176+
177+
function populateSelect(selectId) {
178+
const select = document.getElementById(selectId);
179+
select.innerHTML = '';
180+
181+
unitNames.forEach(u => {
182+
const option = document.createElement('option');
183+
option.value = u;
184+
option.text = `${u} (${unitSymbols[u]})`;
185+
select.appendChild(option);
186+
});
187+
}
188+
populateSelect("unit1");
189+
populateSelect("unit2");
190+
document.getElementById('unit1').selectedIndex = 0;
191+
document.getElementById('unit2').selectedIndex = 1;
192+
193+
function convertUnits() {
194+
const amountRaw = document.getElementById("amount1").value;
195+
const from = document.getElementById("unit1").value;
196+
const to = document.getElementById("unit2").value;
197+
const amount = parseFloat(amountRaw);
198+
199+
if (isNaN(amount) || amount < 0) {
200+
window.alert("Please enter a valid non-negative number.");
201+
document.getElementById("amount2").value = "";
202+
return;
203+
}
204+
// Conversion: convert input amount to "Barleycorns" (base), then to target unit
205+
let result = amount * units[from].base;
206+
let toB = units[to].B;
207+
208+
// Match the original Python's way
209+
// (note: you only need to divide by toB, but the original python allowed other pathways, so let's preserve the logic)
210+
let newResult = null;
211+
if (to === "Grain") newResult = result / units[to].base;
212+
else if (to === "scruple") newResult = result / units[to].base;
213+
else if (to === "pennyweight") newResult = result / units[to].base;
214+
else if (to === "dram") newResult = result / units[to].base;
215+
else if (to === "ounce") newResult = result / units[to].base;
216+
else if (to === "troy_ounce") newResult = result / units[to].base;
217+
else if (to === "troy_pound") newResult = result / units[to].base;
218+
else if (to === "pound") newResult = result / units[to].base;
219+
else if (to === "stone") newResult = result / units[to].base;
220+
else if (to === "quarter") newResult = result / units[to].base;
221+
else if (to === "hundredweight") newResult = result / units[to].base;
222+
else if (to === "ton") newResult = result / units[to].base;
223+
else newResult = result / toB;
224+
225+
document.getElementById("amount2").value = newResult;
226+
}
227+
228+
function clearAll() {
229+
document.getElementById("amount1").value = "";
230+
document.getElementById("amount2").value = "";
231+
232+
const unit1 = document.getElementById('unit1');
233+
const unit2 = document.getElementById('unit2');
234+
235+
if (unit1 && unit2) {
236+
unit1.selectedIndex = 0;
237+
unit2.selectedIndex = 1;
238+
}
239+
}
240+
241+
document.getElementById("convertBtn").addEventListener("click", convertUnits);
242+
document.getElementById("clearBtn").addEventListener("click", clearAll);
243+
244+
function toggleDropdown() {
245+
document.getElementById("dropdown-content").classList.toggle("show");
246+
}
247+
248+
// Close dropdown when clicking outside
249+
window.onclick = function(event) {
250+
if (!event.target.matches('.dropdown button')) {
251+
const content = document.getElementById("dropdown-content");
252+
if (content.classList.contains('show')) {
253+
content.classList.remove('show');
254+
}
255+
}
256+
}
257+
</script>
258+
</body>
259+
</html>

0 commit comments

Comments
 (0)