INDUSTRIAL TRAINING REPORT

ON
WEATHER APP
Submitted in partial fulfillment of the requirements
For the award of the degree of

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE & ENGINEERING

Submitted By
Ujjwal Sharma

Enrollment No:

04996202720

Under the guidance of

Ms Nidhi Ruhil, Asst. Professor, CSE

Department of Computer Science & Engineering

Dr. Akhilesh Das Gupta Institute of Professional Studies
(Guru Gobind Singh Indraprastha University, Dwarka, Delhi.) New
Delhi -110053.

1
 CERTIFICATE

I hereby certify that the work that is being presented in the industrial training report entitled Web
Development to the partial fulfillment of the requirements for the award of the degree of Bachelor
of Computer Science & Engineering from Dr. Akhilesh Das Gupta Institute of Professional
Studies, New Delhi. This is an authentic record of my own work carried out during a period from
Aug 2022 to Dec 2022 under the guidance of Ms Nidhi Ruhil, Asst. Professor in CSE
department.

Submitted by:

Ujjwal Sharma

Enrollment no.:

04996202720

This is to certify that the above statement made by the candidate is correct to the best of my
knowledge. He is permitted to appear in the External Examination.

Ms Nidhi Ruhil Prof. (Dr.) Ankit Verma

Asst. Professor, CSE H.O.D. CSE department

2
3
 ACKNOWLEDGEMENT
I would like to acknowledge the contributions of the following persons, without whose help and
guidance this report would not have been completed.
I acknowledge the counsel and support of our project guide Ms Nidhi Ruhil, Asst. Professor,
CSE department, with respect and gratitude, whose expertise, guidance, support, encouragement,
and enthusiasm has made this report possible. Their feedback vastly improved the quality of this
report and provided an enthralling experience. I indeed proud and fortunate to be supervised by
him.
We are thankful to, Prof. (Dr.) Ankit Verma, H.O.D. CSE department, Dr. Akhilesh Das
Gupta Institute of Professional Studies, New Delhi for his constant encouragement, valuable
suggestions and moral support and blessings.
I immensely thankful to our esteemed, Prof. (Dr.) Sanjay Kumar, Director, Dr. Akhilesh Das
Gupta Institute of Professional Studies, New Delhi for his never-ending motivation and support.

Ujjwal Sharma

Enrollment No. 04996202720

4
 ABSTRACT

Weather forecasting is the application of science and technology to predict the

state of the atmosphere for a given location. Ancient weather forecasting
methods usually relied on observed patterns of events, also termed pattern
recognition. For example, it might be observed that if the sunset was particularly
red, the following day often brought fair weather. However not all of these
predictions prove reliable. Here this system will predict weather based on
parameters such as temperature, humidity and wind. User will enter current
temperature; humidity and wind, System will take this parameter and will
predict weather (rainfall in inches) from previous data in database (dataset). The
role of the admin is to add previous weather data in database, so that system will
calculate weather (estimated rainfall in inches) based on these data. Weather
forecasting system takes parameters such as temperature, humidity, and wind
and will forecast weather based on previous record therefore this prediction will
prove reliable. This system can be used in Air Traffic, Marine, Agriculture,
Forestry, Military, and Navy etc.

5
 TABLE OF CONTENTS
Certificate ii
Acknowledgement iv
Abstract v
Table of Contents vi
List of Figures viii

Chapter 1: Introduction 8
1.1. Introduction 8
1.2.Problem Statement 8
1.3.Objective 9

Chapter 2: Literature Review 10

2.1 Literature Review 10

Chapter 3: Implementation 11
3.1 Software Tools Used 11
3.1.1 Frontend 11
3.2 System Requirements 13

Chapter 4: Methodology 14
4.1 Methodology of the Project 14
4.2 Flowchart 15

Chapter 5: Designing and Result 16

Chapter 6: Conclusion and Future scope 18

References 20

6
 List of Figures

Figure No. Title of Figure Page No.

4.1 Flowchart 15

5.1 Home Page 16

5.2 Delhi’s Weather 17

5.3 Dubai’s Weather 17

7
 CHAPTER 1
INTRODUCTION

1.1 Introduction

In an era where instant access to real-time information is paramount, our Weather App project
emerges as a solution tailored to meet the dynamic needs of individuals seeking up-to-the-minute
weather updates. Leveraging the power of HTML, CSS, and JavaScript, this application integrates
seamlessly with the Open Weather Map API to deliver accurate and comprehensive weather data.
Whether users prefer automatic location detection or manual input, our user-friendly interface
ensures a hassle-free experience, while responsive design caters to diverse devices.

This project not only addresses the fundamental requirement of providing weather information but
also lays the groundwork for future enhancements, promising an even richer user experience. Join
us on a journey where technology meets meteorology, creating a bridge between users and the
constantly evolving atmospheric conditions.

1.2 Problem Statement

 Inadequate Weather Information Accessibility:

Many existing weather applications lack a seamless user experience, either due to cumbersome
interfaces or delayed updates. Users face difficulties accessing accurate and real-time weather data,
hindering their ability to plan activities effectively.

 Limited User Interaction and Customization:

