module 7

 Project 1

uat halaman Trayek Generator. Lihat halaman selanjutnya

 • Data trayek diinput dalam sebuah text area 

• Setiap trayek dipisah dengan koma, dan antara kota dalam 1 trayek dipisah menggunakan spasi.

 • Jika button generate diklik, maka akan manghasilkan table seperti pada gambar 

Kode HTMLnya :

   <div class="body">

        <h2>Trayek</h2>

        <textarea id="input" placeholder="Masukkan data trayek" ></textarea>

        <br>

    </div>

    <button id="generateButton" onclick="generateTrayekTable()">Generate</button>

    <table id="tt">

        <thead>

            <tr>

                <th>Trayek</th>

            </tr>

        </thead>

        <tbody id="tb"</tbody>

    </table>

Kode CSS nya:

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 20px;

        }

        h2 {

            margin-top: 120px;

        }

        .body {

            display: flex;

        }

        #input {

            width: 20%;

            height: 250px;

            margin-left: 50px;

        }

        #generateButton {

            margin-top: 10px;

            margin-left: 248px;

            padding: 10px;

            cursor: pointer;

        }

        #tt {

            margin-top: 20px;

            border-collapse: collapse;

            width: 15%;

        }

        #tt th, #tt td {

            border: 1px solid black;

            padding: 8px;

            text-align: center;

        }

    </style>

Kode Javacriptnys:

<script>

    function generateTrayekTable() {

        var inputText = document.getElementById("input").value;

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

   

        var tableBody = document.getElementById("tb");

        tableBody.innerHTML = "";

   

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

            var kotaArray = trayekArray[i].split(' ');

            var row = tableBody.insertRow(i);

            var cell = row.insertCell(0);

            cell.innerHTML = kotaArray.join(' - ');

        }

    }

</script>

Dan inilah hasilnya: