Skip to content

Commit 9db5217

Browse files
JKS-sysJKS-sys
committed
first commit
0 parents  commit 9db5217

File tree

4 files changed

+192
-0
lines changed

4 files changed

+192
-0
lines changed

‎README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<hr />
2+
3+
## Advertisement
4+
5+
Submitted and coded by Jagadeesh Kumar . S, you may send mail to my email address which is jagadeesh_2k17@proton.me and you may contribute some money to my Indian Unified Payment Interface (UPI) which is jagadeesh-kumar@airtel .
6+
7+
<hr />
8+
9+
## Brief
10+
11+
The name of the project is "Working with API in JavaScript".
12+
<br />
13+
14+
Jagadeesh Kumar . S had made this project to fetch and display data from "https://randomuser.me/api/".
15+
16+
<hr />
17+
18+
## Frontend
19+
20+
The programming language that is used as frontend is JavaScript
21+
22+
<hr />
23+
24+
## Advertisement
25+
26+
Submitted and coded by Jagadeesh Kumar . S, you may send mail to my email address which is jagadeesh_2k17@proton.me and you may contribute some money to my Indian Unified Payment Interface (UPI) which is jagadeesh-kumar@airtel .
27+
28+
<hr />

‎index.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>working-with-apis-in-javascript</title>
9+
10+
<link id="favicon" rel="icon" href="https://cdn.onlinewebfonts.com/svg/img_184513.png" sizes="16x16" />
11+
12+
<!-- font-awesome library to make the
13+
webpage more appealing -->
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
15+
16+
17+
<link rel="stylesheet" href="./styles/app.css" />
18+
19+
</head>
20+
21+
<body>
22+
23+
<div class="content">
24+
<div class="advertisement" id="header">
25+
<hr />
26+
Submitted and coded by Jagadeesh Kumar . S, you may send mail to my email address which is
27+
jagadeesh_2k17@proton.me and you may contribute some money to my Indian Unified Payment Interface (UPI)
28+
which is jagadeesh-kumar@airtel .
29+
<hr />
30+
<br />
31+
</div>
32+
<div class="head">
33+
<h1 id="head"></h1>
34+
</div>
35+
<div class="email">
36+
<i class="fa fa-envelope" style="font-size: 15px; color: blue;"></i>
37+
<a href="" id="email"> </a>
38+
</div>
39+
<div class="phone">
40+
<i class="fa fa-phone" style="font-size: 15px; color: blue;"></i>
41+
<a href="" id="phone"> </a>
42+
</div>
43+
<br />
44+
<div id="user-img"></div>
45+
<br />
46+
47+
<div class="details">
48+
<table>
49+
<tr>
50+
<td>Age</td>
51+
<td><span id="age"></span></td>
52+
</tr>
53+
<tr>
54+
<td>Gender</td>
55+
<td><span id="gender"></span></td>
56+
</tr>
57+
<tr>
58+
<td>Location</td>
59+
<td><span id="location"></span></td>
60+
</tr>
61+
<tr>
62+
<td>Country</td>
63+
<td><span id="country"></span></td>
64+
</tr>
65+
</table>
66+
</div>
67+
<div class="advertisement" id="header">
68+
<br />
69+
<hr />
70+
Submitted and coded by Jagadeesh Kumar . S, you may send mail to my email address which is
71+
jagadeesh_2k17@proton.me and you may contribute some money to my Indian Unified Payment Interface (UPI)
72+
which is jagadeesh-kumar@airtel .
73+
<hr />
74+
</div>
75+
</div>
76+
<script src="./javascripts/app.js"></script>
77+
</body>
78+
79+
</html>

‎javascripts/app.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
const api_url = "https://randomuser.me/api/";
2+
async function getUser() {
3+
4+
// Making an API call (request) and getting the response back
5+
const response = await fetch(api_url);
6+
7+
// Parsing it to JSON format
8+
const data = await response.json();
9+
console.log(data.results);
10+
11+
// Retrieving data from JSON
12+
const user = data.results[0];
13+
let { title, first, last } = user.name;
14+
let { gender, email, phone } = user;
15+
let image = user.picture.large;
16+
let image_icon = user.picture.thumbnail;
17+
let age = user.dob.age;
18+
let { city, state, country } = user.location;
19+
20+
let fullName = title + ". " + first + " " + last;
21+
document.title = fullName;
22+
23+
// Accessing the div container and modify/add elements to the containers
24+
document.getElementById("head").innerHTML = fullName;
25+
document.getElementById("email").href = "mailto:" + email;
26+
document.getElementById("email").innerHTML = email;
27+
document.getElementById("phone").href = "tel:" + phone;
28+
document.getElementById("phone").innerHTML = phone;
29+
// accessing the span container
30+
document.querySelector("#age").textContent = age;
31+
document.querySelector("#gender").textContent = gender;
32+
33+
document.querySelector("#location").textContent = city + ", " + state;
34+
35+
document.querySelector("#country").textContent = country;
36+
37+
// Creating a new element and appending it to previously created containers
38+
let img = document.createElement("img");
39+
let img_div = document.getElementById("user-img");
40+
img.src = image;
41+
img_div.append(img);
42+
43+
// const favicon = document.getElementById("favicon");
44+
// favicon.setAttribute("href", image_icon);
45+
}
46+
47+
// Calling the function
48+
getUser();

‎styles/app.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
html {
2+
min-width: auto;
3+
min-height: auto;
4+
background-color: aquamarine;
5+
box-shadow: inset 0 0 55rem green;
6+
height:auto;
7+
}
8+
.advertisement {
9+
text-align: center;
10+
font-size: xx-small;
11+
color: blueviolet;
12+
}
13+
14+
.content {
15+
text-align: center;
16+
padding: 30px;
17+
margin: 0px auto;
18+
}
19+
20+
.details {
21+
margin-left: auto;
22+
margin-right: auto;
23+
}
24+
25+
img {
26+
border-radius: 5px;
27+
box-shadow: black;
28+
}
29+
30+
table, td {
31+
border-collapse: collapse ;
32+
margin-left: auto;
33+
margin-right: auto;
34+
text-align: center;
35+
padding: 10px;
36+
border: 1px solid black;
37+
}

0 commit comments

Comments
 (0)