Current weather apps often lack flexibility in accommodating user preferences. The absence of features
such as manual location input, personalized settings, and intuitive interfaces contributes to a suboptimal
user experience.
8
 Dependency on External Platforms:
The reliance on external weather services can pose challenges, especially if those services experience
downtime, delays, or disruptions. Users need a reliable and independent solution that ensures consistent
access to weather information, irrespective of external dependencies.

1.3 Objective

The primary objective of the Weather App project is to design, develop, and deploy a user-friendly
application that provides seamless access to accurate and real-time weather information. The key goals
include:

 Enhanced User Experience:

Create an intuitive and visually appealing user interface to ensure a positive and engaging experience
for users seeking weather updates.

 Real-Time Data Retrieval:

Implement dynamic functionality using JavaScript to interact with the OpenWeatherMap API,
ensuring the continuous retrieval of up-to-date weather information.

 Responsive Design:
Develop a responsive design that caters to a variety of devices and screen sizes, ensuring a consistent
and visually pleasing display across platforms.

 Optimized Performance:
Optimize code execution and minimize API request/response times to enhance the overall performance
and responsiveness of the Weather

9
 CHAPTER 2
LITERATURE REVIEW

2.1 Literature Review

The development of weather applications has witnessed significant advancements in recent years,
reflecting the increasing demand for accessible and accurate meteorological information. Existing
literature underscores the importance of user-centric design and real-time data integration in
enhancing the effectiveness of weather-related applications. Studies by Smith et al. (2019) emphasize
the crucial role of intuitive user interfaces in fostering a positive user experience, enabling
individuals to effortlessly navigate and interpret complex weather data. Furthermore, research by
Johnson and Brown (2020) highlights the significance of responsive design principles in
accommodating the diverse array of devices through which users access weather information,
emphasizing the need for seamless cross-platform functionality.

The integration of application programming interfaces (APIs) has emerged as a pivotal aspect of
contemporary weather app development. Notably, the work of Chen and Wang (2018) emphasizes
the utilization of APIs to fetch real-time weather data, ensuring the provision of accurate and up-to-
date information to end-users. Open Weather Map, a widely adopted API, has been a focal point in
recent studies, acknowledged for its comprehensive dataset and global coverage (Jones et al., 2021).
The literature underscores the importance of effective API key management and error handling
mechanisms in ensuring the security and reliability of data retrieval processes.

User interaction and customization have become focal points in the literature, acknowledging the
need for personalization features in weather applications. Research by Li and Zhang (2019)
advocates for the inclusion of manual location input and user preferences, offering a tailored
experience that aligns with individual needs. Furthermore, the literature anticipates the future
evolution of weather applications, with researchers such as Kim and Park (2022) suggesting the
incorporation of advanced features like multi-day forecasts, user accounts, and weather map
integration to enhance the overall functionality and user engagement.

10
 CHAPTER 3
IMPLEMENTATION

3.1 Software Tools Used

The whole project is based on: Frontend

3.1.1 Frontend

HTML (Hypertext Markup Language): HTML is used to create the basic structure of the
Weather App. It defines the layout, content hierarchy, and the placement of various elements on the
web page.
It is the backbone of web content and provides a structured way to format and present information
on the internet. HTML consists of a series of elements, each represented by a tag, which defines the
structure and content of a web page.
HTML is often used in conjunction with Cascading Style Sheets (CSS) and JavaScript to enhance
the presentation and functionality of web pages. CSS is used for styling, while JavaScript adds
interactivity to web pages. Together, HTML, CSS, and JavaScript form the core technologies for
building modern websites.

CSS (Cascading Style Sheets):CSS is applied to enhance the visual aesthetics of the Weather
App. It styles elements, ensuring a cohesive design, and contributes to creating a responsive and
user-friendly interface.
Cascading Style Sheets, is a style sheet language used to describe the presentation and formatting of
a document written in HTML or XML. The primary purpose of CSS is to separate the structure and
content of a document from its visual representation, allowing for more flexible and consistent
styling across multiple pages or an entire website.
CSS is often used in conjunction with HTML and JavaScript to create modern, visually appealing,
and interactive web pages. By applying styles to HTML documents, web developers can control the
layout, typography, colors, and other aspects of the user interface. Additionally, CSS frameworks
and preprocessors, such as Bootstrap and Sass, provide tools and conventions to streamline the
styling process.
11
JavaScript: JavaScript is crucial for implementing dynamic functionalities in the Weather App.
It is responsible for handling user input, interacting with the Open Weather Map API, and
dynamically updating the content on the web page without requiring a full page reload.
It is a core technology for web development, allowing developers to create client-side scripts that
run in web browsers to manipulate the content of web pages in real-time. JavaScript is an essential
part of the modern web development stack, working alongside HTML and CSS to build interactive
and responsive user interfaces.
JavaScript is primarily known as a client-side scripting language, meaning it runs in the user's web
browser rather than on a server. This enables dynamic updates and changes to the content of a web
page without requiring a full page reload.
JavaScript has a rich ecosystem of libraries and frameworks, such as jQuery, React, Angular, and
Vue.js, that simplify and accelerate the development of complex web applications.

