PROJECT REPORT ON “WEATHERNETWORK”

Problem Definition

# Need for Accurate Weather Forecasting

- Local Relevance: Discuss the importance of weather

forecasting in India, where agricultural activities and daily life
are heavily influenced by weather conditions.

- Existing Gaps: Highlight the limitations or inaccuracies in

existing weather forecasting services, such as delayed
updates, lack of localized data, or poor user experience.

# Challenges in Accessibility and Usability

- Accessibility Issues: Describe how existing platforms may

not be accessible to all user groups, particularly in rural or
less technologically advanced areas.

- Usability Concerns: Point out the complexity of existing

weather forecast interfaces which may deter users from
effectively using the information.
# Integration of Real-Time Data

- Real-Time Requirement: Emphasize the need for real-time

weather updates to ensure timely information for users,
supporting decisions in agriculture, transportation, and other
critical areas.

- Data Acquisition and Management: Mention the challenges

related to sourcing real-time meteorological data and
managing it effectively on a platform.

Objective

- Primary Objective: To develop a user-friendly, accurate, and

real-time weather forecasting website specifically tailored
for Indian locales.

- Secondary Objectives:

- To enhance accessibility, ensuring that the website is

usable across various devices and adaptable to low
bandwidth conditions.

- To provide educational content on weather patterns and

safety measures during extreme weather conditions.
This section sets the stage for why your project exists and
what it aims to achieve, providing a clear link between the
identified problems and the features your website offers to
resolve these issues.

Analyzing system requirements is crucial for ensuring that

your IndianWeatherNetwork project is designed to meet both
technical and user needs efficiently. Here's how you can
structure the System Requirements section of your project
report:

System Requirements Analysis

# Functional Requirements

- Weather Data Retrieval: The system must be capable of

fetching real-time weather data from various meteorological
sources.
- Data Presentation: It should effectively present weather
information in various formats, including textual forecasts,
graphical representations, and interactive maps.

- User Interaction: Users should be able to query weather

forecasts for different locations and times, and possibly
receive alerts for severe weather conditions.

- Accessibility Features: The website must be accessible to

users with disabilities and should perform well on both
desktop and mobile devices.

# Non-Functional Requirements

- Performance: The website should load within a few seconds,

even under high traffic, ensuring a smooth user experience.

- Scalability: The design should accommodate an increasing

number of users and data points without degradation in
performance.

- Reliability: High reliability in delivering accurate and timely

weather updates.

- Security: Ensure user data protection and secure data

transmission, especially if users need to register or receive
personalized alerts.
# Hardware Requirements

- Server Specifications: Suitable server setup to handle

requests and serve data efficiently. This includes adequate
RAM, CPU capabilities, and storage for historical weather
data.

- Client Devices: The website should be optimized for various

devices including smartphones, tablets, and desktops with
different resolutions and capabilities.

# Software Requirements

- Frontend: HTML, CSS, and JavaScript for building the user

interface. Consider frameworks or libraries like React or
Angular for dynamic content.

- Backend: Server-side technologies for data handling and

APIs integration.

- APIs: Utilization of weather data APIs that provide real-time

data and historical weather conditions.

- Database: For storing user settings, historical data, and

potentially for caching current weather data to reduce API
calls.
# User Requirements

- Ease of Use: The interface should be intuitive and easy to

navigate for all user categories, including tech-savvy and
non-tech users.

- Language Support: Multilingual support, especially local

languages to cater to a diverse Indian audience.

- Educational Content: Provision of guidelines or educational

material on understanding weather patterns and safety
precautions during adverse weather conditions.

Compliance and Standards

- Data Compliance: Adherence to local data protection

regulations and standards.

- Web Standards: Compliance with web standards (W3C) for

accessibility and SEO optimization.

Incorporating these detailed system requirements will guide

the development and implementation phases of the
IndianWeatherNetwork project, ensuring that the end
product is robust, efficient, and user-friendly.
The System Design phase in the Software Development Life
Cycle (SDLC) is crucial as it transforms the detailed
requirements into complete and executable systems. Here’s
how you can plan the system design phase for your
IndianWeatherNetwork project:

1. Define System Architecture

- High-Level Architecture: Outline the overall system
architecture, including the front-end, back-end, data flow,
and interaction with external APIs. This should include
diagrams that represent the architecture visually.
- Component Design: Break down the system into smaller,
manageable components such as data retrieval modules,
user interface components, and backend services.

2. User Interface Design

