function createTable(parent,data){
    /* let response = await fetch('https://swapi.py4e.com/api/people/1/') */
 /*    .then(res => res.json())
    .then(luke => console.log(luke),createTable(document.body, luke)) */
   /*  let data = await response.json(); */
    let table = document.createElement('table');
    for(let key in data){
        let rows = document.createElement('tr');
        let cols = document.createElement('td');
        rows.innerHTML = `${key}`
        rows.appendChild(cols);
        var matcher = /^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/;
        /* console.log(data); */
        function isUrl(string){
            return matcher.test(string);
        }
        /* function isValidURL(string) {
            var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
            return (res !== null)
          }; */
 /*          if(Array.isArray(data[key])){
            console.log(`${key}`);
            let button = document.createElement('button');
                    data[key].map((element)=>{
                        console.log(`i'am element in arr ${element}`)
                        button.innerText = element;
                    })
            
                    //button.innerText = `${data[key]}`
                } */
                let button= document.createElement('button');
                button.id = 'button';
       if(isUrl(data[key])){
                console.log(`${key}`);
               /*  let button= document.createElement('button'); */
               
                let div = document.createElement('div');
                if(Array.isArray(data[key])){
                    data[key].map((element)=>{
                        let btn = document.createElement('button');
                        console.log(`i'am element in arr ${element}`)
                        btn.innerText = element;
                        cols.appendChild(btn);
                        /* btn.onclick = () =>{
                            fetch(element)
                            .then((res)=> res.json)
                            .then((data) => createTable(div,data));
                        } */
                       btn.addEventListener('click', function fetching(){
                           fetch(element)
                           .then((res) => res.json())
                           .then((data) => createTable(div,data))
                       }) 
                    })
                     //button.innerText = `${data[key]}` 
                } else{
                    button.innerText = `${data[key]}`
                    cols.appendChild(button);
                    button.addEventListener('click', function fetching(){
                        fetch(data[key])
                        .then((res)=> res.json())
                        .then((data) => createTable(div,data));
                    })
                }
               
                cols.appendChild(div);
                
                
                
        } else {
            cols.innerHTML = `${data[key]}`
        }
       /*   if(Array.isArray(data[key])){
                
                console.log(`${key}`);
                let button = document.createElement('button');
                button.innerText = `${data[key]}`
                cols.appendChild(button);
            } else {} */
     
                
                table.appendChild(rows);
                parent.appendChild(table);
            }
        }

/* (async () => {
    let response = await fetch('https://swapi.py4e.com/api/people/1/');
    let data = await response.json
    
}) */
fetch('https://swapi.py4e.com/api/people/1/')
    .then((res)=> res.json())
    .then((data) =>new createTable(document.body, data) );


function myfetch(url){
        return new Promise(function (resolve, reject){
            let xhr = new XMLHttpRequest();
                xhr.open('GET',url,true);
                xhr.send()
                xhr.onreadystatechange = function() {
                if (xhr.readyState != 4) return;
                    if(xhr.status == 200){
                        console.log('ok all working');
                        try{
                            resolve(result = JSON.parse(xhr.responseText))
                        } catch(e){
                            console.log(`something wrong ${e.message}`);
                        }
                        
                } else{
                    reject(alert(xhr.status + ':' + xhr.statusText))
                }
            }  
        })
    }

myfetch('https://swapi.py4e.com/api/people/1/')
    .then(luke => console.log(luke))

const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))    

Promise.race([myfetch('https://swapi.py4e.com/api/people/1/'),delay(135)])
        .then((firstResult)=> console.log('i`m first on this race guys ' + firstResult));