Difference between revisions of "JavaScript/C4/Project-Github-Repos/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(3 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
Author: Jayesh Katta Ramalingaiah
 
Author: Jayesh Katta Ramalingaiah
  
−
Domain Reviewer:  
+
Domain Reviewer: Ankita Maske
  
−
Novice Reviewer:  
+
Novice Reviewer: Praveeen S.
  
 
Keywords: JavaScript, HTML, github, fetch, repos, event
 
Keywords: JavaScript, HTML, github, fetch, repos, event
Line 17: Line 17:
 
|-
 
|-
 
|| Slide: Title
 
|| Slide: Title
−
|| Hello and welcome to the spoken tutorial on “'''Project: Github Repos'''”.
+
|| Hello and welcome to the spoken tutorial on “'''Project- Github Repos'''”.
  
 
|-
 
|-
Line 28: Line 28:
 
|| Slide: System Specifications
 
|| Slide: System Specifications
 
|| This tutorial is recorded using:
 
|| This tutorial is recorded using:
−
 
−
 
 
* '''Ubuntu Linux''' OS version 18.04
 
* '''Ubuntu Linux''' OS version 18.04
 
* '''Visual Studio Code''' version 1.45.0 ('''code editor''')
 
* '''Visual Studio Code''' version 1.45.0 ('''code editor''')
Line 40: Line 38:
 
|| As a pre-requisite,  
 
|| As a pre-requisite,  
  
−
* You need '''internet connectivity''' to practice this tutorial.
+
* You need '''Internet connectivity''' to practice this tutorial.
−
* You should be familiar with writing and executing''' JS''' files'''.'''
+
* You should be familiar with writing and executing''' JS''' files.
 
* If not, please go through the prerequisite tutorials on this website.
 
* If not, please go through the prerequisite tutorials on this website.
−
 
−
 
  
 
|-
 
|-
Line 57: Line 53:
 
* In this '''project''', we need to have a '''textbox '''and '''button '''in the '''UI.'''
 
* 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'''.
 
* 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'''.
+
* 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'''.
 
* NOTE: Proper '''error handling''' must be done using the '''response'''.
 
|-
 
|-
Line 65: Line 61:
 
|-
 
|-
 
|| Show VS editor
 
|| Show VS editor
−
|| Open '''Visual Studio Code editor'''
+
|| Open '''Visual Studio Code editor'''.
  
 
|-
 
|-
Line 118: Line 114:
  
 
<nowiki><label for="username">Username</label></nowiki>
 
<nowiki><label for="username">Username</label></nowiki>
−
|| Here, I have created a '''label '''for the '''username''' '''textbox'''.
+
|| Here, I have created a '''label '''for the '''username textbox'''.
  
 
|-
 
|-
Line 135: Line 131:
 
|| Here, I have created  
 
|| Here, I have created  
  
−
* a '''username''' '''textbox '''with the '''name '''and '''id '''as '''username'''
+
* a '''username textbox '''with the '''name '''and '''id '''as '''username'''
 
* and the '''placeholder '''as '''Enter username.'''
 
* and the '''placeholder '''as '''Enter username.'''
−
 
−
 
  
 
|-
 
|-
Line 165: Line 159:
  
 
Point to the browser '''Console''' tab
 
Point to the browser '''Console''' tab
−
|| In the web browser, open the '''Browser developer tools''' panel and go to the '''console tab'''.
+
|| In the '''web browser''', open the '''Browser developer tools''' panel and go to the '''console tab'''.
  
 
|-
 
|-
Line 198: Line 192:
  
 
}
 
}
−
|| In the '''editor''', type the '''code''' as shown in '''main.js'''.
+
|| In the '''main.js''' file, replace the code as shown.
  
 
|-
 
|-
Line 205: Line 199:
  
 
document.getElementById("getDataButton").addEventListener("click", getData);
 
document.getElementById("getDataButton").addEventListener("click", getData);
−
|| Here, I have added a '''click''' '''event''' '''listener''' for the '''button '''with the '''id getDataButton.'''
+
|| 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.
+
On click, I’m '''call'''ing the '''getData function '''which is '''declared''' below.
  
  
Line 225: Line 219:
  
 
const userName = document.getElementById("username").value;
 
const userName = document.getElementById("username").value;
−
|| Inside the '''function '''I’m taking the value of the '''textbox '''to pass it to the '''URL.'''
+
|| Inside the '''function '''I’m taking the value of the '''textbox '''to '''pass''' it to the '''URL.'''
  
 
|-
 
|-
Line 233: Line 227:
 
fetch(`http://api.github.com/users/${userName}/repos`)
 
fetch(`http://api.github.com/users/${userName}/repos`)
 
|| Here, I’m using the '''Repo’s URL '''to '''pass''' the '''username'''.  
 
|| Here, I’m using the '''Repo’s URL '''to '''pass''' the '''username'''.  
−
 
−
 
  
  
Line 285: Line 277:
  
  
−
Then I assign the '''value '''to '''innerText '''property.
+
Then I assign the value to '''innerText '''property.
  
 
|-
 
|-
Line 298: Line 290:
  
  
−
As '''DOM '''can only render '''string, '''I’m converting the '''object '''to '''string'''.
+
As '''DOM '''can only '''render string, '''I’m converting the '''object '''to '''string'''.
  
 
|-
 
|-
Line 320: Line 312:
 
|-
 
|-
 
|| Click on GET REPO DATA
 
|| Click on GET REPO DATA
−
|| Then click on the '''GET REPO DATA''' button.
+
|| Then click on the '''GET REPO DATA button'''.
  
 
|-
 
|-
Line 330: Line 322:
 
'''<nowiki>Array(30) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]</nowiki>'''
 
'''<nowiki>Array(30) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]</nowiki>'''
  
−
|| We see 30 repositories of the '''user jayeshkattar'''.
+
|| We see 30 '''repositories''' of the '''user jayeshkattar'''.
  
  
Line 365: Line 357:
  
 
* If you have a '''github account''', type your '''username''' and check whether you see your '''repository '''details.
 
* If you have a '''github account''', type your '''username''' and check whether you see your '''repository '''details.
−
 
−
 
  
 
|-
 
|-
Line 373: Line 363:
 
* The video at the following link summarises the Spoken Tutorial project.
 
* The video at the following link summarises the Spoken Tutorial project.
 
* Please download and watch it
 
* Please download and watch it
−
 
−
 
  
 
|-
 
|-
Line 381: Line 369:
 
* We conduct workshops using spoken tutorials and give certificates.
 
* We conduct workshops using spoken tutorials and give certificates.
 
* For more details, please write to us.
 
* For more details, please write to us.
−
 
−
 
  
 
|-
 
|-
 
|| Slide: Forum questions
 
|| Slide: Forum questions
−
|| Pls post your timed queries in this forum
+
|| Pls post your timed queries in this forum.
  
 
|-
 
|-

Latest revision as of 22:14, 21 June 2021

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"