Pika
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function fetchBasic() {

            fetch('https://swapi.dev/api/people/1/')
                .then((res) => res.json())
                .then((luke) => {
                    basic(document.body, luke)
                });

            function basic(dom, json) {
                const table = document.createElement("table");
                table.setAttribute("border", "2")
                dom.appendChild(table);

                for (let key in json) {
                    const tr = document.createElement("tr")
                    tr.setAttribute("style", "background:#00FA9A")
                    const th = document.createElement("th");
                    th.setAttribute("style", "background:#40E0D0")
                    const td = document.createElement("td");
                    td.setAttribute("style", "background:#9400D3")

                    th.innerText = key;
                    td.innerText = json[key];
                    tr.appendChild(th);
                    tr.appendChild(td);
                    table.appendChild(tr)

                }
            }
        }
        // fetchBasic()

        function fetchImproved() {

            fetch('https://swapi.dev/api/people/1/')
                .then((res) => res.json())
                .then((luke) => {
                    improved(luke)
                });

            function improved(json) {
                const table = document.createElement("table");
                table.setAttribute("border", "2")
                for (let [key, value] of Object.entries(json)) {
                    const URL = "https://swapi.co/api/";


                    const tr = document.createElement("tr");
                    tr.setAttribute("style", "background:#00FA9A")
                    const td = document.createElement("td");
                    td.setAttribute("style", "background:#9400D3")
                    const th = document.createElement("th");
                    th.setAttribute("style", "background:#40E0D0")

                    document.body.appendChild(table)
                    table.appendChild(tr)
                    tr.appendChild(th)
                    tr.appendChild(td);
                    th.innerHTML = key;
                    td.innerHTML = value

                    if (!String(value).indexOf(URL)) {
                        const button = document.createElement("button")
                        button.innerHTML = value;
                        button.setAttribute("style", "background: #FF4500")
                        td.appendChild(button);
                    }

                    if (typeof value === "object") {
                        td.innerHTML = '';
                        for (let key in value) {
                            const button = document.createElement("button")
                            td.appendChild(button);
                            button.setAttribute("style", "background:#FF8C00")
                            button.innerHTML = value[key];
                            button.onclick = () => {
                                document.body.removeChild(table)
                                fetch(value[key])
                                    .then((res) => res.json())
                                    .then((json) => improved(json))

                            }
                        }
                    }

                }
            }
        }
        // //fetchImproved()

        function myfetch(url) {
            return new Promise(function (resolve, reject) {
                const xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.responseType = "json";
                xhr.onload = function () {
                    if (xhr.status == 200) {
                        resolve(xhr.response);
                    }
                    else {
                        reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
                    }
                }
                xhr.onerror = () => reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
                xhr.send();
            })
        }

      // race


    </script>

</body>

</html>