DRY Help with the unit converter project

[still remnant]

Here's my Unit Converter project - Scrim
https://scrimba.com/scrim/co4574dd9914da56f3ecbc2cc

I'd like some help in thinking about ways to refactor my render and calculation functions so that it is more DRY.

**What I tried: **
For my first pass, I focused on getting things to work, hence my solution is geared at brute forcing the answer. I had to split up the render function three times so that it would return 3 different responses vs. returning the same response in 3 different divs.

How I plan to approach the refactor:

1. Have one uber Calculation function. It should take an input value and a unit of conversion (ex: meterToFeet, literToGallon) and run all of the calculations.

Is there anything else I should look at?

[lilac ruin]

im very new with JS so i am sure our JS Masters like Bill(the [BEST] cat) could do this even cleaner but this is what i came up with based on your query. lmk if you notice anything wrong with it.
https://scrimba.com/scrim/co95b45d0a49784998335d6b5

i also changed your input in the html from type="text" to type="number". It still outputs a string but this way people can't put in random characters.

which does give you the little arrows on the side of the input. If you would like to remove those, use this in your css

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}```

[still remnant]

thanks a ton, @lilac ruin! I love how elegant your refactor is.
noted changing the input to "number" and thank you for the css to get rid of the arrows.

One question. On line 22 of your scrim, did you mean:
let num += input.value; ?

p.s. what are some good resources to get better at writing DRY code

[lilac ruin]

no, its the same as using Number() or parseInt() to turn a string into a number; i was recently corrected as i thought if the input value came out of the "number" type input, it was a real Number in JS but its still a string. I think it would probably be fine in this situation if it WERE a string, the calculations would prob still work, but just as a safety precaution i used let num = +input.value; //same as let num = Number(input.value);

[lilac ruin]

i sure wish i knew. the only thing that has helped me is just practice. So doing challenges and making convertors and calculators and writing lots of JS. I do an iCodeThis challenge everyday to improve my css + incorporate JS when i can, and theyve recently started a new program called Modes where all the html and css is done for you, and give you challenges to solve with JS. https://iCodeThis.com/?ref=clevermissfox

[still remnant]

thank you

[lilac ruin]

When I made the conversion page in November, my JS was very similar to yours, I was just happy it worked! Funny to look back at it, this was my approach https://scrimba.com/scrim/co3db4b60b5a930b41322c13e