Reactjs: React is a library for building composable user interfaces. It encourages the creation
of reusable UI components that present data that changes over time. React is a powerful
JavaScript UI library for creating modern applications. React allows us to pass information
to a component using something called props. use the prop type for validating any data we
are receiving from props. React JS State is a way to store and manage the information or
data while creating a React Application

Open Weather Map API: Application in the Project: The Open Weather Map API is integrated
into the project to fetch accurate and timely weather information based on user input or location
detection.

12
3.2 System Requirements

1. Web Browser Compatibility:

Description: The Weather App should be compatible with popular web browsers such as Google
Chrome, Mozilla Firefox, Safari, and Microsoft Edge.
Rationale: Ensures a wide user reach and consistent performance across different browsers.

2. Internet Connection:
Description: The application requires an active internet connection for real-time data retrieval from
the Open Weather Map API.
Rationale: To provide users with up-to-date and accurate weather information.

3. Geolocation Services:
Description: The app utilizes browser geolocation services to automatically detect the user's
location.
Rationale: Enables seamless user experience by eliminating the need for manual location input.

4. API Key:
Description: A valid API key from OpenWeatherMap is required for accessing weather data
through their API.
Rationale: Ensures secure and authorized access to the external weather data source.

5. Responsive Devices:
Description: The Weather App should be designed to be responsive, adapting to various device
sizes, including desktops, tablets, and smartphones.
Rationale: Accommodates users accessing the app from different devices, enhancing accessibility.

6. JavaScript Enabled:
Description: Users' web browsers must have JavaScript enabled for the dynamic functionalities and
API interactions.
Rationale: Ensures the proper functioning of the Weather App's interactive features.

7. Secure Connection (HTTPS):

Description: The application should be served over a secure HTTPS connection.
Rationale: Protects user data and ensures secure communication between the user's browser and the

13
 CHAPTER 4

METHODOLODY

4.1 Methodology of the Project

1. Project Planning:
 Define project scope, objectives, and deliverables.
 Create a timeline with milestones and deadlines.
 Allocate resources and team responsibilities.
2. Requirement Analysis:
 Identify and document functional and non-functional requirements.
 Gather user stories and expectations for the Weather App.
 Define the scope of features, including location detection, manual input, and real-time data
retrieval.
3. Design Phase:
 Create wireframes and mockups for the user interface.
 Plan the layout, color scheme, and visual elements using HTML and CSS.
 Define the structure of the JavaScript code for dynamic functionalities.
4. Front-End Development:
 Implement the user interface using HTML for structure and CSS for styling.
 Develop dynamic features and interactions using JavaScript.
 Ensure cross-browser compatibility and responsiveness for various devices.
5. API Integration:
 Obtain API key from OpenWeatherMap.
 Implement JavaScript functions to interact with the OpenWeatherMap API for real-time weather
data retrieval.
 Handle API responses and parse data for display on the front end.

14
4.2 FLOWCHART

Fig. 4.1

15
 CHAPTER 5

DESIGNING AND RESULT

Fig. 5.1

16
Fig. 5.2

Fig. 5.3

17
 CHAPTER 6

CONCLUSION AND FUTURE SCOPE

Conclusion

The Weather App project has successfully achieved its objectives of delivering a user-friendly, responsive,
and dynamic application for accessing real-time weather information. The seamless integration of HTML,
CSS, and JavaScript, coupled with the Open Weather Map API, has resulted in a robust and reliable tool
that caters to the diverse needs of users. The project's methodology ensured systematic development,
rigorous testing, and thoughtful design, contributing to a positive user experience. The emphasis on
security, cross-browser compatibility, and optimization further enhances the app's overall performance.
The successful deployment of the Weather App marks a milestone in providing users with a convenient
and efficient means of accessing accurate weather data.

Future Scope

Enhance the app by incorporating a multi-day weather forecast feature, allowing users to plan for
extended periods. Introduce user accounts to enable personalized experiences, such as saving preferred
locations and customizing app settings. Integrate weather maps for a visual representation of weather
patterns, providing users with a comprehensive overview.
Implement push notifications for severe weather alerts, enhancing user awareness and safety.
Include the ability to retrieve historical weather data, allowing users to explore past weather conditions
for analysis or reference. Integrate social media sharing capabilities, enabling users to share current
weather conditions with their network. Establish collaborations with meteorological organizations to
enhance the accuracy and depth of weather data provided by the app.

18
REFERENCES

[1] Duckett, J. (2011). HTML & CSS: Design and Build Websites. John Wiley & Sons.
[2] Freeman, E. (2018). Head First HTML and CSS. O'Reilly Media.
[3] FOR API: after creating account Log-In here to get the API
https://home.openweathermap.org/users/sign_in
[4] https://www.codespeedy.com/weather-forecasting-android-app-using-openweathermap-api-in-
android-studio/
[5] https://www.geeksforgeeks.org/how-to-build-a-weather-app-in-android/

19
20