WEATHER APP

MINI PROJECT REPORT

By

K.J.TILAK REDDY(RA2211026010059)
P.BHARADWAJ(RA2211026010061)
N.UMESH KARTHIK(RA2211026010064)

Under the guidance of

Dr.N.Kanimozhi

In partial fulfilment for the Course

of

21CSC202J - OPERATING SYSTEMS

in the Department of Computational Intelligence

FACULTY OF ENGINEERING AND TECHNOLOGY

SCHOOL OF COMPUTING

SRM INSTITUTE OF SCIENCE AND TECHNOLOGY

KATTANKULATHUR

NOVEMBER 2023

1
 SRM INSTITUTE OF SCIENCE AND TECHNOLOGY

(Under Section 3 of UGC Act, 1956)

BONAFIDE CERTIFICATE

Certified that this minor project report for the course 21CSC202J - OPERATING SYSTEMS

entitled in "weather app" is the bonafide work of K.J.TILAK REDDY(RA2211026010059),

P.BHARADWAJ(RA2211026010061) and N.UMESH KARTHIK(RA2211026010064) who

carried out the work under my supervision.

SIGNATURE SIGNATURE

Dr. N. Kanimozhi Dr. R. Annie Uthra

OS – Course Faculty Head of the Department
Assistant Professor Professor
Department of Computational Intelligence Department of Computational Intelligence
SRM Institute of Science and Technology SRM Institute of Science and Technology
Kattankulathur Kattankulathur

1
 ABSTRACT:

This project involves the development of a weather application using HTML, CSS,
and JavaScript. The application provides users with real-time weather information
based on the location entered. Here is an abstract summary of the project
components. The HTML file outlines the structure of the weather app, including the
necessary meta tags, title, and external stylesheet link. It comprises a container with
a search box, a section for displaying a "Location not found" message, and the main
weather information display. The CSS file defines the styling for the app, creating
a visually appealing and responsive interface. It sets the background, font styles,
and layout properties for various elements such as the search box, weather details,
and error message. The design focuses on a clean and user-friendly appearance. The
JavaScript script file contains the core functionality of the app. It interacts with the
OpenWeatherMap API to retrieve weather data based on the user's entered location.
The script dynamically updates the UI with temperature, weather description,
humidity, wind speed, and an image representing the current weather conditions.

Users can input their desired location in the search box and initiate the weather
check by clicking the search button.

2
 TABLE OF CONTENTS

CHAPTER CONTENTS PAGE

NO NO

1 INTRODUCTION 4-7

1.1 Objective 4-5

1.2 Introduction 6-7

2 SOFTWARE and HARDWARE 8-9

REQUIREMENT

3 CONCEPT/WORKING PRINCIPLE 10-11

4 APPROACH/METHODOLOGY/PROGRAM 12-16

5 FLOWCHART 17

6 EXPERIMENT RESULTS & ANALYSIS 18

7 CONCLUSION 19

8 REFERENCES 20

3
 OBJECTIVE:

1. Overview:
The purpose of this project is to create a Weather App using HTML, CSS, and JavaScript.
The app allows users to input a location, fetch real-time weather data from the
OpenWeatherMap API, and display the weather information along with relevant visual
representations.

2. HTML Structure:
The HTML file defines the basic structure of the Weather App.
It includes a search box for entering the location and a container to display weather
information.
Additionally, there's a section for handling cases when the location is not found.

3. CSS Styling:
The CSS file provides a visually appealing layout for the app.
Responsive design ensures a good user experience across different devices.
The styling focuses on clean, rounded elements and a well-organized layout.

4. JavaScript Functionality:
The JavaScript file interacts with the HTML and CSS to provide dynamic functionality.
It fetches weather data from the OpenWeatherMap API based on the user's input.
The app responds to the API data, displaying weather details and an appropriate weather
image.
Error handling is implemented to manage cases where the location is not found (HTTP 404
status).

5. User Interaction:
Users can input a location in the search box and click the search button.

4
The app then fetches and displays real-time weather information for the specified location.
Visual indicators, such as weather icons and background images, enhance the user
experience.

