HTML code of Unit converter
<!DOCTYPE html>
<html>
<head>
<title>Unit Converter</title>
<!– Add Materialize CSS –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css”>
</head>
<body>
<div class=”container”>
<h1 class=”center-align”>Unit Converter</h1>
<div class=”row”>
<div class=”input-field col s6″>
<select id=”fromUnit”>
<option value=”kilometer”>Kilometer</option>
<option value=”meter”>Meter</option>
<option value=”centimeter”>Centimeter</option>
<option value=”decimeter”>Decimeter</option>
<option value=”millimeter”>Millimeter</option>
<option value=”angstrom”>Angstrom</option>
<option value=”mile”>Mile</option>
<option value=”fathom”>Fathom</option>
<option value=”yard”>Yard</option>
<option value=”foot”>Foot</option>
<option value=”hand”>Hand</option>
<option value=”inch”>Inch</option>
<option value=”finger”>Finger</option>
<option value=”bamboo”>Bamboo</option>
<option value=”barleycorn”>Barleycorn</option>
</select>
<label for=”fromUnit”>From:</label>
</div>
<div class=”input-field col s6″>
<select id=”toUnit”>
<option value=”kilometer”>Kilometer</option>
<option value=”meter”>Meter</option>
<option value=”centimeter”>Centimeter</option>
<option value=”decimeter”>Decimeter</option>
<option value=”millimeter”>Millimeter</option>
<option value=”angstrom”>Angstrom</option>
<option value=”mile”>Mile</option>
<option value=”fathom”>Fathom</option>
<option value=”yard”>Yard</option>
<option value=”foot”>Foot</option>
<option value=”hand”>Hand</option>
<option value=”inch”>Inch</option>
<option value=”finger”>Finger</option>
<option value=”bamboo”>Bamboo</option>
<option value=”barleycorn”>Barleycorn</option>
</select>
<label for=”toUnit”>To:</label>
</div>
</div>
<div class=”row”>
<div class=”input-field col s12 m6″>
<input type=”number” id=”inputValue” placeholder=”Enter value to convert”>
<label for=”inputValue”>Value:</label>
</div>
<div class=”input-field col s12 m6″>
<button class=”btn waves-effect waves-light” onclick=”convert()”>Convert</button>
</div>
</div>
<p class=”flow-text” id=”result”></p>
</div>
<!– Add Materialize JavaScript –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js”></script>
</body>
</html>
Java Script of Unit Converter:
document.addEventListener(‘DOMContentLoaded’, function () {
const elems = document.querySelectorAll(‘select’);
const instances = M.FormSelect.init(elems);
});
function convert() {
const fromUnit = document.getElementById(‘fromUnit’).value;
const toUnit = document.getElementById(‘toUnit’).value;
const inputValue = parseFloat(document.getElementById(‘inputValue’).value);
if (isNaN(inputValue)) {
alert(‘Please enter a valid number.’);
return;
}
const conversions = {
kilometer: 1000,
meter: 1,
centimeter: 0.01,
decimeter: 0.1,
millimeter: 0.001,
angstrom: 1e-10,
mile: 1609.34,
fathom: 1.8288,
yard: 0.9144,
foot: 0.3048,
hand: 0.1016,
inch: 0.0254,
finger: 0.022225,
bamboo: 3.048e-5,
barleycorn: 0.00846667,
};
const result = (inputValue * conversions[fromUnit]) / conversions[toUnit];
document.getElementById(‘result’).innerText = `${inputValue} ${fromUnit} is equal to ${result.toFixed(2)} ${toUnit}.`;
}