JSFiddle - React, Tailwind, and code Playground
HTML
<input id="fahrenheit" placeholder="fahrenheit" onkeyup="tempConverter(event)"> =
<input id="celsius" placeholder="celsius" onkeyup="tempConverter(event)">
JavaScript
function tempConverter(event){
// using event object to get the parameters
var getTarget = event.target.id;
var getTargetValue = event.target.value;
//When no input value is present
if(getTargetValue ==""){
document.getElementById("celsius").value = "";
document.getElementById("fahrenheit").value = "";
}
// populate the relevant input box
if(isNumber(getTargetValue)){
if(getTarget ==="fahrenheit"){
document.getElementById("celsius").value = getCelcius(getTargetValue);
}
else if(getTarget ==="celsius"){
document.getElementById("fahrenheit").value = getFarenheit(getTargetValue);
}
}
}
// Convert from c->f
function getFarenheit(c){
var f =0;
f = 1.8*c+32;
return f;
}
//Convert from f->c
function getCelcius(f){
var c = 0;
c = (f-32)/1.8;
return c;
}
//test if it is number
function isNumber(test){
return !isNaN(parseFloat(test)) && isFinite(test);
}