DISPLAY CURRENT WEATHER

CONDITIONS AND FORECAST USING

A WEATHER API

A PROJECT REPORT

Submitted by

R. MANIKANDAN (622021104064)
M. PRADEESH (622021104080)
SHAIK.ABDUL KALAM (622021104100)

In partial fulfilment for the award of the degree

of
BACHELOR OF ENGINEERING
in
COMPUTER SCIENCE ENGINEERING

PAAVAI COLLEGE OF ENGINEERING

PACHAL
NAMAKKAL - 637018

ANNA UNIVERSITY: CHENNAI 600 025

NOVEMBER 2024
 ANNA UNIVERSITY: CHENNAI 600 025

BONAFIDE CERTIFICATE

Certified that this project report “DISPLAY CURRENT WEATHER

CONDITIONS AND FORECAST USING A WEATHER API” is the Bonafide
work of “R. MANIKANDAN (622021104064), M. PRADEESH
(622021104080),SHAIK. ABDUL KALAM (622021104100), ” who carried out the
project work under my supervision.

SIGNATURE SIGNATURE

Mr. R. MURUGESAN, M.E, (Ph.D.)., Mrs. R. SARANYA. (M.E).,

HEAD OF THE DEPARTMENT, SUPERVISOR,

ASSOCIATE PROFESSOR, ASSISTANT PROFESSOR,

Department of Computer Department of Computer

Science and Engineering Science and Engineering

Paavai College of Engineering. Paavai College of Engineering.

Certified that candidate was examined is the Anna university project viva-

voice examination held on .

INTERNAL EXAMINER EXTERNAL EXAMINER

ii
 ACKNOWLEDGEMENT

We express our profound gratitude with pleasure to our most respected

Chairman Shri. CA. N. V. Natrajan, B. Com, FCA., and to our beloved
Correspondent Smt. N. Mangai Natrajan, M.Sc., for giving motivation and
providing all necessary facility for the successful completion of this project.
It is our privilege to thank our beloved Director - Admin
Dr. K. K. Ramasamy, M.E, Ph.D., for their moral support and deeds in
bringing out this project successfully.
We extend our sincere gratitude to thank our Principal Dr. V. Hariharan,
M.E, Ph.D., for their moral support and deeds in bringing out this project
successfully.
We extend our gratefulness to Mr. R. Murugesan, M.E, (Ph.D).,
Associate Professor, Head of the Department. Department of Computer Science
and Engineering, for his encouragement and constant support in successful
completion of project.
We convey out thanks to Mrs. R. Saranya, M.E., Assistant Professor,
Department of Computer Science and Engineering, our supervisor for being
more informative and providing suggestions regarding this project all the time.
We would like to express our sincere thanks and heartiest gratitude to our
project coordinator Mr. A. Gokul., M.E., Assistant Professor, his meticulous
guidance and timely help during project work.
We express thanks to all our department staff members and friends for
their encouragement and advice to do the project work with full interest and
enthusiasm.

iii
 TABLE OF CONTENTS

CHAPTER TITLE PAGE

NO NO
ABSTRACT vi
PROBLEM STATEMENT vii
LIST OF FIGURES viii
LIST OF ABBREVIATION ix
1 INTRODUCTION 1
1.1 OBJECTIVE OF THE SYSTEM 1
1.2 JUSTIFICATION AND NEED FOR THE SYSTEM 1
1.3 ADVANTAGE OF THE SYSTEM 2
1.4 PREVIOUS WORK 2
1.5 AIM AND OBJECTIVE OF THE STUDY 3
1.6 PROJECT METHODOLOGY 3
1.7 SCOPE OF STUDY 4
1.8 DEFINITION OF TERMS 4
2 LITERATURE SURVEY 5
3 SYSTEM ANALYSIS 15
3.1 EXISTING SYSTEM 15
3.1.1 RESTATEMENT OF PROJECT 15
OBJECTIVE
3.1.2 DESIGN METHODOLOGY 15
3.1.3 ADVANTAGES OVER THE EXISTING 16
SYSTEM
3.1.4 DRAWBACK OF THE EXISTING SYSTEM 17
3.2 PROPOSED SYSTEM 17

iv
 3.2.1 BENEFIT OF PROPOSED SYSTEM 19
3.2.2 LIMITATION OF THE PROPOSED MODEL 19
3.3 USER REQUIREMENTS 20
4 SYSTEM SPECIFICATION 21
4.1 HARDWARE SPECIFICATION 21
4.2 SOFTWARE SPECIFICATION 21
5 SOFTWARE DESCRIPTION 22
5.1 FRONT END: REACTJS 22
5.2 BACK END: ONLINE DATABASE INTEGRATION 22
5.3 WEATHER API INTEGRATION 23
6 SYSTEM DESIGN 24
6.1SYSTEM ARCHITECTURE 24
6.2 DATA FLOW DIAGRAM 25
6.3 UML DIAGRAM 25
6.3.1 USE CASE DIAGRAM 25
6.3.2 CLASS DIAGRAM 26
6.3.3 SEQUENCE DIAGRAM 31
7 PROJECT DESCRIPTION 34
7.1 FEATURES OF THE WEBSITE 34
7.2 TECHNICAL IMPLEMENTATION 35
8 SYSTEM TESTING 38
8.1 SYSTEM TESTING 38
8.1.1 White-Box Testing 39
8.1.2 Black-Box Testing 39
8.1.3 Unit Testing 40
9 CONCLUSION AND FUTURE ENHANCEMENT 41
9.1Conclusion 41
9.2 Future Enhancements 41
10 APPENDIX 44

v
11 REFERENCES 61

vi
 LIST OF FIGURES

FIGURE NO. FIGURE NAME PAGE NO.

3.1 Stages Of Software development 16

6.1 System Architecture 24

6.2 Data Flow Diagram 25

6.3.1 Use Case Diagram 26

6.3.2 Class Diagram 30

6.3.3 Sequence Diagram 33

viii
 LIST OF ABBREVIATION

ABBREVIATION EXPANSION

HTML Hyper Text Markup Language

CSS Cascading Style sheet

DOM Data Object Manipulation

RWD Responsive Web Design

UI User Interface

API Application Program Interface

HTTP Hyper Text Transfer Protocol

UML Unified Modelling Language

ix
 ABSTRACT

The growing importance of real-time weather information for various

applications, including agriculture, transportation, tourism, and disaster management,

highlights the need for accessible and reliable weather prediction systems. This project

presents a system for displaying current weather conditions and forecasts using a

weather API, enabling seamless access to meteorological data. Leveraging APIs such

as OpenWeatherMap, WeatherStack, or similar services, the proposed system provides

accurate and up-to-date weather details, including temperature, humidity, wind speed,

and precipitation forecasts for any specified location .

The implementation integrates user-friendly interfaces with backend API calls

to fetch and process weather data in real-time. The system is adaptable for use across

platforms such as web, mobile, and desktop applications.

That discussed the technical aspects of API integration, including

authentication, data parsing, and visualization using intuitive charts and icons to

enhance the user experience. Additionally, the system’s design incorporates

localization and customization, allowing users to personalize settings based on

preferences such as temperature units or alert notifications for extreme weather.

vi
 PROBLEM STATEMENT

In today’s dynamic environment, access to accurate and real-time

weather information is crucial for various personal, professional, and industrial

applications. Despite the availability of numerous weather data sources, users often

face challenges in accessing this information in a convenient, reliable, and

customizable manner. Many existing systems either lack user-friendly interfaces or

fail to provide timely and precise data due to inefficiencies in data retrieval and

processing. Additionally, the absence of localized and detailed forecasting hinders

users from making informed decisions, especially in critical scenarios like travel

planning, agricultural activities, or disaster preparedness.

The need exists for a comprehensive solution that can display current

weather conditions and forecasts by leveraging advanced weather APIs. Such a

system should efficiently fetch, process, and present meteorological data in a visually

appealing and intuitive manner while ensuring adaptability to diverse user

requirements. Moreover, challenges such as handling API rate limits, ensuring data

accuracy, and integrating location-specific details further complicate the development

of an effective weather information platform.

vii
 CHAPTER 1
INTRODUCTION

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.

1.1 OBJECTIVE OF THE SYSTEM

This project will serve the following objectives:-

1.Provides the user with an easy and friendly interface

2.Provides the user with the temperature of a particular region

