Nama : Bintang Dwi Anggara
Kelas : X-RPL
Kaliini saya akan membuat menconvert dari farenheit ke celcius
Source Code
<!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><h1>PROJEK 1 </h1> <label><b>Convert Fahrenheit to Celsius</b></label> <br> <input type="number" id="inputTemperature" placeholder="Input Fahrenheit"> <button onclick="convertel()">Convert</button> <hr> <p id="displayResult" style="display: none;"> <span id="displayFahrenheit"></span> sama dengan <span id="displayCelsius"></span> </p> <script> function convertel() { // dapatkan nilai dari input let tempF = Number(document.getElementById("inputTemperature").value); // convert fahrenheit ke celsius // .toFixed() memformat sisa desimal, return string // convert kembali menjadi number let tempC = Number((5/9 * (tempF - 32)).toFixed(2)); // tambahkan unit style ke temperature tempF = tempF.toLocaleString(undefined, {style: "unit", unit: "fahrenheit"}); tempC = tempC.toLocaleString(undefined, {style: "unit", unit: "celsius"}); // display hasil document.getElementById("displayCelsius").innerHTML = tempC; document.getElementById("displayFahrenheit").innerHTML = tempF; document.getElementById("displayResult").style.display = "block"; }; </script> </body> </html>
Pembahasan
1..png)
Langkah pertama tambahkan Content Masukkan elemen-elemen HTML untuk judul, formulir input, tombol konversi, dan area untuk menampilkan hasil.
.png)
2.
.png)
langkah kedua tambhkan kode Convertel Fungsi ini akan dijalankan ketika tombol konversi diklik.
3.Langkah ketiga lakukan
nilai suhu Fahrenheit dari elemen HTML dengan ID "inputTemperature" menggunakan document.getElementById("inputTemperature"). Nilai ini diambil melalui properti value dan kemudian diubah menjadi angka (Number) menggunakan Number().
4.
.png)
Langkah keempat adalah tambahkan code seperti diatas Pada baris ini, kita menggunakan rumus konversi suhu dari Fahrenheit ke Celsius:
(5/9 * (tempF - 32)). Hasilnya kemudian dibulatkan menjadi dua desimal menggunakan toFixed(2) dan diubah menjadi angka dengan Number().5.
.png)
Langkah kelima adalah tambahkan code metode
toLocaleString() untuk menambahkan format desimal dan satuan suhu ke nilai Fahrenheit dan Celsius. Parameter {style: "unit", unit: "fahrenheit"} dan {style: "unit", unit: "celsius"} menunjukkan bahwa kita ingin menampilkan nilai dengan satuan Fahrenheit dan Celsius.6.
.png)
Langkah keenam adalah tambhkan kode diatas,code diatas ini mengatur teks yang akan ditampilkan di elemen dengan ID "displayCelsius" dan "displayFahrenheit" menggunakan properti
innerHTML. Selanjutnya, kita menetapkan properti display dari elemen dengan ID "displayResult" menjadi "block", sehingga elemen tersebut akan ditampilkan di halaman web.7.
};
PLalu langkah akhir adalah menutup fungsi JavaScript. Dengan ini, kita telah menguraikan setiap baris kode dalam fungsi
convertel, yang bertanggung jawab untuk mengonversi suhu Fahrenheit ke Celsius dan menampilkan hasilnya di halaman web.
Tidak ada komentar:
Posting Komentar