- Wireframes: Create wireframes for each page of the website,
detailing the layout of user interface elements.
- Mockups: Develop high-fidelity mockups that represent the
final look and feel of the website, incorporating branding
elements like color schemes and typography.
- User Experience (UX): Focus on the navigation flows and
interactive elements to ensure a user-friendly experience.
Consider the accessibility guidelines to make the website
usable for all users.

3. Database Design
- Schema Definition: Define the database schema including
tables, fields, relationships, and indexes. Choose the
appropriate database system (SQL or NoSQL) based on the
data requirements and scalability needs.
- Data Management: Plan for data integrity, security, and
backup procedures. Consider how the system will handle
data caching, historical data storage, and real-time updates.

4. API Integration Design

- External APIs: Document the integration points with external
weather data APIs. Include error handling, data parsing, and
update frequencies.
- Internal APIs: Design any internal APIs needed for front-end
to back-end communication. Specify the request and
response formats, and authentication methods if necessary.

5. Security Design
- Data Security: Plan for encryption of sensitive data and
secure API interactions.
- User Authentication and Authorization: If user accounts are
necessary, design the authentication and authorization
mechanisms, considering OAuth, JWT, or other relevant
protocols.
- Vulnerability Assessment: Identify potential security threats
and plan for regular security audits and compliance checks.

6. Performance and Scalability

- Load Balancing: Design strategies for load balancing to
distribute user requests efficiently across servers.
- Caching Mechanisms: Implement caching strategies to
reduce the load on servers and improve response time for
frequently accessed data.
- Scalability Plan: Outline how the system will scale with
increased user numbers or data volume, including horizontal
scaling (adding more servers) and vertical scaling (adding
more resources to existing servers).

7. Prototyping
- Functional Prototype: Develop a working prototype of the
system to demonstrate functionality and design. This helps in
identifying any potential issues or improvements early in the
development phase.
- User Feedback: Engage potential users to test the prototype
and provide feedback on usability and functionality.

8. Documentation
- Technical Documentation: Write detailed documentation
for the system design, including code, APIs, and architecture,
to guide developers and maintain consistency throughout the
development process.
- User Documentation: Prepare user manuals or help guides
that explain how to navigate and use the website features
effectively.

Planning these elements thoroughly during the system

design phase will set a solid foundation for the subsequent
development, testing, and deployment phases, ensuring that
the IndianWeatherNetwork meets its specified requirements
and user expectations effectively.

For the IndianWeatherNetwork project, outlining detailed

software and hardware requirements is essential to ensure
the system operates efficiently and scales appropriately.
Here are the Software Requirement Specifications (SRS) and
Hardware Requirement Specifications (HRS) that could be
suitable for this project:

Software Requirement Specifications (SRS)

1. Operating Systems:
- Server: Linux-based OS (Ubuntu, CentOS) for its stability
and scalability.
- Client: Compatible with all major operating systems
(Windows, macOS, Linux) via web browsers.
2. Web Technologies:
- HTML5, CSS3, and JavaScript for front-end development.
- Use of frameworks like React or Vue.js for a responsive and
interactive UI.
- Server-side scripting with Node.js or a lightweight
framework in Python like Flask for handling API requests.

3. Database:
- MongoDB for flexible data storage of weather data, user
settings, etc., or PostgreSQL for robust relational database
management if complex queries and relationships are
required.

4. APIs:
- Weather data APIs (like OpenWeatherMap, Weatherstack)
for real-time weather information.
- Geolocation APIs for detecting user location and delivering
localized weather forecasts.

5. Development Tools:
- Git for version control.
- Docker for containerization and easy deployment.
 - Integrated Development Environment (IDE) like Visual
Studio Code or JetBrains WebStorm.

6. Testing Tools:
- Jest for JavaScript testing.
- Selenium for automated browser testing.
- Postman for API testing.

7. Security Software:
- SSL certificates for secure HTTPS connections.
- Firewall and intrusion detection systems on the server side.

8. Analytics and Monitoring:

- Google Analytics for tracking user engagement and
website performance.
- New Relic or Datadog for real-time monitoring of
application performance.

Hardware Requirement Specifications (HRS)

1. Server Specifications:
 - CPU: Multi-core processor (Intel Xeon, AMD EPYC) for
handling multiple simultaneous requests.
- RAM: Minimum 16 GB, scalable as user load increases.
- Storage: SSDs preferred for faster data access, starting
with 1 TB scalable with RAID configuration for data
redundancy.
- Network: Gigabit Ethernet connection for high-speed
internet access.

