LAB ASSIGNMENT 2 - nlns3444/cs5551_6-2_lab-assignments GitHub Wiki
Member 1 Name: nukala lakshmi naga sai sandeep
Class id: 23
Member 2 Name: sireesha pandala
Class id: 24
Wiki link: https://github.com/SireeshaPandala/ASE-Lab-Assignments/wiki/Lab-2
ICP team ID: 6-2
SUMMARY OF THIS ASSIGNMENT:
1.to create a mashup web application that uses bootstrap framework
2.the application should have a register and login page
3.Create a Login to your application using Social login by using any of the OAuth 2.0 Service from Social Networking Service Providers like(facebook, yahoo, google)
4.the application should use local storage to save the details of the user
5.and it should have a contact and, about page briefly telling about the working of the application and details of the deployers in case to contact
6.making all the pages look good with the css, and they possess a good design
7.and finally checking the quality of the javascript that we had written, with the help of the js lint
login HTML :
in the below image, we see the HTML code that we used to develop the front end of the web application
register HTML:
in the below image, we see the HTML that we used, to show displays the register page of the application
main HTML:
in the below image we see the code that's responsible for all the actions that our deploys, that is we placed our youtube and translate API in this part
index HTML:
this code is responsible . for opening the application when the user hits run on any HTML deployer applications, the page shows the starting page of the application
results:
this code is responsible for showing up the youtube videos, based on the user's search criteria
is in the image shown below
CSS :
this code deals with the styling of the application that we developed
home page:
this is the start page of the web application
contact page:
displays briefly about the web application uses, and displays the contact details of the deployers
login page:
in this page, we have some text boxes such as username and password and sign in &up options
register page:
when the user wants sign up without using facebook or google, they can sign up manually in the register page
enter credentials:
after the user signs up, the user will enter his or her details if they forget to enter their details the application will remind
wrong credentials:
when the user gives wrong credentials, the application reminds that the user has given wrong details
OAUTH(FACEBOOK):
when the user wishes to sign up using the Facebook application, the page will be redirected to the facebook login page where the FB asks the permission of the user
facebook js:
this is the java script code for the facebook login application
OAUTH(google):
when the user wishes to sign up using the google, the page will be redirected to the google account login
where the google asks the permission of the user
after logging in:
when the user signs in with the correct details, the login page moves to the main part of the application that is loading the videos and translate the text code to . the user likes
translate js:
in this web application, when the user enters the certain keyword and wanna know what the word will be in his interest of language, and the image below is responsible for deploying the translator in the web application we designed
youtube js:
the script that is responsible for showing up the videos in the application, is shown below, this script calls the youtube API that is given in the result part of the code
final result:
when the user enters the keyword in the placeholder of the search text box field and hit translate
button translates the language into the user choice of interest and displays the videos based on the count view which are related to the search criteria
code quality using java lint:
js lint can be used to check the quality of the code, and I had placed my code and checked the quality of the javascript and the results are displayed below
