lOMoARcPSD|48423838

Internship Report-MCA rajavadhna

B.Tech (CSE) (SRM Institute of Science and Technology)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Naveen.R (n26354481@gmail.com)
 lOMoARcPSD|48423838

STUDY ON APPLICATION DATA SERVER

USING HTML, CSS & JAVASCRIPT
AN INTERNSHIP REPORT
Submitted by
RAJAVADANA D
[EA2132251010055]

Under the Guidance of

Dr.G.Babu
(Assistant Professor, Directorate of Online Education)
in partial fulfillment for the award of the degree of

MASTER OF COMPUTER APPLICATIONS

DIRECTORATE OF ONLINE EDUCATION

SRM INSTITUTE OF SCIENCE AND TECHNOLOGY
KATTANKULATHUR- 603 203
DEC 2022

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

DIRECTORATE OF ONLINE EDUCATION

SRM INSTITUTE OF SCIENCE AND TECHNOLOGY

KATTANKULATHUR – 603 203

BONAFIDE CERTIFICATE

This internship report titled “Study on Application Data

Server using HTML, CSS & JavaScript” is the Bonafede work of
“RAJAVADANA D [EA2132251010055]”, who carried out the
internship work under my supervision along with the company mentor.
Certified further, that to the best of my knowledge the work reported herein
does not form any other internship report or dissertation based on which a
degree or award was conferred on an earlier occasion on this or any other
candidate

1|Page

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

INTERNSHIP OFFER LETTER

CERTIFICATE OF INTERNSHIP

This is to certify that RAJAVADANA D

[EA2132251010055] has undergone an Internship work during the period from 20-09-2022 to 29-

12-2022 under the guidance of M.Arunkumar. This work has been carried out in partial fulfillment

of the requirements for the award of the degree of MASTER OF COMPUTER APPLICATIONS

2|Page

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

ACKNOWLEDGEMENTS

We express our humble gratitude to Dr C. Muthamizhchelvan, Vice-

Chancellor, SRM Institute of Science and Technology, for the facilities extended for
the project work and his continued support. We extend our sincere thanks to Director
DOE, SRM Institute of Science and Technology, Prof. Dr Manoranjan Pon Ram,
for his invaluable support. SRM Institute of Science and Technology, for her support
throughout the project work. We want to convey our thanks to Programme
Coordinator Dr. G. Babu, Directorate of online Education, SRM Institute of
Science and Technology, for their inputs during the project reviews and support.
Our inexpressible respect and thanks to my guide, Dr G.Babu., Assistant Professor
& Programme Coordinator Directorate of online Education,, SRM Institute of
Science and Technology, for providing me with an opportunity to pursue my project
under her mentorship. She provided me with the freedom and support to explore the
research topics of my interest. Her passion for solving problems and making a
difference in the world has always been inspiring. We sincerely thank the Directorate
of online Education, staff and students, SRM Institute of Science and Technology,
for their help during our project. Finally, we would like to thank parents, family
members, and friends for their unconditional love, constant support, and
encouragement.

RAJAVADANA

3|Page

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

TABLE OF CONTENTS

CHAPTER NO. TITLE PAGE NO.

1. Abstract .................................................................................................................. 5

2. System Analysis ........................................................................................................6

3. Software requirements specifications ....................................................................... 7

4. Technology ................................................................................................................ 8

4.1 JAVASCRIPT.................................................................................................................. 8

4.2 HTML ............................................................................................................................... 9

4.3 Overview of CSS .............................................................................................................11

4.4 Overview of an application using HTML, CSS and JavaScript ...................................... 13

5. Coding… ..................................................................................................................... 15

6. Result ............................................................................................................................ 24

7. Conclusion .................................................................................................................... 27

8. References .......................................................................................................... 28

4|Page

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

1. ABSTRACT

The purpose of this Mini Project is to document the development of a cross-platform application for
managing data on a server. Project contains basic UI such as hover and search it uses an easy
functionality that can be easily accessed and designed in a simple user-friendly interface web
application so that it can be easily modified.

Development of the application has taken place with the below technologies.

I. JavaScript is an object-oriented computer programming language commonly used to

