Skip to content

Lab Assignment 3

saismaran33 edited this page Dec 21, 2017 · 1 revision

#Lab Assignment 3

Wireframe:

This shows the flow of the web application from one page to another page. This is the blueprint of the web application that I have built.

Index Page:

The index page consists of login and register buttons. A background image is added to the entire body and the buttons are positioned accordingly.

OAuth Login:

Here I have created a social login for my web application by using the API's of them. We can login either in the website or directly login from facebook or gmail.

Google Login:

We can login to the page by using Google Login API by using the code given in the google developers site and adding our Client Id in the code. I have added some features of redirecting url to the sign in button to go the next page.

Facebook Login:

We can also login to the page by using Facebook Login API by using the code given in the facebook developers site and adding our APP Id in the code.

Mashup Page:

Here we have added the API of youtube data and google translator. We can translate the given keyword to the required language as specified in the drop down list and the trending videos of the keyword will be displayed.

Translate:

The given keyword is translated into the required language by using the google translator API. I have created a drop down menu and added some languages to it, so that a user can select the language from list and translate the keyword into the required language by clicking on the translate button.

Search:

The trending videos of the given keyword are displayed in the webpage by using the youtube data API. After entering the keyword in the text field we have to press search to get the youtube trending videos of that keyword by using JSON id. Then they all are organised in exact position.

Output:

This is the mashup of two API's (Google Translator and Youtube Data API) which converts the given keyword into the required language and displays the trending videos of that keyword.