Difference between revisions of "JavaScript/C4/Project-Github-Repos/English"
Nancyvarkey (Talk | contribs) m (Nancyvarkey moved page JavaScript/C4/Project:-Github-Repos/English to JavaScript/C4/Project-Github-Repos/English without leaving a redirect) |
Nancyvarkey (Talk | contribs) |
||
Line 3: | Line 3: | ||
Author: Jayesh Katta Ramalingaiah | Author: Jayesh Katta Ramalingaiah | ||
− | Domain Reviewer: | + | Domain Reviewer: Vigneshwer Dhinakaran |
− | 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 | + | || Hello and welcome to the spoken tutorial on “'''Project- Github Repos'''”. |
|- | |- |
Revision as of 11:02, 21 June 2021
Title of the script: Project: Github Repos
Author: Jayesh Katta Ramalingaiah
Domain Reviewer: Vigneshwer Dhinakaran
Novice Reviewer: Praveeen S.
Keywords: JavaScript, HTML, github, fetch, repos, event
|
|
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:
However, you may use any other browser of your choice. |
Slide: Pre-requisites | As a pre-requisite,
|
Slide: Code files |
|
Slide: Github Repos |
|
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.
|
[Editor] Type:
<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:
|
Here, I have created a label for the username textbox. |
[Editor] Highlight:
type = "text" name = "username" id = "username" placeholder = "Enter Username" /> |
Here, I have created
|
[Editor] Highlight:
<button id = "getDataButton" > GET REPO DATA </button> |
Here, I have created a button with the id getDataButton. |
[Editor] Highlight:
|
To display the data, I’m using a paragraph tag with the id as displayData. |
Press: Ctrl + S
|
Save the file and Start the Live server. |
[Firefox] Press Ctrl + Shift + I
|
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:
const userName = document.getElementById("username").value;
.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. |
[Editor] Highlight:
|
Here, I have added a click event listener for the button with the id getDataButton.
|
[Editor] Highlight:
|
Here, I have declared a function with the name getData. |
[Editor] Highlight:
|
Inside the function I’m taking the value of the textbox to pass it to the URL. |
[Editor] Highlight: | Here, I’m using the Repo’s URL to pass the username.
|
[Editor] Highlight: | As you can see, I have used template literals to concatenate strings. |
[Editor] Highlight:
|
You are already aware that the response contains data along with headers.
|
[Editor] Highlight:
console.log(data); document.getElementById("displayData").innerText = JSON.stringify(data); }) |
Here, I get the data using the callback function. |
[Editor] Highlight:
|
I log that data here. |
[Editor] Highlight:
|
To display the data in the paragraph, I first access the element using id.
|
[Editor] Highlight:
|
I stringify the data and assign it to the element.
|
[Editor] Highlight:
} |
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:
|
We see 30 repositories of the user jayeshkattar.
|
[Window] [Highlight]:
|
I have displayed the data in the DOM, too.
|
Only Narration | With this, we have come to the end of this tutorial.
|
Slide: Summary | In this tutorial, we have worked on Project - Github Repos in JS |
Slide: Assignment | As an assignment:
|
Slide: About Spoken Tutorial Project |
|
Slide: Spoken tutorial workshops |
|
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 |