javascript-programs/inter-m-task.html at master · aaftab-vijapura/javascript-programs · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>

  <script>
    const uiData = {
      page: 2,
      per_page: 6,
      total: 12,
      total_pages: 2,
      data: [
        {
          id: 7,
          email: "michael.lawson@reqres.in",
          first_name: "Michael",
          last_name: "Lawson",
          avatar: "https://reqres.in/img/faces/7-image.jpg",
        },
        {
          id: 8,
          email: "lindsay.ferguson@reqres.in",
          first_name: "Lindsay",
          last_name: "Ferguson",
          avatar: "https://reqres.in/img/faces/8-image.jpg",
        },
        {
          id: 9,
          email: "tobias.funke@reqres.in",
          first_name: "Tobias",
          last_name: "Funke",
          avatar: "https://reqres.in/img/faces/9-image.jpg",
        },
        {
          id: 10,
          email: "byron.fields@reqres.in",
          first_name: "Byron",
          last_name: "Fields",
          avatar: "https://reqres.in/img/faces/10-image.jpg",
        },
        {
          id: 11,
          email: "george.edwards@reqres.in",
          first_name: "George",
          last_name: "Edwards",
          avatar: "https://reqres.in/img/faces/11-image.jpg",
        },
        {
          id: 12,
          email: "rachel.howell@reqres.in",
          first_name: "Rachel",
          last_name: "Howell",
          avatar: "https://reqres.in/img/faces/12-image.jpg",
        },
      ],
    };

    for (let i = 0; i < uiData.data.length; i++) {
      const user = uiData.data[i];

      const div = document.createElement("div");
      const headname = document.createElement("h1");
      const getemail = document.createElement("p");
      const getavatar = document.createElement("img");

      div.style.width = "200px";
      div.style.padding = "10px";
      div.style.margin = "10px";
      div.style.border = "1px solid #ccc";
      div.style.borderRadius = "10px";
      div.style.textAlign = "center";
      div.style.display = "inline-block";
      // let name = uiData.data.first_name;
      // let email = uiData.data.email;
      // let img = uiData.data.avatar;

      headname.innerHTML = user.first_name;
      getemail.innerHTML = user.email;
      getavatar.src = user.avatar;
      getavatar.width = 150;
      getavatar.height = 150;

      div.appendChild(headname);
      div.appendChild(getemail);
      div.appendChild(getavatar);

      // Append to body
      document.body.appendChild(div);
    }
  </script>
</html>