Cara Membuat Program Cek Suhu dengan JavaScript

By Posted on

Cara Membuat Program Cek Suhu dengan JavaScript – Sobat Java! Pernahkah kamu berpikir untuk membuat program yang dapat membantu dalam menganalisis suhu? Program semacam itu pasti akan sangat berguna, bukan? Nah, kali ini kita akan membahas bagaimana cara membuat Program Cek Suhu dengan JavaScript.

Memahami konsep suhu dan bagaimana mengonversinya dari satu unit ke unit lainnya adalah hal yang penting. Dengan JavaScript, kita dapat membuat program yang dapat melakukan konversi suhu dengan mudah dan cepat. Mari kita bahas langkah-langkahnya!

Hal yang Dibutuhkan untuk Membuat Program Cek Suhu dengan JavaScript

Sebelum memulai proyek untuk membuat Program Cek Suhu dengan JavaScript, ada beberapa hal yang perlu kamu siapkan terlebih dahulu:

  • Perangkat laptop.
  • Sublime Text (Editor kode teks).
  • Google Chrome (Peramban web).
  • Niat yang kuat untuk belajar dan berkarya.

Setelah semua hal tersebut telah disiapkan, kita bisa langsung memulai proses pembuatan program Cek Suhu dengan JavaScript. Pastikan kamu mengikuti setiap langkah dengan cermat, berikut kelas java telah menyiapkan tutorialnya dibawah ini.

Baca Juga:   Cara Membuat Quiz Sederhana dengan JavaScript

Cara Membuat Program Cek Suhu dengan JavaScript

1. Siapkan Folder dan File

Pertama-tama buatlah struktur folder untuk proyek ini dan tambahkan file HTML, CSS, dan JavaScript yang diperlukan, berikut contoh struktur foldernya:

Proyek Cek Suhu

  • index.html
  • style.css
  • script.js

2. Coding File HTML (index.html)

Buatlah file HTML dengan struktur dasar yang dibutuhkan untuk membuat tampilan program, berikut kode HTML yang bisa kamu salin dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Program Cek Suhu JavaScript</h1>
    <div id="input-container">
        <label for="temp">Masukkan Suhu (°C atau °F):</label>
        <input type="text" id="temp" placeholder="Masukkan suhu di sini">
        <br>
        <button id="convert-btn">Konversi</button>
    </div>
    <div id="result-container">
        <p id="result"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Coding File CSS (style.css)

Tambahkan sedikit gaya CSS untuk mempercantik tampilan halaman web program, berikut kode CSS yang bisa kamu salin dibawah ini.

body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 50px;
}

label {
    font-weight: bold;
    margin-right: 10px;
}

input[type="text"] {
    width: 150px;
    padding: 5px;
    margin-bottom: 10px;
}

button {
    padding: 5px 10px;
    background-color: #008CBA;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #005f6b;
}

#result-container {
    margin-top: 20px;
}

#result {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

4. Coding File JavaScript (script.js)

Tambahkan logika JavaScript di dalam file script.js untuk mengkonversi suhu dari Celsius ke Fahrenheit atau sebaliknya, berikut adalah kode JS yang bisa kamu salin.

document.getElementById('convert-btn').addEventListener('click', function() {
    var tempInput = document.getElementById('temp').value.trim();
    var result = document.getElementById('result');

    if (tempInput === '') {
        result.textContent = 'Masukkan suhu terlebih dahulu.';
        return;
    }

    var tempValue = parseFloat(tempInput);
    if (isNaN(tempValue)) {
        result.textContent = 'Masukkan suhu yang valid.';
        return;
    }

    var tempType = tempInput.slice(-1).toUpperCase();
    var convertedTemp;

    if (tempType === 'C') {
        convertedTemp = (tempValue * 9/5) + 32;
        result.textContent = 'Hasil konversi: ' + convertedTemp.toFixed(2) + ' °F';
    } else if (tempType === 'F') {
        convertedTemp = (tempValue - 32) * 5/9;
        result.textContent = 'Hasil konversi: ' + convertedTemp.toFixed(2) + ' °C';
    } else {
        result.textContent = 'Masukkan suhu dalam format yang benar (misal: 30°C atau 80°F).';
    }
});

5. Jalankan Kode

Setelah semua kode ditulis, jalankan program untuk menampilkan website untuk mengkonversi suhu dari Celsius ke Fahrenheit dengan cara membuka file index.html pada folder yang kamu simpan tadi, atau bisa juga dengan melakukan klik kanan pada kode index.html lalu pilih opsi “Open in Browser”.

Baca Juga:   Cara Membuat Program Sederhana dengan JavaScript

6. Menampilkan Hasil

Jika sudah muncul halaman browser baru dan tampil seperti gambar diatas, kamu akan melihat halaman web yang memungkinkan pengguna memasukkan suhu dan menampilkan hasil konversi suhu tersebut. Untuk tampilan gambar diatas adalah ketika notifikasi suhunya tidak berformat dengan benar, sedangkan untuk gambar dibawah ketika suhu sudah dikonversi.

Akhir Kata

Dengan mempelajari langkah-langkah di atas, kamu dapat membuat program sederhana untuk mengonversi suhu dengan JavaScript. Selamat mencoba, Sobat Java! Semoga artikel ini bermanfaat bagi kamu yang ingin mengembangkan keterampilan pemrograman JavaScript dalam menganalisis suhu.

Related posts: