Project Report

ond
“Development of Movie Streaming Web
Application”

Diploma Engineering (3rd Year)

(Branch – CO)

Smt. Sharachandrika Suresh Patil Institute of Technology

Polytechnic, Chopda

Summitted to: Summitted by:

Mrs. Varule Mam Devansh Jaiswal
Roll No:CO317

1
 ACKNOWLEDGEMENT

This Project report was completed as a result of support from many

people, although not all of them can be mentioned.

We wish to express our sincere gratitude to our Principal Mr. V N

Borse sir for his protection, providence, guidance.

We are greatly indebted to our good subject teacher Mrs. Madhuri

Varule Mam for her useful and necessary observation, suggestions,
contribution and corrections. We would not have been able to achieve
anything in this research without your supervision. May God enrich
you greatly in every area of life.

2
 INDEX
Page
Sr. No. Particulars
No.

1. Introduction 4

Abstraction
2. 5

3. Why this Project 6

Getting Started With HTML with Source

4.
Code 7

Making the webpage attractive with CSS

5. 17
Source Code

6. Implementing the Complete JavaScript Code

27

7. Screenshots As Output 31

8. Conclusion
33

9. References
34

3
 INTRODUCTION

JavaScript has become one of the most popular languages in the

Early 2000s. There are many JavaScript frameworks available in the
market for JavaScript like, React, Angular, etc. but in this Project, I
implement Vanilla JavaScript with some CSS and little knowledge of
JSON.
In this project, A Web Application of Movie Streaming is
Developed to store and manage the data of the user. This Project
helped me to learn the vast concepts of JavaScript by implementing
that functionality in our code. Apart from Development, it helped to
improve my logic building skills which opened mindset for every other
program’s logic.
Here, I used JavaScript to dynamically create the HTML
elements which is then added to the list with the Events and to make
it more clean, neat and finished, Cascading Style Sheet (CSS) is used
in it. Apart from all this, to store all the data after closing the window,
local storage is used. To store data, JSON (used to send data between
Computers) is used.
The Project covers the Basic as well as the Fundamental topics
of the Core JavaScript which can help anyone to prepare concept for
the Interview. This Project is developed with the knowledge gained
from our Institute and with the help of our Supervisor. I would
specially like to thank them.

4
 ABSTRACTION

In HTML Document, firstly the basic structure is created like

title, basic buttons and textboxes, and separations like <div>,
<article> tags are used. Every element is given some ID which helps
to dynamically change the values and attributes using JavaScript. An
External CSS file is imported for the icons of edit and delete buttons.
Apart from this, a local CSS and JavaScript file is imported.
In CSS Document, the appearance of every element is styled.
This includes colors, position, size, shape, visibility, etc. This is done
to make the program more satisfy to use and increase the user
interaction. Suppose when user enters wrong or invalid value, then the
message should be shown to user in red color which indicates danger,
and successful data, message should be represented in green which
symbolizes success.
In JavaScript Document, each and every manipulation of the
elements is controlled and managed by JavaScript. Firstly, the
Elements were stored in variables and according to the changes, these
variables are manipulated to make changes in HTML. To add the
Grocery items, the <p> tag is created and the name of the element is
set, through value passing using function. Then using <div> tag,
buttons for edit and delete is added and then the event listener is used
to handle the events of that buttons. These buttons are generated inside
the container so when the particular item is removed then the buttons
associated to it also get removed.
Since there is a use of local storage therefore it is also important to
manage the data of local storage. When the item is removed then the
reference is passed to it and removes the data inside the local storage.
So next time when user reopens the application, only authentic data is
present.

5
 WHY THIS PROJECT?

There are many projects like this, where program manages user’s
data and modifies on user’s command. These types of projects focus
on making user interface more pleasing to eyes by using CSS but these
projects don’t care about any other events like what happens when the
user accidently closes the application. Also the project developed is
very Heavyweight which is not good for projects like these, specially
when user has to modify and manage data quickly.
Generally, When the data is stored in the JavaScript, it is present
there until the Application is running. These data are called Sessional
Data. To overcome this problem, the local storage is used so that when
the user closes Application, the data remains safe. The data is always
stored in the local storage in “key: value” pair, which makes it easy to
organize. Apart from this, the Window Application takes more
memory than the Web Application which makes that Heavier to load
and store. Creating Web Application increases in response time of the
program.
Apart from storing it in local storage, the design is pretty much
highlight of this application. There are some small factors like
displaying important notifications to provide information to the user,
providing small amount of validation in the form and changing the
data according the need of the end user makes it more comfortable
and satisfy to use the Application.