3.It will also show humidity, wind speed and cloud

1.2 JUSTIFICATION AND NEED FOR THE SYSTEM

Weather is something everybody deals with, and accurate data about it

like what is coming can help users to make informed decisions. With weather
apps for iOS and Android, people can exactly know when to expect a change in
the weather conditions. Weather apps can give urgent alerts too.

Undoubtedly, weather forecasting has come a long way, helping

people to know about weather conditions. So, if you are in an area where
weather frequently changes from sunny to torrential rain in a matter of
minutes, then what is the easiest way to make sure to be prepared? A suitable
answer is a weather application

1
1.3 Advantages of the system

Real-Time Data

One of the biggest advantages of weather monitoring systems and also the
reason why people have been going in for weather stations is because of the
ability to get their information in real-time.

Accurate Local Forecast

In reality, the meteorological department may be located far from your home
and weather forecasts are made for regions, not a specific area. That’s a reason
why in these instances, the weather predictions that they give are not always
the most accurate.

Ease Of Use

Ease to use is definitely a big advantage of the weather monitoring system.

Weather stations like all other weather devices are designed to be efficient and
straightforward, therefore, everyone can use them. It is so convenient and
comfortable for users to get the most accurate information in simplest way
possible.

1.4 Previous work or related systems; how they are used

Before we begin a new system it is important to study the system that

will be improved or replaced (if there is one). We need to analyze how this
system uses hardware, software, network and people resources to convert data
resources, such as transaction data, into information products.

Following are the problems associated with the previous project which
led to the creation of the proposed project:-

 Not user-friendly: The existing system is not user-friendly because the

information like humidity cloud and wind etc are not in one place.

2
1.5 Aim and Objectives of the study

The aim of this study is to develop a web application for weather

forecasting using Application Programming Interface (API) that will generate
weather temperature viaseamless transfer protocol.

The objectives of this project work are as follows:

i) To study aviation meteorologists’ issue accurate weather forecast.

ii) To design aviation flight control based on information given using

UML for architectural design of the system .

iii) To implement Aviation Software System using software

programming language such as JavaScript, HTML, CSS and
Python.

1.6 Project Methodology

The method to be adopted when developing this project are as follows:

The system shall consider using questionnaire method in gathering of

information from the study area, fact from the respondents shall be gathered
and analyze for further manipulation.

i. The proposed system design shall be done using HTML and CSS
(Cascading Style Sheet) which will build the aesthetics of the design
model and later formulate big function to the end-users.

ii. HTML will be the building block while CSS would be used or
styling and positioning of the design model.

iii. Python general purpose programming language shall be adopted for

weather forecast model and weather API shall be integrated
froSky.io for easy update.

3
1.7 Scope of the Study

The scope of this project will be to design workable easy to use and
reliable software package used to forecast weather conditions for Aviation
industry (Sam Mbakwe Airport).
The scope of this project design extends to the following range and
deals with the total automation of the following:
i. The data entry section which facilitates easy entry of data
obtained from measurements of various instruments.
ii. The data base: the data entered is stored in a data base for record

purpose and also for easy sorting of a particular record(s).

1.8 Definitions of Terms

Weather: weather, state of the atmosphere at a particular place during

a short period of time. It involves such atmospheric phenomena as
temperature, humidity, precipitation (type and amount), air pressure, wind,
and cloud cover (Evans, 2020). Forecasting: Forecasting is a method of
making informed predictions by using
historical data as the main input for determining the course of future trends.

API: An application programming interface is a way for two or more

computer programs to communicate with each other. It is a type of
software interface, offering a service to other pieces of software. A
document or standard that describes how to build or use such a connection or
interface is called an API specification

4
 CHAPTER 2

LITERATURE REVIEW

2.1 Comparative Study of Real-Time Weather APIs for Mobile

Applications[4]
Author:Smith,J.,Brown,A.(2022)
The study analyzed the performance of various weather APIs, such as
OpenWeather and WeatherStack, in mobile application development. By
integrating these APIs, developers can access reliable, real-time weather data
that enhances the overall user experience. The authors noted that while these
APIs provide high-quality information with reasonably fast data refresh
rates, discrepancies in data accuracy and frequency may occur, depending on
the service tier selected. The findings highlighted the importance of selecting
APIs that align with the application's needs and user base. It was also
emphasized that data redundancy and service uptime play a significant role
in application reliability, particularly in scenarios where uninterrupted
service is crucial, such as emergency weather alerts or event planning.

2.1.1 Advantages

 Real-time weather data integration helps create engaging user

experiences and informed decision-making.

 Streamlines development by providing pre-built data solutions, saving

time and resources on backend processing.

2.1.2 Disadvantages

 Over-reliance on external APIs can lead to potential downtimes and

service interruptions.

5
  Switching providers can lead to vendor lock-in, which may restrict
future flexibility.

2.2 Enhancing Public Health Through Weather Data API Integration[2]

Author: Emily White (2020)
This research focused on the integration of weather data APIs to
improve public health management. The study demonstrated how real-time
weather information can help predict and mitigate health risks, such as
heatwaves, cold spells, and air quality concerns, which directly impact
vulnerable populations. By providing timely updates and alerts, public health
agencies can better prepare for extreme weather events and reduce the risk of
weather-related health incidents. The study also noted that although the use
of weather APIs greatly benefits public safety, it is essential to address
issues related to data security and ensure that API providers comply with
local data protection regulations.

2.2.1 Advantages

 Enables the creation of public health tools that proactively warn and
inform communities about extreme weather conditions.

 Supports targeted intervention strategies that can reduce weather-

related morbidity and mortality.

2.2.2 Disadvantages

 Concerns regarding the safety and privacy of data shared through

third-party services.

 Limited ability to influence API provider policies and ensure

consistency during sudden weather events.

6
2.3 Integrating Weather Forecasting Features in Educational
Applications[5]
Author: Michael Brown (2022)
This paper explored the application of weather data APIs in
educational settings, particularly for planning outdoor school activities. The
study highlighted how APIs could be leveraged to enhance the safety and
scheduling of field trips, sports events, and other outdoor learning activities.
By integrating real-time weather forecasts, educators can make informed
decisions about activity timings, potentially avoiding adverse weather
conditions. However, a notable limitation is the absence of comprehensive
historical weather data, which is essential for long-term planning and trend
analysis. Developers were advised to combine these APIs with other data
sources for more robust decision-making.

2.3.1 Advantages

 Increases the safety of students and staff by enabling the planning of

outdoor activities based on current weather forecasts.

 Improves the overall user experience for school administrators who

rely on reliable and timely weather data.

2.3.2 Disadvantages

 The absence of sufficient historical data can make long-term event

planning difficult.

 Developers may face challenges integrating real-time updates with

other existing systems.

7
2.4 Challenges of Using Weather APIs in High-Traffic Applications[1]
Author: David Green (2023)
The study investigated the use of weather APIs in mobile and web
applications with high user traffic and explored the challenges developers
face when scaling services. It emphasized that while APIs like OpenWeather
can handle real-time data effectively, managing high volumes of API calls
and data processing requires careful infrastructure planning, such as caching
strategies and load balancing. Without these considerations, applications
may experience delays or service outages during peak times. The research
also highlighted the potential financial implications, with API usage costs
increasing as more users access weather data.

2.4.1 Advantages

 Real-time weather updates provide a rich and interactive experience

for users, enhancing app engagement.

 Facilitates seamless integration of weather data into various types of

high-traffic applications, supporting wide user access.

2.4.2 Disadvantages

 High traffic can challenge the performance of applications, requiring

robust infrastructure for smooth operation.

 Scaling costs may increase substantially, impacting project budgets.

8
2.5 The Role of API Documentation and Support in Weather Data
Integration[6]
Author: Robert Lee.(2022)
This paper underlined the importance of API documentation and
developer support for successful integration. It was noted that high-quality
documentation allows developers to quickly understand the API's features,
implementation steps, and limitations, thereby reducing the time required for
onboarding and troubleshooting. The authors pointed out that strong support
channels from the API provider, such as dedicated technical support and
active community forums, further enhance development efficiency. The
study concluded that clear documentation and responsive support systems
play critical roles in ensuring seamless API integration and reducing
potential integration errors.

2.5.1 Advantages

 Comprehensive documentation minimizes learning curves and

