VadymShakhmatenko
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!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>
<style>
     #table ,tr ,  td {
        border: 3px solid black;
        border-collapse: collapse;
        font-size: 17px;
        text-transform: uppercase;
    }
</style>
<body>
    <table id="table">

    </table>
    <script>


        //fetch basic +++ fetch improved

        fetch('https://swapi.dev/api/people/1/')
			  .then(res => res.json())
			  .then(luke => createTable(document.getElementById("table"), luke))

        function createTable(dom , json ){
            let table = document.getElementById('table')
            table.style.border = '2px solid black'
            console.log(json)
                for( let [key , value] of Object.entries(json)){
                    let trKey = document.createElement('tr')
                    trKey.innerHTML = key
                    table.append(trKey)
                    let tdValue = document.createElement('td')
                    trKey.append(tdValue)

                    // tdValue.innerText = value
                    if(typeof value === 'object'){
                        for(val of value){
                            let btn = document.createElement('button')
                            btn.innerHTML = val
                            btn.addEventListener('click' , function(){
                                fetch(val).then(res => res.json()).then(luke => createTable(this.parentNode, luke))
                            })
                            tdValue.append(btn)
                        }
                    }else{
                        let btn = document.createElement('button')
                        btn.innerHTML = value
                        tdValue.append(btn)
                    }
                    
                }
            }


        //myfetch 

        function myfetch(url){
            return new Promise(function(resolve,reject){
                let xhr = new XMLHttpRequest()
                xhr.open('GET' , url , true)
                xhr.send();
                xhr.onreadystatechange = (e) => {
                        if (xhr.readyState != 4) {
                            return;
                        }
                        if (xhr.status === 200) {
                            resolve(JSON.parse(xhr.responseText));

                        }
                        reject("request error");
                    };
                });
            }

        // myfetch('https://swapi.dev/api/people/1/')
  		//   .then(luke => createTable(document.getElementById("myFetch") , luke))
    

        //race
        const random = (min, max) => {
            return Math.floor(Math.random() * (max - min + 1)) + min;
            }
		let delay = (ms) => setTimeout(() =>console.log("delay"), ms);
		Promise.race([myfetch('https://swapi.dev/api/people/1/').then(luke => console.log(luke)), delay(random(10, 200))])


    </script>

    
</body>
</html>