create interactive effects within web browsers.
II. HTML (Hypertext Markup Language) is a standardized system for tagging text files to
achieve font, color, graphic, and hyperlink effects on World Wide Web pages.
III. CSS (Cascading Style Sheets) is a style sheet language used for describing the
presentation of a document written in a markup language such as HTML or XML.

In this project, we are going to create a project of Movie App Overview UI progressive web
application with the above-mentioned technologies. Where we will have a list of movies with
associated rating and overview description, each item in the list will have a hover functionality to it
which shows the overview information of the movie.

It then shows the data of each movie rating and information which will be useful for users to know
about the movies. And with the help of search, we can search for any movie, and it will show the
results accordingly, and this is partial search.

So that is how it will be, the result is a JavaScript library that follows the ES module standard with a
graphical user interface in the form of a progressive web application (PWA) with functions to manage
movie overview web application.

5|Page

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

2. SYSTEM ANALYSIS

Requirement Analysis

2.1 Existing System:

In an Existing Team we address these challenges and present an approach to efficient,

incremental consolidation of the requirement. Following common practice, our method iterates
over information requirements to create the final design. we show how to efficiently
accommodate a new information requirement to an existing design and also, how to update a
design in lieu of an evolving information requirement. The final design satisfying all
requirements is created.

2.2 Proposed System

Following the defined requirement, we came up with an idea to create web application where
we can view the information of movies. For this app creation I have taken the initiative a
proposed a blueprint of the output how the Movies list will be shown and search for the
movies. The team was highly impressed with the plan i was solely assigned to develop the
blueprint into final outcome. Developed the Movie App Overview using HTML, CSS and
JavaScript and the team was highly impressed with the outcome.

6|Page

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

3. SOFTWARE REQUIREMENTS SPECIFICATIONS

System configurations
The software requirement specification can produce at the culmination of the analysis task. The
function and performance allocated to software as part of system engineering are refined by
established a complete information description, a detailed functional description, a representation of
system behavior, and indication of performance and design constrain, appropriate validate criteria,
and other information pertinent to requirements.

Software Requirements:
• Operating system : Windows- Windows 7, 8, 10, Mac- macOS 10.9 or later, Linux- Ubuntu,
Debian, Red Hat, Fedora, or SUSE.
• Coding Language : HTML, CSS, JavaScript.
• Front-End : Microsoft Visual Studio Code.

7|Page

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

4. TECHNOLOGY

4.1 JAVASCRIPT
JavaScript is a dynamic computer programming language. It is lightweight and most commonly used
as a part of web pages, whose implementations allow client-side script to interact with the user and make
dynamic pages. It is an interpreted programming language with object-oriented capabilities.

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly
because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0 in
1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape,
Internet Explorer, and other web browsers.

The ECMA-262 Specification defined a standard version of the core JavaScript language.

• JavaScript is a lightweight, interpreted programming language.

• Designed for creating network-centric applications.
• Complementary to and integrated with Java.
• Complementary to and integrated with HTML.
• Open and cross-platform
• Client-Side JavaScript

Client-side JavaScript is the most common form of the language. The script should be included in or
referenced by an HTML document for the code to be interpreted by the browser.

It means that a web page need not be a static HTML, but can include programs that interact with the user,
control the browser, and dynamically create HTML content.

The JavaScript client-side mechanism provides many advantages over traditional CGI server-side scripts. For
example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.

The JavaScript code is executed when the user submits the form, and only if all the entries are valid, they
would be submitted to the Web Server.

JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions
that the user initiates explicitly or implicitly.

Advantages of JavaScript

The merits of using JavaScript are −

• Less server interaction − You can validate user input before sending the page off to the server. This
saves server traffic, which means less load on your server.
• Immediate feedback to the visitors − They don't have to wait for a page reload to see if they have
forgotten to enter something.
• Increased interactivity − You can create interfaces that react when the user hovers over them with a
mouse or activates them via the keyboard.
• Richer interfaces − You can use JavaScript to include such items as drag-and-drop components and
sliders to give a Rich Interface to your site visitors.
8|Page

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

Limitations of JavaScript

We cannot treat JavaScript as a full-fledged programming language. It lacks the following important
features-

• Client-side JavaScript does not allow the reading or writing of files. This has been kept for security
reason.
• JavaScript cannot be used for networking applications because there is no such support available.
• JavaScript doesn't have any multi-threading or multiprocessor capabilities.
• Once again, JavaScript is a lightweight, interpreted programming language that allows you to build
interactivity into otherwise static HTML pages.

JavaScript Development Tools

• One of major strengths of JavaScript is that it does not require expensive development tools. You can
start with a simple text editor such as Notepad. Since it is an interpreted language inside the context
of a web browser, you don't even need to buy a compiler.
• To make our life simpler, various vendors have come up with very nice JavaScript editing tools.
Some of them are listed here −
• Microsoft FrontPage − Microsoft has developed a popular HTML editor called FrontPage. FrontPage
also provides web developers with a number of JavaScript tools to assist in the creation of interactive
websites.
• Macromedia Dreamweaver MX − Macromedia Dreamweaver MX is a very popular HTML and
JavaScript editor in the professional web development crowd. It provides several handy prebuilt
JavaScript components, integrates well with databases, and conforms to new standards such as
XHTML and XML.
• Macromedia HomeSite 5 − HomeSite 5 is a well-liked HTML and JavaScript editor from
Macromedia that can be used to manage personal websites effectively.

4.2 HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web
Pages.

Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link
available on a webpage is called Hypertext.

As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text
document with tags that tell a Web browser how to structure it to display.

Originally, HTML was developed with the intent of defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers.

Now, HTML is being widely used to format web pages with the help of different tags available in HTML
language.

Advantages:

9|Page

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

• HTML helps to build structure of a website and is a widely used Markup language.
• It is easy to learn.
• Every browser supports HTML Language.
• HTML is light weighted and fast to load.
• Storage of big files are allowed because of the application cache feature.
• Do not get to purchase any extra software because it’s by default in every window.
• Loose syntax (although, being too flexible won’t suit standards).
• HTML is simple to edit as being a plain text.
• It integrates easily with other languages such as JavaScript, CSS etc.
• HTML is that it is easy to code even for novice programmers.
• HTML also allows the utilization of templates, which makes designing a webpage easy.
• It is fast to download as the text is compressible.
• Very useful for beginners in the web designing field.
• HTML can be supported to each and every browser, if not supported to all the browsers.
• HTML is built on almost every website, if not all websites.
• HTML is increasingly used for data storage as like XML syntax.
• HTML has many tag and attributes which can short your line of code.

Disadvantages:

• It cannot produce dynamic output alone, since it’s a static language.

• Making the structure of HTML documents becomes tough to understand.
• Errors can be costly.
• It is the time consuming as the time it consume to maintain on the color scheme of a page and to make
lists, tables and forms.
• We need to write a lot of code for just creating a simple webpage.
• We have to check up the deprecated tags and confirm not to use them to appear because another
language that works with HTML has replaced the first work of the tag, and hence the opposite language
needs to be understood and learned.
• Security features offered by HTML are limited.
• If we need to write down long code for creating a webpage then it produces some complexity.
• HTML can create only static and plain pages so if we would like dynamic pages then HTML isn’t
useful.
• Editing of web page need to be done separately, they are not centralized.

HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML
1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group (WHATWG).

The new standard incorporates features like video playback and drag-and-drop that have been previously
dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.

Browser Support:

The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5
features and Internet Explorer 9.0 will also have support for some HTML5 functionality.

10 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent
support for HTML5.

New Features:

HTML5 introduces a number of new elements and attributes that can help you in building modern websites.
Here is a set of some of the most prominent features introduced in HTML5.

New Semantic Elements − These are like <header>, <footer>, and <section>.

Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for <input> tag.

Persistent Local Storage − To achieve without resorting to third-party plugins.

WebSocket − A next-generation bidirectional communication technology for web applications.

Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they
are called Server-Sent Events (SSE).

Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.

Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins.

Geolocation − Now visitors can choose to share their physical location with your web application.

Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with
custom semantics.

Drag and drop − Drag and drop the items from one location to another location on the same webpage.

Backward Compatibility:

HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. Its new
features have been built on existing features and allow you to provide fallback content for older browsers.

It is suggested to detect support for individual HTML5 features using a few lines of JavaScript.

If you are not familiar with any previous version of HTML, I would recommend that you go through our HTML
Tutorial before exploring the features of HTML5.

4.3 Overview of CSS

Cascading Style Sheets (CSS): CSS is defined as a method sheet language that provides web designers control
over how an internet site communicates with web browsers including the formatting and display of their HTML
documents.

