MODUL 8 Project 2

 PROJECT

• Buat sebuah halaman yang terdiri dari input angka dan pilihan sorting. 

• Bilangan yg diinput adalah angka acak dan dipisah dengan tanda koma. 

• Jika button sorting diklik, maka akan muncul table yang berisi angka dalam keadaan sudah terurut sesuai dengan urutan yang dipilih, apakah ascending atau descending.  

KODE :

<!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 :



Komentar

Postingan populer dari blog ini

MODUL 8 Project 3

Apa itu PHP?