Name: Mehmet Acikgoz

Student Id: 01

Lesson Overview:

JavaScript, jQuery

We briefly look into object-oriented JavaScript along with jQuery. We also learn how to access APIs using jQuery

More info

In Class Programming (ICP)

Task 1. Hover Image:

Please find the source code in here

The Html code is given below. The javascript file, hover.js is linked to the html file. There are 3 different images and their urls are given in the img tags. The functionality is to change the image and the text on the main image anytime when image is hovered. This functionality is done with upDate(this) and unDo() functions.

I created the variables myElement and originalText to hold the address of the element and the original value of the text in the window. When I hover the image, the src and alt values of the image are copied to the attributes of myElement.

When I move the cursor away from the image, it returns the original image and the text.

Here is the css file for styling.

Task2 : GitHub User Finder

Please find the source code in here

The HTML page which takes the user name as input and displays that user's details. The jquery library is used in the task by linking to the HTML page along with the javascript file. The container holds the fields for the user's image and details.

The script.js file has document.ready which triggers getGitHubInfo function when a username is input. If the status of response from gitHub site is OK(200), the user is found and their details is displayed, else no profile message is shown.

When the XMLHttpRequest is invoked and it returns the response from the source site if the status code is 200.

Here is the css file for styling the page.

We see the main screen of the webpage below and type the username

It returns the details on the page.

When the active link is clicked, the user's github page is opened in new tab.

If a non-existing user is entered in the input

It returns the message.