annadakus

gistfile1.md

$(document).ready(function(){

    function getPersonages() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
      console.log(this)
            if (this.readyState == 4 && this.status == 200) {
                response = JSON.parse(this.responseText);

                callback(response);
            }
        }
        var url = "http://swapi.co/api/people/?format=json&page=1";
        xhttp.open("GET", url, true);
        xhttp.send();

    }

    getPersonages()

    function callback(data) {
        data.results.forEach(function(hero){ //для кожного героя в результаті
            var element = document.createElement("DIV") //створюємо ячейку
            $(element) //перетвоюємо її в Джейквері обєкт
                .addClass("persona-container") // додаємо клас
                .html( //їбошим HTML одним махом
                        '<p class="title-name">Name: <span class="name1">' + hero.name + '</span></p>' +
                        '<p class="title-height ">Height: <span class="height">' + hero.height + '</span></p>' +
                        '<p class="title-gender">Gender: <span class="gender">' + hero.gender + '</span></p>' +
                        '<label><p class="title-quiz">Do you like this hero: <input type="checkbox" name="option2" value="2"></p></label>'
                    );
            $('.personages').append(element) // вставляємо в документ
        })
    }
})