potential delays during the development phase.

 Good customer support helps developers resolve issues and optimize

their implementation efficiently.

2.5.2 Disadvantages

 Poor documentation can result in integration delays and costly

missteps.

 Variations in support quality can lead to frustration and inefficiencies

9
 during development.

2.6 Using Weather Data APIs for Enhanced Business Strategies in E-

Commerce
Author:Thompson,P.,Martinez,L.(2020)
The paper examined how e-commerce businesses can integrate weather
APIs to tailor marketing strategies and product availability based on weather
conditions. For instance, online retailers can use real-time weather forecasts
to predict demand for seasonal clothing or outdoor products, optimizing
inventory levels. The study suggested that such strategies could lead to
increased sales and improved customer satisfaction. However, challenges
related to data privacy and the high cost of accessing premium API services
were also identified as potential limitations.

2.2.1 Advantages

 Enhances decision-making capabilities by aligning product

availability with current and forecasted weather conditions.

 Provides marketing teams with tools to design campaigns based on

anticipated weather changes.

2.2.2 Disadvantages

 Privacy concerns arise when using third-party APIs for customer data
integration.

 Using premium API services can be expensive, potentially impacting

profit margins.

10
2.7 Scalability Challenges in High-Traffic Mobile Weather Apps
Author:Choudhury,R.,Saha,T.(2023)
This research discussed the scalability issues associated with using
weather APIs in mobile applications that serve large numbers of users. The
study highlighted the importance of managing API request frequency
through strategies such as caching and the use of reduced data packages to
optimize performance. It pointed out that while tiered API plans are
available, developers should carefully evaluate the cost-benefit balance to
avoid financial strain as user numbers increase.

2.7.1 Advantages

 Enables weather updates to be efficiently delivered to users across

high-traffic mobile applications.

 The flexibility of API plans allows developers to choose the most

suitable pricing tier based on user needs.

2.7.2 Disadvantages

 The process of scaling usage can become costly and may require
budget adjustments.

 Limited customization options in some API services may restrict app

functionality.

11
2.8 The Role of Weather APIs in Climate Research and Long-Term
Forecasting
Author:Gupta,N.,Roy,D.(2021)
This study explored how weather APIs could be used for research and
forecasting, enabling real-time data access that complements traditional
climate models. However, the authors emphasized that APIs typically provide
limited historical data, making them less suitable for in-depth climate studies
and predictive analytics. The research recommended combining API data with
other historical datasets to produce more robust and reliable climate models.

2.8.1 Advantages

 Provides a quick and efficient method to access real-time weather data

for immediate analysis.

 Helps researchers integrate weather information into applications for

user-centric insights.

2.8.2 Disadvantages

 The limited historical data offered by APIs can restrict long-term

forecasting capabilities.

 Additional data sources and integration efforts may be necessary for

comprehensive research.

12
2.9 Integration of Weather APIs in Smart Home Systems for Energy
Efficiency
Author:Singh,A.,Kapoor,M.(2023)
This paper focused on using weather data APIs in smart home systems
to optimize energy consumption. It described how APIs could be used to
adjust HVAC settings and other systems based on current weather forecasts,
which can lead to energy savings and increased home comfort. However, the
authors warned that potential API downtimes could interrupt system functions
and impact overall reliability. Ensuring the robustness of the integration and
planning for failover mechanisms were advised.

2.9.1 Advantages

 Facilitates energy-efficient operations, leading to reduced costs and

enhanced home comfort.

 Automated weather-based system adjustments improve resource

utilization and operational efficiency.

2.9.2 Disadvantages

 Downtime or disruptions in API service can lead to system

inefficiencies and discomfort for users.

13
  Privacy concerns related to data handling in smart home systems using
third-party weather APIs.

2.10 Evaluating the Impact of Weather APIs on Application

Performance and Budget Author:Jones,R.,etal.(2021)

This study conducted a comparative analysis of different weather API

providers to understand their impact on application performance and
budgeting. It found that while APIs simplify the integration process,
developers need to pay close attention to service limitations, such as data
refresh rates and access tiers, which can significantly affect app performance.
Pricing models were scrutinized, with varying costs depending on API usage,
data volume, and plan types. The research suggested that developers evaluate
APIs based on both technical and financial considerations to choose the best
fit for their project.

2.10.1 Advantages

 Integrating APIs simplifies weather data usage for applications,

boosting functionality.

 Diverse API plans allow tailored solutions to suit varying application

needs and budgets.

2.10.2 Disadvantages

14
  Data inaccuracies or performance issues can lead to user
dissatisfaction and operational setbacks.

 Pricing variability can introduce unexpected costs, impacting budget

constraints.

CHAPTER 3

SYSTEM ANALYSIS

System analysis is a problem-solving technique that decomposes a

system into its component parts for the purpose of studying how well the
component parts work and interact to accomplish their purpose. It describes
what a system should do to meet the information needs of users.

System analysis is the process of investigating and documenting the

existing system; identifying problems of the existing system; analyzing the
proposed system for its costs and benefits; analyzing both the system and user
requirements and considering possible alternative solutions. It is an in-depth
study of end user information needs that produce functional requirements that
are used as the basis for the design of a new information system. Presumably,
we do a system analysis in order to subsequently perform a systems design.

3.1 Existing System

The existing of Aviation Spp Weather Forecasting App is very slow due
to high data consumption and sometimes lead to server error (error 404). The
currency converter application always uses default currency market from 4

15
different countries in the world to generate an accurate time series equivalent
which are USA, CANADA, UK, CHINA.

3.1.1 Restatement of Project Objectives

The objective is to develop and implement a weather forecasting

application that will serves as monitoring app for majority of the company.

3.1.2 Design Methodologies

After in-depth analysis, we decided to adopt the waterfall software

development process model. This model proposes an orderly method to
software development which starts with a well-defined, understood user’s
specification of requirements and moves through to deployment in a linear
form as shown in the figure below.

Communication(requirements gathering and definition)

Planning(estimating, scheduling)

Modeling(analysis and design)

Development(coding and testing)

Deployment(delivery, support and feedback)

Figure 3. 1 Stages of the software development process model

Pros and Cons of the Waterfall Development Model

The drawbacks of this model include;
i. The working version of the program(s) will not be available until late in
the project time-span, thus an undetected error until the working program
is reviewed is dangerous.

16
 ii. Difficulty in accommodating change after the process is in progress
making it difficult to respond to customer changes.
iii. Therefore, this model is only appropriate when the requirements are well-
understood. On the other hand, the advantages of using this model are
that;
iv. Documentation is produced at each phase.
v. It fits with other engineering process models.
3.1.3 Advantages Over the Existing System
i. The new system gives less policy conflict and issue due to subsequent
user comment.
ii. Low data generation when connected to internet in output the
processing information to the user.
iii. Reduced server errors and increase User Interface/User Experience
3.1.4 Drawback of The Existing System
i. The economy may be unable to respond to shocks - a fixed currency rate
means that there may be no mechanism for the government to respond
rapidly to balance of payments crises.
ii. Problems with reserves - fixed currency rate systems require large
reserves and there can be international liquidity problems as a result.
iii. Connectivity issues: it poses problem for majority of the user to use
system due to large consumption of data charges when connecting to
internet.
iv. Policy conflicts: majority of the company that handles the Application
Programming Interface (API) always specify their policy agreement
which sometimes lead to payment of subscription to their services
render to viewers.

3.2 Proposed System

17
 The analysis of the proposed weather forecast application delves into a
thorough evaluation of the system's components and design choices, aiming to
ascertain its effectiveness in providing users with reliable weather
information. An integral aspect of this analysis involves a meticulous
examination of the user interface, which has been carefully crafted to offer an
intuitive and engaging experience. Guided by established design principles,
the interface aims to seamlessly connect users with weather data while
maintaining visual clarity and ease of use. Usability testing and user
feedback have been instrumental in refining the user interface, leading to
adjustments that enhance user interaction and overall satisfaction.
The integration of the chosen weather API constitutes a critical element of the
proposed system's functionality. This analysis focuses on the intricate process of
seamlessly incorporating the API's capabilities into the application's architecture.
Challenges encountered during this integration phase, such as working within API
rate limits, have been addressed through careful API request management. By
effectively leveraging the API's features, the application ensures the delivery of
precise and up-to-date weather data to users. This integration, while demanding,
serves as the backbone of the application's ability to provide valuable forecasts and
conditions.
In the realm of data retrieval and processing, the methods employed to obtain
weather data from the API are examined in detail. The system relies on efficient
API calls to retrieve data, which is then processed and structured for effective
presentation. This analysis encompasses the mechanisms employed to
synchronize data updates and maintain information accuracy. The application's
ability to refresh data at appropriate intervals guarantees that users are equipped
with timely forecasts and relevant weather insights.
Beyond its technical components, the application's functionality and features
undergo comprehensive evaluation. This encompasses an assessment of its

18
capacity to deliver real- time weather forecasts that users can rely upon. The
analysis delves into the accuracy and dependability of the forecast data presented
across various timeframes, encompassing current, hourly, and daily forecasts. The
application's capability to seamlessly switch between these modes ensures users
are equipped with tailored information to suit their needs.
An integral facet of the proposed system's analysis is the evaluation of its
performance. This involves assessing the application's responsiveness, load times,
and overall efficiency. Through a series of performance tests under varying user
loads and usage
Scenarios, the system's capability to provide swift and efficient weather
information is measured. Metrics including response times and resource
utilization offer insights into the application's operational efficiency.
Security and privacy considerations are not overlooked in the analysis.
Addressing concerns related to user data and API usage, the system prioritizes
user information security and data confidentiality.
Looking ahead, the analysis considers the application's potential for
scalability and future enhancements. As user demand grows, the system's
architecture is designed to accommodate increased load while maintaining
optimal performance. Proposed enhancements and features offer insights into
how the application can evolve to meet evolving user needs, ensuring its
sustainability and relevance over time.
In conclusion, the analysis of the proposed system underscores the value
and significance of the developed weather forecast application. By examining
its user interface, API integration, data processing mechanisms, functionality,
performance, impact, and future prospects, this section provides a holistic view
of the application's contributions to weather forecasting and application
development.

19
3.2.1 Benefit of Proposed System
The proposed shall be beneficial to the user of the system through the usage
of this application because of the following reasons:
i. It will allow individual to connect to the application using internet
connection without any failure in communication when rendering
accuracy.
ii. It is very flexible and user friendly.
iii. It does not require much internet data before loading an API for
weather.
iv. It converts virtually every country in the world.

3.2.2 Limitation of the Proposed Model

The below are the limitation encounter in the proposed model developed.
i. The proposed system shall not cover all the City in the world due to its
complexity and robustness of the application.
ii. Unable to store the previous currency history due to vast number of files
incorporated into the database.
3.3 User Requirements
User requirements identify the services the application ought to
provide for the users of the system. System requirements provides the
detailed description of the system services. The following are the user
requirements
i. Accurate Weather Data: Users expect the application to provide
precise and current weather information for their chosen location.
ii. Simple Interface: The application should feature an easy-to-use and
intuitive.

20
 CHAPTER 4
SYSTEM SPECIFICATION

4.1 HARDWARE SPECIFICATION

 Processor : Min. i5/Ryzen 5 Octa-core or higher

 RAM : Min 16GB DDR4 or higher

 Graphics (GPU) : Min. Nvidia GeForce GTX 1650

21
  Microphones : In-built mic/External mic

 Speakers : External/Bluetooth speakers

 Storage : Min. 500GB SSD or higher

 Internet : Wi-Fi/Broadband with Min. 100mbps

4.2 SOFTWARE SPECIFICATION

 OS : Windows 11

 Frontend : HTML, CSS, JavaScript

 Backend : ReactJS

 Databases : MySQL, PostgreSQL, or NoSQL

 APIs : OpenWeatherMap

 Code Editor : Visual Studio Code

CHAPTER 5
SOFTWARE DESCRIPTION

5.1 Front End: ReactJS

ReactJS is used as the primary framework for the front-end development
of the weather application. It allows the creation of dynamic, interactive, and
reusable UI components. Key features of using ReactJS include:
 Component-Based Architecture: Enables modular design, making the
codebase more manageable and scalable.

22
  Virtual DOM: Ensures high performance by updating only the parts of
the DOM that need to be changed.
 State Management: React's built-in hooks, such as useState and
useEffect, simplify managing UI state and lifecycle events.
 Responsive Design: The application UI is designed to work seamlessly
across various devices, including desktops, tablets, and mobile phones.
The front end displays weather data fetched from APIs, including current
temperature, humidity, wind speed, and weather conditions. It also includes user
input forms to search for specific cities and graphical elements like icons and
charts for visual representation.

5.2 Back End: Online Database Integration

The back end of the application involves integrating an online database to
store and manage weather data. Firebase or MongoDB is used due to their
flexibility and cloud-based accessibility. Key functionalities of the database
include:
 Data Storage: Weather data retrieved from APIs is stored for quick
access and analysis.
 User Preferences: User-specific settings, such as favorite cities or
preferred units (Celsius/Fahrenheit), are saved.
 Real-Time Updates: Firebase provides real-time database updates.
 Data Security: Authentication mechanisms, such as API keys and secure
connections, protect user data and API access.
The integration process involves setting up the database, defining schemas, and
implementing APIs for CRUD (Create, Read, Update, Delete) operations.
5.3 Weather API Integration
The application integrates with OpenWeather API and WeatherStack to
fetch real-time weather data. The integration process includes:

23
  API Key Setup: Obtaining API keys from OpenWeather and
WeatherStack to authenticate requests.
 HTTP Requests: Using axios or fetch in ReactJS to send GET requests
to the API endpoints.
 Data Parsing: Processing JSON responses to extract relevant weather
information such as temperature, humidity, and weather descriptions.
 Error Handling: Implementing mechanisms to handle API errors, such
as invalid responses or exceeding rate limits, with appropriate fallback
messages for users.
 Multiple API Support: Providing the ability to switch between
OpenWeather API and WeatherStack for redundancy and extended
functionality.
The APIs deliver accurate and detailed weather data, including additional
parameters like air quality index and UV index. The integration also involves
caching frequent requests to optimize performance and reduce API usage.

CHAPTER 6
SYSTEM DESIGN
system is a web-based system that allows multiple accesses concurrently.
System design is divided into stages:
Logical design: This is concerned with object-oriented modelling of the system
analysis. Physical design: This is concerned with the construction of the real
system.

24
In the object-oriented analysis and design, Unified Modelling Language will be
used to model the system. A model is the act of drawing one or more graphical
representations of a system. Modelling is the process of abstracting and
organizing significant features of part of the real world.
6.1 System Architecture
The system will be using PHP for development. Daily data sets of last
5years (2017-2022) of Madhya Pradesh, Bhopal. The system takes input from
the datasets and produces the result for both optimal weights and biases. The
system building process consists of following sequential steps.

Figure 6.1: System Architecture

6.2 Data Flow Diagram

The data flow process can be depicted by the diagram below:

UI Forecast
Data Source API Weather

Forms

DB file 25 Main
System
Data Storage
 DB file
Figure 6.2: Data Flow

The above data flow diagram describes the relationship between the
flow of information from the user interface stage to the last stage of
interfaces which is data storage link. The user search for currency to be
converted and select appropriate currency with value input before
proceeding to converter modules.
6.3 UML DIAGRAM

6.3.1 Use Case Diagram

A use case diagram is used to show the functionality provided by a

system in terms of actors, their goals -represented as use cases, and any
dependencies between them. It depicts every functionality that an end user
can do on the system to be developed. In other words, it represents every
case of use or action. It does not have to show any particular sequence or
strict dependence

26
 Fund Users
Account

Login

Generate
Location
System Function

GPS for MAp

Request New
Type

Exit App

Figure 6.3.1: Use-Case Diagram

The figure 6.3.1 above illustrates the behavioral of the user-to-system
interaction, where user click on the location to get weather information from,
the system processes the input data collected from the user of the system and

27
dish out the information based on the input.
Class Diagram Overview: The purpose of the class diagram is to depict the
main classes of the system and their responsibilities. It serves as a visual
representation of how data is handled and transferred between different parts of
the application, from fetching data from APIs to displaying it in the user
interface.
Main Classes and Their Responsibilities:
 WeatherData:
 Purpose: Represents the core data structure that holds information
about the weather forecast, including current and future weather
conditions.
 Attributes:
 temperature (float): Current temperature.
 humidity (float): Percentage of humidity.
 pressure (float): Atmospheric pressure.
 windSpeed (float): Speed of the wind.
 description (string): A brief description of the weather
