ICP4 - VINEETHREDDYSHERI/WebMobile-2021Fall GitHub Wiki

Welcome to In-class Programming Assignment-4

Objective: Getting to know about the object-oriented JavaScript along with jQuery. And also requesting an API call.

Implementation:

1. Hover Image:

Source Code: https://github.com/UMKC-APL-WebMobileProgramming/ICP4-VINEETHREDDYSHERI/tree/main/Source/Hover

In the HTML file, images contains the onmouseout and onmouseover events which will call unDo and upDate method respectively. upDate method will extract the image source url and it's alternative text when we hover on any of the image. The Div elements backgroundImage is changed to the extracted image source URL which is achieved by modifying the style.backgroundImage property of the Div. The text is added to Div element using the innerText property of the Div element. unDo method will clear the backgroundImage and also the text of the Div element using style.backgroundImage and innerText properties, when the mouse is no longer present on any one of the image.

HTML File Task1-1

Javascript File Task1-2

CSS File Task1-3

Output

Initial Screen Task1-4

When hovered on First Image Task1-5

When hovered on Second Image Task1-6

When hovered on Third Image Task1-7

2. GitHub User Finder:

Source Code: https://github.com/UMKC-APL-WebMobileProgramming/ICP4-VINEETHREDDYSHERI/tree/main/Source/GitHubUserFinder

When the Username is entered in the TextField a GET api call takes place to get the User's Info. getGithubInfo method contains Get API call Code, the api is made using the XMLHttpRequest. If the API call is successful (i.e when the status code is 200), will call showUser method will modifying the HTML content by adding the User profile photo, Username, Name, Github Id, Github Link, Public Repos count, followers and No.of Following count. If the API call is not successful (i.e when the status code is 404) then it indicates that entered Username is not present, so will call noSuchUser function which will display message "Sorry, The user username does not exist".

HTML File Task2-1

Javascript File Task2-2

Task2-3

The below screenshot contains CSS changes which was related to display User Info and No such User Msg. Task2-4

Output

Initial Screen Task2-5

User Info Task2-6

No such User Task2-7

VideoLink: https://youtu.be/RW9cp4IdquE

Conclusion:

In these ICP4, I learned about the jQuery which makes the process of changing the DOM elements very easy and also its alternative Vanilla Javascript methods. I also leaned how to make an API call using XMLHttpRequest.