Unit converter app (Feedback please!)

[benzaki]

I created this app using html, css and vanilla javascript, please give me your opinion!

Unit Converter

[bbsmooth]

Just a few suggestions:

• When I manually increase the text size, content starts to break out of its enclosing box. For the selects, I don’t think you need to put a height on these to begin with. Remove that and allow them to grow in height as needed. Same for the inputs. For the three buttons, you should change the height to em units so that they get taller as the text gets bigger. On these you’ll also want the width to be in em to so they can grow wider as the text gets bigger.
• I would have some sort of indicator on the buttons to reflect which one is currently active.
• Also with the buttons, you have removed the outline property but haven’t replaced it with anything so there is no keyboard focus indicator. This is an accessibility issue. All controls on your page should have some sort of keyboard focus indicator when they are active so the user knows where the current focus is. Whatever you go with for the buttons I would also apply to the selects and input as well.
• I would not use an <input> for the output display. It’s the opposite of an input There is actually an <output> tag:
  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output
  But you could also just use a div.
• When I am using any of the three types of conversions and type “1” into the input it offers me some suggestions such as “1c” and “1cup”. When I type in “1cup” the input just gives me a red border as if it is an invalid entry, so it probably shouldn’t be a suggestion. When I type in “2” the suggestion is “2mi”, but when I try to use that the output is 0, even when I have From set to mile and To set to kilometer. Basically, I think there are some issues with the suggestions.
• Speaking of that input, it needs to have a label, placeholder values are not an accessible replacement for labels.
• Don’t use <br> to create vertical spacing. Use CSS.
• One enhancement that might be nice would be to automatically get rid of the unit in the opposing select. For example, if I choose Gram in the From select then automatically remove it from the To select.

[miku86]

Hey there,

nice to meet you!

Great work!

---

Some ideas:

• what happens when you want to change toFixed(6) to a different number? You have to change ~50 lines of code; maybe you want to put this into a helper function
• there are some duplicate cases, e.g. for output.value = inputValue;; I would sort them below each other or put them into one else if to increase readability
• I think some sort of simple testing would be very useful for this kind of application; e.g. you would find errors way faster.

E.g. this one:

else if (fromLength === 'Inch' && toLength === 'Kilometre') {
    output.value = +(inputValue * 39370).toFixed(6);
} 
else if (fromLength === 'Kilometre' && toLength === 'Inch') {
    output.value = +(inputValue * 39370).toFixed(6);
}

or this one:

else if (fromLength === 'Kilometre' && toLength === 'Mile') {
    output.value = +(inputValue / 1.609).toFixed(6);
}
else if (fromLength === 'Meter' && toLength === 'Mile') {
    output.value = +(inputValue / 1609).toFixed(6);
} 

---

Keep up the great work,
looking forward to seeing your next steps!