lOMoAR cPSD| 15952010

lOMoAR cPSD| 15952

A PROJECT REPORT
ON
wheather App

For Partial Fulfillment of

Requirement of B.tech-cse
Session 2020-24

SUBMITTED BY:
Mohit Kumar (2018963)


 lOMoAR cPSD| 15952010

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

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

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.
 lOMoAR cPSD| 15952010

Advantages of the system

1. 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.

2. 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.

3. 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 the simplest way
possible.

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:-

1. 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. Not a good UI: The user interface of the previous systems are not that good.
 lOMoAR cPSD| 15952010

REQUIREMENT ANALYSIS

Functional Requirements
Functional requirements are the requirements that describe the functionalities of the

system elements. It may involve functional user requirements or functional system

requirements.

For example:

The operator shall be able to input the region to the system to view the desired weather parameters.

The system shall provide the following weather parameters: temperature, pressure, wind speed ,date /
time and humidity.

ANALYSIS STUDY

1. Lower Installation Charges:

We neither require any high-configuration systems for the smooth running of the server program nor do
we require any high-configuration systems for the smooth running of a client program. This application
is designed with ease to support any ordinary system having an internet connection.

2. Secured and Reliable:

The reliability of the system is to make sure the website does not go offline

3. Availability

The availability of the system is that the website will be active on the Internet and people

will be able to browse it.

 lOMoAR cPSD| 15952010

Feasibility Study

All projects are feasible if they have unlimited resources and infinite time. But the development of
software is plagued by the scarcity of resources and difficult delivery rates. It is necessary and prudent to
evaluate the feasibility of a project at the earliest possible time. The three considerations are involved in
the feasibility analysis.

Technical Feasibility
Technical feasibility centres on the existing mobile system (hardware, software…etc) and to what extent it can
support the proposed addition if the budget is a serious constraint, then the project is judged not feasible. The
technical feasibilities are an important role in our project because here we’re using HTML,CSS and JavaScript . It
requires Visual Studio Code(software) to develop this application. A easily available software and easy to use.

Economical Feasibility

This procedure is to determine the benefits and savings that are expected from a candidate system and
compare them with cost. If the benefits outweigh the cost then the decision is made to design and
implement the system. Otherwise, further justification or alterations in proposed systems have to be
made if it is having a chance of being approved. This is an ongoing effort that improves any feasibility
costs spent on this project because here we’re using open-source environments.

Operational Feasibility

People are inherently resistant to change and mobiles have been known to facilitate change. There is no
need of technical background is required to work on the application. All the information needed can be
seen with just one click
 lOMoAR cPSD| 15952010

USER REQUIREMENTS
The system specifications that a user may want are as follows:

1. It should be easy to understand

2. Must be interactive

3. Should provide a good user interface

4. Security should be maintained

Final Requirements

User Oriented: A system should be more user friendly not from the technical point of view

Better GUI: All the elements used in the system should be interactive in nature so that its look and feel
are not so boring that the user could get bored while using it.

Reliability: The system should be reliable and fast in processing

Data security: Access to the organizational data is not to be granted to any unknown person who is not
a part of the transaction

Confidentiality: Whatever the user is providing to the organization, the user has the full rights to
modify it and it could be not be accessed/modified without the user's permission

Better Management of information: All the information should be managed so that is the flow of the
information is to be in the right track

Presentation: The content that is to be presented to the user is to be presented in such a way that is self-
explanatory to the user and he/she is satisfied with the data.
 lOMoAR cPSD| 15952010

IMPLEMENTATION AND CODING

lOMoAR cPSD| 15952010
 lOMoAR cPSD| 15952010

OPERATING SYSTEM

Platform Independent: Since the project is done completely in HTML, CSS and JavaScript, it also
executes the main properties of the language. The application is platform-independent.

Languages used
HTML
The HyperText Markup Language or HTML is the standard markup language for documents
designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style
Sheets (CSS) and scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local storage and render the
documents into multimedia web pages. HTML describes the structure of a web page semantically and
originally included cues for the appearance of the document.

CSS

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look
and formatting of a document written in markup language. It provides an additional feature to HTML. It
is generally used with HTML to change the style of web pages and user interfaces. It can also be used
with any kind of XML documents including plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web
applications and user interfaces for many mobile applications.

JavaScript
JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as
a part of web pages, whose implementations allow client-side script to interact with the user and make
dynamic pages. It is an interpreted programming language with object-oriented capabilities.
 lOMoAR cPSD| 15952010

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly
because of the excitement being generated by Java. JavaScript made its first appearance in Netscape 2.0
in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in
Netscape, Internet Explorer, and other web browsers.