2. Client Hardware:
- No specific requirements; should be accessible on
standard consumer devices including smartphones, tablets,
and desktops.
- Responsive design to adapt to different screen sizes and
resolutions.

3. Backup and Recovery Systems:

- External hard drives or cloud-based storage solutions for
regular backups.
- Power backup solutions (UPS systems) for maintaining
server uptime during power outages.
4. Networking Equipment:
- High-quality routers and switches to support local traffic
management.
- Adequate bandwidth to support server responses,
especially during peak loads.

5. Miscellaneous:
- Cooling systems for maintaining optimal temperatures in
server rooms.
- Physical security systems to protect hardware from
unauthorized access.

These specifications will help ensure that the

IndianWeatherNetwork is built on a robust, scalable, and
secure infrastructure, capable of delivering fast and reliable
weather forecasts to its users.

Performing and evaluating feasibility studies is a critical step

in assessing whether the IndianWeatherNetwork project is
viable in terms of technical requirements, time constraints,
operational considerations, and financial justification.
Here’s how to approach each feasibility study:

1. Cost-Benefit Analysis
- Costs:
- Development Costs: Includes salaries of developers,
designers, and project managers. Software licenses,
development tools, and server costs also contribute.
- Operational Costs: Ongoing costs for server maintenance,
API subscriptions for weather data, software updates, and
technical support.
- Marketing and Administrative Costs: Expenses related to
promoting the website, user support, and administrative
tasks.

- Benefits:
- Direct Revenue: This can come from advertising, premium
subscriptions for detailed forecasts, or partnerships with
agricultural and logistics companies.
- Indirect Benefits: Enhanced decision-making for users
leading to increased productivity, especially in sectors like
agriculture, tourism, and transport.
 - Social Impact: Improved weather awareness and safety,
potentially reducing losses due to unexpected weather
conditions.

- Evaluation: Calculate the return on investment (ROI) by

comparing the projected revenue and indirect benefits over a
certain period against the initial and operational costs.
Positive ROI and short payback period can justify the project
economically.

2. Technical Feasibility
- Technology Stack: Assess whether the chosen technologies
(HTML, CSS, JavaScript, Node.js, MongoDB) are suitable for
building and scaling the project. Consider the team's
expertise with these technologies.
- Integration: Evaluate the feasibility of integrating external
APIs for real-time weather data. Ensure that these APIs can
provide reliable and timely data as required.
- Scalability: Determine if the infrastructure can handle
potential growth in user base and data volume.

- Evaluation: The project is technically feasible if current

technology can meet the needs with potential for future
expansion and the team is skilled enough to implement the
solutions.

3. Time Feasibility
- Development Timeline: Estimate the time required for each
phase of the project including planning, design, development,
testing, and deployment. Consider time for iterative feedback
and improvements.
- Market Timing: Assess the urgency of launching the project
based on market demand and competition. Timing can affect
the uptake and success of the project.

- Evaluation: The project is time feasible if it can be

completed within the available timeline and meets the
market readiness without sacrificing quality or critical
features.

4. Operational Feasibility
- User Adoption: Determine if the target audience is likely to
use the website based on its features, ease of use, and
accessibility.
- Support and Maintenance: Assess the organization’s
capability to provide continuous technical support, updates,
and maintenance post-launch.
- Compliance and Regulations: Check if the project complies
with relevant laws and regulations, including data protection
and privacy.

- Evaluation: The project is operationally feasible if it aligns

with user expectations and the organization’s operational
capabilities, and if it adheres to legal requirements.

Conclusion
Summarize the findings from each feasibility study to present
a comprehensive view of the project’s viability. This analysis
helps stakeholders make informed decisions on whether to
proceed with the project, modify it, or abandon it based on
feasibility results. If all aspects are positive or manageable,
the project can be greenlighted for further development. If
there are significant concerns in any area, those should be
addressed before moving forward.
For your IndianWeatherNetwork project, establishing
effective data collection methods is crucial for fact-finding
and understanding both user needs and the technical
landscape. Here are several approaches you can use:

1. Surveys and Questionnaires

- Purpose: Gather quantitative and qualitative data from
potential users about their needs and preferences regarding
weather forecasting services.
- Method: Design online surveys with a mix of open-ended
and multiple-choice questions. Distribute these surveys
through social media, emails, and community forums that
are frequented by your target audience.

