< html lang = "pt-br" >
    < kafa >
        < meta charset = "utf-8" >
        < title > Uygulama Pesquisa Livros < / title >
        < Bağlantı rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" bütünlük = "SHA384-MCw98 / SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin = "anonim" >

        < script >
            getLivros () {işlevi

                izin pesquisa = document.getElementById ('pesquisa'). değer;

                url olsun = `https://www.googleapis.com/books/v1/volumes?q=${pesquisa} & filter = bedava e-kitaplar & maxResults = 40 &`;
                let reqUrl = new XMLHttpRequest ();

                reqUrl.open ('GET', url);

                reqUrl.onreadystatechange = () => {

                    document.getElementById ('conteudo'). innerHTML = '';

                    if (reqUrl.readyState == 4 && reqUrl.status == 200) {

                        let objLivros = JSON.parse (reqUrl.responseText);

                        console.log (objLivros);

                        için (let objLivros.items içinde) {

                            let livro = objLivros.items [l] .volumeInfo;

                            divRow = document.createElement ('div');
                            divRow.className = 'satır sınır-alt sınır-birincil my-3';

                            divCol = document.createElement ('div');
                            divCol.className = 'col-12 col-md-10';

                            divColImagem = document.createElement ('div');
                            divColImagem.className = 'col-12 col-md-2';

                            let let = document.createElement ('h4');
                            title.innerHTML = ` < strong > Título < / strong > : $ {livro.title}`;

                            autores = '';

                            için (bir livro.authors a izin verin) {

                                if (autores) {
                                    autores + = ',';
                                }


                                autores + = livro.authors [a];
                            }

                            let author = document.createElement ('h4');
                            author.innerHTML = ` < strong > Autor (es) < / strong > : $ {autores}`;

                            kategorilere izin ver = '';

                            için (bir livro.categoriler olsun) {

                                if (categorias) {
                                    kategoriler + = ',';
                                }


                                kategoriler + = livro.categoriler [a];
                            }

                            let categoria = document.createElement ('h4');
                            categoria.innerHTML = ` < strong > Categoria (lar) < / strong > : $ {categorias}`;

                            let let = document.createElement ('h4');
                            language.innerHTML = ` < strong > çevirmen < / strong > : $ {livro.language} ';


                            imagemPreview = document.createElement ('img');
                            imagemPreview.src = livro.imageLinks.thumbnail;
                            imagemPreview.className = 'img-fluid';

                            let link = document.createElement ('h4');
                            link.innerHTML = ` < strong > bağlantısını < / strong > : < a href = "$ {livro.canonicalVolumeLink}" hedef = '_blank' şeklinde > $ {livro.canonicalVolumeLink} < / a > `;

                            Document.getElementById ( 'conteúdo') AppendChild (divRow.);
                            divRow.appendChild (divCol);
                            divRow.appendChild (divColImagem);
                            divCol.appendChild (başlık);
                            divCol.appendChild (yazar);
                            divCol.appendChild (Kategori);
                            divCol.appendChild (dil);
                            divColImagem.appendChild (imagemPreview);
                            divCol.appendChild (link);

                        }
                    }
                }

                reqUrl.send ();
            }
        < / script >


    < / kafa >

    < vücut >

        < div class = "container py-3 px-0" >

            < div class = "row" >
                < div class = "col-9 col-md-10" >
                    < input class = "form-control" type = "text" id = "pesquisa" yer tutucu = "Provurar por livros" >
                < / div >
                < div class = "col-3 col-md-2" >
                    < Düğmesi sınıfı = "btn birincil btn" Onclick = ") (getLivros" > Pesquisar < / düğmesi >
                < / div >
            < / div >
        < / div >

        < div class = "container" id = "conteudo" >

        < / div >

    < / vücut >
< / html >