icp 4 - Abinash-Banda/web-and-mobile-computing GitHub Wiki

This is wiki for icp 4

image for hoverning task.

Images are shown into the center box when mouse is on the image and the image needs is not shown when mouse is out. For the task I have used javascript event listeners and take advantage of the two mouse events mouseover and mouseout.

##HTML for hovering task html

#There is no change in the CSS file as i was used the same one that is given to me in the class.

java script file for targetting elements

###starting all the values that are needed are target using the querySelector() and stored in the variables, And eventlisteners for all the target variables are done and respective functions are called for showing and removing images.

js for hovering task 1

functions pf hovered

displayFunction() takes 2 parameters image and the text. image is shown by targeting the image variable and modifying the style attribute and simultaneouly same is done for the text.

css

output for task 1

##starting page for html when the file is loaded ###htmloutput output 1

After mouse in displayImage() is called by and the image src value and alt values as parameters.

When mouse left offImage() is draged and the background-image and text is set to "" or null.

Task-2 is Github user api

html file for the task 2

css file for the task 2

java script images

This is to target the elements for the next use, And the second event listeners search then searchButton are used when users either tries to press the search button or when taps the enter key. Those function calls the result() and passes the obtained return value to the html().

The below image show a function called result that is used for fetching the data from github users api by using the traditional javascript fetch() and returns the value.

The html will display data for the github user like his name, login name, joined date, github link, avatar. etc by the target a certain element from the html.