Lab Assignment 1 - Nikii1118/Web-Programming- GitHub Wiki

Class ID-10 Nikita Goyal

Class ID-2 Maryam Alkhabiet

Introduction

---

The following assignment covers various web-programming topics which include HTML, CSS, JAVASCRIPT, ANGULAR and calling the API.

Objective

---

To become familiar with the concepts of web-Programming the following tasks has been assigned:

1. Multi-Page Responsive Website: Massive open online course (MOOC) web application

2. Develop a basic Snake game with Angular

3. Google Knowledge GraphSearch API

Technologies/Tools used

---

The Tools used are:

1. Webstorm
2. Google Knowledge GraphSearch API

Creating a MOOC web application using HTML,CSS AND JAVASCRIPT

Code

---

OUTPUT:

---

First Screenshot for the Home page of the Web-App

Login/Registration:

Two options showing, to login to an existing account and to Register the account if it’s your first time. When the user will click on the button it will take the user to the login page.

The login page will have two options also, login if you already have an account. And registration if it’s your first time.

If the user is not in the system, the system will show “Invalid login, Try again”

When the user is not in the system, they can type their email and their password. Then they hit on Registration. They system will register the email and the system will show “ Thank You for Registering Your Email”

When you the user register and login, they can hit on home button then the registration page will open then they can investigate the courses that they website provide. They can fill the blank and they system will find the open classes.

After they hit search, they will see the available courses that they can enroll in.

If the user will hit on the course it will see the description of the course and the time and there is URL can take you to the enrollment page

There is a nav bar they can show the department as it shows down and a list can dropdown. When you hit on the course name it will take the user to enrollment page as it did up there when it opens the enrollment for computer science.

When the user hit on “about” on the nav bar, it will take them to the “about page” where it has the contact like Facebook, Instagram and twitter. Each icon will take you to their URL

Enrollment course will also let the user to hit on Enroll, and show the capacity of the class.

If the user hit Enroll, the open seat will change, and the user will get a message “you successfully enrolled”

Then drop button will shows. If the user hit drop then the open seat will get back to what it was and the user will have a message “you are no longer enroll in this course” and enroll button will shows again.

SNAKE-GAME USING ANGULAR

CODE:

---

htmlfile

typescipt files

OUTPUT

---

Google Knowledge API Search

We are displaying the details about the people.

Code:

---

Steps:

1. Create an account of google

2. Create a project

3. Get a google Knowledge search API

4. Call the API and get the data in JSON format

5. Accessing the JSON through famous people name.

OUPUT

---

Conclusion

---

Implemented the Multipage Course enrolment website using HTML, CSS, and javascript. Learn how to build the games using angular and how to use the API effectively.