CODING
HTML
<!DOCTYPE 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</title>

<!-- Link Font -->

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>

<!-- Link Script -->

<script src="./script.js" defer></script>

<!-- Link CSS -->

<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- Wrapper -->
<div class="wrapper">
<h1>Weather App</h1>
<div class="tabContainer">
<p class="tab currentTab" data-userWeather>Your Weather</p>
<p class="tab" data-searchWeather>Search Weather</p>
</div>

<!-- Container -->

<div class="container">
<!-- Search Container -->
<form class="formContainer" data-searchForm>
<input
type="text"
placeholder="Search for city..."
data-searchInput
/>
<button class="btn" type="submit">
<img
src="./Images/search.png"
width="20"
height="20"
loading="lazy"
/>
 lOMoAR cPSD| 15952010

</button>
</form>

<!-- Grant Location Access -->

<div class="grantLocationContainer subContainer">
<img
src="./Images/location.png"
width="80"
height="80"
loading="lazy"
/>
<p>Grant Location Access</p>
<p>Allow access to get weather information</p>
<button class="btn" data-grantAccess>Grant Access</button>
</div>

<div class="subContainer loadingContainer">

<img src="./Images/loading.gif" width="150" height="150" />
<p>Loading</p>
</div>

<!-- Weather Info -->

<div class="userInfoContainer subContainer">
<div class="name">
<p data-cityName></p>
<img data-countryFlag />
</div>

<p data-weatherDesc></p>
<img data-weatherIcon />

<p data-temp></p>

<div class="parameterContainer">
<!-- Wind Speed -->
<div class="parameter">
<img src="Images/wind.png" alt="#" />
<p>windspeed</p>
<p class="parameterValue" data-windspeed></p>
</div>

<!-- Humidity -->

<div class="parameter">
<img src="Images/humidity.png" alt="#" />
<p>humidity</p>
<p class="parameterValue" data-humidity></p>
</div>

<!-- Wind Speed -->

<div class="parameter">
<img src="Images/cloud.png" alt="#" />
<p>clouds</p>
<p class="parameterValue" data-clouds></p>
</div>
</div>
</div>

<!-- Location Not Found -->

<div class="errorContainer subContainer">
<img src="./Images/not-found.png" data-errorImg />
<p data-errorText></p>
<button class="btn" data-errorButton>Retry Now</button>
</div>
</div>
</div>
</body>
</html>
 lOMoAR cPSD| 15952010

CSS
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Merriweather Sans", sans-serif;
}

:root {
--colorDark1: #112d4e;
--colorDark2: #3f72af;
--colorLight1: #dbe2ef;
--colorLight2: #f9f7f7;
}