CSS or cascading sheet may be a text-based coding language that specifies the website formats and the way a
site communicates with web browsers. The language allows web developers to regulate various style elements
and functionalities, like layout, color, fonts, and therefore the formatting and display of HTML documents.

11 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

The main goal (as a method sheet language) was to separate document content from document presentation,
which incorporates style elements, like color, layout, and fonts. CSS handles the design and feel a part of an
internet page. Using CSS, you will control the color of the text, the design of fonts, the spacing between
paragraphs, how columns are sized and laid out, etc.

CSS instructs the display of the HTML on how the web site will display at the user’s end. Let us have a glance
on the benefits and drawbacks of CSS.

Why CSS?

CSS saves time: You can write CSS once and reuse the same sheet in multiple HTML pages.
Easy Maintenance: To make a global change simply change the style, and all elements in all the webpages
will be updated automatically.
Search Engines: CSS is considered a clean coding technique, which means search engines won’t have to
struggle to “read” its content.
Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far better
look to your HTML page in comparison to HTML attributes.
Offline Browsing: CSS can store web applications locally with the help of an offline cache. Using this we can
view offline websites.

Advantages of CSS:

• CSS plays an important role, by using CSS you simply got to specify a repeated style for element once
& use it multiple times as because CSS will automatically apply the required styles.
• The main advantage of CSS is that style is applied consistently across variety of sites. One instruction
can control several areas which is advantageous.
• Web designers needs to use few lines of programming for every page improving site speed.
• Cascading sheet not only simplifies website development, but also simplifies the maintenance as a
change of one line of code affects the whole web site and maintenance time.
• It is less complex therefore the effort are significantly reduced.
• It helps to form spontaneous and consistent changes.
• CSS changes are device friendly. With people employing a batch of various range of smart devices to
access websites over the web, there’s a requirement for responsive web design.
• It has the power for re-positioning. It helps us to determine the changes within the position of web
elements who are there on the page.
• These bandwidth savings are substantial figures of insignificant tags that are indistinct from a mess of
pages.
• Easy for the user to customize the online page
• It reduces the file transfer size.

Disadvantages of CSS:

• CSS, CSS 1 up to CSS3, result in creating of confusion among web browsers.

• With CSS, what works with one browser might not always work with another. The web developers
need to test for compatibility, running the program across multiple browsers.
• There exists a scarcity of security.
• After making the changes we need to confirm the compatibility if they appear. The similar change
affects on all the browsers.
• The programing language world is complicated for non-developers and beginners. Different levels of
CSS i.e. CSS, CSS 2, CSS 3 are often quite confusing.
12 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

• Browser compatibility (some styles sheet are supported and some are not).
• CSS works differently on different browsers. IE and Opera supports CSS as different logic.
• There might be cross-browser issues while using CSS.
• There are multiple levels which creates confusion for non-developers and beginners.

4.4 Overview of an application using HTML, CSS and JavaScript

There are many web languages available, however we’re just going to look at three of them. They
are HTML, CSS and JavaScript and they are considered to be the backbone of the web. When it comes to
web development there is front-end web development and back end-web development. These three
languages are for front-end web development and are responsible for what you can see and do on a
website. They are referred to as client side languages as they run in the browser (Google Chrome, Firefox
etc.) of your computer. The browser translates these languages and the result of this translation is the
visual web page.
It’s important to note HTML and CSS are not considered to be programming languages. HTML is a markup
language and CSS is a styling language. JavaScript, however, is a programming language. Hence, they are all
web languages, but they perform different jobs.

For those that are new to web design the easiest way to understand this relationship is to look at an analogy
that will break it down into bite-size chunks. One way to look at front-end web development is to see these
three languages interact with one another the same way a human body interacts with its surroundings.

The Website as a Human Body

To make this easy to understand, I’m going to refer to these three web languages as different aspects of the
human body. We’re going to look at the body itself as a sort of command centre; the accessories that are worn
on the body as a way of representing personal style; and then the actions that the body is capable of as a way
of animating ourselves. So for the purpose of this discussion, HTML will be referred to as the physical body,
CSS will be the body’s accessories and JavaScript is the body’s ability to talk or move. All of these ‘bodily
aspects’ need to work together to form a functional, visually appealing, interactive website.

