LAB 1 - navyagonug/CSEE5590-WEB-AND-MOBILE-PROGRAMMING GitHub Wiki

TASK 1: Create a Multi-Page Responsive Website: Massive open online course (MOOC) webapplication.

1. INTRODUCTION

Develop a MOOC application that by making use of technologies like HTML,CSS, Bootstrapping, JavaScript and Angular. Our task is to create a responsive MOOC web application. An MOOC is a portal where students can register and login to their profile. The students are provided with a functionality of having a look at their current course enrollments, their previous enrollments. The students would also be able to look at all the courses (At all levels, Graduate or Undergraduate) and enroll into them.

2. OBJECTIVE

The main objective of this task is to achieve the following

Develop a web application using HTML and style the web pages using CSS
Create individual web pages as we navigate through the web applications
Make these web pages as well as the images used responsive
Create a login access and guest access
Segregate the details of courses as per the department (Computer Science, Electrical Engineering)
Allow the students to have a look at their past and current enrollments.

3. APPROACHES/METHODS

There are a series of HTML pages which are explained as follows,

LOGIN PAGE

A student can login by using their credentials as well as login as a guest. However, the guest would only be able to view the courses. We have already defined a few student credentials which can used to login to the web application. These credentials are,

Username: Navya Password: navya1
Username: Madhuri Password: madhuri1
Username: JayaPrakash Password: jp1

The following screenshot depicts the login page,

It can be seen from above that, the student can either sign up and register himself/herself as a new user or login using the existing credentials or continue as a guest,

If the user is an existing user, he needs to enter the credentials. One of the following results arises,

If the user enters the credentials correctly, he/she will be redirected to the homepage

If the user doesn't enter any username or password, a warning message will be displayed saying 'please enter username'

If the user enters incorrect credentials, A validation for password would be performed and if validation is not passed, a warning message 'Invalid credentials' will be displayed.

If the user clicks on a sign-up button, the web application will now be redirected to a sign-up page

If the user clicks on the guest button, He/She will just be able to navigate and browse through the courses in various departments (In this case, Computer Science and Electrical Engineering).

HOMEPAGE

Once the login is successful, the user gets an access to his/her homepage. In the homepage, there exists a navigation bar containing

User profile
Enrollments (Which further includes current and previous enrollments)
Courses (Includes courses of all departments)

When the user clicks on My profile, redirection to profile.html will be done as shown,

When the user clicks on Enrollments, redirection to recent enrollments or previous enrollments HTML pages will be done as shown,

When the user clicks on Courses, redirection to course HTML page will be done as shown,

The following is a code snippet for profile.html page,

The enrollment pages displays the list of courses along with other details such as Number of credits, Name of professor, Difficulty level etc is displayed. Code snippet is as follows,

A code snippet for courses webpage showing different courses in each of the department upon a button click can be seen as follows,

4. WORKFLOW

The login page looks as follows,

When the user enter no credentials, An error message is displayed as follows,

When the user enters incorrect credentials, the following warning message is displayed,

If the user is new and would like to register himself/herself, He/She would click on sign-up button which would redirect to the following page,

Once the user enters correct credentials, he will be redirected to a homepage, It is shown as follows,

When the user clicks on 'My Profile', his/her details with their photograph would be displayed,

When the user clicks on Enrollments in the navigation bar, he gets to view current enrollments as well as previous enrollments as follows,

When the user clicks on 'Courses', He can access these courses that are segregated into two departments as follows. The user would also be able to enroll into the applicable courses.

When the user tries to view the courses as a guest, he would just be able to have a look at the courses but might not be able to access them. This can be seen as follows,

5. DATASET/PARAMETERS

Username: Navya Password: navya1
Username: Madhuri Password: madhuri1
Username: JayaPrakash Password: jp1

6. EVALUATION/DISCUSSION

We as a team have created all the HTML pages by styling them using CSS and by including Javascript logic within these HTML pages. Students would efficiently able to sign-up and login into their account. Students would also be able to easily access information about their enrollments as well as their courses. This web application will enable students to get access to their information with an ease even with guest access (But a limited access). The guests can just have a look at the list of courses but cannot enroll into them.

7. CONCLUSION

This task has helped us in developing a responsive web application with rich UI. We have gained insights on how to make an enhanced use of CSS, Bootstrapping and Angular. This task also helped us in brainstorming and coming up with features that would enhance the web application. The outcome is an MOOC with good features and an interative UI.

TASK 2:Snake game with Angular

1. INTRODUCTION

1.Create a snake game Use keycodes for the up/down/left/right arrow and Print the best score of the game

Hints: https://en.wikipedia.org/wiki/Snake_(video_game_genre)

2. OBJECTIVE:

we need to develop an snake game
we will use the keycodes for the up/down/left/right arrow 3.In the game we have 3 levels where classic, nowall and obstacles. 4.Print the best score of the game

3. APPROACHES/METHODS

we will develop an angular application with node we have created the snake html code and depending on the boolean values set the game value is decided

we have created three constant variables for the game 1.Controls 2.colours 3. game modes

depending on the this we can easily pass these variables to the game

we have created app component typescript file for the implementation of the methods

4. WORKFLOW:

This is how the game application looks

we have three modes for the game

Game with the obstacles

5. CONCLUSION:

We have implemeted the snake game using Angular

TASK 3: Google Knowledge GraphSearch API

1. INTRODUCTION

Create an application which will display the description of the notable entities(e.g.,people, places, and things) that match specific criteria. Hints:

2. OBJECTIVE:

The main objective of this task is to achieve the following

Develop a angular application using HTML and style the web pages using CSS
Create individual web pages as we navigate through the web applications
Make these web pages as well as the images used responsive
When the user search for something, it should hit the api and show the response on the html page.

3. APPROACHES/METHODS

Started of by creating an angular application and created components which indeed do the task where in .ts files the functions are present and html is used to render the output of the functions in the user friendly way.

4. WORKFLOW:

Output:

Source

Video link:

https://drive.google.com/drive/folders/1oRLiNEAU0lz5JMCGhXze7z5MVdHH0GRR

5. CONCLUSION:

The angular application is created and it runs of http://localhost:4200 and the search page shows up