Summer internship project on

“FRONT END DEVELOPMENT”

Submitted in partial fulfilment of the requirements

for the award of the degree of

BCA

Submitted by:

HARSHIT ADHIKARI
Enroll No. A50504819011

Under the guidance of

Dr. Vikas Thada

Associate Professor
ASET (CSE), AUH

Amity Institute of Information Technology

Amity University Haryana

15 October 2020
I
 AMITY INSTITUTE OF INFORMATION TECHNOLOGY
HARYANA

DECLARATION

I, HARSHIT ADHIKARI, student of BCA-III SEMESTER, hereby declare that the

project entitled “ FRONT END DEVELOPMENT” which is submitted by me to the
Department of Computer Science, AIIT, AUH, in partial fulfilment of the requirements
for the award of the degree of Bachler of Computer Applications (BCA), has not been
previously formed the basis for the award of any degree, diploma or other similar title
or recognition.

Date: 15.10.20 HARSHIT

ADHIKARI

II
 AMITY INSTITUTE OF INFORMATION TECHNOLOGY
HARYANA

ACKNOWLEDGEMENT

It is my proud privilege to release the feelings of my gratitude to several persons who

helped me directly or indirectly to conduct this summer Project work my faculty guide
DR. VIKAS THADA for their sincere guidance and inspiration in completing this
project.

I am extremely thankful to our course coordinator DR. YOJNA ARORA for his
valuable time, guidance and encouragement, otherwise it would have been difficult to
keep the constant high spirit of work.

I also thank all my Friends who have more or less contributed to the preparation of this
Project report. I will be Always indebted to them.

The study has Indeed helped me to explore more knowledgeable avenues related to my
topic and I am sure It will help me in my future.

HARSHIT ADHIKARI

III
 AMITY INSTITUTE OF INFORMATION TECHNOLOGY
HARYANA

CERTIFICATE

This is to certify that Harshit Adhikari (Enrollment No: A50504819011) student of

BCA (III Semester), Department of Information Technology, AIIT, Amity
University Haryana, has done her internship project entitled ‘‘Front end development”.
Under the guidance and supervision of Dr. Vikas Thada during ‘May-July 2020’. The
work was satisfactory. he has shown competition dedication and devotion to the given
project

Dr. VIKAS THADA

(Associate Professor)
CSE, ASET, AUH

IV
 ABSTRACT
My project is weather Website

Knowing what the day will bring is one good way to making a perfect plan for each day.

Sometimes this is usually a difficult one for all us because nobody really knows for
certain what is likely to happen in the nearest minutes. Even in the area of the weather,
this is paramount.

In order to minimize the risk of distorted daily plans and arrangements, owing to
changes in weather, there is need to take close looks daily weather condition – which
means determining what the weather is likely to bring for the day.

This goes to help us realize the need and importance of weather forecast and its
instruments, including a weather app.

Basically, Here I want to tell that from Html and CSS I have made Personal blog website
and through JavaScript I have made Weather app.

1. HTML LAYOUTS
• Overall Website
• Div. containers
2. CSS DESIGNING
• Styling of overall Website
• Background Images
• Div. containers
3. JAVASCRIPT
4. Open weather api from openweather.org
V
NOTE:
In my projects I have used these of the following things:
1. Visual studio for writing and editing the codes
2. Used extension of live server in visual studio code for getting quick update result of
the code
3. In my project of weather app I have used open weather api from there website to get
the current location of the user

VI
 LIST OF FIGURES

Figure Title Page No.

No.

Fig 1.1 About the project 3

Fig 1.2 Udacity logo 4

Fig 2.2 Web Designing 8

Fig 2.3 Website Architecture 9

Fig 3.2 Html 11

Fig 3.3 CSS 12

Fig 3.3 Java script 13

Fig 4.1 About API key 16

Fig 4.2 How front-end works 17

Fig 4.3 Connectivity 17

Fig 5.1 Weather Website preview 18

Fig 5.2 When the user give input here is the output 19

VII
 CONTENTS
CONTENTS PAGE
NO.

DECLARATION II

ACKNOWLEDGEMENT II1

CERTIFICATE IV

ABSTRACT V-VI

LIST OF FIGURES VII

TOPICS PAGE NO.

