Conversion for several Units

Same set of functions carry out conversion of values between several units and currency.

by Kojo Arthur

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<nav class="navbar navbar-inverse" style="margin-bottom:0px;">
  <div class="container-fluid">
    <h3 id="" style="text-align:center;color:white;">Convert Values Between Several units</h3>
  </div>
</nav>
<div class="jumbotron well well-lg" style="margin-top:-10px;">
    <div>
	  <h5 id="tm"><!--chronology-->
	    <span id="crndt"></span><!--date-->
	    <span id="crntm"></span><!--time-->
	  </h5>
	</div>  
</div>


  <div class="container">
    <div class="row">
	  <div class="col-md-12">
	     
	  </div>
	</div><br>
	<div class="row">
	  <div class="col-xs-12 col-sm-5">
	    <div id="" style="text-align:;">
		  <h4 id="opSect"></h4>
		</div>
	  </div>
	  <div class="col-xs-12 col-sm-2">
	    <div style="justify-content:center;">
	    <div class="form-group">
		  <select class="form-control" id="opSel" name="">
		    <optgroup label="Weight">  
			  <option  selected="selected" disabled="disabled">Select Conversion</option>
			  <option value="KgPd">Kg - Pound</option>
			  <option vlaue="KgSt">Kg - Stone</option>
			</optgroup>
		    <optgroup label="Length">
		      <option value="KmMi">Km - Mile</option>
			  <option value="FtM">Ft - Metre</option>
			  <option value="YdM">Yard - Metre</option>
			</optgroup>
			<optgroup label="Area">
			  <option value="Ft2M2">Ft&sup2; - Metre&#178;</option>
			  <option value="HcAc">Hectare - Acre</option>
			</optgroup><!--
			<optgroup label="Temperature">
			  <option value="CeF">Celsius - Farenheit</option>
			  <option value="CeK">Celsius - Kelvin</option>
			</optgroup> -->
			<optgroup...

CSS

@charset: utf-8;

body {
margin: 0 auto;
width:;
font-family: Arial;
}

mark{
	font-weight: bold;
}

#tm{
	margin-top: -5px;
}

#tm span{
	font-size: 1em;
	font-weight: bold;
	margin-top: -5px;
}

#crndt{
	float: left;
	
}

#crntm{
	float: right;
	
}

.val{
	display:inline-block;
	width:100%;
}

.valNote{
	font-size:11px;
	font-weight:bold;
	font-style:italic;
	text-align:center;
	font-family:arial;
	font-stretch:wide;
}

JavaScript

"use strict";
document.title = ". : Multiple Converter";
var fVal = document.getElementById("fVal"); //input element for first (user) value
var sVal = document.getElementById("sVal"); //input element for second (computed) value
var fValNote = document.getElementById("fValNote"); //description for first input element
var sValNote = document.getElementById("sValNote"); //description for second input element
var opSect = document.getElementById("opSect"); //title descibing the conversion operation selected
var opSel = document.getElementById("opSel"); //select element containing available conversions
var swp = document.getElementById("swp"); //button element to swap conversion values
var fctr; //factor for conversion
var alFctr = [2.2045855,0.157473,0.621504,0.3048,0.9144,0.0929,2.4709661,3.78541,0.0083864,365,442,506,81]; //array of all factors
var swapState = false; //setting the state of the conversion to NOT yet swapped
var sInd; //selectedIndex for selected conversion 
sVal.style.fontWeight = "bold";
opSel.onchange = selOp;
/*my THIRD and Latest attempt at writing*/

//selOp fuction is now very short
function selOp(){
	sInd = opSel.selectedIndex;
	setDesc(sInd, opSel.options[sInd].text, opSel.options[sInd].text.split("-")[0], opSel.options[sInd].text.split("-")[1]);
	fctr = alFctr[sInd-1];
	convsn(fctr, fVal.value, sVal);
}

function setDesc(a,b,c,d){
	opSect.innerHTML = "Converting between " + b;
	
	if(a<=9){
		if (swapState == false){
			fValNote.innerHTML = "Value in " + c;
			sValNote.innerHTML = "Value in " + d;
		}else{
			fValNote.innerHTML = "Value in " + d;
			sValNote.innerHTML = "Value in " + c;
		}
	}else{
		if (swapState == false){
			fValNote.innerHTML = "Amount in " + c;
			sValNote.innerHTML = "Amount in " + d;
		}else{
			fValNote.innerHTML = "Amount in " + d;
			sValNote.innerHTML = "Amount in " + c;
		}
	}	
}


fVal.addEventListener("keyup", function(){convsn(fctr,this.value,sVal);});
fVal.onchange =...