JSFiddle - React, Tailwind, and code Playground

by Alaksandar Jesus Gene

HTML

<form class="conversions" id="convert">

    <p>    <input type='number' placeholder='Enter the Tempeture' id='temperature' /><span id="unit"></span>
    </p>
    <p><input type='number' placeholder='Result' id='convertedtemperature' disabled /><span id="convunit"></span></p>
    <div id="answer"></div>
    <input type="radio" value="true" name="cel" id="C2f" > <label for="r-    method-pickup">celsius to fahrenheit</label><br>
    <input type="radio" value="false" name="cel" id="f2C" > <label for="r-method-pickup">fahrenheit to celsius</label><br>
    <input type='button' id='converButton' value='convert' onclick="convert()" />
        </form>

JavaScript

function convert(){

    var ctof = document.getElementById("C2f");
    var ftoc = document.getElementById("f2C");
     var temperature = document.getElementById("temperature");
    var unit = document.getElementById("unit");
    var convunit = document.getElementById("convunit");
    var convertedtemperature = document.getElementById("convertedtemperature");

   if(ctof.checked)
       
   {
       convertedtemperature.value=(1.8*temperature.value)+32;
       unit.innerHTML="Celcius";
       convunit.innerHTML="Franheit";
   }
    
   else if(ftoc.checked)
       
   {
       convertedtemperature.value=(temperature.value-32)/1.8;
        convunit.innerHTML="Celcius";
       unit.innerHTML="Franheit";
   }
    
    else
       
   {
       alert ("Please select the conversion type");
   }

}