Web ICP4 - abndnc/CS5590-0003 GitHub Wiki

1.Hover Image:

Look at the Image I and Image II for reference. When the user mouse hovers on the image, it should change the background of the empty frame with relevant images and text. For example, when the mouse hovered on the first image in Image I, it should change the contents (both background-image and text) of the empty frame, as shown in Image II.

Code Reference: https://codepen.io/saisrinarne/pen/RwbZdyy

Note: We have provided basic (HTML and CSS) code, you need to write JavaScript code

Implementation: For the upDate function, it changes the url for the background image and the text of the div with the id 'image' whenever the user hovers to any of the preview pictures. If else statement is used to identify which pictures the user is hovering. The unDo function basically just update the background image and the text back to original when the user no longer hovers any pictures. Lastly, jquery needs to get ready so that the javascript can be executed.

2.GitHub User Finder:

Create an app which makes the call to the GitHub API (https://api.github.com/) and displays the following user's account details when any user searched by user name

•Name of the user

•The ID of the user

•Profile picture

•Link to the user's account

Note:There is no limit on details and creativity. You can add as many details as you can and create an attractive and interactive web page.

Implementation: In the javascript, the getGithubInfo function is used to make an instance of XMLMHttpRequest class and send a GET request using it. If the response is successful, showUser function will be called to set the content of h2 and two div elements in the div 'profile' with the user content. Otherwise, noSuchUser is called indicating that there is no such user to be displayed. After getting the input from user, the text box will be reset and the input will be put in function getGithubInfo. The html file is also modified in div so that the page can display the necessary information.