6. API Integration:
The app integrates with the OpenWeatherMap API to retrieve weather data.
It uses the fetched data to update the temperature, weather description, humidity, wind
speed, and the corresponding weather image.

7. Future Improvements:
The app could benefit from additional features such as a forecast for upcoming days.
User authentication and personalized settings could be implemented for a more tailored
experience.
Further optimization for performance and accessibility may enhance the overall usability of
the app.

5
 Introduction:

The Weather App with JavaScript is a web application designed to provide real-time
weather information based on user-specified locations. Developed using HTML, CSS, and
JavaScript, this application offers a user-friendly interface for users to input their desired
location and receive accurate and visually appealing weather details.

HTML Structure:
The HTML structure of the Weather App consists of a head section containing metadata
and links to external stylesheets and scripts. The body of the HTML document is divided
into several sections, including the header with a search box, a section for displaying
location not found, and the main weather information section.

CSS Styling:
The CSS styling is aimed at creating a visually pleasing and responsive design. The
container is styled with rounded corners and a background color, providing an aesthetically
pleasing appearance. The search box, input field, and button are styled for a clean and
modern look. The weather information section is designed with appropriate margins and
text alignments for clarity.

JavaScript Functionality:
The JavaScript code is responsible for fetching weather data from the OpenWeatherMap
API based on the user's input. The asynchronous function checkWeather handles the API
request, processes the response, and updates the DOM accordingly. The weather details,
including temperature, description, humidity, and wind speed, are dynamically displayed.
Additionally, weather images change based on the current weather conditions, enhancing
the visual experience.

API Integration:
The application utilizes the OpenWeatherMap API to retrieve accurate and up-to-date
6
weather information. An API key is used for authentication, and the data received is parsed
to extract relevant details, such as temperature, weather description, humidity, and wind
speed.

User Interaction:
The user interacts with the application by entering a location in the search box and clicking
the search button. Upon submission, the JavaScript function is triggered, fetching and
displaying the weather information. In case of an invalid location, a user-friendly error
message is displayed.

7
 Hardware/Software Requirements:

Hardware Requirements:

Device:
Any modern computing device such as a desktop, laptop, or tablet.
Minimum recommended specifications: Dual-core processor, 4GB RAM.
Internet Connection:
A stable internet connection is required to fetch real-time weather data from the
OpenWeatherMap API.

Software Requirements:

Web Browser:
A modern web browser with support for HTML5, CSS3, and JavaScript is essential for
running the Weather App.
Recommended browsers include Google Chrome, Mozilla Firefox, Safari, or Microsoft
Edge.
Code Editor:
A code editor is required for viewing and editing HTML, CSS, and JavaScript files.
Examples include Visual Studio Code, Sublime Text, Atom, or any other preferred code
editor.
Web Server:
While not strictly necessary for local development, having a local web server can help
simulate a more realistic deployment environment.
Options include Apache, Nginx, or using tools like Live Server extension in Visual Studio
Code.
OpenWeatherMap API Key:
To fetch weather data, you need an API key from OpenWeatherMap.

8
Obtain a free API key by signing up on the OpenWeatherMap website.

Dependencies:

Font Awesome:
The Weather App uses Font Awesome for icons. Ensure a reliable internet connection to
fetch the Font Awesome library.

External Services:

OpenWeatherMap API:
The Weather App relies on the OpenWeatherMap API to fetch weather data. Ensure that
the API key is valid and has access to the necessary endpoints.

Deployment Considerations:

Hosting:
If deploying the Weather App online, a web hosting service that supports static HTML,
CSS, and JavaScript files is required.
Cross-Origin Resource Sharing (CORS):
Ensure that the server where the app is hosted supports Cross-Origin Resource Sharing,
especially if fetching data from a different domain.

9
 Concepts/Working Principle:

Overall, the Weather App demonstrates the integration of HTML for structure, CSS for
styling, and JavaScript for dynamic functionality, including API data fetching and DOM
manipulation. It provides users with real-time weather information based on their input.
HTML Structure:
The HTML file defines the structure of the web page.
It includes a form with an input box for the location and a button to trigger the weather
search. There are containers for displaying weather information, an error message for
location not found, and corresponding icons/images.