.wrapper {
height: 100vh;
width: 100vw;
overflow-x: hidden;
color: var(--colorLight2);
background-color: #112d4e;
background-image: linear-gradient(160deg, #112d4e 0%, #3f72af 100%);
}

/* Heading and Tab Container

*/
h1 {
text-align: center;
text-transform: uppercase;
word-spacing: 2px;
letter-spacing: 1.75px;
margin-block: 2rem;
}

.tabContainer {
width: 90%;
max-width: 550px;
display: flex;
 lOMoAR cPSD| 15952010

justify-content: space-between;
margin: 0 auto;
margin-top: 2rem;
}

.tab {
cursor: pointer;
font-size: 0.875rem;
letter-spacing: 1.75px;
padding: 5px 8px;
text-transform: capitalize;
/* font-weight: 600; */
}

.tab.currentTab {
background-color: rgba(219, 226, 239, 0.5);
border-radius: 4px;
}

/* Tab Container Ends */

/* Main Container */
.container {
margin-block: 4rem;
}

.btn {
all: unset;
font-size: 0.85rem;
text-transform: uppercase;
padding: 10px 30px;
border-radius: 5px;
cursor: pointer;
background-color: var(--colorDark2);
}

.subContainer {
width: 90%;
max-width: 1000px;
margin: 0 auto;
 lOMoAR cPSD| 15952010

display: flex;
flex-direction: column;
align-items: center;
}

/* Form Container */
.formContainer {
width: 90%;
max-width: 550px;
margin: 0 auto;
margin-bottom: 2rem;
display: none;
align-items: center;
justify-content: center;
gap: 0 10px;
}

.formContainer.active {
display: flex;
}

.formContainer input {
all: unset;
width: calc(100% - 80px);
height: 40px;
padding: 0 20px;
background-color: rgba(247, 0, 0, 0.5);
border-radius: 10px;
}

.formContainer input:focus {
outline: 3px solid rgba(255, 255, 255, 0.7);
}

.formContainer input::placeholder {
color: rgba(255, 255, 255, 0.7);
}

.formContainer .btn {
width: 40px;
 lOMoAR cPSD| 15952010

height: 40px;
/* display: grid;
place-items: center; */
display: flex;
justify-content: center;
align-items: center;
padding: unset;
border-radius: 100%;
}

.form-container .btn img {

object-fit: contain;
}

/* Form Container End */

/* grant Location */
.grantLocationContainer {
display: none;
}

.grantLocationContainer.active {
display: flex;
}

.grantLocationContainer img {
margin-bottom: 1.5rem;
}

.grantLocationContainer p:first-of-type {
font-weight: 600;
font-size: 1.75rem;
text-align: center;
}

.grantLocationContainer p:last-of-type {
font-size: 0.75rem;
text-align: center;
margin-top: 0.75rem;
margin-bottom: 1.75rem;
 lOMoAR cPSD| 15952010

font-weight: 300;
letter-spacing: 0.75px;
}

/* Grant Location End */

.loadingContainer {
display: none;
}

.loadingContainer.active {
display: flex;
}

.loadingContainer p {
text-transform: uppercase;
}

.userInfoContainer {
display: none;
}

.userInfoContainer.active {
display: flex;
}

.userInfoContainer p {
font-size: 1.5rem;
font-weight: 200;
}

.userInfoContainer img {
height: 70px;
width: 70px;
}

.name {
display: flex;
align-items: center;
gap: 0 0.5rem;
 lOMoAR cPSD| 15952010

margin-bottom: 0.7rem;
}

.name img {
width: 30px;
height: 30px;
object-fit: contain;
}

.userInfoContainer p[data-temp] {
font-size: 2.25rem;
font-weight: 700;
}

.userInfoContainer p[data-weatherDesc] {
text-transform: capitalize;
font-size: 1.2rem;
}

.parameterContainer {
width: 90%;
display: flex;
justify-content: center;
gap: 10px 20px;
margin: 1.6rem auto 0;
flex-wrap: wrap;
}

.parameter {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
background-color: rgba(219, 226, 239, 0.5);
padding: 0.8rem;
border-radius: 5px;
width: 30%;
max-width: 200px;
gap: 5px 0;
}
 lOMoAR cPSD| 15952010

.parameter p {
font-size: 1rem;
font-size: 600;
text-transform: uppercase;
}

.parameter img {
width: 50px;
height: 50px;
object-fit: cover;
}

.parameterValue {
font-size: 0.8rem;
font-weight: 200;
}

.errorContainer {
display: none;
}

.errorContainer.active {
display: flex;
gap: 1rem 0;
}

.errorContainer p {
text-align: center;
}

.errorContainer img {
width: 100%;
max-width: 300px;
aspect-ratio: 1 / 1;
object-fit: cover;
}
 lOMoAR cPSD| 15952010

JavaScript
// API Key
const API_KEY = "168771779c71f3d64106d8a88376808a";

// Tab Switching
const userTab = document.querySelector("[data-userWeather]");
const searchTab = document.querySelector("[data-searchWeather]");
const searchForm = document.querySelector("[data-searchForm]");
const userInfoContainer = document.querySelector(".userInfoContainer");
const grantAccessContainer = document.querySelector(
".grantLocationContainer"
);
const loadingContainer = document.querySelector('.loadingContainer');

const notFound = document.querySelector('.errorContainer');

const errorBtn = document.querySelector('[data-errorButton]');
const errorText = document.querySelector('[data-errorText]');
const errorImage = document.querySelector('[data-errorImg]');

let currentTab = userTab;

currentTab.classList.add("currentTab");
getFromSessionStorage();
// console.log(userTab);
// console.log(searchTab);

function switchTab(newTab) {
notFound.classList.remove("active");
// check if newTab is already selected or not
if (currentTab != newTab) {
currentTab.classList.remove("currentTab");
currentTab = newTab;
currentTab.classList.add("currentTab");

// Check which TAb is Selected - search / your

// If Search Form not contains active class then add [Search Weather]
if (!searchForm.classList.contains("active")) {
searchForm.classList.add("active");
userInfoContainer.classList.remove("active");
grantAccessContainer.classList.remove("active");
}
// Your Weather
else {
searchForm.classList.remove("active");
userInfoContainer.classList.remove("active");
getFromSessionStorage();
}
}
}

userTab.addEventListener('click', () => {
switchTab(userTab);
 lOMoAR cPSD| 15952010

});

searchTab.addEventListener('click', () => {
switchTab(searchTab);
});

function getFromSessionStorage() {
const localCoordinates = sessionStorage.getItem("userCoordinates");
// console.log(localCoordinates);

// Local Coordinates Not present - Grant Access Container

if (!localCoordinates) {
grantAccessContainer.classList.add('active');
}
else {
const coordinates = JSON.parse(localCoordinates);
fetchWeatherInfo(coordinates);
}
}

async function fetchWeatherInfo(coordinates) {

const { lat, lon } = coordinates;
// Remove Active Class from the Grant access Container
grantAccessContainer.classList.remove('active');

// loading
loadingContainer.classList.add('active');

// try - catch Block

try {
const response = await
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&u
nits=metric`);

const data = await response.json();

if (!data.sys) {
throw data;
}
loadingContainer.classList.remove('active');
userInfoContainer.classList.add('active');
renderWeatherInfo(data);
}
catch (err) {
loadingContainer.classList.remove('active');
notFound.classList.add('active');
errorImage.style.display = 'none';
errorText.innerText = `Error: ${err?.message}`;
errorBtn.style.display = 'block';
errorBtn.addEventListener("click", fetchWeatherInfo);
}
}
 lOMoAR cPSD| 15952010

// Render Weather On UI
function renderWeatherInfo(weatherInfo) {
const cityName = document.querySelector('[data-cityName]');
const countryFlag = document.querySelector('[data-countryFlag]');
const description = document.querySelector('[data-weatherDesc]');
const weatherIcon = document.querySelector('[data-weatherIcon]');
const temp = document.querySelector('[data-temp]');
const windspeed = document.querySelector('[data-windspeed]');
const humidity = document.querySelector('[data-humidity]');
const clouds = document.querySelector('[data-clouds]');

cityName.innerText = weatherInfo?.name;
countryFlag.src = `https://flagcdn.com/144x108/${weatherInfo?.sys?.country.toLowerCase()}.png`;
description.innerText = weatherInfo?.weather?.[0]?.description;
weatherIcon.src = `http://openweathermap.org/img/w/${weatherInfo?.weather?.[0]?.icon}.png`;
temp.innerText = `${weatherInfo?.main?.temp.toFixed(2)} °C`;
windspeed.innerText = `${weatherInfo?.wind?.speed.toFixed(2)} m/s`;
humidity.innerText = `${weatherInfo?.main?.humidity.toFixed(2)} %`;
clouds.innerText = `${weatherInfo?.clouds?.all.toFixed(2)} %`;
}

const grantAccessButton = document.querySelector('[data-grantAccess]');

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
grantAccessButton.style.display = 'none';
}
}