2. Interviews
- Purpose: Conduct in-depth discussions to obtain detailed
insights about the user requirements and experiences with
existing weather forecast platforms.
- Method: Prepare a set of semi-structured interview
questions and conduct one-on-one interviews with potential
users, including industry experts such as meteorologists,
farmers, or event planners who rely heavily on accurate
weather predictions.

3. Focus Groups
- Purpose: Collect diverse opinions and ideas from a group
of participants in one session, which can help in
understanding multiple perspectives about the proposed
system.
- Method: Organize sessions with groups of 6-10
participants who represent your end users. Facilitate
discussions around their expectations, current issues they
face, and features they would find useful in a weather
forecasting website.

4. Observational Studies
- Purpose: Understand how users interact with existing
weather websites or apps and identify their pain points and
usability issues.
- Method: Conduct sessions where you observe users
navigating current weather forecasting services. Take notes
on their behavior, preferences, and any difficulties they
encounter.
5. Document Analysis
- Purpose: Review existing documentation and data to
understand the market standards, regulatory requirements,
and technological capabilities related to weather forecasting.
- Method: Analyze available reports, academic papers,
existing system documentation, and competitor websites.
This can provide a background understanding and
benchmarking data for developing the system.

6. Online Analytics
- Purpose: Utilize online tools to analyze how users
currently engage with similar platforms.
- Method: Use analytics tools like Google Analytics on
existing websites to track user behavior, popular features,
and common entry and exit points.

7. Prototype Testing
- Purpose: Gather feedback on early versions of your
website to refine and improve upon it before full-scale
development.
- Method: Develop a basic prototype of the
IndianWeatherNetwork and allow users to interact with it.
Collect feedback through embedded forms or follow-up
interviews to understand their experience and suggestions
for improvement.

Implementation Plan for Data Collection

- Prepare: Define clear objectives for each data collection
method and prepare the necessary tools and materials (e.g.,
survey forms, interview guides).
- Collect: Implement the collection methods, ensuring to
cover a broad and representative sample of your target
audience.
- Analyze: Analyze the collected data to draw meaningful
insights that will inform the system’s design and functionality.
- Report: Summarize the findings in a structured format,
highlighting key user needs, preferences, and any identified
gaps in existing services.

By systematically applying these data collection methods,

you can gather comprehensive insights that will greatly assist
in designing a user-centered and effective weather
forecasting website for the IndianWeatherNetwork project.
To further develop your IndianWeatherNetwork project, let's
discuss how to construct and evaluate data dictionaries,
decision trees, and decision tables. These tools are vital for
ensuring clarity in system requirements and aiding in
decision-making processes.

Data Dictionary

A data dictionary is a centralized repository of information

about data such as meaning, relationships to other data,
origin, usage, and format. Here’s how you might construct
and evaluate one for your project:

Example Entry for Data Dictionary:

| Data Element | Description | Type/Length | Format |
Valid Values | Source |

|------------------|--------------------------------|-----------------|------
------------|----------------------|------------------|

| Location ID | Unique identifier for a location | Integer |

N/A | Positive integers | System-generated |

| Temperature | Current temperature at a location | Decimal

| Degrees Celsius | -50 to +60 | Weather API |

| Forecast Date | Date of the weather forecast | Date |

YYYY-MM-DD | Current date onwards | System-generated |

| Weather Condition| Description of weather |

Varchar(100) | N/A | Text description | Weather API
|

Evaluation:

- Ensure completeness: Verify that all elements used in the

system are included.

- Check accuracy: Validate the type, length, and valid values

for each item.

- Update as necessary: As system design evolves, update the

dictionary to reflect changes.
Decision Tree

Decision trees help in making decisions based on various

criteria. They are useful for programming logic in your system
like determining what weather data to display.

Example Decision Tree for Displaying Weather Information:

1. Start

2. Is user logged in?

- Yes: Go to 3.

- No: Prompt login.

3. Does user request current weather?

- Yes: Display current weather. End.

- No: Go to 4.

4. Does user request future forecast?

- Yes: Go to 5.

- No: Display error message. End.

5. Is the requested date within 10 days?

- Yes: Display forecast. End.

- No: Display message "Data not available." End.

Evaluation:

- Simplicity: Ensure the tree is as simple as possible while

covering all necessary decisions.

- Completeness: All possible user actions and outcomes

should be accounted for.

- Accuracy: The logic should accurately represent the

business rules and user requirements.

Decision Table

Decision tables are another way to represent system logic

succinctly, showing actions in response to different
conditions. They are particularly useful where many
combinations of data inputs can occur.

