MINI PROJECT 2 MODUL 8

on

 MINI PROJECT 2 MODUL 8


MINI PROJEct 2 

SORTING

code nya sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SORTING LIST</title>
    <style>
        body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 50px;
}
table {
    margin-top: 20px;
    border-collapse: collapse;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}
th {
    background-color: #f2f2f2;
}
    </style>
</head>
<body>
    <h1>SORTING</h1>

    <label for="angkaInput">Angka</label>
    <input type="text" name="" id="angkaInput">
    <br>
    <label for="sort">Sort</label>
    <input type="radio" name="radio" id="asc" value="ascO" checked>
    <label for="asc">Ascending</label>
    <input type="radio" name="radio" id="desc" value="descO">
    <label for="desc">Descending</label>
    <br>

    <button onclick="Sort()">Sort</button>

    <table id="Result"></table>

    <script>
        function Sort() {
    const InputAngka = document.getElementById('angkaInput').value;
    const arrayNum = InputAngka.split(',').map(Number);

    const ascOr = document.getElementById('asc').checked;

    if(ascOr){
        arrayNum.sort((a, b) => a - b)
    } else {
        arrayNum.sort((a, b) => b - a);
    }

    const Result = document.getElementById('Result');
    Result.innerHTML = "<tr><th> Angka </th></tr>";

    arrayNum.forEach(element => {
       const row = Result.insertRow(-1);
       const cell = row.insertCell(0);
       cell.textContent = element;
    });

    document.getElementById('ascOrder').disabled = true;
    document.getElementById('descOrder').disabled = true;
}
    </script>
</body>
</html>

DAN Ini adalah output yg diberikan:





Comments

Post a Comment