CHAPTER 1: INTRODUCTION 1-5

1.1 About Front end development 1

1.2 Objective 2
1.3 Description of the organisation 3-4
1.4 Certificate 5

CHAPTER 2: BACKGROUND STUDY 6-9

2.1 Web development 7

2.2 Web designing 8

2.3 Architecture of a website 9

CHAPTER 3: DESGIN OF PROJECT 10-13

3.1 Development environment 11

3.2 Technologies used 12-13

VIII
CHAPTER 4: IMPLEMENTATION AND RESULTS 14-17

4.1 Getting started 14

4.2 Defining Elements 15

4.3 Now exactually what function is 16-17

CHAPTER 5: SNAPSHOT OF THE PROJECT 18-19

5.1 Weather app preview 18

5.2 User Input and the output screen 19

CHAPTER 6: CONCLUSION AND FUTURE SCOPE 20-22

6.1 Conclusion 20

6.2 Scope for Future Work 21

REFERENCES 22

IX
 CHAPTER 1

INTRODUCTION
1.1ABOUT THE PROJECT

The “front-end languages” live in the browser. After you type an address into the
address bar at the top and hit the enter/return key, your browser will receive at least
an HTML file from the web server. That file will likely tell the browser to request
a CSS file and a JavaScript file as well (probably many more than one, but we’ll
keep it simple).

Each of these languages performs a separate but very important function and they
work harmoniously together to determine how the web page is STRUCTURED
(HTML), how it LOOKS (CSS), and how it FUNCTIONS (JavaScript). And keep
in mind that your browser handles figuring out how to make these files into a
functioning web page (not the server).

Front-end web development is NOT design (you won’t be playing around in

Photoshop or anything), but a front-end developer does apply the work of designers
to the web page by translating their well-designed layouts into real code.

The front-end developer stands between the designer on one end and the back-end
developer on the other, translating the design into code and plugging the data from
the back-end developer into the right spots.

He or she must also handle all the possible interactions that the user may need to
make with the page.

1
 On the front end, you will need to be highly conscious of who your user is and how
they will be interacting with your web page, because you are building their gateway
to your page or product. This may mean gaining a strong understanding of
accessibility and things like responsive development down the line, but first you
need to build up your toolkit and pick up the fundamentals of the front-end
languages.

1.2 Objective

The Objective of my project are:

✓ to design the weather website, it shows the prediction for the hourly, daily,

weekly, and monthly forecast along with the present situation of the weather.
✓ What's more, you can integrate an additional feature known as 'Real Feel' to

shows the 'feel like' temperature

2
1.3 Description of the organisation

Fig 1.1 About the project [1]

3
 Fig 1.2 Udacity logo[1]

Udacity, Inc. is a for-profit educational organization founded by Sebastian Thrun,

David Stavens, and Mike Sokolsky offering massive open online courses (MOOCs).

Udacity is the outgrowth of free computer science classes offered in 2011 through
Stanford University. Thrun has stated he hopes half a million students will enroll, after
an enrollment of 160,000 students in the predecessor course at Stanford, Introduction
to Artificial Intelligence, and 90,000 students had enrolled in the initial two classes as
of March 2012.Udacity was announced at the 2012 Digital Life Design conference.
Udacity is funded by venture capital firm, Charles River Ventures, and $200,000 of
Thrun' s personal money. In October 2012, the venture capital firm Andreessen
Horowitz led the investment of another $15 million in

Udacity. In November 2013, Thrun announced in a Fast Company article that Udacity
had a "lousy product" and that the service was pivoting to focus more on vocational
courses for professionalsand "nanodegrees." As of 28 April 2014, Udacity has 1.6
million users in 12 full courses and 26 free courseware.

4
1.4 CERTIFICATE

5
 CHAPTER-2
BACKGROUND STUDY

These days internet is being widely used than it was used a few years back. It has
become a core part of our life. In the same manner, a platform of a website has also
became an essential part of our everyone‟s life where someone uses these websites
to explore new things while others uses these websites to express themselves and
describe their works. All these has been possible today because of the concept of
Web development and Web designing. So in this chapter, We‟ll introduce the
concept of Web development as well as Web designing.

2.1 WEB DEVELOPMENT

