MODUL 8 Project 3

 PROJECT

• Buat sebuah halaman terdiri dari input angka dan button Find 

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

• Jika button diklik maka akan muncul table yg berisi nilai Min, Max dan Average dari angka yang ada diinput  

KODE :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min, Max, dan Average</title>
    <style>
        table {
            width: 25%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Find Min, Max, dan Average</h1>
    <form id="numberForm">
        <label for="numbersInput">Masukkan Angka:</label>
        <input type="text" id="numbersInput" name="numbersInput" required><br><br>
        <button type="button" onclick="calculateStats()">Find</button>
    </form>
<br>
    <div id="result">
        <table id="statsTable">
            <thead>
                <tr>
                    <th>Min</th>
                    <th>Max</th>
                    <th>Average</th>
                </tr>
            </thead>
            <tbody>
               
            </tbody>
        </table>
    </div>

    <script>
        function calculateStats() {
            const numbersInput = document.getElementById('numbersInput').value;
            const numberArray = numbersInput.split(',').map(num => parseFloat(num.trim()));

            if (numberArray.length === 0 || numberArray.includes(NaN)) {
                alert('Silakan masukkan angka yang valid.');
                return;
            }

            const min = Math.min(...numberArray);
            const max = Math.max(...numberArray);
            const average = numberArray.reduce((sum, num) => sum + num, 0) / numberArray.length;

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

            const row = document.createElement('tr');
            const minCell = document.createElement('td');
            const maxCell = document.createElement('td');
            const averageCell = document.createElement('td');

            minCell.textContent = min;
            maxCell.textContent = max;
            averageCell.textContent = average.toFixed(2);

            row.appendChild(minCell);
            row.appendChild(maxCell);
            row.appendChild(averageCell);
            tableBody.appendChild(row);
        }
    </script>
</body>
</html>

HASIL :



Komentar

Posting Komentar

Postingan populer dari blog ini

Tutorial GitHub Pemula

Gambar
 Cara Menggunakan GitHub Untuk Pertama Kali 1. Kita Menuju Website GitHub (github.com) 2. Kita Melakukan Sign Up 3. Masukkan Email Yang Ingin Digunakan 4. Buat Password (Password dibuat berkombinasi) 5. Buat Username Yang Ingin Digunakan (Hanya Bisa Menggunakan Username Yang Tersedia) 6. Melakukan Verifikasi 7. Memasukkan Kode Verifikasi (Dikirim Melalui Gmail) 8. Akun Anda Sudah Selesai Dibuat 9. Lalu Kita Membuat Repository 10. Tampilan Setelah Membuat Repository 11. Lalu Kita Harus Mendownload Git Bash Untuk Mengupload File Ke Dalam Repository 12.  Lalu Setelah Mendownload Git Bash Kita Menuju ke folder Codingan Kita Lalu Klik Kalan di dalam folder tersebut dan pilih open git bash here 13. Dan Akan Muncul Seperti ini 14. Lalu kita kembali ke website github.com lalu ke repository akan ada promp seperti ini 15. Kita tulis prompt tersebut ke dalam terminal Git Bash 16. Jika sudah kalian tinggal refresh webnya dan Repository Kalian Sudah Jadi  
Baca selengkapnya

Melakukan Kolaborasi GitHub

Gambar
 Kolaborasi Di GitHub Faiz Asfar : Membuat Repository M. Fahri : Membuat Konsep Website M. Althaf : Mendesain Website A. Anthoni : Mencari Ide Tambahan 1. Setelah membuat akun, kita bisa membuat repository untuk melakukan kolaborasi 2. Pilih add collabolators 3. Pilih Add People 4. Invite teman dengan memasukkan username teman
Baca selengkapnya

MODUL 8 Project 2

Gambar
  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 ;         ...
Baca selengkapnya