A PROJECT ON

“WEATHER WEB APP”

BACHELOR
IN
COMPUTER APPLICATION
Submitted By
Ashish Pant
Enrollment No : SSJUPS2201070013
Under the Guidence of
Dr. Manoj Bisht
Assistant Professor
S.S.J University Almora, Uttarakhand

Department of Computer Science,

SOBAN SINGH JEENA UNIVERSITY, ALMORA

2020
SSJ UNIVERSITY ALMORA, UTTARAKHAND

DEPARTMENT OF COMPUTER SCIENCE

CERTIFICATE
This is to certify that the project titled “Weather App” is being submitted by
“Ashish Pant”, bearing enrolment number SSJUPS2201070013, in BCA final
year (6th Semester) is record of bona fide work carried by me under
guidance and supervision.

Date : Signature of Student

Ashish Pant
Enrollment No: SSJUPS2201070013
BCA 6th Sem

Signature of the Guide Signature of Coordinator

Name : Dr. MK Bisht Name : Dr . Parul Saxena

Designation : Assistant Professor Designation : Head of Department

Department of Computer Science Department of Computer Science

SSJ University Almora, Uttarakhand SSJ University Almora , Uttarakhand

 ACKNOWLEDGEMENT
I would like to express gratitude and appreciation to all those who
gave me possibility to complete this project . Special thanks to my
supervisor Assistant Professor Dr. M K Bisht (Department of
Computer Science, SSJ University Almora) who gave me
opportunity to do this project of Web Development on “Weather
Web App”. Who also help in completing my project. And I also
came to know about so many new things and I am really thankful
to them.
I would also like to acknowledge with appreciation the crucial role
of AI Tools, YouTube and Friends which help me a lot to complete
this project.
CONTENTS:
1. Introduction
2. Key Features
3. Objectives
4. Scope
5. Project Description
6. Some Glimpses of Project
7. Codes of The Program:
• HTML
• CSS
• JS
8. Summary
9. Conclusion
INTRODUCTION :

Weather app is a web-based application developed using core

web technologies: HTML, CSS, and JavaScript

HTML is used to create the structure and layout of the app. It

organizes content into various sections such as current weather
data, forecasts, and user input fields (like city search or
geolocation features). The HTML is designed to be semantically
correct for better accessibility and SEO.

CSS is applied to ensure a clean, responsive design. We use CSS

techniques like Flexbox and CSS Grid to manage the layout,
allowing the app to adapt smoothly to different screen sizes.
Media queries are employed to optimize the user interface for
mobile, tablet, and desktop devices. Additionally, CSS transitions
and animations improve the user experience, such as providing
smooth transitions between weather updates.

JavaScript handles the dynamic behavior of the app, allowing

users to interact with the application without reloading the page.
JavaScript is used to fetch data from the weather API via
asynchronous Fetch API requests. It also processes and updates
the weather information displayed on the app. The app can detect
the user's location using the Geolocation API, and weather details
are dynamically updated based on that location or a search input
from the user. JavaScript also controls interactive features like
search functionality, error handling, and data visualization.

An API (Application Programming Interface) is a set of rules and

protocols that allows different software systems to communicate
with each other. Here's a simple breakdown:

# What an API Does:

• Connects systems: It lets one piece of software (like a
website or app) request data or functionality from another
(like a server or database).
• Defines rules: It specifies how systems should interact —
what requests can be made, what data must be sent, and
what kind of responses to expect.

Using the OpenWeatherMap API , the app fetches current

weather data based on the city name entered by the user. It
then displays key details such as temperature, humidity,
weather conditions, and wind speed in a visually appealing
layout.

Together, these technologies create a smooth, interactive

experience for users to access up-to-date weather information
based on their location or city,
KEY FEATURES :
• Real-time weather updates by city name .
• Responsive and clean UI .
• Weather icons representing current conditions.
• Temperature displayed in Celsius or Fahrenheit.
• Basic error handling for invalid inputs.

#Key features of the Weather App :

1.Real-Time Temperature
Display The app fetches and displays the current temperature in
Celsius (°C) based on the city entered by the user. This data is
retrieved in real-time using a weather API such as
OpenWeatherMap.

2.City-Based Weather Search

Users can input any city name to instantly view the current
temperature for that location.

3. Responsive Design
The layout adjusts smoothly to different screen sizes, providing
a consistent experience across desktops, tablets, and
smartphones.
4. Clean and Simple User Interface :
Built with HTML and styled using CSS, the app features a
minimalist design that emphasizes readability and ease of use.

5. Error Handling :
If a user enters an invalid city name or if there's a problem
retrieving the data, the app gracefully shows an error message.

6. Lightweight and Fast :

With no external frameworks or libraries, the app loads quickly and
performs efficiently using just HTML, CSS, and JavaScript

OBJECTIVES OF THE WEATHER APP

PROJECT :

1. Develop a Fully Functional Web Application Using

Core Web Technologies :
Build a weather app using only HTML, CSS, and JavaScript, without
the use of frontend frameworks or libraries. This reinforces
fundamental web development skills and encourages a deep
understanding of how each layer—structure, style, and behavior—
interacts.
2. Integrate a Public Weather API for Real-Time
Temperature Data :
Learn how to connect to a third-party API (such as
OpenWeatherMap) to fetch real-time temperature data. Focus is
placed on retrieving and displaying temperature in Celsius only,
simplifying the UI and keeping the information clear and focused.