condition (e.g., sunny, rainy).
 location (string): The location for which the weather data
applies.
 forecastDate (Date): The date and time of the forecast.
 Methods:
 fetchWeatherData(): Initiates a request to retrieve weather
data from an external weather API.
 parseResponse(): Parses the raw response data from the API
into structured attributes.
 formatData(): Formats the data into a user-friendly display
format.

28
 APIClient:
 Purpose: Manages the interaction with external weather APIs, such
as OpenWeather or WeatherStack.
 Attributes:
 apiKey (string): The key used for authenticating API
requests.
 baseUrl (string): The base URL of the weather API.
 endpoint (string): The specific endpoint for retrieving
weather data.
 Methods:
 sendRequest(): Sends a GET or POST request to the weather
API.
 handleResponse(): Processes the raw response from the API.
 validateResponse(): Checks if the API response meets
expected criteria and is valid.
 WeatherService:
 Purpose: Acts as a mediator between the user interface and the
APIClient, coordinating data requests and handling responses.
 Attributes:
 weatherData (WeatherData): An instance of the
WeatherData class that holds the forecasted weather data.
 Methods:
 getWeatherData(location: String): Requests weather data
from the APIClient for a specific location.
 transformData(): Transforms raw API data into a structured
WeatherData object.
 saveDataToDatabase(): Saves the data into a database for
historical reference and future use.

29
 Database:
 Purpose: Responsible for storing and retrieving historical weather
data for analysis and caching purposes.
 Attributes:
 dbConnection (Connection object): Represents the
connection to the database.
 data (collection of WeatherData): Stores multiple weather
data entries.
 Methods:
 saveData(): Inserts new weather data into the database.
 retrieveData(location: String, date: Date): Retrieves stored
weather data based on location and date.
 updateData(): Modifies existing data in the database as
needed.
 WeatherUI:
 Purpose: Manages the presentation layer of the application,
displaying weather data to the user and handling user interactions.
 Attributes:
 weatherDisplay (UI component): The visual element that
shows the weather data.
 loadingIndicator (UI component): Indicates that the system
is fetching data.
 Methods:
 updateWeatherDisplay(weatherData: WeatherData): Updates
the user interface with new weather data.
 showError(message: String): Displays error messages if
there is an issue with data retrieval.
 renderWeather(): Renders the formatted weather data for

30
 user viewing.

6.3.2 CLASS DIAGRAM

 Associations:
 WeatherService interacts with APIClient to send requests and
receive data.
 WeatherService creates and uses WeatherData objects for data
transformation and storage.
 WeatherService uses Database for storing and fetching historical
data.
 WeatherUI communicates with WeatherService to request and
display weather data.
 Dependencies:
 APIClient depends on the WeatherData class for response
formatting and data structuring.
 WeatherUI relies on WeatherService to obtain processed weather
data for display.

31
 FIGURE 6.3.2

6.3.3 SEQUENCE DIAGRAM

The Sequence Diagram is a type of interaction diagram that shows how
objects in a system interact in a specific sequence over time. It helps illustrate
the flow of messages between different components of a system, which is
essential for understanding the step-by-step process that occurs during the
weather data retrieval and display in the Weather API Forecasting project
Purpose: The main purpose of the sequence diagram in the context of the
Weather API project is to outline the interactions between the user, the UI, and
the backend components involved in fetching and displaying weather data. It
demonstrates how a user's request is processed, how data flows through the
system, and how responses are returned and displayed.
Main Components:
 User: The end-user who initiates the request for weather data through the
UI.
 WeatherUI: The user interface that collects user input and displays the

32
 fetched data.
 WeatherService: The backend service that processes the request,
communicates with the API, and formats the data.
 APIClient: A component responsible for sending the request to the
weather API and handling the response.
 WeatherData: Represents the structured weather data returned from the
API.
 Database: A storage component that saves historical weather data for
future retrieval.
Sequence of Steps:
1. User Input: The user enters a location (e.g., city name) into the
WeatherUI to request weather information.
2. Request Initiation: WeatherUI sends a request to WeatherService to
fetch weather data for the specified location.
3. API Call: WeatherService calls APIClient, passing the location details
and necessary parameters to request data from the weather API (such as
OpenWeather or WeatherStack).
4. API Request: APIClient formats and sends an HTTP request to the
chosen weather API endpoint.
5. API Response: The weather API processes the request and returns a
response containing weather data in JSON or XML format.
6. Response Handling: APIClient receives the API response and validates
its integrity using validateResponse().
7. Data Processing: APIClient processes and extracts relevant data from
the response and passes it back to WeatherService.
8. Data Structuring: WeatherService organizes and formats the data,
creating a WeatherData object containing attributes like temperature,
humidity, pressure, and weather description.

33
 9. Database Interaction (optional): If historical data storage is needed,
WeatherService saves the processed data to the Database using the
saveData() method for future use.
10.Returning Data: WeatherService returns the structured WeatherData
object to WeatherUI.
Key Considerations:
 Asynchronous Communication: Some steps, such as the API
request/response cycle, can occur asynchronously, allowing other
processes to continue while waiting for a response.
 Error Handling: If an error occurs (e.g., network failure or invalid API
response), appropriate error handling logic should be implemented to
inform the user through WeatherUI.
 Security: Ensure that API requests are secure, with API keys protected
and validated to prevent unauthorized access.

 Data Validity: Validate API responses in APIClient to ensure the

complete and correct before passing it to WeatherService.

34
 FIGURE 6.3.3

CHAPTER 7
PROJECT DESCRIPTION
The primary objective of this project is to develop a web application that
provides real-time weather forecasting information using data fetched from
external weather APIs. This platform is designed to give users quick and easy
access to current weather conditions and forecasts for any location. The website
aims to enhance user experience by presenting accurate and up-to-date weather
data in a user-friendly manner. The project leverages modern web development
technologies to create an efficient, reliable, and interactive tool for users
seeking weather information.
7.1 Features of the Website:
1. User-Friendly Interface:

35
  A clean, intuitive design that allows users to interact seamlessly
with the website.
 A search bar where users can enter the name of a city or location to
get weather updates.
2. Real-Time Weather Data:
 Displays current weather conditions such as temperature, humidity,
wind speed, pressure, and weather description.
 Provides a dynamic and up-to-date display that reflects real-time
data fetched from the weather APIs.
3. Weather Forecast:
 Provides weather forecasts for multiple days (e.g., 5-day or 7-day
forecasts) with details about temperature variations, expected
precipitation, and weather conditions.
 Visual representation of forecast data using charts or graphs for an
at-a-glance view.

4. Location Detection:
 Integration with geolocation services to detect the user's current
location and provide weather updates for that location
automatically.

5. Responsive Design:
 The website is built to be mobile-friendly and responsive, ensuring
that users can access weather data comfortably on desktops, tablets,
and smartphones.
6. Interactive Components:
 Interactive elements such as a search button, location dropdown,
and refresh button for re-fetching data.

36
  Real-time updates with a loading indicator to inform users that data
is being fetched.
7.2 Technical Implementation:
1. Front-End Development:
 ReactJS: The primary framework used for building the front end.
ReactJS enables the creation of a dynamic user interface that
updates efficiently based on user interactions.
 HTML/CSS: Used for structuring the content and styling the
website to ensure a responsive and appealing design.
 JavaScript: Essential for adding interactivity to the front end,
handling events, and managing asynchronous operations.
2. Back-End Communication:
 Weather APIs (OpenWeather and WeatherStack): The website
integrates with these APIs to fetch real-time weather data. These
APIs provide data in JSON format, which is then processed and
displayed on the website.
 Axios: Used for making HTTP requests to the APIs.
3. Data Processing and State Management:
 State Management with React Hooks (useState, useEffect):
Used to manage the state of the application and handle data
fetching when a user searches for weather updates.
 Data Parsing and Formatting: Custom functions are
implemented to parse the raw JSON response from the APIs,
extract relevant weather data, and format it into user-friendly
components.
4. Database Integration (Optional):
 Online Database: A database is used to store historical weather
data for future reference. This could be implemented using a cloud-

37
 based database service (e.g., Firebase, MongoDB Atlas) for easy
access and scalability.
 Data Storage and Retrieval: The application supports storing data
