Javascript 8-1: Array Iteration dan Membuat Mini Project Generator Bilangan Prima

- Juni 05, 2024

Hallo Sobat Programming! Selamat Datang dan Salam Koding!

Pada artikel kali ini, kita akan belajar bagaimana cara membuat sebuah Generator Bilangan Prima menggunakan HTML, CSS, dan JavaScript. Bagi kalian yang gemar memprogram, ini adalah salah satu proyek sederhana namun bermanfaat untuk meningkatkan keterampilan coding kalian. Mari kita mulai!

Pendahuluan

Bilangan prima adalah bilangan yang hanya memiliki dua faktor, yaitu 1 dan dirinya sendiri. Membuat sebuah generator bilangan prima dapat membantu kita memahami lebih dalam tentang konsep matematika dasar sekaligus meningkatkan logika pemrograman. Pada proyek ini, kita akan membuat sebuah form yang memungkinkan pengguna memasukkan rentang angka, dan kemudian menghasilkan daftar bilangan prima dalam rentang tersebut.

Langkah-langkah Membuat Generator Bilangan Prima

1. Membuat Struktur HTML

Pertama-tama, kita akan membuat struktur HTML dasar untuk form input dan tempat menampilkan hasil bilangan prima. Berikut adalah kode HTML-nya:a

Generator Bilangan Prima

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generator Bilangan Prima</title>
    <style>
        table {
            width: 25%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Generator Bilangan Prima</h1>
    <form id="primeForm">
        <label for="startNumber">Angka Pertama:</label>
        <input type="number" id="startNumber" name="startNumber" required><br><br>
        <label for="endNumber">Angka Terakhir:</label>
        <input type="number" id="endNumber" name="endNumber" required><br><br>
        <button type="button" onclick="generatePrimes()">Generate</button>
    </form>

    <h2>Bilangan Prima</h2>
    <div id="result">
        <table id="primeTable">
            <thead>
                <tr>
                    <th>Bilangan Prima</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </div>

    <script>
        function isPrime(num) {
            if (num <= 1) return false;
            if (num === 2) return true;
            if (num % 2 === 0) return false;
            for (let i = 3; i <= Math.sqrt(num); i += 2) {
                if (num % i === 0) return false;
            }
            return true;
        }

        function generatePrimes() {
            const startNumber = parseInt(document.getElementById('startNumber').value);
            const endNumber = parseInt(document.getElementById('endNumber').value);
            const primeArray = [];

            for (let i = startNumber + 1; i < endNumber; i++) {
                if (isPrime(i)) {
                    primeArray.push(i);
                }
            }

            const tableBody = document.querySelector("#primeTable tbody");
            tableBody.innerHTML = "";

            primeArray.forEach(prime => {
                const row = document.createElement('tr');
                const cell = document.createElement('td');
                cell.textContent = prime;
                row.appendChild(cell);
                tableBody.appendChild(row);
            });
        }
    </script>
</body>
</html>

Hasil:

Bilangan Prima

Bilangan Prima

2. Menambahkan CSS untuk Tampilan

Di dalam tag <head>, kita menambahkan CSS untuk memperindah tampilan tabel bilangan prima. CSS ini membuat tabel lebih rapi dengan border yang jelas dan teks yang terpusat.

3. Menambahkan Fungsi JavaScript

Selanjutnya, kita akan menambahkan fungsi JavaScript untuk mengecek apakah sebuah bilangan adalah bilangan prima dan untuk menghasilkan bilangan prima dalam rentang yang dimasukkan pengguna. Fungsi isPrime digunakan untuk mengecek keprimaaan sebuah bilangan, dan fungsi generatePrimes untuk menghasilkan bilangan prima dan menampilkannya dalam tabel.

Penjelasan Kode

HTML Form: Form ini berisi dua input untuk angka pertama dan angka terakhir, serta sebuah tombol untuk menjalankan fungsi generatePrimes.
Fungsi isPrime: Fungsi ini mengecek apakah sebuah bilangan adalah bilangan prima dengan memeriksa faktor-faktornya.
Fungsi generatePrimes: Fungsi ini mengambil nilai input dari pengguna, mengecek setiap bilangan dalam rentang tersebut menggunakan isPrime, dan menambahkan bilangan prima yang ditemukan ke dalam tabel.

Penutup

Dengan mengikuti langkah-langkah di atas, kalian sekarang memiliki sebuah Generator Bilangan Prima yang berfungsi dengan baik. Proyek sederhana ini tidak hanya membantu memahami konsep bilangan prima, tetapi juga mengasah keterampilan pemrograman kalian dalam HTML, CSS, dan JavaScript.

Selamat mencoba dan terus eksplorasi dunia pemrograman! Salam koding!

Cari Blog Ini

Alpinn's HTML Tutorial

Javascript 8-1: Array Iteration dan Membuat Mini Project Generator Bilangan Prima

Hallo Sobat Programming! Selamat Datang dan Salam Koding!

Pendahuluan

Langkah-langkah Membuat Generator Bilangan Prima

1. Membuat Struktur HTML

Generator Bilangan Prima

Hasil:

Generator Bilangan Prima

Bilangan Prima

2. Menambahkan CSS untuk Tampilan

3. Menambahkan Fungsi JavaScript

Penjelasan Kode

Penutup

Komentar

Posting Komentar

Postingan populer dari blog ini

Analisis Program To-Do list Sederhana

Ringkasan Capaian Pembelajaran SMK Jurusan Pengembangan Perangkat Lunak dan Gim (Fase E)

Javascript 8-5: Memodifikiasi Inventory Buah Menggunakan Paging

Javascript 8-3: Memahami Iterasi Array pada JavaScript dan Mini Proyek Penghitungan Min, Max, dan Rata-rata

Data Analytic dan Machine Learning

Simple Sunset Links Page Design - HTML & CSS Only

Javascript 8-2: Array Iteration dan Membuat Sorting Angka

Penjelasan Lengkap Tentang PHP Native dan PHP Framework

Javascript 7-3: Membuat Quiz Exam Generator

Javascript 7-2: String, Mengupgrade Mini Project Trayek.