HTML
• The Body
• HyperText Markup Language (HTML)
• Content and basic structure
• Describes and defines
• Made up of tags
• Tells the browser what to display
HyperText Markup Language (HTML) can be broken down into HyperText, which is what grants access to
other texts through links, and Markup which outlines the basic structure and appearance of raw text. What this
means is that HTML describes and defines the content and basic structure of the website. It does this through
a means of special tags or codes which tell the browser what to do. HTML is the bare basics of a website.

An HTML only website can be compared to a functioning human body. Note, I didn’t say fully-functional. An
HTML only website has all of its body parts, although it doesn’t offer much to look at because it doesn’t have
any accessories or personal style. At this stage, it’s also a body which is not capable of moving or speaking. A
website which consists of only HTML would probably look a little like this:

This is where CSS comes in.

13 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

CSS

• The Accessories
• Cascading Style Sheet (CSS)
• Gives style and structure to the content
• Link the CSS file to the HTML
• Tells the browser how to display

A Cascading Style Sheet is the website’s accessories. It’s responsible for outlining the colours, font and
positioning of the content on a website. It adds some style and structure to the content. In order to make use of
the CSS capabilities it needs to be linked within the HTML content so that style can be added to the website.
CSS will tell the browser how to display the existing HTML.

CSS can be compared to adding personal style to the body. When you link CSS to HTML, it’s like dressing up
the body. For example, you can choose a specific colour shirt and match it with a specific colour pair of
trousers. On a website, you can choose the colour of the background or the font size of a heading and much
more. It’s important to note that CSS cannot live without HTML as there would be nothing to style. Just like
clothes or shoes would be pointless without someone to wear them.

So by now you should have an understanding of how structure and style are constructed on a website. A website
that consists of HTML and CSS might looks like this:

However, you can’t help but notice that something is missing. The web page is lacking certain functions like
a search box or options to comment. Right now the body, with all its accessories, looks more like a mannequin
in a store window than a real human being. That’s where JavaScript comes in.

JavaScript

• The body’s ability to perform actions

• JavaScript is not Java
• Behaviour of the website
• Used for interactive functionality
• Allows for the user to interact with the browser

JavaScript controls the behaviour of the website. It’s important to note that JavaScript and Java are two
different things. JavaScript was designed to manipulate web pages and it is used to create interactive
functionality. Without JavaScript a website will still be functional, but in a limited way. JavaScript is what
animates HTML and CSS, and it’s what brings your website to life.

JavaScript can be compared to the body’s ability to perform actions such as walking or talking. So when you
add JavaScript to HTML and CSS, it transforms the body from being a beautifully dressed mannequin into a
real-life walking talking human being. It animates the body, giving it lifelike qualities. JavaScript can also be
compared to a fully functional body that has the ability to interact. As we all know, having an interactive
website is critical, otherwise its just a boring page filled with information. Here we see a website which consists
of HTML, CSS and JavaScript:

If you look at this example of twitter, JavaScript allows you to expand the tweet to see re-tweets, to set a tweet
as a favourite and more. A popular JavaScript App is Google Maps.

14 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

5. CODING
This is Movie App Overview made in only one html file using HTML, CSS and JavaScript

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Movie App</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<header>
<h1>Trending Movies</h1>
<form id="form">
<input
type="text"
id="search"
placeholder="Search"
class="search"
/>
</form>
</header>
<div id="content"></div>
</body>
</html>

CSS Code:

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap");

*{
box-sizing: border-box;
}

body {

background-color: #030303;
font-family: "Poppins", sans-serif;
margin: 0;
}

