api/script.js at master · vikas-032/api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
// fetch('https://randomuser.me/api/',)
// .then(res=>{
//     return res.json();
// }

// )
// .then(data=>{
//         data.foreach( user=>{
// const markup= `<li>${user.name}</li>`

// document.querySelector('ul').insertAdjacentHTML('beforeend', markup);
//             } );
//     })


// .catch(error=>console.log(error));


// var faker = require('faker'); // Faker.js

// api.customer  = {
//     id:    random.special(4, 8),
//     name:  faker.name.findName(),
//     phone: faker.phone.phoneNumber("(###) ###-####"),
//     address: {
//         street: faker.address.streetAddress(),
//         city: faker.address.city(),
//         state: faker.address.state(),
//     }
// } ;

// const url=("https://cat-fact.herokuapp.com/facts");


//  const getFacts = async()=>{
//     console.log("getting data.....");
//     let response = await fetch(URL);
//     console.log(response);
//  } ;

let details = document.querySelector(".details");
let imgContainer = document.querySelector(".img-container");
   let getUserBtn = document.getElementById("get-user-btn");
   let url="https://random-data-api.com/api/v2/users?";


let getUser =() =>{
   fetch(url)
   .then ((resp)=> resp.json())
      .then((data) =>{
         // console.log(data);
         // console.log(data.first_name);
         // console.log(data.last_name);
         // console.log(data.avatar);
         // console.log(data.employment.title);
         // console.log(data.address.city);
         //////

         console.log("hello world ");

         imgContainer.innerHTML =`<img src = ${data.avatar}
         >`;

         details.innerHTML = `
         <h2>${data.first_name} ${data.last_name}</h2>
         <h3>${data.employment.title}</h3>;
         <h4> <i class="fa-solid fa-location-dot"></i>
         ${data.address.city}</h4>`;

         let randomColor =
         "#" + ((Math.random() *  0xfffff) << 0).toString(16).padStart(6 , "0");
 document.documentElement.style.setProperty
 ("--theme-color", randomColor);


   });

};

window.addEventListener("load", getUser);
getUserBtn.addEventListener("click",getUser);