Modul 8: Find Min, Max, Average [3]

Roihan Fajareno Februari 16, 2024

Tujuan Program

Tujuan Program

Program ini bertujuan untuk membantu pengguna dalam menemukan nilai minimum, maksimum, dan rata-rata dari sejumlah angka yang dimasukkan. Pengguna dapat memasukkan angka-angka tersebut melalui formulir, dan setelah mengeklik tombol "Find", program akan menghitung nilai minimum, maksimum, dan rata-rata dari angka-angka tersebut. Hasil perhitungan tersebut akan ditampilkan dalam sebuah tabel.

Tampilan awal program

Setelah "Find"


Source Code

Source code program ini bisa dilihat di Repository berikut: Source Code Mini Project
Github Repository: Main Repository

Kalian bisa mencoba program ini secara online dengan mengakses link berikut: Github Pages

  index.html 
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mini Project 3</title>
        <style>
            table {
                display: none;
            }
    
            table tr th, table tr td {
                border: 1px solid;
                text-align: center;
                padding: 6px;
            }
        </style>
    </head>
    <body>
        <h1>Find Min, Max, Average</h1>
        <form>
            <label>Angka</label>
            <input type="text" id="angkaInput" placeholder="Example: 1, 2, 3, 4, 5"> <br>
            <button onclick="findNumber()">Find</button>
        </form>
        <hr>
        <table>
            <tr>
                <th>Min</th>
                <th>Max</th>
                <th>Average</th>
            </tr>
            <tr>
                <td id="minCell"></td>
                <td id="maxCell"></td>
                <td id="avgCell"></td>
            </tr>
        </table>
    
        <script src="script.js"></script>
    </body>
    </html>

  script.js 
    let minCell = document.getElementById("minCell");
    let maxCell = document.getElementById("maxCell");
    let avgCell = document.getElementById("avgCell");

    function stringToArray(inputString) {
        let array = inputString.split(',');
        let resultArray = [];
        for (let i = 0; i < array.length; i++) {
            let trimmedValue = array[i].trim();
            let parsedValue = parseFloat(trimmedValue);
            if (!isNaN(parsedValue)) {
                resultArray.push(parsedValue);
            }
        }
        return resultArray;
    }

    function findAverageNum(array) {
        let sum = array.reduce((total, num) => total + num);
        let length = array.length;
        return sum / length;
    }
    
    function findNumber() {
        event.preventDefault();
        let angka = document.getElementById("angkaInput").value;
        let angkaArray = stringToArray(angka);
        let min = Math.min(...angkaArray);
        let max = Math.max(...angkaArray);
        let avg = Number(findAverageNum(angkaArray).toFixed(2));

        minCell.textContent = min;
        maxCell.textContent = max;
        avgCell.textContent = avg;

        document.getElementsByTagName("table")[0].style.display = "block";
    }

Pembahasan

1. Buat Struktur HTML

Buat struktur HTML seperti pada source code. Bagian HTML pada kode ini berperan sebagai antarmuka pengguna (UI) untuk menerima input dari pengguna dan menampilkan hasil perhitungan. Tombol "Find" digunakan untuk memicu perhitungan dan menampilkan hasilnya dalam sebuah tabel HTML.

2. Tambahkan Javascript

Tambahkan tag <script> pada HTML untuk menambahkan Javascript. Bila Javascript berada di file terpisah (external), tambahkan attribute 'src'. Kode seperti pada source code script.js.

Pembahasan Javascript Source Code

1. Inisialisasi variabel, dapatkan elemen HTML berdasarkan id dan simpan dalam variabel. 
let minCell = document.getElementById("minCell");
let maxCell = document.getElementById("maxCell");
let avgCell = document.getElementById("avgCell");

2. function stringToArray(inputString), bertujuan mengonversi string input yang berisi angka yang dipisahkan oleh koma menjadi array angka. Setiap angka di-trim untuk menghilangkan spasi di sekitarnya, kemudian diparse ke float. Angka yang valid kemudian dimasukkan ke dalam array resultArray. 
function stringToArray(inputString) {
    let array = inputString.split(',');
    let resultArray = [];
    for (let i = 0; i < array.length; i++) {
        let trimmedValue = array[i].trim();
        let parsedValue = parseFloat(trimmedValue);
        if (!isNaN(parsedValue)) {
            resultArray.push(parsedValue);
        }
    }
    return resultArray;
}

3. function findAverageNum(array), bertujuan menghitung rata-rata dari semua angka dalam array yang diberikan. Dilakukan dengan menggunakan method .reduce() untuk menjumlahkan semua angka, kemudian hasilnya dibagi dengan panjang array untuk mendapatkan rata-rata. Hasil rata-rata tersebut kemudian dikembalikan/return.   
function findAverageNum(array) {
    let sum = array.reduce((total, num) => total + num);
    let length = array.length;
    return sum / length;
}

4. function findNumber(), berfungsi sebagai pengontrol utama untuk menghitung nilai minimum, maksimum, dan rata-rata dari kumpulan angka yang dimasukkan pengguna. Pertama, event.preventDefault() digunakan untuk mencegah perilaku bawaan form. Kemudian, nilai angka dari input HTML diambil. Fungsi stringToArray() digunakan untuk mengubah string input menjadi array angka. Nilai minimum dan maksimum dari array angka dihitung menggunakan function Math.min() dan Math.max(), masing-masing, dengan operator spread (...) untuk mengurai array. Function findAverageNum() kemudian dipanggil untuk menghitung rata-rata dari array angka. Hasil dari ketiga nilai tersebut kemudian ditampilkan di elemen-elemen HTML yang sesuai, yaitu minCell, maxCell, dan avgCell. Terakhir, elemen table yang awalnya tersembunyi diperlihatkan dengan mengubah display-nya menjadi "block". 
function findNumber() {
    event.preventDefault();
    let angka = document.getElementById("angkaInput").value;
    let angkaArray = stringToArray(angka);
    let min = Math.min(...angkaArray);
    let max = Math.max(...angkaArray);
    let avg = Number(findAverageNum(angkaArray).toFixed(2));

    minCell.textContent = min;
    maxCell.textContent = max;
    avgCell.textContent = avg;

    document.getElementsByTagName("table")[0].style.display = "block";
}

End

Jika sudah, kalian bisa mencoba program tersebut dengan mengakses laman ini.
Roihan Fajareno

Diposting oleh Roihan Fajareno

Posting Komentar

0 Komentar