Temperature Converter

In this activity we will look at making an application together, step by step

For this exercise, we are going to make a little application which takes an input value from the user in one of three units of temperature measurement (Celsius, Fahrenheit, or Kelvin) and converts it into one of the other two units of measurement.

Using Codepen (or your own environment, if you'd like) we are going to create the following simple layout

The basic layout we are going to create

While there is nothing stopping you from copying and pasting the code from the examples (except maybe some accidental errors on my part), I highly encourage you to go through and type it out manually, and curiously question every line, to help understand what is going on.

Getting Started

To start things off, we are going to want to put our HTML elements on the screen so that we have something to work with. For the layout I am going to go with, I'm going to put down two input fields, two select boxes, and a button. Let's do that now:

<div>
  <input type="number" id="from-temp" placeholder="Convert From">
  <select name="from-unit" id="from-unit">
    <option value="c" selected>Celsius</option>
    <option value="f">Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
</div>
<div>
  <input type="number" id="to-temp" disabled placeholder="Convert To" >
  <select name="to-unit" id="to-unit">
    <option value="c">Celsius</option>
    <option value="f" selected>Fahrenheit</option>
    <option value="k">Kelvin</option>
  </select>
</div>
<div>
  <button id="convert">Convert</button>
</div>

This is what I am going to start with. This will give us just the basic elements we need to get something working, and we can always come back and make it pretty later. There are a few things going on here which we might not have covered yet, and I will touch on them briefly now.

• Input type number - our two input elements (the text fields) have an attribute on them called type with a value of number. What this does is tell the web browser that i want to make sure the use is only able to put numeric values in these fields. This saves us a bit of effort in validating the user's input (after all, we can't convert text into temperature)

• Input placeholder - The placeholder attribute lets us specify what text to show to our users inside the field before they enter a value. This is a nice simple way to prompt the user with what type of value they should provide

• select element - The select element lets us specify a number of option elements inside it which then get displayed as dropdown selections for the user to choose pre-configured responses from

  • option element selected attribute - the selected attribute lets us specify which options should be selected by default

Connecting our JavaScript

Now that we have a basic layout to work with, we can start connecting some JS to our HTML. We are going to need to assign all 5 controls to variables, and make a function to run when we click our button. For now, we will just make the function copy the "from" value into the "to" field, without converting it. Once this is working, we can look at converting the value.

To do this, I am going to use document.getElementById to target my 5 elements, and store them inside variables, like so:

const fromTemp = document.getElementById('from-temp');
const fromUnit = document.getElementById('from-unit');
const toTemp = document.getElementById('to-temp');
const toUnit = document.getElementById('to-unit');
const convertButton = document.getElementById('convert');

Next, let's make that function. For now, just something simple to get the data flowing. I will make and use the function like this:

const handleClick = () => {
  const temperature = fromTemp.value;
  toTemp.value = temperature;
}

convertButton.addEventListener('click', handleClick);

Now, if we enter some numbers into our "from" field and then click the convert button, the value will be written into the "to" field.

Now, time for the fun stuff.

Converting to other systems

The next thing we need to work on is the functions to actually convert between units of measurement. There are many different ways we could do this. The approach I am going to take is to convert Fahrenheit and Kelvin values into Celsius, and from there, convert it into the desired unit. At most this will take 2 steps, but it will reduce the number of different functions we need, as instead of handling from each unit, to each other unit (3 x 3 = 9) we only need to do from Fahrenheit and Kelvin to Celsius, and back again (only 4 functions). The formulas that we need to make

Celsius to Fahrenheit:

$$(100°C × 9/5) + 32 = 212°F$$

Celsius to Kelvin

$$100°C + 273.15 = 373.15K$$

Let's implement these two functions now:

const celsiusToFahrenheit = (celsius) => (celsius * 9/5) + 32;
const celsiusToKelvin = (celsius) => celsius + 273.15;

Now, we will also implement the inverse functions to convert from these units to celsius.

const kelvinToCelsius = (kelvin) => kelvin - 273.15;
const fahrenheitToCelsius = (fahrenheit) => (farenheit - 32) * 5/9;

With these four functions, we should now be able to convert from any unit, to any other (via a few steps, if necessary)

Hooking things up

Next, we need to use those select elements to determine which operations to perform on the value, and convert the value before inserting it into the output field. To get the value out of the select elements, we can use a couple of DOM API properties. Specifically, select elements have an options property which will give us an array of its options as DOM nodes, and a selectedIndex property, which will return an integer signifying the index of the selected option. by combining these, we can get the currently selected option element, and extract its value property. Doing so would look something like this:

Don't include this in your code, it is just an example of how to access items from a select element.

const value = element.options[element.selectedIndex].value

Using this, let's make a pair of functions. One for getting the user's input converted to celsius, and one for converting that celsius value to whatever the user has selected. These will make use of the functions we made above.

const getInputAsCelsius = () => {
  const input = parseFloat(fromTemp.value);
  const unit = fromUnit.options[fromUnit.selectedIndex].value;
  
  if (unit === 'f') {
    return fahrenheitToCelsius(input);
    
  } else if (unit === 'k') {
    return kelvinToCelsius(input);
  }
  
  return input;
}

const convertCelsiusToUnit = (celsius, unit) => {
  if (unit === 'f') {
    return celsiusToFahrenheit(celsius);
    
  } else if (unit === 'k') {
    return celsiusToKelvin(celsius);
  }
  
  return celsius;
}

Now, we can use these two new functions to orchestrate the conversion for our user. To do this, lets replace our original conversion function with this:

const handleClick = () => {
  const celsius = getInputAsCelsius();
  const unit = toUnit.options[toUnit.selectedIndex].value
  const outputTemp = convertCelsiusToUnit(celsius, unit);
  toTemp.value = outputTemp;
}

This will do the following:

• get the user's provided value, converted to celsius

• get the desired unit to convert to

• convert the celsius value to the desired unit

• replace the value in the output field with this new converted value.

That's it. Give it a go. There are still a few things which can be improved. For example, some conversions will result in long numbers with lots of trailing decimal places, and it could do with some CSS to make it pretty, but the fundamentals are there.

Homework:

• Add some styles to the HTML. Give it some personality

• Make sure the converted value gets rounded down to 2 decimal places (hint: Math.round(100.10) will return 100, so to preserve 2 decimal places, you could do something like Math.round(num * 100) / 100