How To

Cara Membuat Konversi Suhu Dengan Javascript

Di bawah ini kita akan mempelajari cara membuat pengubah suhu dengan HTML dan JavaScript.

Buat Pengubah Suhu

Buat elemen masukan yang dapat mengubah nilai dari satu pengukuran suhu ke pengukuran lainnya.

Langkah 1) Tambahkan HTML:
Contoh – Fahrenheit ke Celcius

<p>
  <label>Fahrenheit</label>
  <input id="inputFahrenheit" type="number" placeholder="Fahrenheit"
  oninput="temperatureConverter(this.value)"
  onchange="temperatureConverter(this.value)">
</p>
<p>Celsius: <span id="outputCelsius"></span></p>

Langkah 2) Tambahkan JavaScript:
Contoh – Fahrenheit ke Celcius

/* Saat field masukan menerima masukan, ubah nilai dari fahrenheit ke celsius */function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputCelsius").innerHTML = (valNum-32) / 1.8;
}

Mengkonversi dari Fahrenheit ke Pengukuran lain

Tabel di bawah ini menunjukkan cara mengonversi dari Fahrenheit ke pengukuran suhu lainnya:

Konversi dari Fahrenheit ke Celsius

Rumus : ℃ = (℉ -32) /1.8

function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputCelsius").innerHTML = (valNum-32) / 1.8;
}
<!DOCTYPE html>
<html>
<title> Pengonversi Suhu Fahrenheit ke Celsius </title>
<body>
<h2> Pengubah Suhu </h2>
<p> Ketik nilai dalam fields Fahrenheit untuk mengonversi nilai menjadi Celsius: </p>

<p>
  <label>Fahrenheit</label>
  <input id="inputFahrenheit" type="number" placeholder="Fahrenheit" oninput="temperatureConverter(this.value)" onchange="temperatureConverter(this.value)">
</p>
<p>Celcius: <span id="outputCelcius"></span></p>

<script>
function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputCelcius").innerHTML=(valNum-32)/1.8;
}
</script>

</body>
</html>

Konversi dari Fahrenheit ke Kelvin

Rumus : K = ((℉ -32) /1.8) +273,15

function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputKelvin").innerHTML=((valNum-32)/1.8)+273.15;
}
<!DOCTYPE html>
<html>
<title> Pengubah Suhu Fahrenheit ke Kelvin </title>
<body>

<h2> Pengubah Suhu </h2>
<p> Ketik nilai dalam fields Fahrenheit untuk mengonversi nilai menjadi Kelvin: </p>

<p>
   <label> Fahrenheit </label>
  <input id="inputFahrenheit" type="number" placeholder="Fahrenheit" oninput="temperatureConverter(this.value)" onchange="temperatureConverter(this.value)">
</p>
<p>Kelvin: <span id="outputKelvin"></span></p>

<script>
function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputKelvin").innerHTML=((valNum-32)/1.8)+273.15;
}
</script>

</body>
</html>

Mengkonversi dari Celsius ke Pengukuran lain

Tabel di bawah ini menunjukkan cara mengonversi dari Celsius ke pengukuran suhu lainnya:

Konversi dari Celsius ke Fahrenheit

Rumus : ℉ = (℃ * 1.8) +32

function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputFahrenheit").innerHTML=(valNum*1.8)+32;
}
<!DOCTYPE html>
<html>
<title> Pengubah Suhu Celcius ke Fahrenheit </title>
<body>

<h2> Pengubah Suhu </h2>
<p> Ketik nilai dalam fields Celsius untuk mengonversi nilai menjadi Fahrenheit: </p>
<p>
  <label>Celsius</label>
  <input id="inputCelsius" type="number" placeholder="Celsius" oninput="temperatureConverter(this.value)" onchange="temperatureConverter(this.value)">
</p>
<p>Fahrenheit: <span id="outputFahrenheit"></span></p>

<script>
function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputFahrenheit").innerHTML=(valNum*1.8)+32;
}
</script>

</body>
</html>

Konversi dari Celsius ke Kelvin

Rumus : K = ℃ + 273,15

function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputKelvin").innerHTML=valNum+273.15;
}
<!DOCTYPE html>
<html>
<title> Konverter Suhu Celsius ke Kelvin </title>
<body>

<h2> Pengubah Suhu </h2>
<p> Ketik nilai dalam fields Celsius untuk mengonversi nilai menjadi Kelvin: </p>

<p>
  <label>Celsius</label>
  <input id="inputCelsius" type="number" placeholder="Celsius" oninput="temperatureConverter(this.value)" onchange="temperatureConverter(this.value)">
</p>
<p>Kelvin: <span id="outputKelvin"></span></p>

<script>
function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputKelvin").innerHTML=valNum+273.15;
}
</script>

</body>
</html>

Mengkonversi dari Kelvin ke Pengukuran lain

Tabel di bawah ini menunjukkan cara mengonversi dari Kelvin ke pengukuran suhu lainnya:

Konversi dari Kelvin ke Fahrenheit

Rumus : ℉ = ((K-273.15) * 1.8) +32

function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputFahrenheit").innerHTML=((valNum-273.15)*1.8)+32;
}
<!DOCTYPE html>
<html>
<title> Konverter Suhu Kelvin ke Fahrenheit </title>
<body>

<h2> Pengubah Suhu </h2>
<p> Ketik nilai di fields Kelvin untuk mengonversi nilai menjadi Fahrenheit: </p>

<p>
  <label>Kelvin</label>
  <input id="inputKelvin" type="number" placeholder="Kelvin" oninput="temperatureConverter(this.value)" onchange="temperatureConverter(this.value)">
</p>
<p>Fahrenheit: <span id="outputFahrenheit"></span></p>

<script>
function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputFahrenheit").innerHTML=((valNum-273.15)*1.8)+32;
}
</script>

</body>
</html>

Konversi dari Kelvin ke Celsius

Rumus : ℃ = K-273,15

function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputCelcius").innerHTML=valNum-273.15;
}
<!DOCTYPE html>
<html>
<title> Konverter Suhu Kelvin ke Celsius </title>
<body>
<h2> Pengubah Suhu </h2>
<p> Ketik nilai di fileds Kelvin untuk mengonversi nilai menjadi Celsius: </p>

<p>
  <label>Kelvin</label>
  <input id="inputKelvin" type="number" placeholder="Kelvin" oninput="temperatureConverter(this.value)" onchange="temperatureConverter(this.value)">
</p>
<p>Celcius: <span id="outputCelcius"></span></p>

<script>
function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputCelcius").innerHTML=valNum-273.15;
}
</script>

</body>
</html>

Hanifah Nurbaeti

Share
Tags: How Tojavascript