JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<select class="nama-nabi" name="state">
            <option value="adam">Adam</option>
            <option value="Nuh">Nuh</option>
          </select>

          <button onclick="ajax_()">Lihat Cerita</button>
        <!-- <div class="nama-nabi">ilyas</div> -->
        <div class="block_">  
            
        </div>

SCSS

.block_{
        margin:  0 auto;
        display: block;
        .card_ {
            width: 240px;
            box-shadow: 0 3px 6px #bbb;
            border-radius: 25px;
            margin: 0 auto;
            display: block;
            .image {
                img {
                    width: 100%;
                    border-radius: 25px 25px 0 0;
                    height: 100%;
                    object-fit: contain;
                }
            }
            .detail {
                padding: 16px;
            }
        }
    }

JavaScript

function ajax_(){
     return new Promise(function(resolve) {
        var nama_nabi = $('.nama-nabi').val().toLowerCase();
        console.log(nama_nabi);
        $.ajax({
            url: 'https://kisahnabi-api-zhirrr.vercel.app/api/searchnabi',
            method: 'GET',
            data: { q : nama_nabi },
            success: (response)=>{
                //$('.block_').children().remove();
                $('.block_').append(`
                <div class="card_">
                    <div class="image">
                        <img src="${response.nabi.image}" alt="${response.nabi.nama}" title="${response.nabi.nama}" class="text-center">
                    </div>
                    <div class="detail">
                        <div class="nama">${response.nabi.nama}</div>
                        <div class="lahir">Tempat di ${response.nabi.tempat}</div>
                        <div class="usia">Wafat di ${response.nabi.umur} Tahun</div>
                    </div>
                </div>
                <br/>

                <div class="kisah">
                </div>
                `)
                resolve(response.nabi.kisah);
                // $('.block_').html()
            }
            // $(".lander .text").html(data.lText.split('\n').join('<br />'));
        })//.done(()=>{
            // var q = $(".kisah").html();
            // var a_ = $(".kisah").html(q.split('\n').join('<br />'));
            // console.log($(".kisah").html(a_));
        //});
     })
}


$(()=>{
    //$('.nama-nabi').select2();
    ajax_();
})

ajax_().then((val) => {
    console.log(val)
    // console.log($('.kisah').html());
    $(".kisah").html(val.split('\n').join('<br />'));
    // $('.kisah').html(val)
})