Temperature Converter

Javascript Exercise from Nashville Software School

by Jessawynne

HTML

<body>
  <header>Welcome to the Basic Javascript Temperature Converter</header>
  <div style="text-align: center; margin: 1em">
    <input type="text" id="orig-temp" placeholder="Enter Temperature">
  </div>
  
  <form class="convert" style="text-align: center; margin: 1em">

    <input type="radio" name="temp" value="fahrenheit"> :Fahrenheit

    <input type="radio" name="temp" value="celsius"> :Celsius

  </form>

  <div id="temp-converted" style="text-align: center; margin: 1em"></div>

  <button id="convert-button">Convert</button>

  <button id="clear-button">Clear</button>
</body>

CSS

body, header {
  text-align: center;
  margin-bottom: 1em;
};
input {
  margin-bottom: 1em;
};

JavaScript

/*
  ...........YOUR MISSION...........

  Write a program that will convert a temperature from
  fahrenheit to celsius, or from celsius to fahrenheit.

  1. In the HTML, have one input field where someone can enter
      in a temperature.
  2. Create a radio button group where Celsius or Fahrenheit 
      can be selected as the scale that the number should be 
      converted to.
  3. Create a block level element that will hold the text of the
      converted temperature.
  4. Create a button that, when clicked, displays the converted.
  5. Create another button that, when clicked, clears any text
      in the input field.
  6. Add an event handler to the input field that checks if the 
      user pressed the enter key, and if that happens, perform
      the conversion.

  7. If the temperature is greater than 90F/32C the color of 
      the converted temperature should be red.
  8. If the temperature is less than 32F/0C the color of 
      the converted temperature should be blue.
  9. For any other temperature, the color should be green.
*/

function toCelsius(temp) {
  document.getElementById("temp-converted").innerHTML = Math.round((temp * (9 / 5)) + 32);
    console.log("toCelsius", toCelsius);

  var newCelTemp = document.getElementById("temp-converted").innerHTML;
    console.log("newCelTemp", newCelTemp);
    
    if (newCelTemp >= 32) {
      document.getElementById("temp-converted").style.color = "red";
    } else if (newCelTemp <= 0) {
      document.getElementById("temp-converted").style.color = "blue";
    } else {
      document.getElementById("temp-converted").style.color = "green";
    };
};

function toFahrenheit (temp) {
  document.getElementById("temp-converted").innerHTML = Math.round((temp - 32) * (5 / 9));  
    console.log("toFahrenheit", toFahrenheit);

  var newFahTemp = document.getElementById("temp-converted").innerHTML;
    console.log("newFahTemp", newFahTemp); 

    if (newFahTemp >= 90) {
     ...