JSFiddle - React, Tailwind, and code Playground

by Jordan Marechal

HTML

</h4>Create a mathematical converter for temperature</h4>
      <p>In the zip file you downloaded for this project, open js/hw2ConvertTemp.js. It contains a function called <span style="font-family: monospace;">convertFtoC()</span>
        and one called <span style="font-family: monospace;">convertCtoF()</span>,
        which, at the moment, do nothing. You're going to edit this file to provide the code that
        makes these functions work to convert Fahrenheit to Celsius, and vice
        versa.&nbsp; You can test your code with the form fields below&mdash;your
        conversion code will run whenever you change the content of the input
        fields.</p>
      <p>If the user types in values that are not numbers, do nothing.</p>
      <p>Remember that the formula for converting temperature looks like this:</p>
      <span style="font-family: monospace;">&deg;C x 9/5 + 32 = &deg;F<br>
        <br>
        (&deg;F - 32) x 5/9 = &deg;C</span><br>
      <br>
      &nbsp; <input size="3" id="degC">&deg;C is equal to <span class="degOutput"
        id="degFOut"></span>&deg;F
      <br>&nbsp; <input size="3" id="degF">&deg;F is equal to <span class="degOutput"
        id="degCOut"></span>&deg;C
      <p><br>
      </p>

JavaScript

var convertCtoF = document.getElementById("degC");
 convertCtoF.onchange = function(){  //onchange means that every time the value in the input box changes, this function will run
                var degreesC = document.getElementById("degC").value; // this is the value from the form field
                var degC = (degreesF-32) * (5/9);
                 
              document.getElementById("degC").value=degC;
        
                // your calculations go here. You'll start with the variable degreesC, convert it to Fahrenheit
                //  and place the result in the variable 'degreesF'
                var degreesF = (degC * 9/5 + 32); 
                 
                    return degreesF;// you will set this to the results of your conversion

                // now we write the result to the page
                document.getElementById("degFOut").innerHTML = degreesF;
 }

 var convertFtoC = document.getElementById("degF");
 convertFtoC.onchange = function(){  //onchange means that every time the value in the input box changes, this function will run
                var degreesF = document.getElementById("degF").value; // this is the value from the form field
                var degF = degC= 5/9*(degF-32);
               
                document.getElementById("degF").value=degF;

                // your calculations go here. You'll start with the variable degreesF, convert it to Celsius
                //  and place the result in the variable 'degreesC'
                var degreesC = (degreesF- 32) * (5/9);
                    
                        return degreesC;// you will set this to the results of your conversion


                // now we write the result to the page
                document.getElementById("degCOut").innerHTML = degreesC;
 }