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

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with "Title of the script: Project: Github Repos Author: Jayesh Katta Ramalingaiah Domain Reviewer: Novice Reviewer: Keywords: JavaScript, HTML, github, fetch, repos, event...")
 
 
(6 intermediate revisions by 2 users 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 38: Line 36:
 
|-
 
|-
 
|| Slide: Pre-requisites
 
|| Slide: Pre-requisites
−
|| As a pre-requisites,  
+
|| 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 50: Line 46:
 
||  
 
||  
 
* The files used in this tutorial are available in the''' Code files''' link on this tutorial page.
 
* The files used in this tutorial are available in the''' Code files''' link on this tutorial page.
−
* Pls download and extract the file.
+
* Pls download and extract the files.
 
* Make a copy and then use them for practising.
 
* Make a copy and then use them for practising.
−
 
−
 
−
 
 
|-
 
|-
 
|| Slide: Github Repos
 
|| Slide: Github Repos
Line 60: 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'''.
−
 
−
 
−
 
 
|-
 
|-
 
|| Only Narration
 
|| Only Narration
Line 71: Line 61:
 
|-
 
|-
 
|| Show VS editor
 
|| Show VS editor
−
|| Open '''Visual Studio Code editor'''
+
|| Open '''Visual Studio Code editor'''.
  
 
|-
 
|-
−
|| <nowiki>[Editor] </nowiki>Welcome Page -> Open Folder -> '''Practice-JS '''->''' index.html & main.js'''
+
||[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.
 
|| Then open the files '''index.html''' and '''main.js''' as explained in the earlier tutorials.
Line 120: Line 108:
 
<nowiki></html></nowiki>
 
<nowiki></html></nowiki>
 
|| In the '''index.html''' file, replace the '''code''' as shown.  
 
|| In the '''index.html''' file, replace the '''code''' as shown.  
−
 
−
 
−
 
  
 
|-
 
|-
−
|| <nowiki>[Editor] Highlight:</nowiki>
+
||[Editor] Highlight:
  
  
 
<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 146: 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 176: 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 209: Line 192:
  
 
}
 
}
−
|| In the '''editor''', type the '''code''' as shown in '''main.js'''.
+
|| In the '''main.js''' file, replace the code as shown.
  
 
|-
 
|-
Line 216: 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 236: 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 244: 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 296: Line 277:
  
  
−
Then I assign the '''value '''to '''innerText '''property.
+
Then I assign the value to '''innerText '''property.
  
 
|-
 
|-
Line 309: 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 322: Line 303:
 
|-
 
|-
 
|| Press: Ctrl + S
 
|| Press: Ctrl + S
−
|| Save the file.
+
Switch to '''Browser'''
−
 
+
|| Save the file and switch back to the '''browser.'''
−
|-
+
−
|| Switch to '''Browser'''
+
−
|| Switch back to the '''browser.'''
+
  
 
|-
 
|-
Line 334: 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 343: Line 321:
  
 
'''<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 352: Line 331:
  
  
−
<nowiki>[{"id":55542315,"node_id":"MDEwOlJlcG9zaXRvcnk1NTU0MjMxNQ==","name":"adv_project","full_name":"jayeshkattar/adv_project","private":false,"owner":{"login":"jayeshkattar","id":10</nowiki>550364,"node_id":"MDQ6VXNlcjEwNTUwMzY0","avatar_url" … .. . . .
+
<nowiki>[{"id":55542315,"node_id":"MDEwOlJlcG9zaXRvcnk1NTU0MjMxNQ==",
 +
 
 +
"name":"adv_project","full_name":"jayeshkattar/adv_project","private":false,"owner":
 +
 
 +
{"login":"jayeshkattar","id":10</nowiki>550364,"node_id":"MDQ6VXNlcjEwNTUwMzY0","avatar_url" … .. . . .
 +
 
 
|| I have displayed the '''data''' in the '''DOM, '''too.
 
|| I have displayed the '''data''' in the '''DOM, '''too.
−
 
  
  
Line 367: Line 350:
 
|-
 
|-
 
|| Slide''': '''Summary''' '''
 
|| Slide''': '''Summary''' '''
−
|| In this tutorial, we have worked on '''Project - Github Repos'''
+
|| In this tutorial, we have worked on '''Project - Github Repos''' in '''JS'''
  
 
|-
 
|-
Line 374: 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 382: 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 390: 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"