Program Javascript Sederhana: Konversi Fahrenheit ke Celsius

Roihan Fajareno Januari 15, 2024
Seringkali kita mendapatkan informasi suhu dalam skala yang berbeda. Beberapa negara seperti Amerika menggunakan skala Fahrenheit, sementara negara yang lain menggunakan skala Celsius. Untuk memahami dan membandingkan suhu tersebut, kita harus memiliki alat konversi suhu. Pada artikel kali ini, kita akan membahas bagaimana cara membuat aplikasi sederhana menggunakan HTML dan JavaScript untuk mengonversi suhu dari Fahrenheit ke Celsius.

Source Code

Kalian bisa mencoba kode berikut secara langsung dengan mengklik link ini [JSFiddle Link]
 

Github Repository untuk Mini Project modul Pengenalan Javascript : [Repository]

<!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>
        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";
        };
    </script>
</body>
</html>

Pembahasan

1. Membuat Function Konversi Fahrenheit ke Celsius menggunakan Javascript

Kita telah mengetahui bahwa untuk mengkonversi Fahrenheit menjadi Celsius adalah dengan menggunakan rumus berikut:
Dari rumus tersebut, kita bisa buat Function di Javascript seperti berikut: 
function convertFahrenheitToCelsius(tempF) {
    let tempC = 5/9 * (tempF - 32); 
    return tempC;
}

let fahrenheit = 32;
let celsius = convertFahrenheitToCelsius(fahrenheit);
console.log(celsius, "derajat Celsius"); // Output: 0 derajat Celsius

Kemudian, kita bisa tambahkan method .toLocaleString agar output terlihat seperti skala unit suhu. 
function convertFahrenheitToCelsius(tempF) {
    let tempC = 5/9 * (tempF - 32);
    tempC = tempC.toLocaleString(undefined, {style: "unit", unit: "celsius"});
    return tempC;
}

let fahrenheit = 320;
let celsius = convertFahrenheitToCelsius(fahrenheit);
console.log(celsius); // Output: 160°C

2. Membuat User Interface menggunakan HTML

Di kode sebelumnya, setiap ingin melakukan konversi dengan nilai yang berbeda, kita harus mengubah suatu nilai dalam kode tersebut secara manual. Agar konversi suhu menjadi lebih mudah, pertama kita bisa menggunakan HTML untuk membuat User Interface. 
<!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" placeholder="Input Fahrenheit">
    <button>Convert</button>
    <hr>
</body>
</html>

Dari HTML di atas, akan menghasilkan tampilan seperti berikut:


3. Menghubungkan Javascript dengan HTML dan Buat Alat Konversi menjadi Berfungsi

Setelah membuat User Interface dari HTML, kita bisa menambahkan tag <script> pada dokumen HTML seperti ini: 
<!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" placeholder="Input Fahrenheit">
    <button>Convert</button>
    <hr>

    <script>
        // Kode JS berada di sini
    </script>
</body>
</html>

Kode Javascript bisa di letakkan di dalam dokumen HTML langsung (Internal Javascript) maupun menggunakan file terpisah (external Javascript). Tetapi pada artikel ini saya menggunakan internal Javascript karena kode masih tergolong pendek.

Kemudian kita tambahkan Id pada elemen/tag <input> agar nilai (value) dari elemen tersebut bisa dipanggil dalam kode Javascript nantinya. 
...
<body>
    <label>
        <b>Convert Fahrenheit to Celsius</b>
    </label> <br>
    <input type="number" id="inputTemperature" placeholder="Input Fahrenheit">
    <button>Convert</button>
    <hr>

    <script>
        // Kode JS berada di sini
    </script>
</body>
...

Selanjutnya, tambahkan kode Javascript Function Konversi di dalam tag <script> dengan beberapa penambahan. 
...
  <script>
      function convertFahrenheitToCelsius() {
          let tempF = Number(document.getElementById("inputTemperature").value);
          let tempC = 5/9 * (tempF - 32);
          tempC = Number(tempC.toFixed(2));
          tempF = tempF.toLocaleString(undefined, {style: "unit", unit: "fahrenheit"});
          tempC = tempC.toLocaleString(undefined, {style: "unit", unit: "celsius"});
          window.alert(tempF + " sama dengan " + tempC);
        };
  </script>
...

Pembahasan Function:
function convertFahrenheitToCelsius() {...}
Deklarasi function bernama convertFahrenheitToCelsius dengan parameter kosong.

let tempF = Number(document.getElementById("inputTemperature").value);
Dapatkan nilai/value dari elemen dengan id "inputTemperature" kemudian konvert tipe data menjadi 'Number' karena nilai/value yang didapat dari elemen input selalu memiliki tipe data 'String'. Setelah itu simpan di variabel tempF.

let tempC = 5/9 * (tempF - 32);
tempC = Number(tempC.toFixed(2));
Variabel tempC menyimpan nilai dari hasil rumus konvert Fahrenheit ke Celsius. Kemudian tambahkan method .toFixed(2) dengan tujuan memformat angka menjadi 'String' dengan jumlah digit desimal tertentu (dalam hal ini 2 digit desimal) kemudian konvert tipe data menjadi 'Number' agar bisa di styling di kode selanjutnya.

tempF = tempF.toLocaleString(undefined, {style: "unit", unit: "fahrenheit"});
tempC = tempC.toLocaleString(undefined, {style: "unit", unit: "celsius"});
Method .toLocaleString() mengubah 'Number' menjadi 'String' dengan format tertentu, dalam hal ini di format menjadi skala unit suhu.

window.alert(tempF + " sama dengan " + tempC);
Terakhir, tampilkan hasil menggunakan window.alert(...).

Jangan lupa tambahkan event/attribute onclick pada elemen/tag <button> agar function ini bisa berjalan saat button di klik. 
...
<button onclick="convertFahrenheitToCelsius()">Convert</button>
...

Jika berhasil, bila button 'Convert' di klik akan menunjukan alert sesuai gambar berikut:

Jika ingin hasil konversi ditampilkan di halaman web langsung (tidak menggunakan window.alert), bisa tambahkan hal berikut:

Tambahkan elemen <p> di HTML setelah <hr> dengan format berikut
...
<button onclick="convertFahrenheitToCelsius()">Convert</button>
<hr>

<p id="displayResult" style="display: none;">
   <span id="displayFahrenheit"></span> sama dengan <span id="displayCelsius"></span>
</p>
...

Hapus dan ganti window.alert() dengan kode berikut
Kode ini mengganti isi elemen dengan Id tertentu menggunakan .innerHTML. Lalu ada yang mengubah nilai/value sebuah style display menjadi block menggunakan .style.display.
document.getElementById("displayCelsius").innerHTML = tempC;
document.getElementById("displayFahrenheit").innerHTML = tempF;
document.getElementById("displayResult").style.display = "block";

Bila sudah diganti, setiap button di klik akan memperlihatkan hasil konvert seperti gambar dibawah ini:

Roihan Fajareno

Diposting oleh Roihan Fajareno

Posting Komentar

0 Komentar