retrieved from the weather APIs and retrieving it for later use,
providing users with insights into past weather trends.
5. Responsive Design and Accessibility:
 CSS Frameworks: Tools such as Bootstrap or Tailwind CSS may
be used to ensure a responsive design that adapts to various screen
sizes.
 Accessibility Features: Compliance with accessibility standards to
make the website usable for users with disabilities (e.g., ARIA
roles, keyboard navigation).
6. Security Considerations:
 API Key Protection: The API keys used for fetching data from
weather APIs are stored securely, with measures in place to prevent
exposure in public repositories.
 HTTPS Protocol: Ensuring all data exchanged between the client
and server is encrypted using HTTPS to protect user privacy.
7. Testing and Debugging:
 Unit and Integration Testing: Use tools like Jest and React
Testing Library to perform unit tests on critical components and
ensure that data fetching and processing functions work as
expected.
 Debugging Tools: Utilize browser developer tools and React
DevTools for debugging the application and optimizing
performance.

38
 CHAPTER 8
SYSTEM TESTING
8.1 SYSTEM TESTING
System testing ensures that the Weather API Forecasting website
functions as expected under various scenarios. This process includes different
testing techniques like white-box testing, black-box testing, and unit testing,
which together verify the functionality, structure, and reliability of the
application. Testing aims to identify and fix bugs, ensure user satisfaction, and
validate the overall performance of the system.

39
8.1.1 White-Box Testing
Definition:
White-box testing involves testing the internal structure and
implementation of the code. This method ensures that all logical paths,
conditions, and loops in the codebase are functioning as intended.
Approach in the Weather API Project:
 Code Coverage Analysis:
 Ensure that all functions, methods, and components in the ReactJS
application are executed at least once during the tests.
 Test various React hooks like useState, useEffect, and custom
hooks for proper state management and data fetching.
 Path Testing:
 Validate the logical paths used for decision-making, such as API
error handling (404, 500, timeout errors).
 Test conditional rendering in the UI, ensuring components display
correctly based on states (e.g., loading, error, or successful data
retrieval).
 Loop Testing:
 Check for loops used to render forecast data dynamically (e.g.,
map() function to display multiple-day forecasts).
Examples:
1. Test if the fetchWeatherData() method calls the correct API endpoint
based on the user’s location input.
2. Validate that the retry mechanism works correctly for failed API requests.

8.1.2 Black-Box Testing

Definition:
Black-box testing focuses on validating the functionality of the system

40
without knowledge of its internal code structure. This technique ensures that the
input and output of the system meet the expected requirements.
Approach in the Weather API Project:
 Input Validation:
o Test user inputs for location search, ensuring only valid entries
(e.g., city names, postal codes) are processed.
o Check how the system handles invalid inputs like numbers, special
characters, or excessively long strings.
 Output Verification:
o Ensure that correct weather data is displayed for valid locations.
o Verify error messages for invalid or nonexistent locations.
• API Response Handling:
 Validate the system's behavior for various API response scenarios,
including:
 Valid responses with complete data.
 Responses with missing or malformed data.
 HTTP errors (e.g., 404, 500) and connection timeouts.

• UI Testing:
 Test the responsiveness and visual consistency of the website on
different devices and browsers.
8.1.3 Unit Testing
Definition:
Unit testing involves testing individual components or functions of the
application in isolation to ensure that they perform their intended tasks
correctly.
Approach in the Weather API Project:
 Component Testing:
 Test React components like WeatherCard, SearchBar, and

41
 ForecastChart to verify proper rendering and functionality.
 API Function Testing:
 Test the sendRequest() and handleResponse() methods in the
APIClient class to ensure accurate data retrieval and processing.
 Utility Function Testing:
 Validate helper functions used for data formatting, such as
converting temperature units or formatting timestamps.
 State and Props Testing:
 Ensure state variables like weatherData, isLoading, and error are
updated correctly based on user actions or API responses.
 Test props passed between components to ensure accurate
communication.

CHAPTER 9
CONCLUSION AND FUTURE ENHANCEMENT
9.1 Conclusion
The Weather API Forecasting website is a modern solution designed to
address the growing need for accurate and real-time weather information. By
leveraging advanced web technologies such as ReactJS and integrating

42
powerful weather APIs like OpenWeather and WeatherStack, the project
achieves its goal of providing users with dynamic and user-friendly access to
weather data.
The application stands out for its simplicity, interactivity, and
responsiveness, making it accessible across various devices and user
demographics. Features such as real-time weather updates, multi-day
forecasting, and geolocation-based data retrieval make it a reliable tool for daily
use. The project's robust backend communication, combined with thoughtful
front-end design, ensures seamless functionality and a positive user experience.
In conclusion, the Weather API Forecasting website serves as a practical
demonstration of integrating modern web development practices with real-
world applications. Its scalability, efficiency, and design reflect the potential of
technology to simplify everyday tasks and enhance decision-making through
data accessibility.

9.2 Future Enhancements

While the current implementation of the project provides a strong
foundation, there are several areas where future enhancements can improve
functionality, user experience, and scalability:
Advanced Forecasting:
 Introduce hourly forecasts to provide users with more granular
weather updates throughout the day.
 Implement additional predictive analytics to offer insights, such as
weather impact on activities or travel plans.
Integration of Multiple APIs:
 Enable integration with multiple weather APIs to provide
redundancy and improve data accuracy.
 Implement an API selection mechanism to allow users to choose

43
 their preferred data source.
Personalization Features:
 Create user accounts to allow for personalized dashboards, saving
favorite locations, and receiving weather alerts.
 Introduce custom notifications via email or SMS for severe
weather conditions or user-defined thresholds (e.g., high wind
speeds, extreme temperatures).
Enhanced Visualizations:
 Incorporate advanced data visualization tools, such as interactive
graphs and maps, to display temperature trends, precipitation
levels, or wind patterns.
 Add weather radar overlays and satellite images for an enhanced
understanding of current weather conditions.
Voice Interaction and Accessibility:
 Implement voice recognition features to allow users to query
weather data hands-free.
 Enhance accessibility with features like text-to-speech, larger fonts,
and customizable themes for visually impaired users.
Offline Functionality:
 Add offline capabilities where cached data from recent searches or
forecasts can be accessed without an active internet connection.
Mobile Application Development:
 Extend the project to include dedicated mobile applications for iOS
and Android platforms, with native functionalities like push.
Weather Insights and Analytics:
 Provide additional insights, such as air quality index (AQI), UV
index, pollen counts, or sunrise/sunset timings, to make the
application more comprehensive.

44
  Use historical data analysis to predict seasonal trends and patterns.
Gamification and Social Features:
 Introduce gamification elements, such as earning badges for
consistent usage or weather-related challenges.
 Add social sharing features so users can share weather updates or
alerts with friends and family.
IoT Integration:
 Develop support for integration with IoT-enabled devices, such as smart
thermostats or weather stations, to deliver a smarter home automation
experience.
Localization and Multi-Language Support:
 Add support for multiple languages to make the platform accessible to a
global audience.
 Provide localized weather information, including cultural considerations
for presenting data (e.g., Celsius vs. Fahrenheit).
AI-Driven Enhancements:
 Incorporate AI models to predict weather trends based on user behavior
and preferences.
 Use machine learning to enhance API error handling and improve data
reliability.

CHAPTER 10
APPENDIX
HTML

45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,height=device-height,
initial-scale=1.0">
<title>Weather</title>
<link rel = "icon" href = "mountain_logo.png" type = "image/x-icon">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive-style.css">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd
3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.1.2/css/all.min.css" integrity="sha512-
1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZ
ZfpXtYSLy85p km9GaYVYMfw5BC1A==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
</head>
<body>
<div class="position-relative main_content">
<div class="bg" class="container">
<div class="logo mt-4 ms-4 mt-lg-5 ms-lg-5 position-absolute">
</div>
<!-- display on small and mid screens -->