3. Enable Dynamic, City-Based Weather Search

Functionality :
Implement an input field where users can type the name of any city
and retrieve current temperature data specific to that location.
This goal improves understanding of form handling and dynamic
content updates in JavaScript.

4. Strengthen Frontend Programming Logic Without

Frameworks :
Focus on writing clean, maintainable JavaScript code that updates
the UI dynamically, processes user input, and handles API
responses—all without relying on libraries like jQuery or
frameworks like React.

9. Deploy the App to a Live Environment :

Host the app using services like GitHub Pages, Netlify, or Vercel to
learn the basics of deployment and allow others to access the
project online.
SCOPE OF THE WEATHER APP
PROJECT :
The scope of this Weather App project defines the
boundaries of its functionality, technology stack, and
intended user experience. It outlines what the application
is designed to achieve and what aspects are deliberately
kept simple to match the learning and development goals.

1.Basic Weather Functionality :

Real-time temperature display (in Celsius) for a
userentered city using a public API like OpenWeatherMap.

2. User Input Handling :

A text input field for city names, triggering weather data fetch and
display.

3. Responsive Web Design :

A clean and responsive layout using CSS, optimized for both
desktop and mobile devices.

4. Error Management :
Basic error messages for invalid city names, empty input, or API
failures.
5. Frontend-Only Architecture :
Entire app built with HTML, CSS, and Vanilla JavaScript, running
entirely in the browser with no backend.

6. Live API Integration :

Use of the fetch() API Integration API to make asynchronous
requests and dynamically update the UI.

PROJECT DESCRIPTION :

The Weather App is a lightweight, browser-based application that

allows users to check the current temperature of any city in real
time. Built entirely using HTML, CSS, and Vanilla JavaScript, this
app serves as a beginner-friendly project that demonstrates how to
create interactive, API-driven web applications without using any
external frameworks or libraries.

Upon entering a city name into the search field, the app sends a
request to a public weather API (such as OpenWeatherMap) to
retrieve the latest temperature data. The temperature is displayed
in Celsius, accompanied by a simple and responsive user interface
that adapts to both mobile and desktop screens.

This Weather App is an excellent foundational project for anyone

learning web development, and it lays the groundwork for future.
#About the API – OpenWeatherMap :
The Weather App uses the OpenWeatherMap API, a widely used
public service that provides real-time weather data from
thousands of locations across the globe.
How It Works:
• The API is accessed via HTTP requests using JavaScript's
fetch() method
• The app sends a request containing the city name and a
unique API key to the OpenWeatherMap endpoint.
• In response, the API returns a JSON object with various
weather details such as temperature, humidity, wind speed,
and more.
• In this app, only the current temperature (in Celsius) is
extracted and displayed.

Key Benefits:
• Free for basic use (limited requests per minute).
• Reliable and well-documented.

• Easy integration with frontend technologies using JavaScript

SOME GLIMPSES OF PROJECT :
• Before entering the city name :

• After entering the city name :

Codes of the program:
#HTML Program :
#CSS Program :
#JAVASCRIPT PROGRAM :
SUMMARY :
The Weather App is a simple yet functional web application designed to
display the current temperature (in Celsius) for any city entered by the user.
Built entirely with HTML, CSS, and JavaScript, this project emphasizes core
web development concepts, API integration, and responsive design for
beginners. Upon entering a city name, the app sends a request to the
OpenWeatherMap API and retrieves real-time weather data. It then extracts
and displays only the temperature in Celsius through a clean, minimalist
user interface that works seamlessly on both desktop and mobile devices.
The app includes basic features such as error handling for invalid inputs, a
responsive layout, and dynamic updates of content using JavaScript's
fetch() and DOM manipulation.

Key Technologies:
• HTML : For content structure.
• CSS : For styling and responsiveness.
• JavaScript : For interactivity and API communication.
• OpenWeatherMap API : For fetching live temperature data.

Key Learning Outcomes:

• Making API calls and handling JSON data.
• Updating the DOM dynamically based on user input.
• Writing clean, readable JavaScript without libraries or frameworks.
• Designing a responsive, user-friendly interface.
• Managing asynchronous operations and error handling.
CONCLUSION :
The Weather App project successfully demonstrates how core web
technologies—HTML, CSS, and JavaScript—can be used to create a fully
functional, interactive, and responsive application. By integrating the
OpenWeatherMap API, the app enables users to check the current
temperature in Celsius for any city in real time.
Through this project, essential frontend development skills are reinforced,
including API integration, asynchronous data handling, DOM
manipulation, and user interface design. The app also highlights the
importance of error handling and building applications that provide a
smooth user experience across different devices.
Although minimal in scope, the Weather App lays a solid foundation for
more advanced projects. It can be extended in the future with features like
unit conversion, additional weather metrics, geolocation support, and
search history. Overall, this project serves as a valuable learning
experience and a practical example of how to build real-world applications
using only foundational web tools.