function showPosition(position) {
const userCoordinates = {
lat: position.coords.latitude,
lon: position.coords.longitude
};
sessionStorage.setItem("userCoordinates", JSON.stringify(userCoordinates));
fetchWeatherInfo(userCoordinates);
}

grantAccessButton.addEventListener('click', getLocation);

// Search for weather

const searchInput = document.querySelector('[data-searchInput]');

searchForm.addEventListener('submit', (e) => {

e.preventDefault();
if (searchInput.value === "") {
return;
}
// console.log(searchInput.value);
 lOMoAR cPSD| 15952010

fetchSearchWeatherInfo(searchInput.value);
searchInput.value = "";
});

async function fetchSearchWeatherInfo(city) {

loadingContainer.classList.add("active");
userInfoContainer.classList.remove("active");
grantAccessContainer.classList.remove("active");
notFound.classList.remove("active");
try {
const response = await
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`);

const data = await response.json();

if (!data.sys) {
throw data;
}
loadingContainer.classList.remove('active');
userInfoContainer.classList.add('active');
renderWeatherInfo(data);
}
catch (err) {
loadingContainer.classList.remove('active');
userInfoContainer.classList.remove('active');
notFound.classList.add('active');
errorText.innerText = `${err?.message}`;
errorBtn.style.display = "none";
}
}
 lOMoAR cPSD| 15952010

CONCLUSION

CONCLUSION

Now a day’s there is a big demand of different types of applications, which is because IT has become the
main part of our New World. There is a big need of different applications. People want application for
every specific task from work to entertainment. We have developed the application “Weather
WebApp” which works easy on any given web browser.

The application has been tested and found to be working as per the given criteria. It can be safely
concluded that the application possesses a highly efficient UI system and is working properly and
meeting to all the requirements of the user. The application gives the user maximum flexibility in the
types of touch and other device movements.

FUTURE SCOPE

Every project whether large or small has some limitations no matter how diligently
developed. In some cases, limitations are small while in other cases they may be broad also. The new
system has got some limitations. Major areas where modifications can be done are as follows:

 Our system does not have weather information for foreign countries or cities.

 There is no provision for complaint handling so further it can be added.