├── README.md
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Git-Book
2 |
3 | Welcome to Git-Book
6 | The world's most light-weight, easy to use and insightful Github user directory look up
7 |
8 |
9 | Why this name?
13 | We all must be very familiar with phonebooks, which we use to lookup a person's details like telephone or mobile number, address etc. if we know his / her name or contact number. In Git Book too, we will use the Github user's username as a primary key (as Github ensures this is unique) to look up for any Github user
14 |
15 |
16 |
17 | #### Website hosted at : https://mainakrepositor.github.io/Git-Book/
18 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | GitBook -- Made by Mainak
8 |
14 |
💻Git-Book 📕
15 | Made by Mainak Chaudhuri
30 |
The user details will be shown here :
31 |
32 |
33 |
34 |
41 |
42 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | var form = document.getElementById("form");
2 | form.addEventListener('submit',function(e)
3 | {
4 | e.preventDefault()
5 | var search = document.getElementById("search").value
6 |
7 | var original_name=search.split(' ').join('')
8 | document.getElementById('result').innerHTML=""
9 | fetch("https://api.github.com/users/"+original_name).then((result) => result.json())
10 | .then((data) => {
11 | document.getElementById('result').innerHTML = `
12 | The user details found by us :
13 |
15 | Full Name : ${data.name}Location : ${data.location}User Bio : ${data.bio}Hireability : ${data.hireable}Username : ${data.login}No. of followers : ${data.followers}No. of followings : ${data.following}No. of repositories : ${data.public_repos}Link to the Repo : ${data.html_url} Personal Website : ${data.blog}
29 | `
30 | })
31 | })
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | border: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 | h1{
7 | font-size: 40px;
8 | }
9 |
10 | #result
11 | {
12 | text-align: center;
13 | background:linear-gradient(#3ef12d,#74f3e8);
14 | border-radius: 20px;
15 | padding: 20px;
16 | font-size: 20px;
17 |
18 | margin-bottom: 30px;
19 | }
20 | #result img
21 | {
22 |
23 | border-radius: 50%;
24 | }
25 | #result li
26 | {
27 | list-style: none;
28 | }
--------------------------------------------------------------------------------