Hallo Sobat Programming! Selamat Datang dan Salam Koding!

Pada artikel kali ini, kita akan membahas sebuah program sederhana yang saya buat untuk melakukan sorting angka. Program ini dirancang dengan HTML, CSS, dan JavaScript untuk memudahkan kita dalam mengurutkan sekumpulan angka secara ascending maupun descending. Mari kita telusuri lebih dalam bagaimana program ini bekerja dan bagaimana cara menggunakannya.

Deskripsi Program

Program ini diberi nama "Sorting Angka". Dengan menggunakan program ini, pengguna dapat memasukkan sejumlah angka yang dipisahkan oleh koma dan kemudian memilih urutan pengurutan: ascending (menaik) atau descending (menurun). Program akan menampilkan hasil pengurutan dalam sebuah tabel.

Struktur HTML

Bagian pertama dari program ini adalah struktur HTML. HTML digunakan untuk membuat form input dan tabel hasil pengurutan. Berikut adalah kode HTML yang digunakan:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sorting Angka</title>
    <style>
        table {
            width: 25%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Sorting Angka</h1>
    <form id="sortForm">
        <label for="numbersInput">Masukkan Angka:</label>
        <input type="text" id="numbersInput" name="numbersInput" required><br><br>
        <label for="sortOrder">Sort</label>
        <input type="radio" id="ascending" name="sortOrder" value="ascending" checked>
        <label for="ascending">Ascending</label>
        <input type="radio" id="descending" name="sortOrder" value="descending">
        <label for="descending">Descending</label><br><br>
        <button type="button" onclick="sortNumbers()">Sort</button>
    </form>
<br>
    <div id="result">
        <table id="sortedTable">
            <thead>
                <tr>
                    <th>Angka Terurut</th>
                </tr>
            </thead>
            <tbody>
                <!-- Sorted numbers will be inserted here -->
            </tbody>
        </table>
    </div>

    <script>
        function sortNumbers() {
            const numbersInput = document.getElementById('numbersInput').value;
            const sortOrder = document.querySelector('input[name="sortOrder"]:checked').value;
            const numberArray = numbersInput.split(',').map(num => parseFloat(num.trim()));

            if (sortOrder === 'ascending') {
                numberArray.sort((a, b) => a - b);
            } else {
                numberArray.sort((a, b) => b - a);
            }

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

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

Hasil:

Sorting Angka

Angka Terurut

Penjelasan Kode

HTML Head:
- Bagian ini mencakup deklarasi dokumen HTML, pengaturan karakter encoding, dan viewport.
- CSS sederhana digunakan untuk mengatur gaya tabel, seperti lebar tabel, penataan border, dan padding.
HTML Body:
- Judul halaman (<h1>Sorting Angka</h1>).
- Form input untuk memasukkan angka dan memilih urutan pengurutan (ascending atau descending).
- Tabel untuk menampilkan hasil pengurutan.
Form Input:
- Input teks untuk memasukkan angka yang dipisahkan oleh koma.
- Radio button untuk memilih urutan pengurutan.
- Tombol untuk memicu fungsi sortNumbers().
JavaScript:
- Fungsi sortNumbers() digunakan untuk mengambil input angka, mengurutkannya sesuai dengan pilihan pengguna (ascending atau descending), dan menampilkan hasilnya dalam tabel.
- Fungsi ini menggunakan metode split() untuk memisahkan angka, map() untuk mengonversi string menjadi angka, dan sort() untuk mengurutkan angka.
- Hasil pengurutan kemudian dimasukkan ke dalam tabel HTML.

Cara Menggunakan Program

Buka file HTML di browser.
Masukkan angka yang ingin diurutkan di dalam kotak input dengan format dipisahkan oleh koma (misalnya: 5, 3, 8, 1).
Pilih urutan pengurutan (ascending atau descending) dengan menggunakan radio button.
Klik tombol "Sort".
Hasil pengurutan akan ditampilkan dalam tabel di bawah form input.

Kesimpulan

Program "Sorting Angka" ini adalah contoh sederhana dari bagaimana kita bisa menggunakan HTML, CSS, dan JavaScript untuk membuat aplikasi web interaktif. Program ini memungkinkan pengguna untuk dengan mudah mengurutkan angka sesuai keinginan dan menampilkan hasilnya secara rapi dalam tabel. Semoga artikel ini membantu Sobat Programming dalam memahami cara kerja program ini. Selamat mencoba dan terus semangat dalam belajar dan berkoding ria!

Cari Blog Ini

Alpinn's HTML Tutorial

Javascript 8-2: Array Iteration dan Membuat Sorting Angka

Hallo Sobat Programming! Selamat Datang dan Salam Koding!

Deskripsi Program

Struktur HTML

HTML

Hasil:

Sorting Angka

Penjelasan Kode

Cara Menggunakan Program

Kesimpulan

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

Penjelasan Lengkap Tentang PHP Native dan PHP Framework

Javascript 7-3: Membuat Quiz Exam Generator

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