Cara Membuat Konversi Suhu Dengan Javascript

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

Section Artikel

1 Buat Pengubah Suhu

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>

How To javascript