<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Spinner</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
#header{
text-align:center;
height: 100px;
background-color: tan;
padding: 10px;
border-radius: 10px 10px 0px 0px;
}
.container{
background-color: #f8f9fa;
}
#spinner {
display: none;
}
</style>
</head>
<body>
<div class="row m-2">
<div id="header" class="col-md-12">
<h1>Unit Converter</h1>
</div>
</div>
<div class="container mt-2">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="form-group">
<label for="inputValue">Value</label>
<input type="number" class="form-control" id="inputValue" required>
</div>
<div class="form-group">
<label for="inputUnit">From</label>
<select class="form-control" id="inputUnit">
<option value="meters">Meters</option>
<option value="kilometers">Kilometers</option>
<option value="feet">Feet</option>
<option value="miles">Miles</option>
</select>
</div>
<div class="form-group">
<label for="outputUnit">To</label>
<select class="form-control" id="outputUnit">
<option value="meters">Meters</option>
<option value="kilometers">Kilometers</option>
<option value="feet">Feet</option>
<option value="miles">Miles</option>
</select>
</div>
<button id="convert" class="btn btn-primary">Convert</button>
<div class="text-center mt-3">
<div class="spinner-border" id="spinner" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div id="result" class="text-center mt-3"></div>
</div>
</div>
</div>
<script src="js/jquery-3.5.0.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#convert").click(function(e){
var value = parseFloat($("#inputValue").val());
var inpUnit = $("#inputUnit").val();
var outUnit = $("#outputUnit").val();
var resultDiv = document.getElementById('result');
$("#spinner").css("display", "inline-block");
setTimeout(function() {
var conversionRates = {meters: {meters: 1,kilometers: 0.001,feet: 3.28084,miles: 0.000621371},
kilometers: {meters: 1000,kilometers: 1,feet: 3280.84,miles: 0.621371},
feet: {meters: 0.3048,kilometers: 0.0003048,feet: 1,miles: 0.000189394},
miles: {meters: 1609.34,kilometers: 1.60934,feet: 5280,miles: 1} };
var convertedValue = value * conversionRates[inpUnit][outUnit];
$("#spinner").css("display", "none");
$("#result").html(`<h3>${value} ${inpUnit} is equal to ${convertedValue.toFixed(2)} ${outUnit}</h3>`);
}, 1000);
});//End of Click Event
});//End of Document Ready function
</script>
</body>
</html>