header {
background-color: #363636;
display: flex;

h1{
color: whitesmoke;
align-self: center;
margin-left: 28rem;
}

15 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

.search {
margin: 3rem;
margin-left: 12rem;
background-color: transparent;
border: 2px solid #e9e9ec;
border-radius: 50px;
color: #fff;
font-family: inherit;
font-size: 1rem;
padding: 0.5rem 1rem;
}

.search::placeholder {
color: #7378c5;
}

.search:focus {
background-color: #050505;
outline: none;
}

div{
display: flex;
flex-wrap: wrap;
}

.movie {
background-color: #373b69;
border-radius: 3px;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
overflow: hidden;
position: relative;
margin: 1rem;
justify-content: center;
align-content: center;
width: 265px;
}

.movie img {
width: 100%;
}

.movie-info {
color: #eee;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem 1rem;
letter-spacing: 0.5px;
}

.movie-info h3 {
margin: 0;
}

.movie-info span {
background-color: #22254b;
border-radius: 3px;
font-weight: bold;
padding: 0.25rem 0.8rem;
16 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

}
.movie-info span.green {
color: rgb(39, 189, 39);
}

.movie-info span.orange {
color: orange;
}

.movie-info span.red {
color: rgb(189, 42, 42);
}

.overview {
background-color: #fff;
padding: 2rem;
position: absolute;
max-height: 100%;
overflow: auto;
left: 0;
bottom: 0;
right: 0;
transform: translateY(101%);
transition: transform 0.3s ease-in;
}

.overview h3 {
margin-top: 0;
}

.movie:hover .overview {
transform: translateY(0);
}

Javascript Code:

const APIURL = "https://api.themoviedb.org/3/discover/movie?api_key=04c35731a5ee918f014970082a0088b1";

const IMGPATH = "https://image.tmdb.org/t/p/w1280";
const SEARCHAPI =
"https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";

const main = document.getElementById("content");

const form = document.getElementById("form");
const search = document.getElementById("search");

// initially get fav movies

getMovies(APIURL);

async function getMovies(url) {

const resp = await fetch(url);
const respData = await resp.json();

console.log(respData);

showMovies(respData.results);
}

function showMovies(movies) {
// clear main
17 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

main.innerHTML = "";

movies.forEach((movie) => {
const { poster_path, title, vote_average, overview } = movie;

const movieEl = document.createElement("div");

movieEl.classList.add("movie");

movieEl.innerHTML = `
<img
src="${IMGPATH + poster_path}"
alt="${title}"
/>
<div class="movie-info">
<h3>${title}</h3>
<span class="${getClassByRate(
vote_average
)}">${vote_average}</span>
</div>
<div class="overview">
<h3>Overview:</h3>
${overview}
</div>
`;

main.appendChild(movieEl);
});
}

function getClassByRate(vote) {
if (vote >= 8) {
return "green";
} else if (vote >= 5) {
return "orange";
} else {
return "red";
}
}

form.addEventListener("submit", (e) => {

e.preventDefault();

const searchTerm = search.value;

if (searchTerm) {
getMovies(SEARCHAPI + searchTerm);

search.value = "";
}
});

18 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

6. RESULT

5.1 Home page:

19 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

5.2 Movies List:

20 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

5.3 Search:

21 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

22 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

7. CONCLUSION

In an Existing Team we address these challenges and present an approach to efficient, incremental
consolidation of the requirement. Following common practice, our method iterates over information
requirements to create the final design. we show how to efficiently accommodate a new information
requirement to an existing design and also, how to update a design in life of an evolving information
requirement. we came up with an idea to create web application where we can view the information
of movies. For this app creation I have taken the initiative a proposed a blueprint of the output how
the Movies list will be shown and search for the movies. The final design satisfying all requirements
is created. The team was highly impressed with the plan i was solely assigned to develop the
blueprint into final outcome. Developed a single Movie App Overview application using HTML,
CSS and JavaScript and the team was highly impressed with the outcome.

23 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)

 lOMoARcPSD|48423838

8. REFERENCES

Best reference sites for HTML, CSS and JavaScript programming:

• W3C WebEd Wiki (this site has a self-teaching curriculum as well as reference
material): HTML, CSS
• W3C Specifications: HTML4, HTML5 (working draft), CSS 2.1, DOM Tech Reports:
levels 1-3
• ECMAScript: ECMAScript 5.1 (PDF), ECMAScript 3rd Ed., Annotated ES
5.1, HTML ES 3
• SitePoint: DOM JavaScript, HTML, CSS -- Search
• Mozilla Dev Center: DOM, JavaScript, JS
Lang, AJAX, HTML, XHTML, SVG, Standards
• MSDN: HTML Elements, IE HTML Reference, CSS Attributes, IE CSS
Reference, JavaScript Language, DOM
• Quirksmode: DOM Javascript, CSS, Compatibility

24 | P a g e

Downloaded by Naveen.R (n26354481@gmail.com)