JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <label>
      <b>Convert Fahrenheit to Celsius</b>
    </label> <br>
    <input type="number" id="inputTemperature" placeholder="Input Fahrenheit">
    <button onclick="convertFahrenheitToCelsius()">Convert</button>
    <hr>
    <p id="displayResult" style="display: none;">
      <span id="displayFahrenheit"></span> sama dengan <span id="displayCelsius"></span>
    </p>

    <script src="script.js">
    /* Connect External JS */
    </script>
  </body>

</html>

JavaScript

function convertFahrenheitToCelsius() {
  // dapatkan nilai/value dari input dengan id "inputTemperature"
  let tempF = Number(document.getElementById("inputTemperature").value);

  // Konversi Fahrenheit menjadi Celsius dengan Rumus...
  let tempC = 5 / 9 * (tempF - 32);

  // method .toFixed() berfungsi memformat angka menjadi string...
  // dengan jumlah digit desimal tertentu.
  // Format kembali menjadi 'Number' agar bisa ditambahkan unit style
  tempC = Number(tempC.toFixed(2));

  // tambahkan unit style ke temperature menggunakan method .toLocaleString()
  tempF = tempF.toLocaleString(undefined, {
    style: "unit",
    unit: "fahrenheit"
  });
  tempC = tempC.toLocaleString(undefined, {
    style: "unit",
    unit: "celsius"
  });

  // tampilkan hasil ke dalam dokumen HTML
  document.getElementById("displayCelsius").innerHTML = tempC;
  document.getElementById("displayFahrenheit").innerHTML = tempF;
  document.getElementById("displayResult").style.display = "block";
};