Web development broadly refers to the tasks associated with developing websites
for hosting via intranet or internet. The web development process includes web
design, web content development, client-side/server-side scripting and network
security configuration, among other tasks. Web development is also known as
website development. Web development is the coding or programming that enables
website functionality, per the owner's requirements. It mainly deals with the non-
design aspect of building websites, which includes coding and writing markup. Web
development ranges from creating plain text pages to complex web-based
applications, social network applications and electronic business applications. The
web development hierarchy is as follows:

6
 1. Client-side coding
2. Server-side coding
3. Database technology

2.2 WEB DESIGNING

Web designing refers to the designing of websites that are displayed on the internet.
It usually refers to the user experience aspects of website development rather than
software development. Web design used to be focused on designing websites for
desktop browsers; however, since the mid-2010s, design for mobile and tablet
browsers has become ever-increasingly important.

A web designer works on the appearance, layout, and, in some cases, content of a
website. Appearance, for instance, relates to the colors, font, and images used.
Layout refers to how information is structured and categorized. A good web design
is easy to use, aesthetically pleasing, and suits the user group and brand of the
website. Many webpages are designed with a focus on simplicity, so that no
extraneous information and functionality that might distract or confuse users
appears. As the keystone of a web designer‟s output is a site that wins and fosters
the trust of the target audience, removing as many potential points of user frustration
as possible is a critical consideration.

7
 Fig2.2 Web Designing [2]

2.3 ARCHITECTURE OF A WEBSITE

Website architecture is the planning and design of the technical, functional and
visual components of a website - before it is designed, developed and deployed. It is
used by website designers and developers as a means to design and develop a
website. Website architecture is used in creating a logical layout of a website in line
with the user and/or business requirements. It defines the different components that
will make up a website and the services each component or the website will provide
in whole.
Website architecture is the way your website is structured or, more specifically,
how your website‟s structure can help users easily and quickly find information and
drive conversions. Some of the factors that are part of website architecture are:

8
▪ Technical constraints such as server, storage. memory and communication
interfaces.
▪ Functional aspects such as the type of services or processes the website will provide.

▪ Visual appearance, i.e. the user interface, colors, buttons and other visual design
elements.

▪ Security parameters i.e. how the website will ensure secure access control and
transactions.

Fig 2.3 Website Architecture[2]

9
 CHAPTER -3
DESIGN OF PROJECT

Now that we‟re aware of web development, web designing and architecture of the
website which had been the background pillars or concept used in the development
of this project. Therefore, now we‟ll discuss about the operation environment and
the various Web development technologies used in this project.

3.1 DEVELOPMENT ENVIRONMENT

1. Hardware Configuration

• Processor: Intel Core i5

• RAM: 8GB

2. Software Configuration

• Operating System: Windows 10

• Development Environment: HTML , CSS, JavaScript

• Text editors used: Visual studio

10
3.2 TECHNOLOGIES USED
The Front is an abstraction, simplifying the underlying component by providing a
user-friendly interface. There are several tools or technologies available that can be
used to develop the front- end of a website.

• HYPERTEXT MARKUP LANGUAGE (HTML)

HTML (Hypertext markup language) is the most basic building block of the web. It
describes and defines the content of a webpage. “Hypertext” refers to links that
connect webpages to one another, either within a single website or between websites.
Links are a fundamental aspect of the web. By uploading content to the internet and
linking it to pages created by other people, one becomes an active participant in the
World Wide Web (WWW). HTML uses “markup” to annotate text, images and other
content for display in a web browser.

Fig3.2 HTML[3]

11
• CASCADING STYLE SHEETS (CSS)

Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language. CSS is designed
primarily to enable the separation of document content from document presentation,
including aspects such as the layout, color fonts. It allows one to adapt the
presentation to different types of devices, such as large screens, small screens, or
printers. CSS is independent of HTML and can be used with any XML based
markup language.

Fig 3.3 CSS[3]

12
• JAVASCRIPT

JavaScript is the client-side scripting language of the web. It‟s one of the most
popular and in- demand skills in today‟s job market for good reason. JavaScript not
only enables you to add powerful interaction to websites, but is also the foundation
of a lot of commonly used libraries like jQuery.

Fig 3.4 Java Script[3]

13
 CHAPTER - 4
IMPLEMENTATION AND RESULTS