CSS Styling:
The CSS file styles the HTML elements for a visually appealing presentation.
Styles such as font sizes, colors, and layouts are defined to create a consistent and user-
friendly interface. Flexbox is used for layout management.

JavaScript Functionality:
The JavaScript file (script.js) handles the dynamic behavior of the Weather App.
It selects various HTML elements using document.querySelector and
document.getElementById. An asynchronous function checkWeather is defined to fetch
weather data from the OpenWeatherMap API based on the user's input.

OpenWeatherMap API:
The app uses the OpenWeatherMap API to retrieve weather data.
An API key is used for authentication (api_key variable).
The URL for the API call is constructed with the city input from the user.

Fetching Weather Data:

The fetch function is used to make an asynchronous call to the OpenWeatherMap API.
The response is then converted to JSON using the response.json() method.
10
Handling API Response:
The app checks if the API response contains an error (HTTP status code 404). If yes, it
displays an error message for "Location not found." If the response is successful, it extracts
relevant weather information and updates the DOM accordingly.

Updating DOM Elements:

The weather details such as temperature, description, humidity, wind speed, and weather
icon are updated in the HTML using the innerHTML property.
The display of elements is controlled using the style.display property based on whether the
location is found or not.

Event Handling:
The app listens for a click event on the search button. When the button is clicked, it triggers
the checkWeather function with the user-inputted location.

Weather Icons:
Different weather conditions are associated with specific icons.
The app dynamically updates the weather icon based on the retrieved weather data.

Error Handling:
The app handles errors gracefully, displaying a message and hiding the weather details if
the location is not found.

Responsive Design:
The app is designed to be responsive, adapting to different screen sizes.

FontAwesome:
FontAwesome is used to include scalable vector icons in the app, enhancing the visual
appeal
11
 APPROACH/METHODOLOGY/PROGRAMS
HTML
<!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, initial-scale=1.0">
<title>Weather App With JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="search-box">
<input type="text" placeholder="Enter your location" class="input-box">
<button class="fa-solid fa-magnifying-glass" id="searchBtn"></button>
</div>
</div>
<div class="location-not-found">
<h1>Sorry, Location not found!!!</h1>
<img src="/assets/404.png" alt="404 Error">
</div>
<div class="weather-body">
<img src="/assets/cloud.png" alt="Weather Image" class="weather-img">
<div class="weather-box">
<p class="temperature">0 ^°C</p>
<p class="description">light rain</p>
</div>
<div class="weather-details">
<div class="humidity">
<i class="fa-sharp fa-solid fa-droplet"></i>
<div class="text">
<span id="humidity">45%</span>
<p>Humidity</p>
</div>
</div>
<div class="wind">
<i class="fa-solid fa-wind"></i>
<div class="text">
<span id="wind-speed">12Km/H</span>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/595a890311.js" crossorigin="anonymous"></script>
</body>
12
</html>

CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
outline: none;
font-family: sans-serif;
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.container{
width: 400px;
height: min-content;
background-color: #fff;
border-radius: 12px;
padding: 28px;
}
.search-box{
width: 100%;
height: min-content;
display: flex;
justify-content: space-between;
align-items: center;
}
.search-box input{
width: 84%;
font-size: 20px;
text-transform: capitalize;
color: #000;
background-color: #e6f5fb;
padding: 12px 16px;
border-radius: 14px;
}
.search-box input::placeholder{
color: #000;
}
.search-box button{
width: 46px;
height: 46px;
background-color: #e6f5fb;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
13
}
.search-box button:hover{
color: #fff;
background-color: #ababab;
}
.weather-body{
justify-content: center;
align-items: center;
flex-direction: column;
margin-block: 20px;
display: none;
}
.weather-body img{
width: 60%;
}
.weather-box{
margin-block: 20px;
text-align: center;
}
.weather-box .temperature{
font-size: 40px;
font-weight: 800;
position: relative;
}
.weather-box .temperature sup{
font-size: 20px;
position: absolute;
font-weight: 600;
}
.weather-box .description{
font-size: 20px;
font-weight: 700;
text-transform: capitalize;
}
.weather-details{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.humidity, .wind{
display: flex;
align-items: center;
}
.humidity{
margin-left: 20px;
}
.wind{
margin-right: 20px;
}
.weather-details i{
font-size: 36px;
14
}
.weather-details .text{
margin-left: 10px;
font-size: 16px;
}
.text span{
font-size: 20px;
font-weight: 700;
}
.location-not-found{
margin-top: 20px;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
}
.location-not-found h1{
font-size: 20px;
color: #6b6b6b;
margin-block-end: 15px;
}
.location-not-found img{
width: 80%;
}

JAVA SCRIPT
const inputBox = document.querySelector('.input-box');
const searchBtn = document.getElementById('searchBtn');
const weather_img = document.querySelector('.weather-img');
const temperature = document.querySelector('.temperature');
const description = document.querySelector('.description');
const humidity = document.getElementById('humidity');
const wind_speed = document.getElementById('wind-speed');
const location_not_found = document.querySelector('.location-not-found');
const weather_body = document.querySelector('.weather-body');
async function checkWeather(city){
const api_key = "c4c7aa44a4979042f246d6a36e85ab1d";
const url = https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key};
const weather_data = await fetch(${url}).then(response => response.json());
if(weather_data.cod === 404){
location_not_found.style.display = "flex";
weather_body.style.display = "none";
console.log("error");
return;
}
console.log("run");
location_not_found.style.display = "none";
weather_body.style.display = "flex";
temperature.innerHTML = ${Math.round(weather_data.main.temp - 273.15)}°C;
description.innerHTML = ${weather_data.weather[0].description};
humidity.innerHTML = ${weather_data.main.humidity}%;
wind_speed.innerHTML = ${weather_data.wind.speed}Km/H;
15
 switch(weather_data.weather[0].main){
case 'Clouds':
weather_img.src = "/assets/cloud.png";
break;
case 'Clear':
weather_img.src = "/assets/clear.png";
break;
case 'Rain':
weather_img.src = "/assets/rain.png";
break;
case 'Mist':
weather_img.src = "/assets/mist.png";
break;
case 'Snow':
weather_img.src = "/assets/snow.png";
break;
}
console.log(weather_data);
}
searchBtn.addEventListener('click', ()=>{
checkWeather(inputBox.value);
});

16
 Flow chart

start
↓
User input
↓
Search button clicked
↓
Check weather function
↓
API key and URL setup
↓
Fetch weather data
↓
Check for error
↓
Display weather Details
↓
Set weather image
↓
End

17
EXPERIMENT RESULTS & ANALYSIS

Output:

18
 Conclusions:

The HTML structure is well-organized, with appropriate use of semantic tags. Meta tags for
character set and viewport settings are correctly implemented.External stylesheets and
scripts are linked properly.The CSS styling is clean and follows best practices.Responsive
design principles are applied, ensuring a visually appealing layout across devices.The
styling for the search box, weather display, and error messages is consistent and user-
friendly.The JavaScript code effectively interacts with the DOM elements using query
selectors.Asynchronous functions are used for fetching weather data from the
OpenWeatherMap API, enhancing the user experience.The code includes error handling to
manage situations where the location is not found (404 error) and appropriately displays an
error message.The application correctly interprets the received weather data and updates the
UI accordingly.Temperature, weather description, humidity, and wind speed are displayed
accurately.The application uses a switch statement to select the appropriate weather image
based on the main weather condition.The user interface is intuitive, featuring a search box
for location input and displaying weather details in a structured manner.

19
 References:

HTML and CSS:

HTML Introduction - MDN Web Docs
CSS Introduction - MDN Web Docs

JavaScript:
JavaScript Guide - MDN Web Docs
Asynchronous programming in JavaScript - MDN Web Docs

OpenWeatherMap API:
OpenWeatherMap API Documentation

Font Awesome Icons:

Font Awesome - Getting Started

Additional Resources:
Fetch API - MDN Web Docs
Understanding the DOM - MDN Web Docs
Responsive Web Design - MDN Web Docs

Code Quality and Best Practices:

JavaScript Best Practices
CSS Best Practices - MDN Web Docs

20