JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<p class="temperature-converter">
  <label class="celsius-wrap">
    <input type="number" class="celsius" value="0">°C
  </label>
  <span class="arrows">⇄</span>
  <label class="fahrenheit-wrap">
    <input type="number" class="fahrenheit">°F
  </label>
</p>

JavaScript

function celsiusToFahrenheit(celsius) {
  return 9 / 5 * celsius + 32
}

function fahrenheitToCelsius(fahrenheit) {
  return 5 / 9 * (fahrenheit - 32)
}

var celsius = document.querySelector('.celsius')
var fahrenheit = document.querySelector('.fahrenheit')
fahrenheit.value = celsiusToFahrenheit(celsius.value)

celsius.oninput = function(e) {
  fahrenheit.value = celsiusToFahrenheit(e.target.value)
}

fahrenheit.oninput = function(e) {
  celsius.value = fahrenheitToCelsius(e.target.value)
}