Cara Membuat Program Cek Bilangan Ganjil Genap dengan JavaScript

Posted on

Cara Membuat Program Cek Bilangan Ganjil Genap dengan JavaScript – Tahukah kamu bahwa dalam matematika, terdapat dua klasifikasi dasar dari bilangan bulat, yaitu bilangan ganjil dan bilangan genap? Perbedaan mendasar antara keduanya terletak pada sifat pembagian oleh angka 2.

Mari kita pahami lebih dalam tentang bilangan ganjil dan genap, simak ulasan artikel kelasjava kali ini.

Penjelasan Bilangan Ganjil dan Genap Beserta Sifatnya

Bilangan ganjil merupakan jenis bilangan bulat yang tidak habis dibagi oleh 2. Artinya, jika kita membagi bilangan ganjil dengan 2, akan tersisa sisa pembagian sebesar 1.

Contoh bilangan ganjil: 1, 3, 5, 7, 9, dan seterusnya.

Sedangkan bilangan genap adalah bilangan bulat yang habis dibagi oleh 2 tanpa sisa. Jika dibagi oleh 2, tidak akan ada sisa pembagian.

Contoh bilangan genap: 2, 4, 6, 8, 10, dan seterusnya.

Perlu diketahui bahwa bilangan genap seringkali dikaitkan dengan konsep-konsep tertentu dalam matematika, fisika, dan ilmu komputer? Mari jadikan pembelajaran tentang bilangan genap sebagai langkah awal untuk menjelajahi lebih dalam!

Baca Juga:   Cara Membuat Jam Analog dengan JavaScript

Cara Membuat Program Cek Bilangan Ganjil Genap dengan JavaScript

Salah satu cara yang menarik untuk memahami konsep bilangan ganjil dan genap adalah dengan membuat program sederhana menggunakan JavaScript. Program ini akan meminta input bilangan bulat dari pengguna, kemudian menentukan apakah bilangan tersebut ganjil atau genap, dan akhirnya memberikan output yang sesuai.

1. Siapkan Folder dan File

Pertama-tama kamu perlu menyiapkan struktur folder dan file yang diperlukan untuk proyek ini, berikut adalah contoh struktur foldernya:

Proyek Cek Bilangan Ganjil Genap

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

2. Coding File HTML (index.html)

Buatlah file HTML dengan struktur dasar yang diperlukan untuk membuat tampilan program cek bilangan ganjil dan genap, 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>
    <h2>Program Cek Bilangan Ganjil Genap JavaScript</h2>
    <div id="input-container">
        <label for="number">Masukkan Bilangan:</label>
        <input type="number" id="number" placeholder="Masukkan bilangan">
        <br>
        <button id="check-btn">Cek</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 kode CSS agar tampilan website terlihat lebih menarik dan enak dipandang, 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 {
    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: 20px;
    font-weight: bold;
    color: #333;
}

4. Coding File JavaScript (script.js)

Tambahkan logika JavaScript di dalam file script.js untuk memeriksa apakah bilangan yang diinputkan tersebut adalah bilangan ganjil atau genap, berikut adalah kode JS yang bisa kamu salin.

document.getElementById('check-btn').addEventListener('click', function() {
    var number = parseInt(document.getElementById('number').value);
    var result = document.getElementById('result');
    
    if (number % 2 === 0) {
        result.textContent = number + ' adalah bilangan genap.';
    } else {
        result.textContent = number + ' adalah bilangan ganjil.';
    }
});

5. Jalankan Kode

Setelah semua kode ditulis, jalankan program untuk menampilkan website dari program cek bilangan ganjil genap 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”.

6. Menampilkan Hasil

Jika sudah muncul halaman browser baru dan tampil seperti gambar diatas, maka kamu telah berhasil menampilkan web untuk mengecek Bilangan Ganjil Genap dengan JavaScript. Setelah membuat program tersebut, sekarang kamu memiliki program yang dapat memeriksa apakah sebuah bilangan adalah ganjil atau genap dan menampilkannya dalam sebuah website.

Baca Juga:   Cara Membuat Program Cek Jumlah Kata dengan JavaScript

Akhir Kata

Dengan memahami perbedaan antara bilangan ganjil dan genap, serta membuat program sederhana untuk memeriksanya menggunakan JavaScript, kita dapat melatih kemampuan pemrograman kita sambil memperdalam pemahaman tentang matematika.Semoga penjelasan ini bermanfaat untukmu dalam memahami konsep bilangan ganjil dan genap. Selamat Mencoba!