Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
- <title>Converter</title>
- </head>
- <body>
- <div class="container">
- <form>
- <div class="form-group row mb-2 mt-4">
- <label for="Measure" class="col-sm-2 col-form-label text-end">Measure</label>
- <div class="col-sm-10"><select onChange="selectMeasure()" id="Measure" class="form-select"></select></div>
- </div>
- <div class="form-group row mb-2">
- <label for="InputUnits" class="col-sm-2 col-form-label text-end">From</label>
- <div class="col-sm-10"><select onChange="selectInputUnits()" id="InputUnits" class="form-select"></select></div>
- </div>
- <div class="form-group row mb-2">
- <label for="OutputUnits" class="col-sm-2 col-form-label text-end">To</label>
- <div class="col-sm-10"><select onChange="selectOutputUnits()" id="OutputUnits" class="form-select"><option></option></select></div>
- </div>
- <div class="form-group row mb-2">
- <label for="InputValue" class="col-sm-2 col-form-label text-end">Value</label>
- <div class="col-sm-10"><input onInput="setInputValue()" id="InputValue" class="form-control"></div>
- </div>
- <div class="form-group row mb-2">
- <div class="col-sm-2 text-end">Results</div>
- <div class="col-sm-10"><div id="Results"></div></div>
- </div>
- </form>
- </div>
- <script language="javascript">
- /*** by using a function in the json, we can support other conversions that don't involve simply shifting or scaling the values ***/
- const conversions = [
- {units:"Millimeter", measure:"Length", conversionFunction:"baseConversion(vValue)"},
- {units:"Centimeter", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,10)"},
- {units:"Meter", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,1000)"},
- {units:"Kilometer", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,1000000)"},
- {units:"Klingon Kellicam", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,2000000)"},
- {units:"Inch", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,25.4)"},
- {units:"Foot", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,304.8)"},
- {units:"Yard", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,914.4)"},
- {units:"Mile", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,1609344)"},
- {units:"Grams", measure:"Weight", conversionFunction:"baseConversion(vValue)"},
- {units:"KiloGrams", measure:"Weight", conversionFunction:"scaleConversion(vValue,vDirection,1000)"},
- {units:"Metric Ton", measure:"Weight", conversionFunction:"scaleConversion(vValue,vDirection,1000000)"},
- {units:"Ounces", measure:"Weight", conversionFunction:"scaleConversion(vValue,vDirection,28.35)"},
- {units:"Lbs", measure:"Weight", conversionFunction:"scaleConversion(vValue,vDirection,453.592)"},
- {units:"US Ton", measure:"Weight", conversionFunction:"scaleConversion(vValue,vDirection,907185)"},
- {units:"Fahrenheit",measure:"Temperature",conversionFunction:"baseConversion(vValue)"},
- {units:"Celsius",measure:"Temperature", conversionFunction:"scaleShiftConversion(vValue,vDirection,1.8,32)"},
- {units:"Kelvin",measure:"Temperature", conversionFunction:"scaleShiftConversion(vValue,vDirection,1.8,-459.67)"},
- {units:"Penny", measure:"Money", conversionFunction:"baseConversion(vValue)"},
- {units:"Nickle", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,5)"},
- {units:"Dime", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,10)"},
- {units:"Quarter", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,25)"},
- {units:"Half Dollar", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,50)"},
- {units:"Dollar", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,100)"},
- {units:"Five Dollar", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,500)"},
- {units:"Ten Dollar", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,1000)"},
- {units:"Fifty Dollar", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,5000)"},
- {units:"Hundred Dollar", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,10000)"},
- {units:"Euro", measure:"Money", conversionFunction:"currencyConversion(vValue,vDirection,'EURO')"},
- {units:"Ruble", measure:"Money", conversionFunction:"currencyConversion(vValue,vDirection,'RUBLE')"},
- {units:"Magnitude",measure:"Quake", conversionFunction:"baseConversion(vValue)"},
- {units:"Ergs",measure:"Quake", conversionFunction:"richterConversion(vValue,vDirection)"}
- ];
- init();
- /*** ui populate ***/
- function init()
- {let i;
- let option;
- let lastMeasure="?";
- const measureSelect = document.getElementById("Measure");
- option = document.createElement('option');
- option.value="";
- measureSelect.appendChild(option);
- for (i=0; i<conversions.length; i++)
- {
- if (conversions[i].measure != lastMeasure)
- {lastMeasure=conversions[i].measure;
- option = document.createElement('option');
- option.value=lastMeasure;
- option.innerHTML=lastMeasure;
- measureSelect.appendChild(option);
- }
- }
- }
- function populateUnitsSelect(selector,skipIndex,selectIndex)
- {let i;
- let option;
- const measureSelect = document.getElementById("Measure");
- while (selector.firstChild)
- selector.removeChild(selector.firstChild);
- option = document.createElement('option');
- option.value=-1;
- selector.appendChild(option);
- if ((measureSelect.selectedIndex-1)<0) return;
- for (i=0; i<conversions.length; i++)
- {
- if ((i!=skipIndex) && (conversions[i].measure==measureSelect.value))
- {
- option = document.createElement('option');
- option.innerHTML=conversions[i].units;
- option.value=i;
- if (selectIndex==i)
- option.selected=true;
- selector.appendChild(option);
- }
- }
- }
- /*** ui changes ***/
- function selectMeasure()
- {
- populateUnitsSelect(document.getElementById("InputUnits"),-1,-1);
- populateUnitsSelect(document.getElementById("OutputUnits"),-1,-1);
- setResults();
- }
- function selectInputUnits()
- {const outputUnitsSelect=document.getElementById("OutputUnits");
- const outputSelectedIndex=outputUnitsSelect.selectedIndex;
- let selectIndex=-1;
- if (outputSelectedIndex>=0)
- selectIndex=outputUnitsSelect.options[outputSelectedIndex].value;
- const inputUnitsSelect=document.getElementById("InputUnits");
- const inputSelectedIndex=inputUnitsSelect.selectedIndex;
- let skipIndex=-1;
- if (inputSelectedIndex>=0)
- skipIndex=inputUnitsSelect.options[inputSelectedIndex].value;
- populateUnitsSelect(outputUnitsSelect,skipIndex,selectIndex);
- setResults();
- }
- function selectOutputUnits()
- {setResults();
- }
- function setInputValue()
- {setResults();
- }
- function setResults()
- {const resultsDiv = document.getElementById("Results");
- const resultValue=performConversion();
- resultsDiv.innerHTML=resultValue;
- }
- /*** conversions ***/
- function performConversion()
- {
- const inputUnitsIndex=document.getElementById("InputUnits").value;
- if (inputUnitsIndex<0) return "";
- const outputUnitsIndex=document.getElementById("OutputUnits").value;
- if (outputUnitsIndex<0) return "";
- const inputValue=document.getElementById("InputValue").value;
- if (inputValue.length==0) return "";
- if (isNaN(inputValue)) return "Invalid Number";
- let vValue=inputValue;
- let vDirection=1;
- let adjustedToBase = eval(conversions[inputUnitsIndex].conversionFunction);
- vValue=adjustedToBase;
- vDirection=-1;
- const resultValue = eval(conversions[outputUnitsIndex].conversionFunction);
- return resultValue;
- }
- function baseConversion(inputValue)
- {
- return inputValue*1;
- }
- function scaleConversion(inputValue,direction,scale)
- {
- if (direction==1)
- return inputValue * scale;
- else
- return inputValue / scale;
- }
- function shiftConversion(inputValue,direction,shift)
- {
- return inputValue + (direction * shift);
- }
- function scaleShiftConversion(inputValue,direction,scale,shift)
- {
- if (direction==1)
- return shiftConversion(scaleConversion(inputValue,direction,scale),direction,shift);
- else
- return scaleConversion(shiftConversion(inputValue,direction,shift),direction,scale);
- }
- function richterConversion(inputValue,direction)
- {
- if (direction==-1)
- return Math.pow(10,11.8 + (1.5 * inputValue));
- else
- return ((Math.log(inputValue)/Math.log(10)) - 11.8) / 1.5;
- }
- function currencyConversion(inputValue,direction,currency)
- {
- /* can't find a free api without a key and need to setup an account
- so I'm just hard coding the values for now but this could invoke an api
- to get the exchange rate on the fly using USD to Currency rate
- */
- let dollarsRatio=0;
- switch (currency) {
- case 'EURO': dollarsRatio=0.93; break;
- case 'RUBLE': dollarsRatio=85.50; break;
- default: return "unsupported currency";
- }
- const scale=(1/dollarsRatio)*100; // convert to pennies scale
- return scaleConversion(inputValue,direction,scale);
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement