-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathexample5.html
149 lines (139 loc) · 5.56 KB
/
example5.html
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Destructuring Assignment Demo</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
color: #333;
padding: 20px;
margin: 0;
}
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #4CAF50;
}
.input-group {
margin-bottom: 20px;
}
input {
padding: 10px;
width: calc(100% - 22px);
border: 2px solid #4CAF50;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px 15px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.output {
margin-top: 20px;
padding: 15px;
background-color: #eaeaea;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>Destructuring Assignment with GitHub API</h1>
<div class="input-group">
<input type="text" id="username" placeholder="Enter GitHub Username">
<button onclick="getUserData()">Get User Data</button>
</div>
<div class="output" id="output"></div>
</div>
<script>
// Function to get user data from GitHub API
const getUserData = () => {
const username = document.getElementById('username').value.trim(); // Get the username input from the input field
if (!username) {
alert("Please enter a username."); // Alert user if input is empty
return; // Exit the function if there's no input
}
// Constructing the GitHub API URL using template literals
const userUrl = `https://api.github.com/users/${username}`;
// Fetching user data from GitHub API
fetch(userUrl)
.then(response => {
// Check if the response is okay; if not, throw an error
if (!response.ok) throw new Error('User not found.');
return response.json(); // Parse the response to JSON
})
.then(user => {
// Destructuring user object properties to extract relevant data
const { login, name, avatar_url, bio, public_repos, followers } = user;
// Displaying the user info in the output section
document.getElementById('output').innerHTML = `
<h3>User Info:</h3>
<p><strong>Username:</strong> ${login}</p>
<p><strong>Name:</strong> ${name || 'N/A'}</p>
<p><strong>Bio:</strong> ${bio || 'No bio available.'}</p>
<p><strong>Public Repositories:</strong> ${public_repos}</p>
<p><strong>Followers:</strong> ${followers}</p>
<img src="${avatar_url}" alt="${login}'s avatar" width="100" height="100">
`;
// Fetch user repositories to demonstrate array destructuring
getUserRepos(username);
})
.catch(error => {
// Display any error that occurs during fetch
document.getElementById('output').innerHTML = `<p style="color: red;">${error.message}</p>`;
});
};
// Function to get user repositories from GitHub API
const getUserRepos = (username) => {
// Constructing the API URL for fetching user repositories
const repoUrl = `https://api.github.com/users/${username}/repos`;
// Fetching repository data from GitHub API
fetch(repoUrl)
.then(response => {
// Check if the response is okay; if not, throw an error
if (!response.ok) throw new Error('Repositories not found.');
return response.json(); // Parse the response to JSON
})
.then(repos => {
// Using array destructuring to extract properties from the first five repositories
const repoList = repos.slice(0, 5).map(({ name, stargazers_count, html_url }) => {
return `
<li>
<strong><a href="${html_url}" target="_blank">${name}</a></strong> <!-- Repository name with a link -->
<span>⭐ ${stargazers_count} stars</span> <!-- Display the number of stars -->
</li>
`;
}).join(''); // Joining the array of strings into a single string
// Adding the repository info to the output section
document.getElementById('output').innerHTML += `
<h3>Top 5 Repositories:</h3>
<ul>${repoList || '<li>No repositories found.</li>'}</ul> <!-- Displaying the list of repositories -->
`;
})
.catch(error => {
// Display any error that occurs during fetch
document.getElementById('output').innerHTML += `<p style="color: red;">${error.message}</p>`;
});
};
</script>
</body>
</html>