Halaman Trayek Generator dengan Tabel Hasil

 Trayek Generator 

  • Buat halaman Trayek Generator.
  • 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

Html:
<h1>Trayek Generator</h1>
    <textarea id="trayekInput" rows="4" cols="50" placeholder="Masukkan trayek (pisahkan dengan koma, dan antar kota dengan spasi)"></textarea>
    <br>
    <button onclick="generateTable()">Generate</button>

    <div id="result"></div>

css:
<style>
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
            width: 190px;
        }

        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            padding: 8px;
            text-align: left;
        }
       


    </style>

JavaScript:
<script>
        function generateTable() {
            // Ambil nilai dari textarea
            var trayekData = document.getElementById('trayekInput').value;

            // Pisahkan trayek berdasarkan koma
            var trayekArray = trayekData.split(',');

            // Buat tabel
            var table = '<table><tr><th>Kota</th></tr>';

            // Loop untuk setiap trayek
            trayekArray.forEach(function(trayek) {
                var kotaArray = trayek.trim().split(' ');
                var kotaWithDash = kotaArray.join(' - ');
                table += '<tr><td>' + kotaWithDash + '</td></tr>';
            });

            table += '</table>';

            // Tampilkan tabel hasil
            document.getElementById('result').innerHTML = table;
        }
    </script>

Output




    • CSS styles untuk menentukan tata letak dan penampilan elemen:
      • table: Membuat tabel dengan batas sel dan lebar 100%, dan memberikan margin atas sebesar 20px serta lebar 190px.
      • th, td: Mengatur batas sel dan tata letak elemen-elemen sel.

  2. <body>: Bagian isi dokumen HTML.

    • <h1>Trayek Generator</h1>: Menampilkan judul halaman.
    • <textarea>: Sebuah area teks yang memungkinkan pengguna memasukkan data trayek.
    • <button onclick="generateTable()">Generate</button>: Tombol yang, ketika diklik, memanggil fungsi generateTable() untuk menghasilkan tabel.
    • <div id="result"></div>: Area di mana tabel hasil akan ditampilkan.

JavaScript Section:

  1. <script>: Menambahkan elemen skrip untuk menyisipkan kode JavaScript.
    • function generateTable() { ... }: Fungsi JavaScript yang dipanggil saat tombol "Generate" diklik.
      • Mendapatkan nilai dari textarea dengan document.getElementById('trayekInput').value.
      • Memisahkan trayek berdasarkan koma dengan split(',').
      • Membuat tabel HTML dan mengisi dengan kota-kota yang diambil dari input.
      • Menggunakan join(' - ') untuk menambahkan spasi sebelum dan sesudah tanda "-" pada setiap trayek.
      • Menyisipkan tabel ke dalam elemen dengan id="result".



Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas Modul 4, 5, 7, 8

Gambar
Modul 4   Mini project dengan menggunakan javascript: 1. Konversi celscius ke derajat < body >     < script src = "script.js" ></ script >     < h2 > Project 1 </ h2 >     < button onclick = "suhu()" > Convert </ button >     < p id = "total" ></ p > </ body > < script > function suhu() {     var cel = prompt ( "Masukan suhu farenheit" )     var far = ( cel - 32 )* 5 / 9     if ( isNaN ( far )){         alert ( "tidak valid" )     } else {         document . getElementById ( "total" ). innerHTML = "jadi " + cel + " derajat farenheit adalah " + far.toFixed(2) + " derajat celcius"     }   } </script> Hasil dari kode tersebut adalah 2. Membuat sebuah list, dan sebuah button. Jika button diklik, setiap item list yang genap akan berubah menjadi biru dan tebal.  ...
Baca selengkapnya

Mini Project Dengan JS by Mikel ibrahim

Gambar
                                Java Script Introduction • Javascript merupakan bahasa pemrograman yang khusus dibuat untuk mengembangkan website.  • Javascript merupakan komponen ke-3 yang harus dikuasai oleh seorang web developer setelah HTML dan CSS.  • Perbedaan fungsi dari Javascript dengan 2 komponen lain adalah sebagai berikut: 1. HTML: Berfungsi untuk mendefinisikan konten/layout darisebuah web  2. CSS: Berfungsi untuk memberikan style/mempercantik halaman website  3. Javascript: Berfungsi untuk mengatur behaviour dari sebuah halaman web. Bagaimana menggunakan Javascript?  • Sama seperti CSS, anda bisa menggunakan Javascript dengan 3 cara.  1. Di dalam elemen body, menggunakan tag script.  2. Di dalam elemen head, menggunakan tag script.  3. Menggunakan file terpisah dengan menggunakan ekstensi .js. Misal main.js. Nama file bisa bebas. Kemudian anda harus menam...
Baca selengkapnya

Membuat sistem yang meng generate list sesuai input yang di masukkan menggunakan JavaScript

Gambar
  Pada saat awal, item list dibuat kosong  Menambahkan input teks dan jumlah. Jika input teks dan jumlah dirubah, maka secara otomatis mengenerate item dengan teks dan jumlah yang sesuai dengan input tadi. Warna hover dan warna teks tetap sama dengan Mini Project 1 Berikut adalah kode html nya:     < label for = "text" > Input Teks: </ label >     < input type = "text" id = "text" placeholder = "Masukkan teks" >     < label for = "quantity" > Input Jumlah: </ label >     < input type = "number" id = "quantity" placeholder = "Masukkan jumlah" min = "1" value = "1" >     < button onclick = " generateListItem ()" > Generate Item </ button > < br >     < ul id = "myList2" ></ ul >     < input onclick = " ChangeBlue ()" type = "radio" name = "color" id = ...
Baca selengkapnya