A REPORT
ON
DEVELOPING A DYNAMIC WEATHER APP WITH
WEATHER API INTEGRATION
Submitted by
Mr. ANUBHAV SINHA - 20231CBC0033
Under the guidance of,
Mrs. Pooja P P
Mr. Dinesh C
in partial fulfillment for the award of the degree
of
BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE AND ENGINEERING (BLOCKCHAIN)
AT
PRESIDENCY UNIVERSITY
BENGALURU
NOVEMBER 2025
PRESIDENCY UNIVERSITY
PRESIDENCY SCHOOL OF COMPUTER SCIENCE AND
ENGINEERING
CERTIFICATE
This is to certify that the report of CSE7000 – Internship on “DEVELOPING
A DYNAMIC WEATHER APP WITH WEATHER API INTEGRATION”
being submitted by ANUBHAV SINHA bearing roll number 20231CBC0033 in
partial fulfillment of the requirement for the award of the degree of Bachelor of
Technology in Computer Science and Engineering in BLOCKCHAIN is a bonafide
work carried out under our supervision.
Mrs. Pooja P P Mr. Dinesh C Dr. B Chandrashekar
Assistant Professor Assistant Professor Internship Coordinator
PSCS PSCS PSCS
Presidency University Presidency University Presidency University
Dr. S. Pravinth Raja Dr. Shakkeera L Dr. Duraipandian N
HoD Associate Dean Dean – PSCS & PSIS
PSCS PSCS Presidency University
Presidency University Presidency University
PRESIDENCY UNIVERSITY
PRESIDENCY SCHOOL OF COMPUTER SCIENCE AND
ENGINEERING
DECLARATION
I hereby declare that the work, which is being presented in the report entitled
DEVELOPING A DYNAMIC WEATHER APP WITH WEATHER API
INTEGRATION in partial fulfillment for the award of Degree of Bachelor of
Technology in Computer Science and Engineering in BLOCKCHAIN is a
record of my own investigations carried under the guidance of Mrs. POOJA P
P, Assistant Professor and Mr. DINESH C, Assistant Professor, Presidency
School of Computer Science and Engineering, Presidency University, Bengaluru.
I have not submitted the matter presented in this report anywhere for the award
of any other Degree.
Name: ANUBHAV SINHA
Roll No: 20231CBC0033
Signature of the Student:
ABSTRACT
This report summarizes the outcomes and experiences of a comprehensive web
development internship at Pinnacle Labs Pvt Ltd in Kolkata, spanning from June to
July 2025. This program was structured to transition interns from academic theory to
practical industry application by immersing us in a live project. The central
achievement of this internship was the successful conceptualization, development, and
demonstration of a dynamic, feature-rich weather website. Built from the ground up
using core technologies, the project's structure was established with semantic HTML5,
while all styling, responsiveness, and layout were handled by advanced CSS3,
including Flexbox and CSS Grid. The site's interactivity was powered by JavaScript
(ES6+), which was used to integrate a third-party weather API for real-time data,
manipulate the DOM to display that data, and manage user interactions. Key
functionalities included a user-friendly toggle for dark and light modes, implemented
using CSS variables, and a persistent "favourite locations" feature that utilized
localStorage to save user preferences. The development process closely mirrored a
professional workflow, beginning with requirement gathering and UI/UX design,
moving through iterative coding sprints with regular code reviews, and culminating in
an extensive testing phase to ensure cross-browser compatibility and responsiveness.
Throughout this intensive period, numerous technical challenges, such as managing
asynchronous API calls and handling errors gracefully, were encountered and
overcome. This, combined with working in a collaborative, deadline-driven
environment, significantly enhanced our problem-solving abilities, technical
proficiency in front-end development, and effective communication skills, fostering a
deep understanding of the complete software development lifecycle.
RESULTS
The primary result of the one-month internship at Pinnacle Labs Pvt Ltd was the
successful development, testing, and formal demonstration of the dynamic weather
application. The project was completed within the stipulated timeline and successfully
met all the core objectives defined during the planning phase.
The final deliverable was a fully functional, stand-alone web application that
demonstrated proficiency in front-end development technologies.
Key Tangible Outcomes:
• A Completed, Data-Driven Application: The final product was a working
application capable of making asynchronous API calls to a third-party weather
service, handling the JSON response, and dynamically populating the UI with
real-time data. This stands as the principal technical result of the internship.
• Successful Feature Implementation: All planned features were successfully
implemented and are fully functional:
o Theme Toggle: The dark/light mode switch works as intended, providing
a better user experience by saving the user's preference in localStorage.
o Favourite Locations: The system to "save" and "display" favourite cities
is fully operational, demonstrating the successful use of client-side storage
to personalize the user's experience.
• Fulfilment of Internship Objectives: The project directly fulfilled the
company's objective for interns to "develop a significant, feature-rich web
application independently."
• Successful Project Demonstration: As per the organizational requirements, the
project was submitted via a comprehensive video demonstration. This
demonstration walked through the application's live features, from searching for
a city to saving a favourite, and showcased the responsiveness and functionality
of the final product.
OUTPUT
Figure 1: Weather App in Light Mode
Figure 2: Weather App in Dark Mode
CHALLENGES AND SOLUTIONS
During the development of the weather application, several technical challenges were
encountered. These hurdles were instrumental in deepening my understanding of
modern web development and data management.
1. Challenge: Handling Asynchronous API Calls
• Problem: The core of the application relies on fetching data from a third-party
weather API. My initial attempts to get the data failed because the JavaScript
code would try to display the weather before the API had finished sending the
data back. This resulted in undefined variables and application errors.
• Solution: This challenge led to a deep dive into asynchronous JavaScript. I
learned and implemented async/await syntax. By declaring the fetching function
as async and using the await keyword on the fetch () call, I could effectively
"pause" the function, ensuring it waited for the data to be fully received from the
server before attempting to parse it and display it on the page.
2. Challenge: Graceful Error Handling
• Problem: When a user searched for a city that didn't exist (e.g., "asfg"), the API
would correctly return an HTTP 404 "Not Found" error. However, the fetch ()
APIs. catch () block only triggers on network failures, not on HTTP error codes
like 404. This meant my application would crash or show confusing, broken data
instead of a clear error message.
• Solution: I learned to manually check the response property of the response
object that fetch provides. I implemented if-else logic: if response was true, the
application would proceed to parse the JSON data. If it was false (indicating an
error like a 404), the application would throw a custom error, which my
try...catch block could then handle, displaying a user-friendly message like "City
not found" to the user.
CONCLUSION
The one-month web development internship at Pinnacle Labs Pvt Ltd was a
highly valuable and productive experience, successfully bridging the gap
between academic theory and practical, real-world application. The primary
objective of the program—to independently develop a significant web
application—was fully met through the successful design, development, and
demonstration of the dynamic weather application.
The process of building this application from the ground up provided a
comprehensive, hands-on understanding of the complete front-end
development lifecycle. Overcoming the technical challenges associated with
asynchronous API calls, API error handling, and client-side data persistence
with localStorage was instrumental in solidifying my problem-solving
abilities and technical proficiency. Furthermore, implementing user-centric
features like the dark/light mode toggle provided practical insight into
modern UI/UX design principles.
This internship has significantly enhanced my technical skill set in HTML,
CSS, and (most notably) advanced JavaScript. I leave this program with a
tangible project, increased confidence in my ability to tackle complex
coding tasks, and a solid practical foundation that will undoubtedly support
my future academic and professional endeavours in technology.
REFERENCES
This section lists the official documentation and technical resources that
were consulted during the development of the web application.
[1] Mozilla Developer Network, HTML: HyperText Markup Language,
MDN Web Docs, 2025. [Online]. Available: [Link]
US/docs/Web/HTML
[2] Mozilla Developer Network, CSS: Cascading Style Sheets, MDN Web
Docs, 2025. [Online]. Available: [Link]
US/docs/Web/CSS
[3] Mozilla Developer Network, JavaScript, MDN Web Docs, 2025.
[Online]. Available: [Link]
[4] Mozilla Developer Network, Using the Fetch API, MDN Web Docs,
2025. [Online]. Available: [Link]
US/docs/Web/API/Fetch_API/Using_Fetch
[5] Mozilla Developer Network, Web Storage API, MDN Web Docs, 2025.
[Online]. Available: [Link]
US/docs/Web/API/Web_Storage_API