CHAPTER 1

INTRODUCTION

1.1 Web Development

Web development refers to the creating, building, and maintaining of websites. It

includes aspects such as web design, web publishing, web programming, and database
management. It is the creation of an application that works over the internet i.e.
websites.
Among Web professionals, "Web development" usually refers to the main non-design
aspects of building Web sites: writing markup and coding. Web development may use
content management systems (CMS) to make content changes easier and available
with basic technical skills.
For larger organizations and businesses, Web development teams can consist of
hundreds of people (Web developers) and follow standard methods like Agile
methodologies while developing Web sites. Smaller organizations may only require a
single permanent or contracting developer, or secondary assignment to related job
positions such as a graphic designer or information systems technician. Web
development may be a collaborative effort between departments rather than the
domain of a designated department. There are three kinds of Web developer
specialization: front-end developer, back-end developer, and full-stack developer.
Front-end developers are responsible for behavior and visuals that run in the user
browser, while back-end developers deal with the servers. Since the
commercialization of the Web, the industry has boomed and has become one of the
most used technologies ever.
1.2 HTTP

The Hypertext Transfer Protocol (HTTP) is an application layer protocol in the

Internet protocol suite model for distributed, collaborative, hypermedia information
systems. HTTP is the foundation of data communication for the World Wide Web,
where hypertext documents include hyperlinks to other resources that the user can
easily access, for example by a mouse click or by tapping the screen in a web
browser.

Development of HTTP was initiated by Tim Berners-Lee at CERN in 1989 and

summarized in a simple document describing the behavior of a client and a server
using the first HTTP version, named 0.9. That version was subsequently developed,
eventually becoming the public 1.0.

Development of early HTTP Requests for Comments (RFCs) started a few years later
in a coordinated effort by the Internet Engineering Task Force (IETF) and the World
Wide Web Consortium (W3C), with work later moving to the IETF.

HTTP/1 was finalized and fully documented (as version 1.0) in 1996. It evolved (as
version 1.1) in 1997 and then its specifications were updated in 1999, 2014, and 2022.

Its secure variant named HTTPS is used by more than 85% of websites. HTTP/2,
published in 2015, provides a more efficient expression of HTTP's semantics "on the
wire". As of April 2023, it is used by 39% of websites and supported by almost all
web browsers (over 97% of users). It is also supported by major web servers over
Transport Layer Security (TLS) using an Application-Layer Protocol Negotiation
(ALPN) extension where TLS 1.2 or newer is required.

HTTP/3, the successor to HTTP/2, was published in 2022. It is now used on over 27%
of websites and is supported by most web browsers, i.e. (at least partially) supported
by 95% of web browsers. HTTP/3 uses QUIC instead of TCP for the underlying
transport protocol. Like HTTP/2, it does not obsolesce previous major versions of the
protocol. Support for HTTP/3 was added to Cloudflare and Google Chrome first, and
is also enabled in Firefox.
 CHAPTER 2

PROJECT PLANNING

2.1 OUTLINE OF PROJECT

Throughout the human history, people were keen to know about the weather, its
parameters and its impacts on their daily lives. By the virtue the technological
advancement, in this era, the information about the weather lies in our hands (through
mobile phones or websites). We can now make ourselves aware of not only our
location’s temperature, humidity etc. but also any part of the world. In this project, we
will learn how to make a weather application using pure JavaScript. We will also be
familiarizing ourselves with the JSON extraction during this process using open
weather API.
As a web developer, grabbing data from API’s is something you are going to do often.
Fetching weather data is a perfect way to get your feet wet. In this project we are
going to use the browsers built in fetch with JavaScript to grab data from Open
Weather Map's API.

2.2 LITERATURE REVIEW

JavaScript ,often abbreviated as JS, is a high-level, interpreted scripting

language that conforms to the ECMA Script specification. JavaScript has curly-
bracket syntax, dynamic typing, prototype-based object- orientation, and first- class
functions.
Alongside HTML and CSS, JavaScript is one of the core technologies of the World
Wide Web.JavaScript enables interactive web pages and is an essential part of web
applications. The vast majority of websites use it, and major web browsers have a
dedicated JavaScript engine to execute it.
As a multi-paradigm language, JavaScript supports event-driven, functional, and
imperative (including object-oriented and prototype- based) programming styles. It
has APIs for working with text, arrays, dates, regular expressions, and the DOM, but
the language itself does not include any I/O, such as networking, storage, or graphics
facilities. It relies upon the host environment in which it is embedded to provide these
features.
Initially only implemented client-side in web browsers, JavaScript engines are now
embedded in many other types of host software, including server-side in web servers
and databases, and in non-web programs such as word processors and PDF software,
and in runtime environments that make JavaScript available for writing mobile and
desktop applications, including desktop widgets.

2.3 PROBLEM STATEMENT

To make a web page using HTML, CSS& JAVA SCRIPT and connect the web page
application to a API from open weather API and display the data.

2.4 OBJECTIVE

We need to first make the outline of the project using HTML and CSS to create the
front end of the web page and then we will use JavaScript to make our robust, well
defined Weather API using the open weather API and display the data.
 CHAPTER 3

AIM AND SCOPE

3.1 REQUIREMENTS

3.1.1 Hardware Requirements

1. Any processor with minimum GPU Memory

3.1.2 Software Requirements

1. Braketts Editor
2. Open Weather API
3. Web Browser like Chrome

3.2 ROLE OF BRAKETTS

Brackets is a source code editor with a primary focus on web development. Created
by Adobe Systems, it is free and open-source software licensed under the MIT
License, and is currently maintained on GitHub by Adobe and other open- source
developers. It is written in JavaScript, HTML and CSS. Brackets is cross- platform,
available for macOS, Windows, and most Linux distributions. The main purpose of
brackets is its live HTML, CSS and JavaScript editing functionality.
On November 4, 2014, Adobe announced the first (1.0) release of Brackets. The
update introduced new features such as custom shortcut key combinations and more
accurate JavaScript hinting. Brackets has a major focus on development in JavaScript,
CSS and HTML. With release of version 1.0, Adobe announced a feature that extracts
design information from a PSD file for convenience of coding in CSS. As of June 28,
2016, the feature is officially discontinued, due to low usage. However, Extract is still
available via Photoshop and Dreamweaver, both of which are part of their paid
service, Adobe Creative Cloud. The latest version release of Brackets is 1.14.

3.3 LANGUAGES USED

We used the main basic languages of web that are the most used for any web
development project.

3.3.1 HTML

Hypertext Markup Language (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.

3.3.2 CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the
presentation of a document written in a markup language like HTML. CSS is a
cornerstone technology of the World Wide Web, alongside HTML and
JavaScript.CSS is designed to enable the separation of presentation and content,
including layout, colors, and fonts. This separation can improve content accessibility,
provide more flexibility and control in the specification of presentation
characteristics, enable multiple web pages to share formatting by specifying the
relevant CSS in a separate .CSS file, and reduce complexity and repetition in the
structural content

3.3.1 Javascript

JavaScript often abbreviated as JS, is a high-level, interpreted scripting language that

conforms to the ECMA Script specification. JavaScript has curly- bracket syntax,
dynamic typing, prototype-based object- orientation, and first- class functions.
Alongside HTML and CSS, JavaScript is one of the core technologies of the World
Wide Web. JavaScript enables interactive web pages and is an essential part of web
applications. The vast majority of websites use it, and major web browsers have a
dedicated JavaScript engine to execute it.

3.4 OPEN WEATHER API

Open Weather Map is an online service that provides weather data, including current
weather data, forecasts, and historical data to the developers of web services and
mobile applications. For data sources, it utilizes meteorological broadcast services,
raw data from airport weather stations, raw data from radar stations, and raw data
from other official weather stations. All data is processed by Open Weather Map in a
way that it attempts to provide accurate online weather forecast data and weather
maps, such as those for clouds or precipitation. Beyond that, the service is focused on
the social aspect by involving weather station owners in connecting to the service and
thereby increasing weather data accuracy. The ideology is inspired by Open Street
Map and Wikipedia that make information free and available for everybody. It uses
Open Street Map for display of weather maps.
Open Weather Map provides an API with JSON, XML and HTML endpoints and a
limited free usage tier. Making more than 60 calls per minute requires a paid
subscription starting at USD 40 per month.
Access to historical data requires a subscription starting at US$150 per month.

Users can request current weather information, extended forecasts and graphical maps
(showing cloud cover, wind speed, pressure and precipitation).

3.4.1 Current Weather Data

Current data is refreshed every ten minutes; it can be searched by city or by
geographic coordinates on Earth.

3.4.2 Forecast
Weather forecasts can be searched by city or by coordinates. Three- hourly forecasts
are available for up to 5 days, while daily forecasts are available for up to 16 days.

3.4.3 Searching
The Open Weather Map geocoding system allows users to select cities by name,
country, zip-code or geographic coordinates. It is possible to search by part of city
name. To make searching result more accurate city name and country should be
divided by comma.

3.4.4 Maps
Open Weather Map service provides lots of weather maps including Precipitation,
Clouds, Pressure, Temperature, Wind and many others. Maps can be connected to
mobile applications and web sites. Weather maps can be connected as layers to the
wide range of maps including Direct tiles, WMS, Open Layers, Leaflet, Google maps,
and Yandex maps.
 CHAPTER 4

METHODS & MATERIALS USED

4.1 DESIGNING OF TEXT EDITOR

The project will stick to the basic functionalities expected of a simple text editor –
which includes the ability to – write something on the notepad, save it and open and
modify it whenever required. For the purpose of this tutorial we will design the
braketts editor with html and css code to create the front end part of the web page.

Fig 4.1 Outline of the Web Page

At this point we've already looked at CSS fundamentals, how to style text, and how to
style and manipulate the boxes that your content sits inside. Now it's time to look at how
to place your boxes in the right place in relation to the viewport, and one another. We
have covered the necessary prerequisites so you can now dive deep into CSS layout,
looking at different display settings, traditional layout methods involving float and
positioning, and new fangled layout tools like flexbox.

Fig 4.2 Styling of the web page

This module looks at styling boxes, one of the fundamental steps towards laying out a
web page. In this module we recap the box model, then look at controlling box layouts by
setting margins, borders, and padding, custom background colors, images and other
features, and fancy features such as drop shadows and filters on boxes.
API keys aren't as secure as authentication tokens but they identify the application or
project that's calling an API. They are generated on the project making the call, and you
can restrict their use to an environment such as an IP address range, or an Android or iOS
app.

By identifying the calling project, you can use API keys to associate usage information
with that project. API keys allow the Extensible Service Proxy (ESP) to reject calls from
projects that haven't been granted access or enabled in the API.

1. Weather data is open: current weather, forecasts, maps with precipitations, wind,
clouds, data from weather stations are available through APIs, maps and other products.
2. Coverage is global: weather data is available for any geographic location.
3. Weather model: own model of weather forecast calculation, WRF model for
regions
+ global models.
4. Advanced technologies for a competitive price: due to Big Data technology cost
of production and support are cheap, a price for a user is affordable.
 CONNECTION OF API:
Since we use open weather API ,we need to sign up on open weather map website ie,
www.openweathermap.org/api

And click on the current weather data option

Fig 4.4 OPEN WEATHER API WEBSITE

After opening the website enter your sign up details to log in.
 Fig 4.5 SIGN UP PAGE
Api recommend making calls to the API no more than one time every 10 minutes for one
location (city / coordinates / zip-code). This is due to the fact that weather data in our
system is updated no more than one time every 10 minutes.
The server name is api.openweathermap.org. Please, never use the IP address of the
server.
Better call API by city ID instead of a city name, city coordinates or zip code to get a
precise result.
Please, mind that Free and Startup accounts have limited service availability. If you do
not receive a response from the API, please, wait at least for 10 min and then repeat your
request. We also recommend you to store your previous request.

After you log in go to API keys on the tabular column and then you will find your
respective API key.

Fig 4.6 API KEY

A confirmation email with your API key and technical instructions will be sent to your
email address.
Please note that it takes up to 2 hour to activate your API key.Please use your unique API
key {appid=} in each API call to authorize a request from your application and process it
appropriately.
Demand for certain products and services varies greatly depending on the weather. For
example, users are much more likely to search for information on amusement parks on a
hot, sunny day than if it's cold and raining. An amusement park company may want to
increase their bids when the weather is nice, but doing so every day would require a lot of
manual work. With AdWords scripts, however, it's possible to programmatically fetch
weather information and adjust bids in a matter of minutes. This script uses Google
Spreadsheets to store the list of campaigns and their associated locations.
A call to the OpenWeatherMap API is made for each location and weather conditions are
calculated using some basic rules. If a rule evaluates to true, then a corresponding
location bid multiplier is applied to the location targeting for the campaign.
 CHAPTER 5

RESULTS & DISCUSSION

Before running the code enter your API key in the java script file in the const key
area ,this will use your unique key to access all the weather data you want to use in your
website and after running the code you get the front end part of the website.

FIg 5.1 WEATHER APPLICATION

Now enter any location you want to see the weather of, For example I want to see the
weather of Chennai so, I will enter Chennai on the search tab which will in turn access the
weather data from the open weather API and show us the connected data.
 Fig 5.2 Chennai
Similarly, lets see the weather of Delhi.

Fig 5.3 Delhi

DISCUSSION
The process of updating Weather API to new .NET Core 2.0 and Entity Framework Core
2.0 has already started. In addition, as soon as EF Core supports spatial data types, they
should be implemented to Weather API. As EnerKey service are sold to other countries
weather information should be collected from those countries. Most likely, the first new
country to be added is Sweden followed by other Nordic countries after that. There is also
need for weather forecasts, so that the customers and Enegia’s internal services can react
to rapid weather changes. Cold weather will increase electricity consumption and creates
spikes to energy consumption. Implementing Weather API to other services can be done
quickly using OpenAPI specification (OAS). With generated JSON file programs such as
NSwagStudio can generate clients instantly.
Developer should pursue clean and maintainable code. Over engineering six-layer logic
when two is more than enough is counter intuitive. Planning good test cases will save
developers time in the long run. It is important to priorities testing cases and at least cover
every basic case. Writing tests that will not test anything worth testing and are hard to
maintain, will take time from the development process. 24 Code reviews are good and
inexpensive way to improve quality. Every developer has their unique way of looking
challenges and can catch issues that others have missed. Asking for guidance and
opinions will often lead to better result than working solo.
The process of predicting weather patterns is a very complicated science. It requires the
need to analyze and decode massive data sets gathered from thousands of sensors and
weather satellites every day.
Identifying patterns in collected data to predict the future is a very strenuous task. For
best results, it also needs to be done in real-time.
But like any kind of forecast, weather forecasting is something of an educated guess.
Since we cannot control the weather, the best meteorologists can do, is to use past and
present data and patterns to attempt to predict the future.
 CHAPTER 6

CONCLUSIONS AND FUTURE WORK

SUMMARY:

The intention of the project is to just make a model of a weather forecast using web
development and code it in a simple way so that one can know the weather of a
location on his/her website just by accessing a API key. This application would be a
part of the development platform of the technology.

FUTURE WORK:

In future projects I'll improve the design of my program by giving stylish themes and
fonts.
Also , would compare the API data with a weather predictor which predicts weather
with the data of weather in that location in the past 5 years.

CONCLUSION:

Run the program , the google chrome window opens with your designed web page.
Then enter the location of the place for which you want to see its weather. Now your
web page shows the respective temperature and humidity of that particular area.
Hence, we have successfully created a website which displays the weather of any
location entered at that particular time.
 APPENDIX

A. SOURCE CODE:

HTML&CSS CODE

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>Weather Application</title>
<linkrel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>

<style> body{ background-image: url(hey.jpg); background- size:cover;

}

.container{ width: 500px; height: 300px; margin:25vh auto; border-radius: 25px; box-
shadow: 0 20px 40px 0px rgba(0,0,0,0.3)
}

.header { height: 20%; background-color: #FF9800; border-top-left-radius: 25px;

border-top-right-radius: 25px; textalign: center; position:relative;
}
#temp, #humidity-div {

font-family: "Courier New"; font-weight: bold;

font-size: 50px; color: #fff; position: absolute; left: 50%; top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

}
.city-icon-holder { position:absolute; left: 25%; top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); text-align: center;
}
#city-name {
font-family: "Courier New"; font-size: 30px; font-weight: bold; color: #fff;
}
#icon {
width:50%;
}
#main{ width: 100%;
height: 100%; position: relative;
}

.city-icon { height: 80%; width: 50%;

border-bottom-left-radius: 25px; background-color: #FFC107;
}
.temperature { position: absolute; left: 50%; top:0%; height: 40%; width: 50%;
background-color: #9C27B0;
}
.humidity { height: 40%; width: 50%; position:absolute; left:50%; top:40%; border-
bottom-right-radius: 25px; background-color: #E91E63;
}
#search-btn {
width: 40px; height:40px; color: #eee;
}
#search-txt { color: red; height:30px; border-radius: 10px; border-style:none;
outline:none; padding-right:1px; padding-left:1px; text-align:center;
}
.search {
position: absolute; left: 50%; top:50%;
-webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
}
.tuban{
color:white; padding-left: 40px; padding-bottom: 10px;
}
</style>
<body>
<div class="container">
<header class="header">
<div class="search">
<input type="text" placeholder="Enter City Name" id="search-txt">
<a id="search-btn" href="#"><i class="fas fa-search"></i></a?
</div>
</header>
<main id="main">
<div class="city-icon">
<div class="city-icon-holder">
<div id="city-name"></div>
<img src="" alt="" id="icon">
</div>
</div>
<div class="temperature">
<h5 class="tuban">Temperature(C)</h5>
<div id="temp"></div>
</div>
<div class="humidity">
<h5 class="tuban">Humidity(%)</h5>
<div id="humidity-div"></div>
</div>
</main>
</div>
<script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>
<script src="index.js"></script>
</body>
</html>

JAVA SCRIPT CODE

const appKey = "3f99a30cda52474016b51ece604e968b";

let searchButton = document.getElementById("search-btn");

let searchInput = document.getElementById("search-txt");
let cityName = document.getElementById("cityname");
let icon = document.getElementById("icon");

let temperature = document.getElementById("temp");

let humidity = document.getElementById("humidity-div");
searchButton.addEventListener("click", findWeatherDetails);
searchInput.addEventListener("keyup", enterPressed);
function enterPressed(event) { if (event.key === "Enter") { findWeatherDetails();
}
}
function findWeatherDetails() { if (searchInput.value === "") {
}else {

let searchLink = "https://api.openweathermap.org/data/2.5/weather?q=" +

searchInput.value + "&appid="+appKey; httpRequestAsync(searchLink,
theResponse);
}
}
function theResponse(response) {
let jsonObject = JSON.parse(response);
cityName.innerHTML = jsonObject.name; icon.src =
"http://openweathermap.org/img/w/" + jsonObject.weather[0].icon + ".png";
temperature.innerHTML = parseInt(jsonObject.main.temp - 273) + "°";
humidity.innerHTML = jsonObject.main.humidity + "%";
}
function httpRequestAsync(url, callback)
{
console.log("hello");

var httpRequest = new XMLHttpRequest(); httpRequest.onreadystatechange = () => {

if (httpRequest.readyState == 4 && httpRequest.status == 200)

callback(httpRequest.responseText);
}
httpRequest.open("GET", url, true); httpRequest.send();
}
 B. SCREENSHOTS

Fig B.1 Opening a new file

Fig B.2 Editing Option

Fig. B.3 View Option

Fig B.4 Debug