In this project, we'll be building our very own weather app with HTML, CSS, and
JavaScript. To retrieve the data, we'll be using something called an API, or an
application programming interface.Well, we're actually going to us APIs to fetch
weather data based on the user's location!

4.1 Getting Started

Once we have this information, we can make a request to a weather source –
like OpenWeatherMap — to get weather data based on a user's location.

First off, go ahead and sign up for a free API key on OpenWeatherMap here. Once
you're signed in, click on API keys and create a key. It should look something
like a146799a227e8ab658304c1b30cc8cfa.

Now that we have our API key, we can create our files:
index.html - for our markup
main.css - for styling
main.js - for the function(s) to fetch data from our APIs

14
4.2 Defining the elements

As you probably saw in the preview in the image above, we are going to be displaying
the current temperature , day, month, year and the user's location. To do this, we'll
need to go into our html document and make sure we've first linked our
stylesheet main.css and javascript file main.js.

Then, in our <body> tag, let's create three elements with three unique ids. We have
added two place holder to enter the country and city from the user and after that in the
<main> section we have define the city, location, date, day, year using <div> section
classs .In the future, you can add more elements for markup and display even more
detailed data from our weather API here. At the end we have run the script of from
main.js

Firstly in main.js we are calling our Api from open weathermap.org that I have already
told you in the pervious steps and after that Here in Const search box it basically used
to let the user perform a text-based query.

Here the function set query and in the if (evt.keyCode == 13) It's the Return or Enter
key on keyboard.

15
4.3 NOW EXACTUALLY WHAT IS FUNCTION

Firstly in main.js we are calling our Api from open weathermap.org that I have already
told you in the pervious steps and after that Here in Const search box it basically used
to let the user perform a text-based query.

Here the function set query and in the if (evt.keyCode == 13) It's the Return or Enter
key on keyboard.

after that we are calling the function display Results that will show the location and
city

let now will match that location and will give current date and like that all other
function are defined

Fig 4.1 [4] About API key

16
Fig4.2 [4] how front-end works

Fig 4.3 [4] Connectivity

17
 CHAPTER -5
SNAPSHOT OF THE PROJECT

5.1 Weather website preview

Fig 5.1 Weather website preview[5]

18
5.2 When the user give input here is the output

Fig 5.2 output screen [5]

19
 CHAPTER -6

CONCLUSION AND FUTURE SCOPE

6.1 CONCLUSION

To conclude, the website has been made by using the basic languages
of the web development world such as HTML, CSS and JavaScript but
still many features can be added to the same website by learning many
more languages such as bootstraps, PHP, Js Perl etc. But still, the
project has a very vast scope in future. The project can be implemented
on the intranet in future. It can be used by the company for their
portfolio website. The project can be updated in near future as and
when requirement of the same arises, as it is very flexible in terms of
expansion. The future scope of the project is that it can be used by the
company as their portfolio website or their profile website where every
information is clearly mentioned. The user can feel the transparency
while using the website and weather app. The customer or the client
can even easily contact us by using direct mailing option.

20
6.2 SCOPE FOR FUTURE WORK

After breaking up to bits, it’s quite fair to suggest Front end web
development as a much-needed evolution for today’s web
requirements. Modern apps and sites cannot afford to ignore this space
at all and many companies with noticeable expertise in this field work
out wonders with proper usage of frameworks. Well, which framework
to go with will totally depend on what is to be achieved, how much
budget the client wants to allot and what size of the project it is.

Top companies are hiring front end developers from offshore

companies including WeblineIndia and the future is very promising.
These companies inculcate strong base that will enable developers to
put themselves on the right path and build amazing works using HTML,
CSS, JavaScript and other frameworks. The developers own advanced
skills and can manage everything from design implementation to bug
elimination and functional testing. Front end developers can be hired
for any web project and you can get started with your project instantly
without worrying about high repeated costs of having a team on-board.
You can utilize their skills for futuristic digital web services and give
outstanding front end to your website / app.

21
REFERENCES

1. https://www.w3schools.com/html/default.asp

2. https://www.weblineindia.com/

3. https://acodez.in/scope-of-web-development/

4. https://frontendmasters.com/

5. https://status.net/templates/project-summary-report-template-free-
download/

22
23
24