MINI PROJECT 1 MODUL 7

TRAYEK GENERATOR

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>Trayek Generator</title>

    <style>

        #trayekInput {

            width: 100%;

            height: 100px;

}

    </style>

</head>

<body>

    <h1>Trayek Generator</h1>

    <label for="trayekInput">Masukkan data trayek:</label>

    <textarea id="trayekInput"></textarea>

    <br>

    <button onclick="generateTable()">Generate Table</button>

    <div id="tableContainer"></div>

    <script>

        function generateTable() {

            var trayekInput = document.getElementById("trayekInput").value;

            // Pisahkan setiap trayek berdasarkan koma

            var trayekArray = trayekInput.split(',');

            // Buat tabel HTML

            var tableHTML = '<table border="1"><tr><th>No</th><th>Trayek</th></tr>';

            for (var i = 0; i < trayekArray.length; i++) {

                var trayek = trayekArray[i].trim();

                tableHTML += '<tr><td>' + (i + 1) + '</td><td>' + trayek + '</td></tr>';

}

            tableHTML += '</table>';

            // Tampilkan tabel di dalam div dengan id "tableContainer"

            document.getElementById("tableContainer").innerHTML = tableHTML;

}

    </script>

    <button onclick="refreshPage()">Refresh Page</button>

    <script>

        function refreshPage() {

            // Gunakan location.reload() untuk merefresh halaman

            location.reload();

}

    </script>

</body>

</html>

Dan akan menghasilkan output sebagai berikut:

Blog Pang5