In this tutorial, we are going to make a mini javascript project for practice in which we are going to retrieve the user information using their GitHub username. so to understand this project all you need is some basic understanding of how javascript, HTML, and CSS work with each other.
Introduction to Javascript project.
This project is just a simple user information-fetching program that depends on the javascript programming language. and to understand this project you have some knowledge of javascript and HTML language. this is a small project for students who love to code and can use this project to boost their academic scores.
I also recommend you first understand the functionality of this project and then at least try once by yourself to create this project. and then if you got stuck then you can use my code or take help from my code given below.
The Logic of the project.
As you see in the given above image, first of all, we are going to print the heading “Information about a Github user” on the top of the page and then we are going to create a simple form that has only one input field. and then a submit button. and whenever a user enters a name in the input field and clicks on the submit button. then using the API of GitHub we are going to print the information about that user related to the username.
First, we are going to print the image associated with that user and then we are going to print the name of that user and then the URL of his blog.
Code of the Project
<html>
<head>
</head>
<style type="text/css">
.element {
position: absolute;
left: 40%;
top: 40%;
align-items: center;
}
</style>
<body class="element">
<div >
<div >
<h1> Information about a Github user </h1>
</div>
<div >
<form id="form1">
<input type="text" name="login">
<input type="submit" value="Submit">
</div>
<div id="infos"></div>
</form>
</div>
<script type="text/javascript">
// fetch information when user click on the submit button
const formElement = document.querySelector("form");
formElement.addEventListener("submit", e => {
e.preventDefault();
const login = formElement.elements.login.value;
fetch(`https://api.github.com/users/${login}`)
.then(response => response.json())
.then(user => {
// Create user info
const pictureElement = document.createElement("img");
pictureElement.src = user.avatar_url;
pictureElement.style.height = "150px";
pictureElement.style.width = "150px";
const nameElement = document.createElement("div");
nameElement.textContent = user.name;
nameElement.style.fontSize = "20px";
const websiteElement = document.createElement("a");
websiteElement.href = user.blog;
websiteElement.textContent = websiteElement.href;
// Add info on the page
const infosElement = document.getElementById("infos");
infosElement.innerHTML = ""; // Remove previous user info
infosElement.appendChild(pictureElement);
infosElement.appendChild(nameElement);
infosElement.appendChild(websiteElement);
})
.catch(err => {
console.error(err.message);
});
});
</script>
</body>
</html>
Explanation of code
First of all, in the body section of the HTML file, we define an H1 tag. and print the message. after that, we define a form field in which we define an input field and a submit button. after that, we define an empty div element which we are going to use for printing the user information.
after that, we are defining the javascript logic. here first of all we have selected the form component using the querySelector function. after that, we define an event listener on submit button and inside the event listener, first of all, we are preventing the default functionality of the submit button. and then we are going to use the value of the text input and then we are going to fetch the information about that user.
after fetching the information about that user we convert that response into the JSON response. and then we are going to create three new HTML components using javascript. first, we create the image component. and then store the image of that user in the image component. and define the height and width of the image. also, we created two other elements div and an anchor tag. and assign the username and blog URL to that components.
after that, we use the id of the empty div component we are going to print the information on the page. and then we are catching the error and printing on the console.
Also, read