JavaScript/C4/Project-Github-Repos/English - Revision history

Nancyvarkey at 16:44, 21 June 2021

2021-06-21T16:44:35Z

Nancyvarkey at 05:37, 21 June 2021

2021-06-21T05:37:52Z

Nancyvarkey at 05:32, 21 June 2021

2021-06-21T05:32:06Z

Nancyvarkey: Nancyvarkey moved page JavaScript/C4/Project:-Github-Repos/English to JavaScript/C4/Project-Github-Repos/English without leaving a redirect

2021-06-21T05:29:25Z

Nancyvarkey moved page JavaScript/C4/Project:-Github-Repos/English to JavaScript/C4/Project-Github-Repos/English without leaving a redirect

Pravin1389 at 15:33, 8 June 2021

2021-06-08T15:33:02Z

Pravin1389 at 15:48, 6 June 2021

2021-06-06T15:48:38Z

Pravin1389 at 15:47, 6 June 2021

2021-06-06T15:47:21Z

Kr.jayesh: 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..."

2021-05-22T18:43:48Z

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..."

New page

Title of the script: Project: Github Repos

Author: Jayesh Katta Ramalingaiah

Domain Reviewer:

Novice Reviewer:

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

{| border = “1”
|| <center>'''Visual Cue'''</center>
|| <center>'''Narration'''</center>

|-
|| 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-requisites,

* 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 file.
* 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'''

|-
|| <nowiki>[Editor] </nowiki>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.

|-
|| <nowiki>[Editor] </nowiki>Type:

<nowiki><!DOCTYPE html></nowiki>

<nowiki><html lang="en"></nowiki>

<nowiki><head></nowiki>

<nowiki><title> Project – Github Repo </title></nowiki>

<nowiki></head></nowiki>

<nowiki><body></nowiki>

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

<nowiki><input type = "text"</nowiki>

name = "username"

id = "username"

placeholder = "Enter Username" />

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

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

<nowiki></body></nowiki>

<nowiki></html></nowiki>
|| In the '''index.html''' file, replace the '''code''' as shown.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

<nowiki><label for="username">Username</label></nowiki>
|| Here, I have created a '''label '''for the '''username''' '''textbox'''.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

<nowiki><input</nowiki>

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.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

<nowiki><button id = "getDataButton" > GET REPO DATA </button></nowiki>
|| Here, I have created a '''button '''with the '''id getDataButton.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

<nowiki><p id="displayData"></p></nowiki>
|| 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'''.

|-
|| <nowiki>[Firefox] Press</nowiki>''' 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.'''

|-
|| <nowiki>[Editor] Type: </nowiki>

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 '''editor''', type the '''code''' as shown in '''main.js'''.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

function getData() {
|| Here, I have '''declared''' a '''function '''with the name '''getData.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

const userName = document.getElementById("username").value;
|| Inside the '''function '''I’m taking the value of the '''textbox '''to pass it to the '''URL.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

fetch(`http://api.github.com/users/${userName}/repos`)
|| Here, I’m using the '''Repo’s URL '''to '''pass''' the '''username'''.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

'''`'''http://api.github.com/users/${userName}/repos'''`'''
|| As you can see, I have used '''template literals''' to '''concatenate strings'''.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

.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()'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

.then((data) => {

console.log(data);

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

})
|| Here, I get the '''data''' using the '''callback function.'''

|-
|| <nowiki>[Editor] Highlight:</nowiki>

console.log(data);
|| I '''log''' that '''data''' here.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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'''.

|-
|| <nowiki>[Editor] Highlight:</nowiki>

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

}
|| If there are any '''errors,''' I will '''log''' the '''error''' in the '''console'''.

|-
|| Press: Ctrl + S
|| Save the file.

|-
|| Switch to '''Browser'''
|| 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.

|-
|| <nowiki>[Browser] [Console Tab]:</nowiki>

Highlight:

'''<nowiki>Array(30) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]</nowiki>'''
|| We see 30 repositories of the '''user jayeshkattar'''.

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

|-
|| <nowiki>[Window] [Highlight]:</nowiki>

<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.

|-
|| 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'''

|-
|| 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

|}

@@ Line 3: / Line 3: @@
 Author: Jayesh Katta Ramalingaiah
-Domain Reviewer: Vigneshwer Dhinakaran
+Domain Reviewer: Ankita Maske
 Novice Reviewer: Praveeen S.

@@ Line 28: / Line 28: @@
 || Slide: System Specifications
 || This tutorial is recorded using:
 * '''Ubuntu Linux''' OS version 18.04
 * '''Visual Studio Code''' version 1.45.0 ('''code editor''')
@@ Line 40: / Line 38: @@
 || 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.
 |-
@@ Line 57: / Line 53: @@
 * 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'''.
+* 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'''.
 |-
@@ Line 65: / Line 61: @@
 |-
 || Show VS editor
-|| Open '''Visual Studio Code editor'''
+|| Open '''Visual Studio Code editor'''.
 |-
@@ Line 118: / Line 114: @@
 <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
-* 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.'''
 |-
@@ Line 165: / Line 159: @@
 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);
-|| 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;
-|| 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`)
 || 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
-|| Then click on the '''GET REPO DATA''' button.
+|| Then click on the '''GET REPO DATA button'''.
 |-
@@ Line 330: / Line 322: @@
 '''<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.
 |-
@@ Line 373: / Line 363: @@
 * The video at the following link summarises the Spoken Tutorial project.
 * Please download and watch it
 |-
@@ Line 381: / Line 369: @@
 * 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
+|| Pls post your timed queries in this forum.
 |-

← Older revision	Revision as of 05:29, 21 June 2021
(No difference)

@@ Line 38: / Line 38: @@
 |-
 || Slide: Pre-requisites
-|| As a pre-requisites,
+|| As a pre-requisite,
 * You need '''internet connectivity''' to practice this tutorial.
@@ Line 50: / Line 50: @@
 ||
 * 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.
 |-
@@ Line 311: / Line 311: @@
 |-
 || 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 361: / Line 358: @@
 |-
 || 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 52: / Line 52: @@
 * Pls download and extract the file.
 * Make a copy and then use them for practising.
 |-
 || Slide: Github Repos
@@ Line 62: / Line 59: @@
 * 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
@@ Line 74: / Line 68: @@
 |-
-|| <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.
@@ Line 120: / Line 112: @@
 <nowiki></html></nowiki>
 || In the '''index.html''' file, replace the '''code''' as shown.
 |-
-|| <nowiki>[Editor] Highlight:</nowiki>
+||[Editor] Highlight:

@@ Line 343: / Line 343: @@
 '''<nowiki>Array(30) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]</nowiki>'''
 || We see 30 repositories of the '''user jayeshkattar'''.
@@ Line 352: / Line 353: @@
-<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==",
-|| I have displayed the '''data''' in the '''DOM, '''too.