JavaScript/C4/Project-Github-Repos/English

From Script | Spoken-Tutorial
Jump to: navigation, search

Title of the script: Project: Github Repos

Author: Jayesh Katta Ramalingaiah

Domain Reviewer: Ankita Maske

Novice Reviewer: Praveeen S.

Keywords: JavaScript, HTML, github, fetch, repos, event


Visual Cue
Narration
Slide: Title Hello and welcome to the spoken tutorial on “Project- Github Repos”.
Slide:

Learning Objectives

In this tutorial, we will be working on Project - GithubRepos in JS.
Slide: System Specifications This tutorial is recorded using:
  • Ubuntu Linux OS version 18.04
  • Visual Studio Code version 1.45.0 (code editor)
  • Firefox web browser

However, you may use any other browser of your choice.

Slide: Pre-requisites As a pre-requisite,
  • You need Internet connectivity to practice this tutorial.
  • You should be familiar with writing and executing JS files.
  • If not, please go through the prerequisite tutorials on this website.
Slide: Code files
  • The files used in this tutorial are available in the Code files link on this tutorial page.
  • Pls download and extract the files.
  • Make a copy and then use them for practising.
Slide: Github Repos
  • In this project, we need to have a textbox and button in the UI.
  • We need to allow the user to enter a github username using the textbox.
  • On click of a button, we need to make an API call and display the response in the console.
  • NOTE: Proper error handling must be done using the response.
Only Narration Now, let us start working on the project.
Show VS editor Open Visual Studio Code editor.
[Editor] Welcome Page -> Open Folder -> Practice-JS -> index.html & main.js Then open the files index.html and main.js as explained in the earlier tutorials.


For this demonstration, I have already opened the same.


These files are available in the Code files link for practice.

[Editor] Type:


<!DOCTYPE html>

<html lang="en">

<head>

<title> Project – Github Repo </title>

</head>

<body>

<label for = "username" > Username </label>

<input type = "text"

name = "username"

id = "username"

placeholder = "Enter Username" />

<button id = "getDataButton" > GET REPO DATA </button>

<p id = "displayData" > </p> <script src = "main.js" > </script>

</body>

</html>

In the index.html file, replace the code as shown.
[Editor] Highlight:


<label for="username">Username</label>

Here, I have created a label for the username textbox.
[Editor] Highlight:


<input

type = "text"

name = "username"

id = "username"

placeholder = "Enter Username" />

Here, I have created
  • a username textbox with the name and id as username
  • and the placeholder as Enter username.
[Editor] Highlight:

<button id = "getDataButton" > GET REPO DATA </button>

Here, I have created a button with the id getDataButton.
[Editor] Highlight:


<p id="displayData"></p>

To display the data, I’m using a paragraph tag with the id as displayData.
Press: Ctrl + S


Press: Alt + L and Alt + O

Save the file and Start the Live server.
[Firefox] Press Ctrl + Shift + I


Point to the browser Console tab

In the web browser, open the Browser developer tools panel and go to the console tab.
Switch to Editor Switch back to the editor.
[Editor] Type:


document.getElementById("getDataButton").addEventListener("click", getData);


function getData() {

const userName = document.getElementById("username").value;


fetch(`http://api.github.com/users/${userName}/repos`)

.then((response) => response.json())

.then((data) => {

console.log(data);

document.getElementById("displayData").innerText = JSON.stringify(data);

})

.catch((error) => console.log(error));

}

In the main.js file, replace the code as shown.
[Editor] Highlight:


document.getElementById("getDataButton").addEventListener("click", getData);

Here, I have added a click event listener for the button with the id getDataButton.


On click, I’m calling the getData function which is declared below.


Functions are hoisted, so there is no problem here.

[Editor] Highlight:


function getData() {

Here, I have declared a function with the name getData.
[Editor] Highlight:


const userName = document.getElementById("username").value;

Inside the function I’m taking the value of the textbox to pass it to the URL.
[Editor] Highlight:


fetch(`http://api.github.com/users/${userName}/repos`)

Here, I’m using the Repo’s URL to pass the username.


[Editor] Highlight:


`http://api.github.com/users/${userName}/repos`

As you can see, I have used template literals to concatenate strings.
[Editor] Highlight:


.then((response) => response.json())

You are already aware that the response contains data along with headers.


To return only data, we need to use .json()

[Editor] Highlight:


.then((data) => {

console.log(data);

document.getElementById("displayData").innerText = JSON.stringify(data);

})

Here, I get the data using the callback function.
[Editor] Highlight:


console.log(data);

I log that data here.
[Editor] Highlight:


document.getElementById("displayData").innerText


To display the data in the paragraph, I first access the element using id.


Then I assign the value to innerText property.

[Editor] Highlight:


JSON.stringify(data);

I stringify the data and assign it to the element.


JSON.stringify is a JS inbuilt method to convert anything to string.


As DOM can only render string, I’m converting the object to string.

[Editor] Highlight:


.catch((error) => console.log(error));

}

If there are any errors, I will log the error in the console.
Press: Ctrl + S

Switch to Browser

Save the file and switch back to the browser.
Type jayeshkattar I will type jayeshkattar in the input textbox.
Click on GET REPO DATA Then click on the GET REPO DATA button.
[Browser] [Console Tab]:

Highlight:


Array(30) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

We see 30 repositories of the user jayeshkattar.


This is real time data. You may get a different number when you practice this tutorial.

[Window] [Highlight]:


[{"id":55542315,"node_id":"MDEwOlJlcG9zaXRvcnk1NTU0MjMxNQ==", "name":"adv_project","full_name":"jayeshkattar/adv_project","private":false,"owner": {"login":"jayeshkattar","id":10550364,"node_id":"MDQ6VXNlcjEwNTUwMzY0","avatar_url" … .. . . .

I have displayed the data in the DOM, too.


Only Narration With this, we have come to the end of this tutorial.


Let’s summarize.

Slide: Summary In this tutorial, we have worked on Project - Github Repos in JS
Slide: Assignment As an assignment:
  • If you have a github account, type your username and check whether you see your repository details.
Slide: About Spoken Tutorial Project
  • The video at the following link summarises the Spoken Tutorial project.
  • Please download and watch it
Slide: Spoken tutorial workshops
  • We conduct workshops using spoken tutorials and give certificates.
  • For more details, please write to us.
Slide: Forum questions Pls post your timed queries in this forum.
Slide: Acknowledgement Spoken Tutorial Project is funded by Ministry of Education (MoE), Government of India
Slide: Thanks The script for this tutorial is contributed by Jayesh and this is Praveen signing off. Thank you for joining

Contributors and Content Editors

Kr.jayesh, Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=JavaScript/C4/Project-Github-Repos/English&oldid=55286"