MINI PROJECT 3 MODUL 8

on

 MINI PROJECT 3 MODUL 8


  • MINI PROJECT 3
MIN & MAX
Berikut adalah code nya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min Max Generator</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>Min Max Generator</h1>

    <label for="InputNum">Angka</label>
    <input type="text" id="InputNum" name="input">
    <br>
    <button type="button" onclick="Find()">Find</button>

    <table id="result"></table>

    <script>
        function Find() {
    const Input = document.getElementById('InputNum').value;
    const Num = Input.split(',').map(Number);

    const Min = Math.min(...Num);
    const Max = Math.max(...Num);
    const Average = Num.reduce((sum, num) => sum + num,0) / Num.length;

    const result = document.getElementById('result');
    result.innerHTML = `
    <tr>
        <td>Min</td>
    </tr>
    <tr>
        <td>${Min}</td>
    </tr>
    <tr>
        <td>Max</td>
    </tr>
    <tr>
        <td>${Max}</td>
    </tr>
    <tr>
        <td>Average</td>
    </tr>
    <tr>
        <td>${Average.toFixed(2)}</td>
    </tr>
    `;
}
    </script>
</body>
</html>

Dan output yg diberikan sebagai berikut:





Comments

Post a Comment