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
Posting Komentar