Example Decision Table for Weather Notifications:

| Condition | Case 1 | Case 2 | Case 3 | Case 4 |

|-------------------------------------------|------------|------------|------
------|------------|

| Subscription to weather alerts (Yes/No) | Yes | Yes |

No | No |

| Weather condition (Severe/Not Severe) | Severe | Not

Severe | Severe | Not Severe |

| Action | Send Alert | Do Nothing | Do Nothing

| Do Nothing |

Evaluation:

- Consistency: Check for conflicting rules or actions in similar

conditions.

- Completeness: Ensure all possible conditions and

combinations are covered.

- Clarity: The table should be easy to understand and

implement.
These tools will provide clear guidelines for developers and
stakeholders on how data is handled, and decisions are
made within the IndianWeatherNetwork project, supporting a
systematic development process.

Graphical tools like system flowcharts, entity-relationship

(ER) diagrams, and state transition diagrams play crucial
roles in system design, offering visual representations of
processes, data relationships, and system states. Let's
discuss how to create and evaluate each for your
IndianWeatherNetwork project.

1. System Flowcharts
System flowcharts visually depict the flow of data through
system processes, highlighting system components and their
interactions.

Example System Flowchart for IndianWeatherNetwork:

- Start

- User Logs In

- Input: Username and Password

- Output: Authentication Status

- Request Weather Data

- Input: Location and Date

- Output: Weather Data

- Retrieve Weather Data from API

- Input: API Query

- Output: API Response

- Display Weather Information

- Output: Weather Report on User Interface

- End

Evaluation:

- Clarity: Ensure the flowchart is easy to understand, with

clear, straightforward symbols and directional flow.

- Accuracy: The flowchart should accurately reflect all

system processes and their sequences.

- Completeness: Include all relevant system components

and interactions.

2. Entity-Relationship (ER) Diagrams

ER diagrams are essential for designing and understanding

the database structure, showing how entities (such as tables
in a database) relate to each other.

Example ER Diagram for IndianWeatherNetwork:

Entities:
- User: Attributes include UserID, UserName, Password,
Email.

- Location: Attributes include LocationID, City, State, Country.

- Weather Report: Attributes include ReportID, LocationID,

Date, Temperature, Humidity, Conditions.

Relationships:

- User *subscribes to* Location (many-to-many: a user can

subscribe to multiple locations, and a location can have
multiple subscribers).

- Location *has* Weather Report (one-to-many: one location

can have multiple weather reports).

Evaluation:

- Entity Completeness: Ensure all relevant data points are

represented as entities.

- Relationship Accuracy: Accurately define relationships

(one-to-one, one-to-many, many-to-many) reflecting the
logical connections between entities.

- Normalization: Check if the database design is normalized

to reduce redundancy and improve data integrity.
3. State Transition Diagrams

State transition diagrams illustrate how a system transitions

between states based on events, which is particularly useful
for dynamic aspects of your system like user sessions or real-
time data updates.

Example State Transition Diagram for User Session

Management:

States:

- Logged Out

- Logging In

- Logged In

- Logging Out

Transitions:

- Logged Out to Logging In: User enters credentials

- Logging In to Logged In: Authentication successful

- Logged In to Logging Out: User clicks log out

- Logging Out to Logged Out: Session ends

Evaluation:

- State Coverage: Ensure all possible states and transitions

are covered.

- Transition Clarity: Each transition should have a clear cause

and effect.

- Simplicity: Maintain simplicity to avoid overly complex

diagrams which are hard to interpret.

Creating these diagrams provides a visual and functional

blueprint of the system, which can be critically evaluated for
completeness, accuracy, and efficiency. Properly
constructed, they significantly aid in understanding,
developing, and communicating the system's design.
CODING PART

Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0" />
<title>Weather App</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:w
ght@300;500;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="shape shape-1"></div>
<div class="shape shape-2"></div>
<div class="container">
<div class="search-container">
<input
type="text"
placeholder="Enter a city name"
id="city"
value="mumbai"
/>
<button id="search-btn">Search</button>
</div>
<div id="result"></div>
</div>
</div>
 <!-- Script -->
<script src="key.js"></script>
<script src="script.js"></script>
</body>
</html>

CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--white: #ffffff;
--off-white: #e5e5e5;
--transp-white-1: rgba(255, 255, 255, 0.25);
--transp-white-2: rgba(255, 255, 255, 0.1);
--blue-1: #62b8f5;
--blue-2: #4475ef;
--shadow: rgba(3, 46, 87, 0.2);
}
body {
height: 100vh;
background: linear-gradient(135deg, var(--blue-1), var(--
blue-2));
}
.wrapper {
font-size: 16px;
width: 90vw;
max-width: 28em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.container {
width: 100%;
background: var(--transp-white-2);
backdrop-filter: blur(10px);
padding: 3em 1.8em;
border: 2px solid var(--transp-white-2);
border-radius: 0.6em;
box-shadow: 0 1.8em 3.7em var(--shadow);
text-align: center;
}
.shape {
position: absolute;
background-color: var(--transp-white-1);
backdrop-filter: blur(1.2em);
border: 2px solid var(--transp-white-2);
border-radius: 50%;
}
.shape-1 {
height: 13em;
width: 13em;
right: -6.5em;
top: 1.8em;
}
.shape-2 {
height: 11em;
width: 11em;
bottom: -3.7em;
left: -2.5em;
}
.search-container {
font-size: 1em;
display: grid;
grid-template-columns: 9fr 3fr;
gap: 1.25em;
}
.search-container input,
.search-container button {
outline: none;
font-size: 1em;
border: none;
}
.search-container input {
padding: 0.7em;
background-color: transparent;
border-bottom: 2px solid var(--transp-white-1);
color: var(--white);
font-weight: 300;
}
.search-container input::placeholder {
color: var(--off-white);
}
.search-container input:focus {
border-color: var(--white);
}
.search-container button {
color: var(--blue-2);
background-color: var(--white);
border-radius: 0.3em;
}
#result h2 {
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 600;
margin: 1.25em 0;
}
.weather,
.desc {
color: var(--off-white);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.9em;
font-weight: 500;
line-height: 2em;
}
.weather {
margin-top: -0.7em;
}
#result img {
margin: 0.6em 0 0 0;
width: 6.2em;
filter: drop-shadow(0 1.8em 3.7em var(--shadow));
}
#result h1 {
font-size: 4em;
 margin: 0.3em 0 0.7em 0;
line-height: 0;
font-weight: 400;
color: var(--white);
}
.temp-container {
display: flex;
justify-content: center;
}
.temp-container div {
padding: 0.3em 1em;
}
.temp-container div:first-child {
border-right: 1px solid var(--transp-white-1);
}
.temp-container .title {
font-weight: 600;
color: var(--white);
}
.temp-container .temp {
font-weight: 300;
color: var(--off-white);
}
.msg {
margin-top: 1.8em;
 color: var(--white);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
}
@media screen and (max-width: 450px) {
.wrapper {
font-size: 14px;
}
}

JAVASCRIPT
let result = document.getElementById("result");
let searchBtn = document.getElementById("search-btn");
let cityRef = document.getElementById("city");

//Function to fetch weather details from api and display them

let getWeather = () => {
let cityValue = cityRef.value;
//If input field is empty
if (cityValue.length == 0) {
result.innerHTML = `<h3 class="msg">Please enter a city
name</h3>`;
}
//If input field is NOT empty
else {
let url =
`https://api.openweathermap.org/data/2.5/weather?q=${ci
tyValue}&appid=${key}&units=metric`;
//Clear the input field
cityRef.value = "";
fetch(url)
.then((resp) => resp.json())
//If city name is valid
.then((data) => {
console.log(data);
console.log(data.weather[0].icon);
console.log(data.weather[0].main);
console.log(data.weather[0].description);
console.log(data.name);
console.log(data.main.temp_min);
console.log(data.main.temp_max);
result.innerHTML = `
<h2>${data.name}</h2>
<h4 class="weather">${data.weather[0].main}</h4>
<h4 class="desc">${data.weather[0].description}</h4>
<img
src="https://openweathermap.org/img/w/${data.weather[0]
.icon}.png">
<h1>${data.main.temp} &#176;</h1>
<div class="temp-container">
<div>
<h4 class="title">min</h4>
<h4
class="temp">${data.main.temp_min}&#176;</h4>
</div>
<div>
<h4 class="title">max</h4>
<h4
class="temp">${data.main.temp_max}&#176;</h4>
</div>
</div>
`;
})
//If city name is NOT valid
.catch(() => {
result.innerHTML = `<h3 class="msg">City not
found</h3>`;
});
}
};
searchBtn.addEventListener("click", getWeather);
window.addEventListener("load", getWeather);
API
//Assign the copied API key to the 'key' variable
key = "gxsdycysd";