Advertisement
Guest User

Untitled

a guest
Aug 1st, 2024
60
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.70 KB | Source Code | 0 0
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6.  
  7. <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  8.  
  9. <title>Converter</title>
  10. </head>
  11. <body>
  12. <div class="container">
  13. <form>
  14. <div class="form-group row mb-2 mt-4">
  15. <label for="Measure" class="col-sm-2 col-form-label text-end">Measure</label>
  16. <div class="col-sm-10"><select onChange="selectMeasure()" id="Measure" class="form-select"></select></div>
  17. </div>
  18.  
  19. <div class="form-group row mb-2">
  20. <label for="InputUnits" class="col-sm-2 col-form-label text-end">From</label>
  21. <div class="col-sm-10"><select onChange="selectInputUnits()" id="InputUnits" class="form-select"></select></div>
  22. </div>
  23.  
  24. <div class="form-group row mb-2">
  25. <label for="OutputUnits" class="col-sm-2 col-form-label text-end">To</label>
  26. <div class="col-sm-10"><select onChange="selectOutputUnits()" id="OutputUnits" class="form-select"><option></option></select></div>
  27. </div>
  28.  
  29. <div class="form-group row mb-2">
  30. <label for="InputValue" class="col-sm-2 col-form-label text-end">Value</label>
  31. <div class="col-sm-10"><input onInput="setInputValue()" id="InputValue" class="form-control"></div>
  32. </div>
  33.  
  34. <div class="form-group row mb-2">
  35. <div class="col-sm-2 text-end">Results</div>
  36. <div class="col-sm-10"><div id="Results"></div></div>
  37. </div>
  38. </form>
  39. </div>
  40. <script language="javascript">
  41.  
  42. /*** by using a function in the json, we can support other conversions that don't involve simply shifting or scaling the values ***/
  43. const conversions = [
  44. {units:"Millimeter", measure:"Length", conversionFunction:"baseConversion(vValue)"},
  45. {units:"Centimeter", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,10)"},
  46. {units:"Meter", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,1000)"},
  47. {units:"Kilometer", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,1000000)"},
  48. {units:"Klingon Kellicam", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,2000000)"},
  49. {units:"Inch", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,25.4)"},
  50. {units:"Foot", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,304.8)"},
  51. {units:"Yard", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,914.4)"},
  52. {units:"Mile", measure:"Length", conversionFunction:"scaleConversion(vValue,vDirection,1609344)"},
  53.  
  54. {units:"Grams", measure:"Weight", conversionFunction:"baseConversion(vValue)"},
  55. {units:"KiloGrams", measure:"Weight", conversionFunction:"scaleConversion(vValue,vDirection,1000)"},
  56. {units:"Metric Ton", measure:"Weight", conversionFunction:"scaleConversion(vValue,vDirection,1000000)"},
  57. {units:"Ounces", measure:"Weight", conversionFunction:"scaleConversion(vValue,vDirection,28.35)"},
  58. {units:"Lbs", measure:"Weight", conversionFunction:"scaleConversion(vValue,vDirection,453.592)"},
  59. {units:"US Ton", measure:"Weight", conversionFunction:"scaleConversion(vValue,vDirection,907185)"},
  60.  
  61. {units:"Fahrenheit",measure:"Temperature",conversionFunction:"baseConversion(vValue)"},
  62. {units:"Celsius",measure:"Temperature", conversionFunction:"scaleShiftConversion(vValue,vDirection,1.8,32)"},
  63. {units:"Kelvin",measure:"Temperature", conversionFunction:"scaleShiftConversion(vValue,vDirection,1.8,-459.67)"},
  64.  
  65. {units:"Penny", measure:"Money", conversionFunction:"baseConversion(vValue)"},
  66. {units:"Nickle", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,5)"},
  67. {units:"Dime", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,10)"},
  68. {units:"Quarter", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,25)"},
  69. {units:"Half Dollar", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,50)"},
  70. {units:"Dollar", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,100)"},
  71. {units:"Five Dollar", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,500)"},
  72. {units:"Ten Dollar", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,1000)"},
  73. {units:"Fifty Dollar", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,5000)"},
  74. {units:"Hundred Dollar", measure:"Money", conversionFunction:"scaleConversion(vValue,vDirection,10000)"},
  75. {units:"Euro", measure:"Money", conversionFunction:"currencyConversion(vValue,vDirection,'EURO')"},
  76. {units:"Ruble", measure:"Money", conversionFunction:"currencyConversion(vValue,vDirection,'RUBLE')"},
  77.  
  78. {units:"Magnitude",measure:"Quake", conversionFunction:"baseConversion(vValue)"},
  79. {units:"Ergs",measure:"Quake", conversionFunction:"richterConversion(vValue,vDirection)"}
  80. ];
  81.  
  82. init();
  83.  
  84. /*** ui populate ***/
  85.  
  86. function init()
  87. {let i;
  88. let option;
  89. let lastMeasure="?";
  90. const measureSelect = document.getElementById("Measure");
  91. option = document.createElement('option');
  92. option.value="";
  93. measureSelect.appendChild(option);
  94.  
  95. for (i=0; i<conversions.length; i++)
  96. {
  97. if (conversions[i].measure != lastMeasure)
  98. {lastMeasure=conversions[i].measure;
  99. option = document.createElement('option');
  100. option.value=lastMeasure;
  101. option.innerHTML=lastMeasure;
  102. measureSelect.appendChild(option);
  103. }
  104. }
  105. }
  106.  
  107.  
  108. function populateUnitsSelect(selector,skipIndex,selectIndex)
  109. {let i;
  110. let option;
  111. const measureSelect = document.getElementById("Measure");
  112.  
  113. while (selector.firstChild)
  114. selector.removeChild(selector.firstChild);
  115.  
  116. option = document.createElement('option');
  117. option.value=-1;
  118. selector.appendChild(option);
  119. if ((measureSelect.selectedIndex-1)<0) return;
  120.  
  121. for (i=0; i<conversions.length; i++)
  122. {
  123. if ((i!=skipIndex) && (conversions[i].measure==measureSelect.value))
  124. {
  125. option = document.createElement('option');
  126. option.innerHTML=conversions[i].units;
  127. option.value=i;
  128. if (selectIndex==i)
  129. option.selected=true;
  130. selector.appendChild(option);
  131. }
  132. }
  133. }
  134.  
  135.  
  136. /*** ui changes ***/
  137.  
  138. function selectMeasure()
  139. {
  140. populateUnitsSelect(document.getElementById("InputUnits"),-1,-1);
  141. populateUnitsSelect(document.getElementById("OutputUnits"),-1,-1);
  142. setResults();
  143. }
  144.  
  145.  
  146. function selectInputUnits()
  147. {const outputUnitsSelect=document.getElementById("OutputUnits");
  148. const outputSelectedIndex=outputUnitsSelect.selectedIndex;
  149. let selectIndex=-1;
  150. if (outputSelectedIndex>=0)
  151. selectIndex=outputUnitsSelect.options[outputSelectedIndex].value;
  152.  
  153. const inputUnitsSelect=document.getElementById("InputUnits");
  154. const inputSelectedIndex=inputUnitsSelect.selectedIndex;
  155. let skipIndex=-1;
  156. if (inputSelectedIndex>=0)
  157. skipIndex=inputUnitsSelect.options[inputSelectedIndex].value;
  158.  
  159. populateUnitsSelect(outputUnitsSelect,skipIndex,selectIndex);
  160. setResults();
  161. }
  162.  
  163.  
  164. function selectOutputUnits()
  165. {setResults();
  166. }
  167.  
  168.  
  169. function setInputValue()
  170. {setResults();
  171. }
  172.  
  173.  
  174. function setResults()
  175. {const resultsDiv = document.getElementById("Results");
  176. const resultValue=performConversion();
  177. resultsDiv.innerHTML=resultValue;
  178. }
  179.  
  180.  
  181. /*** conversions ***/
  182.  
  183. function performConversion()
  184. {
  185. const inputUnitsIndex=document.getElementById("InputUnits").value;
  186. if (inputUnitsIndex<0) return "";
  187.  
  188. const outputUnitsIndex=document.getElementById("OutputUnits").value;
  189. if (outputUnitsIndex<0) return "";
  190.  
  191. const inputValue=document.getElementById("InputValue").value;
  192. if (inputValue.length==0) return "";
  193. if (isNaN(inputValue)) return "Invalid Number";
  194.  
  195. let vValue=inputValue;
  196. let vDirection=1;
  197. let adjustedToBase = eval(conversions[inputUnitsIndex].conversionFunction);
  198.  
  199. vValue=adjustedToBase;
  200. vDirection=-1;
  201. const resultValue = eval(conversions[outputUnitsIndex].conversionFunction);
  202.  
  203. return resultValue;
  204. }
  205.  
  206.  
  207. function baseConversion(inputValue)
  208. {
  209. return inputValue*1;
  210. }
  211.  
  212. function scaleConversion(inputValue,direction,scale)
  213. {
  214. if (direction==1)
  215. return inputValue * scale;
  216. else
  217. return inputValue / scale;
  218. }
  219.  
  220.  
  221. function shiftConversion(inputValue,direction,shift)
  222. {
  223. return inputValue + (direction * shift);
  224. }
  225.  
  226.  
  227. function scaleShiftConversion(inputValue,direction,scale,shift)
  228. {
  229. if (direction==1)
  230. return shiftConversion(scaleConversion(inputValue,direction,scale),direction,shift);
  231. else
  232. return scaleConversion(shiftConversion(inputValue,direction,shift),direction,scale);
  233. }
  234.  
  235.  
  236. function richterConversion(inputValue,direction)
  237. {
  238. if (direction==-1)
  239. return Math.pow(10,11.8 + (1.5 * inputValue));
  240. else
  241. return ((Math.log(inputValue)/Math.log(10)) - 11.8) / 1.5;
  242. }
  243.  
  244.  
  245. function currencyConversion(inputValue,direction,currency)
  246. {
  247. /* can't find a free api without a key and need to setup an account
  248. so I'm just hard coding the values for now but this could invoke an api
  249. to get the exchange rate on the fly using USD to Currency rate
  250. */
  251.  
  252. let dollarsRatio=0;
  253. switch (currency) {
  254. case 'EURO': dollarsRatio=0.93; break;
  255. case 'RUBLE': dollarsRatio=85.50; break;
  256. default: return "unsupported currency";
  257. }
  258.  
  259. const scale=(1/dollarsRatio)*100; // convert to pennies scale
  260. return scaleConversion(inputValue,direction,scale);
  261. }
  262. </script>
  263. </body>
  264. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement