Mini Project Report(KCS-354)

on
WEATHER WEBSITE
Submitted in partial fulfillment for award of
BACHELOR OF TECHNOLOGY
Degree
In
COMPUTER SCIENCE & ENGINEERING
(INTERNET OF THINGS)

2023-24

Under the Guidance of: Submitted By:

Ms. Vaishali Rastogi Aryamann Khare(024)

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

RAJ KUMAR GOEL INSTITUTE OF TECHNOLOGY
DELHI-MEERUT ROAD, GHAZIABAD

Affiliated to Dr. A.P.J. Abdul Kalam Technical University, Lucknow

 TABLE OF CONTENTS

CHAPTER NO. TITLE PAGE NO.

1. INTRODUCTION 1

1.1 INTRODUCTION TO WEATHER WEBSITE 1

1.2 METHODOLOGY USED 1
1.3 TECHNOLOGIES USED 2
1.3.1. JAVASCRIPT 2
1.3.2. JSON 2
1.3.3. ADOBE AFTER EFFECTS 2
1.3.4 WEATHER API 3

2. HARDWARE AND SOFTWARE REQUIREMENTS 4

2.1 SOFTWARE REQUIREMENTS 4

2.2 HARDWARE REQUIREMENTS 4

3. APPLICATION ARCHITECTURE 5

4. PROJECT MODULES DESIGN 7

4.1 HTML MODULES 7

4.2 CSS MODULES 9
4.3 JAVASCRIPT MODULES 12

5. PROJECT SNAPSHOT 15

6. LIMITATION 17

7. FUTURE SCOPE 18

8. REFERENCES 19
 LIST OF FIGURES

CHAPTER NO. FIGURE NO. TITLE PAGE NO.

4 Figure 4.1 Code for head 7

4 Figure 4.2 Code for header 7
4 Figure 4.3 Code for main 8
4 Figure 4.4 Code for error page 9
4 Figure 4.5 Css for Universal Values 9
4 Figure 4.6 Css for Header 10
4 Figure 4.7 Css for Main 11
4 Figure 4.8 Css for Details 12
4 Figure 4.9 Css for Error 12
4 Figure 4.10 Js for API 13
4 Figure 4.11 Js for Fetch 13
4 Figure 4.12 Js for using JSON 14
5 Figure 5.1 Start of the project 15
5 Figure 5.2 Searching a city 15
5 Figure 5.3 Searching another city 16
5 Figure 5.4 Searching unknown city 16
 CHAPTER 1

INTRODUCTION

1.1 Introduction to Weather Website

In our simple weather website you can find the most up-to-date and accurate information about the
weather conditions in your area and beyond. Our website is designed to provide you with easy
access to real-time data on temperature, humidity, and various other weather related data.

Our user-friendly interface makes it easy to search for weather information by location, and our
maps and visualizations help you quickly understand the current and forecasted weather patterns.
Additionally, our website offers a range of tools and resources to help you plan for severe weather
events and stay safe during extreme conditions.

1.2 Methodology Used

In creating a weather website, we intitially started by getting the hang of all the technologies. We
started with html. We used html to create the general structure of our website. Initially we put
dummy values so as to test our project.

Then we started writing the designing portion of the wesite. We spended a significant amount of
time to storyboard and come up with multiple designs. Finally we chose a minimalistic type of
design. We used plain css to bring design to our project.

Finally it was time to make our website dynamic. We achieved this using Javascript using which we
were able to mainpulate DOM and now we were ready to start working with API's

We used OpenWeatherAPI to get real time data of weather. It allowed us to be able to get data such
as temperature, pressure, etc to be stored in json form and we are able to use json to manipulate the
data further on.

[1]
1.3 Technologies Used

1.3.1 Javascript

Javascript is a lightweight, interpreted programming lannguage. It is designed for creating netword-

centric applications. It is complimentary to and integrated with Java. Javascript is very easy to
implement because it is intrgrated with HTML. It is open and cross-platform. Once you have learnd
Javascript, it helps you in developing great front-end as well as back-end softwares using different
Javascript based frameworks like jQuery, NodeJS etc.

Javascript is used to create interactive websites. It is mainly used for:

 Client-side validation

 Displaying pop-up windows and dialog boxes

1.3.2 Json

JSON (JavaScript Object Notation) is a lightweight format that is used for data interchanging. It is
based on a subset of JavaScript language. It has been the preferred format because it is much more
lightweight.

JSON is built on two structures:

 A collection of name/value pairs. In various languages, this is realized as an object, record,

structure, dictionary, hash table, keyed list, or associative array.

 An ordered list of values. In most languages, this is realized as an array, vector, list, or
sequence.

1.3.3 Adobe After Effects

Adobe After Effects is a digital visual effect, motion graphics, and compositing application
developed by Adobe Systems and used in the post-production process of film making and television
production.

After Effects has extensive plug-in support; a broad range of third-party plug-ins are available. A

[2]
variety of plug-in styles exist, such as particle systems for realistic effects for rain, snow, fire, etc.

With or without third-party plug-ins, After Effects can render 3D effects. Some of these 3D plug-ins
use basic 2D layers from After Effects. In addition to 3D effects, there are plug-ins for making
video look like film or cartoons; simulating fire, smoke, or water; particle systems; slow motion;
creating animated charts, graphs, and other data visualization; calculating the 3D movement of a
camera in a 2D video shot; eliminating flicker, noise, or rigging lines; translating timelines from
FCP or Avid; adding high-end color correction; and other workflow improvements and visual
effects.

1.3.4 Weather API

Weather APIs are Application Programming Interfaces that allow you to connect to large databases
of weather forecast and historical information. The weather API provides enough weather data for
basic weather information (eg current weather, forecast, UV index data, and historical weather
information). You can use geolocation and names to get a city location.

[3]
 CHAPTER 2

HARDWARE AND SOFTWARE REQUIREMENT

Software Requirements:

Opreating System Windows 11, Windows 10, Linux

Language HTML, CSS, JS, Runtime Environment
Browser Opera, Chrome, Edge, Brave etc
Web Server Microsoft Edge
Scripting Language Enable JSP (Javs Server Pages)

Hardware Requirements:

Processor Pentium 3 630 MHz

RAM 128 Mb
Hard Disc 20 GB
Monitor 15” Colour Monitor
Keyboard 122 Keys

[4]
 CHAPTER 3

APPLICATION ARCHITECTURE
In order to make a weather website we need to work on main 2 aspects of our project. These are as
follows

 Front-End

Front-End is the user side of our application. It is that region of our website using which the
user interacts with our website. We have make this using Html, Css, Javascript. Html file gives us
the general structure of our webpage. Css elements is used to style our website and finally we use
Javascript to add scripts to make our website more interactive.

 Back-End

The back end of our website uses OpenWeatherApi's one of the weather API to get the
relevent Weather data and the we use vanilla Javascript to manipulate the JSON in order to display
the weather details.

In addition to these main components, some other key considerations when designing the
application architecture for a weather website include:

 API Integration: Choosing a reliable and accurate weather API to integrate into the
application. Some popular options include OpenWeatherMap, Weather Underground, and
AccuWeather.

 Security: Ensuring that the website is secure and that user data is protected from potential
vulnerabilities or attacks.

 Scalability: Planning for future growth of the website, including the ability to handle
increased traffic and additional features.

[5]
 Performance: Optimizing the website to ensure fast load times and smooth user experience,
including optimizing images, compressing resources, and caching frequently accessed data.

 Mobile Optimization: Designing the website to be responsive and accessible on mobile

devices, which are increasingly the primary way users access the internet.

[6]

CHAPTER 4
 PROJECT MODULES DESIGN

4.1 Html Modules

Firstly we start with the main HTML portion.

Initially we make the head portion in which we add the title of our project and we link all the scripts
and design files.

Fig 4.1 Code for head

Now we start off with the main body of our website. Initially we create the header in which we only
try to focus on two elements. One is the logo of our website and other of the search bar in which
we will search the city whose data we have to find.

Fig 4.2 Code for header

 [7]

We now start by working on the main region of our website which will display the main weather
data of our project.

Fig 4.3 Code for main

Now the only region that remains is our error page which will display the error screen if our
searched city is not found.
 [8]

Fig 4.4 Code for error page

4.2 Css Modules

Now we start to design the page so that the page looks nice to navigate.

We start to declare some universal font and text colours.

Fig 4.5 Css for Universal Values

Now we start by designing the header in which we also place the logo and search bar to its position
.We also place the search icon to its correct place.

[9]
 Fig 4.6 Css for Header

Now we style the main region which displays the temperature of the city along with giving the
general idea of our weather conditions.

[10]
 Fig 4.7 Css for Main

After we have designed the main portion its time to also design the details region of our website.

[11]
 Fig 4.8 Css for Details

At last we simply design the error page to look better.

Fig 4.9 Css for Error

4.3 Javascript Modules

Now we start to make the Javascript in order to add the dynamic nature to our website.

[12]
We make the variabes for the API key of our OpenWeatherAPI and our URL.

Fig 4.10 Js for API

Now we make the fetch function to get the weather data.

Fig 4.11 Js for Fetch

[13]
Finally we make the main region of our Javascript in which using the JSON data that we get from
our API.

Fig 4.12 Js for using JSON

[14]
 CHAPTER 5

PROJECT SNAPSHOT

Fig 5.1 Start of the project

Fig 5.2 Searching a city

[15]
Fig 5.3 Saerching another city

Fig 5.4 Searching unknown city

[16]
 CHAPTER 6

LIMITATION

Our simple weather website can provide basic information about the current weather conditions.
However, there are some limitations to our website. Some of these limitations are:-

 Limited information: Simple weather websites may provide only basic information about
temperature, humidity, wind speed,etc and may not include more detailed data such as air
quality or UV index.

 Lack of customization: Simple weather websites may not provide users with the ability to
customize their weather information according to their specific needs or preferences.

 Limited functionality: Simple weather websites may not offer additional features, such as
weather radar or alerts, that more advanced weather websites may provide.

 Lack of accuracy: Simple weather websites may not always provide the most accurate
weather information, especially during severe weather events or in areas with complex
weather patterns.

 Limited location coverage: Simple weather websites may only cover a limited number of
locations, which can be a limitation for users looking for weather information about less
popular or remote locations.

Overall, while a simple weather website can be a useful tool for obtaining basic weather
information, it may not be sufficient for users who require more detailed or customized weather
information, or for those in areas with complex weather patterns or severe weather events.

[17]

CHAPTER 7
 FUTURE SCOPE

While our simple weather website may have limitations in terms of location coverage, information
provided, and functionality, there is still a significant future scope for such websites. Some potential
areas of growth and development include:

 Customization options: Simple weather websites could expand their customization options
to allow users to select the types of weather information they want to see, such as air quality,
UV index, or pollen levels.

 Integration with smart devices: As smart devices become more popular, simple weather
websites could expand their functionality to provide users with real-time weather updates
and alerts on their devices.

 Improved accuracy: With advancements in weather forecasting technology and data

analysis, simple weather websites could improve their accuracy, especially in areas with
complex weather patterns or severe weather events.

 Expansion of location coverage: Simple weather websites could expand their location
coverage to include more remote or less popular locations, making them more useful for
users in those areas.

 Integration with other services: Simple weather websites could integrate with other services
such as travel, outdoor activities, or event planning, to provide users with weather
information that is relevant to their plans and activities.

Overall, while simple weather websites may have limitations, there is still significant potential for
growth and development in the future, as technology continues to advance and user needs evolve.

[18]

CHAPTER 8

REFERENCES
In order to make this peoject of ours, we had taken references from a lot of palces such as

 We used W3 schools documentation for html.

https://www.w3schools.com/html/

 We used W3 schools documentation for css.

https://www.w3schools.com/css/

 We used devdocs documentation for JavaScript.

https://devdocs.io/javascript/

 For learning how API's work, we took reference from from freeCodeCamp's youtube video
about API's.
https://youtu.be/GZvSYJDk-us

 For getting general idea for both HTML and CSS we used SuperSimpleDev's video on
HTML and CSS.
https://youtu.be/G3e-cpL7ofc

[19]