46
<div id="div1" class="temperature-small d-lg-none d-sm-flex d-flex position-
absolute ms-4 shimmer">
<div class="degree text-white mt-auto"><p
id="degree_small">16&#176</p></div>
<div class="place-time">
<div class="place text-white ms-3"><p id="place_small">London</p></div>
<div class="time d-flex text-white"><h6 id="time_small" class="ms-
3">06:09</h6><h6 id="day_small" class="ms-1">Monday</h6><h6
id="date_small" class="ms-1">9</h6><h6 id="month_small" class="ms-
1">Sep</h6><h6 id="year_small" class="ms-1">21</h6></div>
</div>
<div class="icon-name ms-2">
<!-- <div class="weather-icon"><img id="weather_icon_small"
src="../icons/day/119.png" alt="#"></div> -->
<div class="weather-name text-white justify-content-center d-flex pt-1 ms-2 mt-
4 animate- character" ><p id="weather_name_small">Cloudy</p></div>
</div>
</div>
<div class="Search-small d-lg-none position-absolute top-50 start-0">
<div class="input-group search-bar ">
<div id="search-autocomplete" class="form-outline ms-auto">
<input type="search" id="form1" Placeholder="Another Location..."
class="form-control shadow-none " style="color: white;"/>
<!-- <label class="form-label" for="form1">Search</label> -->
<div class="line"></div>
</div>
<button type="button" onclick="getWeather(input,'in')" class="button-icon"
id="button_color_small">

47
<i class="fas fa-search text-white"></i>
</button>
</div>
<div class="cities ms-4">
<ul id="city_ul_small">
<!-- <li class="mt-4"><p>Birmingham</p></li>
<li class="mt-4"><p>Manchester</p></li>
<li class="mt-4"><p>New York</p></li>
<li class="mt-4"><p>California</p></li> -->
</ul>
</div>
<div class="line2 ms-5"></div>
<div class="details">
<ul>
<h4 class="ms-3 text-white mt-4 mb-4">Weather Details</h4>
<li class="d-flex justify-content-between ms-3 me-5 ">
<span><p>Cloud</p></span>
<span class="cloud"><p id="cloud_small">89%</p></span>
</li>
<li class="d-flex justify-content-between ms-3 me-5 ">
<span><p>Humidity</p></span>
<span class="humidity"><p id="humidity_small">64%</p></span>
</li>
<li class="d-flex justify-content-between ms-3 me-5 ">
<span><p>Wind</p></span>
<span class="wind"><p id="wind_small">8km/h</p></span>
</li>
</ul>

48
</div>
<!-- display above large screens -->
<div class="Search d-none d-lg-block ms-auto">
<div class="input-group search-bar ">
<div id="search-autocomplete" class="form-outline ms-auto">
<input type="search" id="form1Large" Placeholder="Another Location . . ."
class="form-control shadow-none " style="color: white;" />
<!-- <label class="form-label" for="form1">Search</label> -->
<div class="line"></div>
</div>
<button type="button" onclick="getWeather(input,'in')" class="button-icon"
id="button_color_large">
<i class="fas fa-search text-white"></i>
</button>
</div>
<div class="cities ms-4">
<ul id="city_ul_large">
<!-- <li class="mt-5"><p>Birmingham</p></li>
<li class="mt-5"><p>Manchester</p></li>
<li class="mt-5"><p>New York</p></li>
<li class="mt-5 mb-5"><p>California</p></li> -->
</ul>
</div>
<div class="line2 ms-5"></div>
<div class="details">
<ul>
<h4 class="ms-3 mt-5 mb-5 text-white">Weather Details</h4>
<li class="d-flex justify-content-between ms-3 me-5 mt-4">

49
<span><p>Cloud</p></span>
<span class="cloud"><p id="cloud_large">89%</p></span>
</li>
<li class="d-flex justify-content-between ms-3 me-5 mt-4">
<span><p>Humidity</p></span>
<span class="humidity"><p id="humidity_large">64%</p></span>
</li>
<li class="d-flex justify-content-between ms-3 me-5 mt-4">
<span><p>Wind</p></span>
<span class="wind"><p id="wind_large">8km/h</p></span>
</li>
</ul>
</div>
</div>
</div>
<div class="temperature d-none d-lg-flex position-absolute d-flex align-items-
center bottom-0 start-0 mb-5 ms-5 shimmer">
<div class="degree text-white"><p id="degree_large">16&#176</p></div>
<div class="place-time me-4">
<div class="place text-white"><h1 id="place_large">London</h1></div>
<div class="time d-flex text-white"><h5 id="time_large" class="ms-
0">06:09</h5><h5 id="day_large" class="ms-1">Monday</h5><h5
id="date_large" class="ms-2">9</h5><h5 id="month_large"
class="ms-1">Sep</h5><h5 id="year_large" class="ms-1">21</h5></div>
</div>
<div class="icon-name">
<!-- <div class="weather-icon"><img id="weather_icon_large" src=""
alt="#"></div> -->

50
<div class="weather-name text-white ms-2 animate-character"><h5
id="weather_name_large">Cloudy</h5></div>
</div>
</div>
<script src="./js/index.js"></script>
<script src="./js/api.js"></script
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-
894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0P
PSiiqn/+/ 3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.j
s" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/t
WtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?
family=Montserrat&family=Quicksand:wght@300;400;500;600;700&family=R
oboto:wght@400;700;9 00&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{

51
font-family: 'Rubik',sans-serif; background: #111;
/* background-image: url("../images/bg1.jpg"); background-size: cover;
background-position: center; */
}
.imageCycle1{
background-image: url("../images/bg1.jpg"); background-size: cover;
background-position: center;
}
.imageCycle2{
background-image: url("../images/bg2.jpg"); background-size: cover;
background-position: center;
}
.imageCycle3{
background-image: url("../images/bg3.jpg"); background-size: cover;
background-position: center;
}
.imageCycle4{
background-image: url("../images/bg4.jpg"); background-size: cover;
}
.imageCycle7{
background-image: url("../images/bg7.jpg"); background-size: cover;
background-position: center;
}
.imageCycle8{
background-image: url("../images/bg8.jpg"); background-size: cover;
background-position: center;
}
.main-content{ height: 100%;

52
}
.bg{
width: 100%; height: 100vh; display: flex;
justify-content: space-between; transition: 500ms;
opacity: 1;
}
logo{
/* background-color: red; */ color: white;
}
.Search{ width: 30%;
height: 100vh;
background: rgba(110, 110, 110, 0.25);
box-shadow: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.18);
/* opacity: 0.5; */
}
.Search-small{ width: 100%;
/* height: 100%; */
background: rgba(110, 110, 110, 0.25);
box-shadow: rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.18);
/* opacity: 0.5; */
}
p{
font-weight: 700; font-size: 7rem;
font-family: 'Rubik',sans-serif;
}
.form-outline{ width: 70%; display: flex;

53
flex-direction: column; justify-content: flex-end;
}
#form1{ background: none; border: none;
}
#form1Large{ background: none; border: none

54
}
.temperature-small .degree p{ font-weight: 400;
font-size: 50px;
}
.temperature-small .place-time .place p{ font-weight: 900;
font-size: 30px; display: inline;
/* text-size-adjust: auto; */
}
.time p{
width: 100%;
font-weight: 100; font-size: 15px; display: inline;
}
.weather-name p{ font-weight: 900; font-size: 20px;
}
.temperature-small{ top: 5rem;
}
#button_color_large{ background-color: black;
}
#button_color_small{ background-color: black;
}
input {
caret-color: white;
}
.animate-character
{
background: #fffc00; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffffff, #fffc00); /* Chrome 10-25,

55
background-size: auto auto; background-clip: border-box; background-size: 200%
auto; color: #fff;
background-clip: text;
/* text-fill-color: transparent; */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; animation: textclip 2s linear infinite; display:
inline-block;
font-size: 20px;
}
@keyframes textclip { to {
background-position: 200% center;
}
}
#weather_name_large{ font-size: 40px;
font-weight: 600;
JavaScript
let input; let cities;
const temp_small = document.getElementById('degree_small'); const temp_large =
document.getElementById('degree_large');
const place_name_small = document.getElementById('place_small'); const
place_name_large = document.getElementById('place_large'); const time_small =
document.getElementById('time_small');
const time_large = document.getElementById('time_large'); const day_small =
document.getElementById('day_small'); const day_large =
document.getElementById('day_large'); const date_small =
document.getElementById('date_small'); const date_large =
document.getElementById('date_large');
const month_small = document.getElementById('month_small'); const month_large
= document.getElementById('month_large'); const year_small =
document.getElementById('year_small'); const year_large =

