Convert imperial values to metric by dropdown lists and user input and javascript

Question

I have these variables:

  var imperialConverterTable = {
    inch: 25.4,                 
    foot: 12*25.4,           
    yard: 3*12*25.4,    
    mile: 1760*3*12*25.4
  };
  var metricConverterTable = {
    millimeter: 1, 
    centimeter: 10,  
    decimeter:  100, 
    meter:      1000,  
    kilometer:  1E6,  
    mil:        1E7      
  };

And I want to set up a JavaScript that changes the values immediately on user input. Ideally it also changes values based on what choices the user makes in two different dropdown lists:

I tried to make an if-function like this:

function lengthVal(source,valNum) {

  valNum = parseFloat(valNum);
  var foot = document.getElementById("foot");
  var inch = document.getElementById("inch");
  var yard = document.getElementById("yard");
  var mile = document.getElementById("mile");
  var centimeter = document.getElementById("centimeter");
  var decimeter = document.getElementById("decimeter");
  var meter = document.getElementById("meter");
  var kilometer = document.getElementById("kilometer");
  var mil = document.getElementById("mil");

  if (source=="foot") {
    meter.value=(valNum/3.2808).toFixed(2);
    inch.value=(valNum*12).toFixed(2);
    //and so on for all the values, but no luck so far..
  }

I guess this several questions at once, but just a few hints or comments would be really helpful.

Thomas · Accepted Answer

something like this?

// JS' Numeric system sometimes has some issues that can not be properly represented in binary format
const fixFloat = value => Math.round(value * 1e10) / 1e10;

// a simple definition of the units, imo. very readable
// I made the meter = 1 since in the metric system 
// all other lengths are derived from that. It's literally in the name
// milli-meter == one thousandth meter
// this only affects the values, but not the conversions
const meter = 1,
  decimeter = meter / 10,
  centimeter = meter / 100,
  millimeter = meter / 1000,
  kilometer = meter * 1000,
  mil = 10 * kilometer, // Scandinavian mile, had to look this one up, imo. it's not common

  inch = 25.4 * millimeter,
  foot = 12 * inch,
  yard = 3 * foot,
  mile = 1760 * yard;

// Since I have them defined now, 
// I want to create the options for the prepared select-boxes from these values 

let options = [
    ["Imperial", {
      inch,
      foot,
      yard,
      mile
    }],

    ["Metric", {
      millimeter,
      centimeter,
      decimeter,
      meter,
      kilometer,
      mil
    }]
  ].map(([label, units]) => `

  ${ Object.entries(units)
           .sort((a,b) => a[1] - b[1])
           .map(([unit, value]) => ``)
           .join("
  ")
  }
`)
  .join("")
  .trim();

console.log(options);

[...document.querySelectorAll('#aa, #bb')].forEach(select => {
  select.innerHTML = options;
});

//now let's bring some interactivity to this:

function convert(value, fromScale, toScale) {
  return fixFloat(value * fromScale / toScale);
}

function update(e) {
  // deciding in wich direction to compute, based on what field has been changed
  switch (e.target.id) {
    // -->
    case "a":
    case "bb":
      document.querySelector("#b").value = convert(
        document.querySelector("#a").value,
        document.querySelector("#aa").value,
        document.querySelector("#bb").value
      );
      break;
      
    // <--
    case "b":
    case "aa":
      document.querySelector("#a").value = convert(
        document.querySelector("#b").value,
        document.querySelector("#bb").value,
        document.querySelector("#aa").value
      );
      break;
  }
}

// add the event-listener to the input and select-boxes
[...document.querySelectorAll('select, input')].forEach(elm => {
  elm.oninput = elm.onchange = update;
});

since the top half of this code is just defining the units to create the , you can just write the generated markup directly in the =

Convert imperial values to metric by dropdown lists and user input and javascript

Answers (1)

Related Questions