JSFiddle - React, Tailwind, and code Playground
HTML
<div id="principal">
<form id="form">
<input id="valorX" type="text" size="15" />
<select id="conversao">
<option id1="valor" value="">escolha uma conversao</option>
<option id2="valor" value="FC">F->C</option>
<option id3="valor" value="CF">C->F</option>
</select>
<input id="resultado" type="text" size="15" disabled="true" />
<input id="calcular" type="button" value="Calcular" onclick="opcao()" />
<input id="limpar" type="reset" value="Resetar" />
</form>
</div>
JavaScript
function opcao() {
var escolha = document.getElementById("conversao").value;
if (!escolha.trim()) return alert("Selecione uma conversão");
var valor = valida();
if (!valor) return;
var convertido = converter(escolha, valor);
document.getElementById("resultado").value = convertido + (escolha == 'FC' ? '℃' : '℉');
}
function valida() {
var valor = document.getElementById("valorX").value;
if (!valor.trim()) return alert("Valor não informador");
else return Number(valor);
}
function converter(dePara, valor) {
return dePara == 'FC' ? (valor - 32) * 5 / 9 : (valor * 9 / 5) + 32;
}