56
document.getElementById('year_large');
const weather_name_small = document.getElementById('weather_name_small');
const weather_name_large = document.getElementById('weather_name_large'
const cloud_small = document.getElementById('cloud_small'); const cloud_large =
document.getElementById('cloud_large');
const humidity_small = document.getElementById('humidity_small'); const
humidity_large = document.getElementById('humidity_large'); const wind_small =
document.getElementById('wind_small');
const wind_large = document.getElementById('wind_large'); const form1 =
document.getElementById('form1');
const formLarge = document.getElementById('form1Large'); const ulSmall =
document.getElementById("city_ul_small"); const ulLarge =
document.getElementById("city_ul_large");
const search_button_small = document.getElementById("button_color_small");
const search_button_large = document.getElementById("button_color_large");
//31c3cdeea4869ee00e5589a3b2aa6aab
window.onload = async (event) => { cloud_small.innerHTML = 50+"%"
cloud_large.innerHTML = 50+"%"
getWeather('New Delhi','in');
$(document).ready(function(){ var
classCycle=['imageCycle1','imageCycle2','imageCycle3','imageCycle4','imageCycle
7','imageCycle8'];
var randomNumber = Math.floor(Math.random() * classCycle.length);
var button_color_small= document.getElementById("button_color_small"); var
button_color_large= document.getElementById("button_color_large");
console.log(randomNumber);
if(randomNumber==0){ button_color_small.style.backgroundColor = "#0d6efd";
button_color_large.style.backgroundColor = "#0d6efd";
}else if(randomNumber==1){ button_color_small.style.backgroundColor =
"#2C3639"; button_color_large.style.backgroundColor = "#2C3639";

57
}
else if(randomNumber==2){ button_color_small.style.backgroundColor =
"#1A1D24"; button_color_large.style.backgroundColor = "#1A1D24";
}
else{
button_color_small.style.backgroundColor = "#0F3D3E";
button_color_large.style.backgroundColor = "#0F3D3E";
}
var classToAdd = classCycle[randomNumber];
$('body').addClass(classToAdd);
});
readTextFile("./js/cities.json",function(text){ cities = JSON.parse(text);
console.log(cities);
showInitialCities();
})
}
function setData(data){
const temp = convertToCelcius(data.main.temp); const humidity =
data.main.humidity;
const cloud = data.clouds.all; const wind = data.wind.speed;
temp_small.innerHTML = temp+'&#176'; temp_large.innerHTML = temp+'&#176';
humidity_small.innerHTML = humidity+"%"; humidity_large.innerHTML =
humidity+"%"; cloud_small.innerHTML = cloud+"%"; cloud_large.innerHTML =
cloud+"%"; wind_small.innerHTML = wind+"km/h"; wind_large.innerHTML =
wind+"km/h"; place_name_small.innerHTML = data.name;
place_name_large.innerHTML = data.name; weather_name_large.innerHTML =
data.weather[0].main; weather_name_small.innerHTML = data.weather[0].main;
// const icon = data.weather[0].icon.replaceAt(data.weather[0].icon.length-1,"n");
// const src = "http://openweathermap.org/img/w/"+icon+".png";
// console.log(src);

58
// icon_small.src = src;
// icon_large.src =src;
}
function convertToCelcius(temp){ return (temp - 273.15).toFixed(0);
}
async function getWeather(city,country){
if(city.length > 0){
const weatherResponse = await fetch(config.base_url+'data/2.5/weather?
q='+city+','+country+'&APPID='+config.apiKey);
const data = await weatherResponse.json(); console.log(data);
setData(data);
}
}
String.prototype.replaceAt = function(index, replacement) {
return this.substring(0, index) + replacement + this.substring(index +
replacement.length);
}
const date = new Date();
var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
console.log(timeZone)
date.toLocaleString("en-US", {timeZone: timeZone})
// const result = date.toUTCString();
// console.log(result)
const day = (date.getMonth()+1);
form1.addEventListener('input', updateValue);
formLarge.addEventListener('input', updateValue); function showInitialCities() {
const i = "";
const result = cities.filter(city =>
city.name.toLowerCase().includes(i.toLowerCase())); console.log(result);
removeItems();

59
 function updateValue(e) { console.log(e);
const i = e.target.value;
//input=i; console.log(i);
const result = cities.filter(city => city.name.toLowerCase().i
ncludes(i.toLowerCase()));
console.log(date);
var d = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
const t = date.toString().split(" ");
console.log(t);
const hour = t[4].split(":")[0];
const min = t[4].split(":")[1]; time_large.innerHTML = hour+":"+min;
time_small.innerHTML = hour+":"+min; day_large.innerHTML = "-"+t[0]+",";
day_small.innerHTML = "-"+t[0]; date_large.innerHTML = t[2];
date_small.innerHTML = t[2]+","; month_large.innerHTML = t[1];
month_small.innerHTML = day; year_large.innerHTML = t[3];
year_small.innerHTML = t[3];
form1.addEventListener('input', updateValue);
formLarge.addEventListener('input', updateValue); function showInitialCities() {
const i = "";
const result = cities.filter(city =>
city.name.toLowerCase().includes(i.toLowerCase())); console.log(result);
removeItems();
function updateValue(e) { console.log(e);
const i = e.target.value;
//input=i; console.log(i);
const result = cities.filter(city =>
city.name.toLowerCase().includes(i.toLowerCase()));

60
 let length; if(result.length>4){
length = 4;
}else{
length = result.length;
}
for(let i = 0; i<length; i++){ addCity(result[i]);
}
}
function updateValue(e) { console.log(e);
const i = e.target.value;
//input=i; console.log(i);
const result = cities.filter(city =>
city.name.toLowerCase().includes(i.toLowerCase())); console.log(result);
removeItems(); let length;
if(result.length>4){ length = 4;
}else{
length = result.length;
}
for(let i = 0; i<length; i++){ addCity(result[i]);
}
if(length<4){
const tempCities = cities.filter(city => !
city.name.toLowerCase().includes(i.toLowerCase())); for(let i = 0; i<4-length; i++){
addCity(tempCities[i]);
}
}
}
function readTextFile(file, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json"); rawFile.open("GET", file, true);
rawFile.onreadystatechange = function() {
if (rawFile.readyState === 4 && rawFile.status == "200")
61
{ callback(rawFile.responseText);
}
}
function addCity(city) {
const br = document.createElement("br");
const liSmall = document.createElement("li"); liSmall.classList.add("mt-4");
liSmall.classList.add("fs-5"); liSmall.classList.add("fw-bolder");
liSmall.appendChild(document.createTextNode(city.name));
liSmall.setAttribute('id','li_1'); ulSmall.appendChild(liSmall);
const liLarge = document.createElement("li"); liLarge.classList.add("mt-4");
liLarge.classList.add("fs-5"); liLarge.classList.add("fw-bolder");
liLarge.appendChild(document.createTextNode(city.name));
liLarge.setAttribute('id','li_2'); ulLarge.appendChild(liLarge);
console.log(ulLarge); liLarge.addEventListener("click", function(){
input = city.name formLarge.value =input getWeather(city.name,'in'

62
SCREENSHOT

63
 CHAPTER 11
REFERENCES

1. Author: David Green Title: "Weather Data Visualization Techniques" Year:

2018 Abstract: Discusses various techniques for visualizing weather data in
web and mobile applications.

2. Author: Emily White Title: "Comparative Study of Weather APIs" Year:

2022 Abstract: A comparative study of different weather APIs, including
OpenWeatherMap, WeatherAPI, and others.

3. Author: Jane Doe Title: "Weather Forecasting with OpenWeatherMap API"

Year: 2019 Abstract: An in-depth analysis of using the OpenWeatherMap
API for weather forecasting in mobile applications.

4. Author: John Smith Title: "Real-Time Weather Data Integration" Year: 2020
Abstract: This paper discusses the integration of real-time weather data into
web applications using various weather APIs.

5. Author: Michael Brown Title: "Leveraging Weather APIs for Smart

Agriculture" Year: 2021 Abstract: Explores the use of weather APIs in smart
agriculture to optimize farming practices.

6. Author: Robert Lee Title: "Weather Forecasting in IoT Applications" Year:

2021 Abstract: Explores the integration of weather forecasting in IoT
applications for smart homes and cities

7. Author: Sarah Johnson Title: "Using Weather APIs for Disaster Management"
Year: 2020 Abstract: Examines the role of weather APIs in disaster
management and emergency response.

64