Government Polytechnic,Pune

(An Autonomous Institute of Government of Maharashtra)

A Micro Project Report on

Weather Dashboard

Submitted By :

Name Enrollment No
Shreyash Dilip Chabilwad 2106034
Ritesh Ganesh Chinchole 2106036
Rushikesh Pundlik Dawale 2106039
Shreyas Sunil Deobhankar 2106040

Under the guidance of

Smt.P.K.Zade Mam

(Academic Year:2023-24)
Government Polytechnic,Pune-16
Department of Computer Engineering

Department Of Computer Engineering

 Government Polytechnic,Pune

(An Autonomous Institute of Government of Maharashtra)

Department of Computer Engineering

CERTIFICATE

This is to certify that the mini-project work entitled “ Weather Dashboard” is a

bonafide work carried out by

Group Members Enrollment Number

Shreyash Dilip Chabilwad 2106034
Ritesh Ganesh Chinchole 2106036
Rushikesh Pundlik Dawale 2106039
Shreyas Sunil Deobhankar 2106040

of class Third Year in partial fulfillment of the requirement for the completion of Course of Diploma
Web development using JavaScript (CM4106) in Computer Engineering from Government Polytechnic Pune.
The report has been approved as it satisfies the academic requirements in respect of micro-project work
prescribed for the course.

Smt.P.K.Zade Mrs.J.R.Hange Dr.V.S.Bandal

Department Of Computer Engineering

 Abstract

This weather dashboard project aims to create a user-friendly web

application that provides real-time weather information for a specified
location. It utilizes a combination of HTML, CSS, and JavaScript to present a
visually appealing and responsive interface. Users can input a location, and
the application will fetch current weather data from a reliable API. The
information is displayed in an organized and intuitive manner, including
temperature, humidity, wind speed, and a five-day forecast. Users can easily
switch between locations, and the dashboard dynamically updates to reflect
the chosen location.
The use of modern web technologies ensures a seamless and interactive
user experience, making it a valuable tool for anyone looking to stay
informed about weather conditions. The dashboard is designed to be
visually engaging, with an emphasis on user experience and accessibility. By
combining the power of HTML for structure, CSS for styling, and JavaScript
for dynamic data retrieval and presentation, this project aims to provide an
efficient and reliable platform for users to access up-to-date weather
information at their fingertips.

Department Of Computer Engineering

 Acknowledgement

I would like to express our sincere gratitude to our Teacher-In-Charge

Smt.P.K.Zade mam and Head of Department Mrs. J.R.Hange mam , for her
precious time in spite of his busy schedule. I would like to thank his valuable
advice, and guidance throughout the project. She is clear with the project
objective and pointed out the requirement, and put me back on track. It is
my pleasure to work under her guidance. We find it hard to imagine that
anyone else could be more patient, sincere and a better advisor than she.

We sincerely thank the staff of the Computer Engineering Department for

constant encouragement and valuable advice. We would like to thank our
Principal Dr. V. S. Bandal Sir for providing all necessary facilities to complete
our Seminar work.

4
 Contents

Sr.NO Name of the Chapter Page No

1 Abstarct 3

2 Acknowlegdement 4

3 Introduction 6

4 Technologies used 7

5 8
System Archeitecture

6 Functions Used 9

7 Features of the code 11

8 Program 12

9 Output 21

10 Conclusion
21

11 Reference
21

5
 Introduction
In today's fast-paced world, staying informed about the weather
is essential for planning our daily activities and making timely
decisions. This weather dashboard project seeks to address this
need by developing a user-friendly web application that delivers
real-time weather information for any specified location.
Leveraging the capabilities of HTML, CSS, and JavaScript, the
project aims to create an intuitive and visually appealing interface
where users can input their desired location, and in return,
receive up-to-date weather data fetched from a trusted API. The
dashboard will provide a comprehensive overview, including
temperature, humidity, wind speed, and a five-day forecast, all
presented in an organized and easily understandable format.

The significance of this project lies in its potential to empower

users with valuable weather insights through a responsive and
engaging web application. By seamlessly blending the structural
elements of HTML, the styling prowess of CSS, and the dynamic
functionality of JavaScript, this dashboard promises a user
experience that is both informative and interactive. Whether
you're a traveler planning a trip, a commuter scheduling your day,
or simply someone curious about the current weather conditions,
this weather dashboard will serve as a valuable tool, ensuring that
you're always well-prepared to face the elements.

6
 Technologies used:
1. HTML (HyperText Markup Language): HTML is the backbone of the
project, providing the structural elements for creating the web page. It
defines the layout, headings, forms, and overall structure of the user
interface.
2. CSS (Cascading Style Sheets): CSS is employed to style and design the
web page. It is responsible for the visual aspects of the dashboard, such as
fonts, colors, layout, and responsive design for different screen sizes.
3. JavaScript: JavaScript is used for the dynamic functionality of the
dashboard. It facilitates interactions with the user, such as handling user
input for location selection and fetching real-time weather data from an
API. JavaScript also updates the page's content in real-time, ensuring the
weather information remains current.
4. Weather API: An external weather API (e.g., OpenWeatherMap,
WeatherAPI) is integrated into the project. This API is used to fetch
weather data for the specified location. JavaScript makes API requests and
processes the received data for display on the dashboard.
5. Responsive Design:CSS is used to implement responsive design
principles, ensuring that the dashboard functions well on various devices,
including desktops, tablets, and mobile phones.
6. Front-End Libraries and Frameworks: Depending on the complexity of
the project, you may consider using front-end libraries or frameworks like
Bootstrap or React.js to streamline the development process and enhance
user interface components.

7
 System Archeitecture
1. HTML Structure:
- It defines the document type and sets the language to English.
- It includes the necessary meta tags for character encoding and
viewport settings.
- The page title is set to "Weather Dashboard."
- External CSS and JavaScript libraries are linked for styling and
functionality.
- The page structure is divided into a header, a search section, and a
main content area for weather information.

2. Page Layout:
- The header section is a jumbotron displaying the title "Weather
Dashboard" in a stylized manner.
- The search section is divided into two columns: one for input and
search history, and the other for displaying weather information.
- In the input column, users can enter a city name to search for weather
data, and there's a "Clear history" button for clearing the search history.
- The search history is displayed as an unordered list.
- In the weather information column, current weather information and a
5-day weather forecast are displayed.

3. JavaScript Functionality:
- JavaScript is used to handle user input and make API requests to
retrieve weather data.
- The code makes use of the OpenWeatherMap API to fetch weather
data based on the user's input.
- It displays the current weather for a city, including temperature,
8
humidity, wind speed, and UV index.
- It also displays a 5-day weather forecast for the selected city.
- Search history is stored in local storage, and users can click on past
searches to see weather details again.

4. Styling:
- The provided CSS code defines styles for various elements, including
fonts, text sizes, and background colors.
- It styles the search history list items to change background color and
underline when hovered.

 Functions Used:

1. HTML Structure: The HTML structure defines a weather dashboard with

sections for searching for a city, displaying the current weather, and a 5-day
forecast. It uses Bootstrap for styling and includes Font Awesome icons.

2. JavaScript Functions:
- find(c): This function searches for a city in the list of cities and returns -1
if the city is found; otherwise, it returns 1.
- displayWeather(event): This function is called when the search button is
clicked. It gets the user's input for the city and calls the `currentWeather`
function to fetch and display the current weather.
- currentWeather(city): This function makes an AJAX call to retrieve the
current weather information for the specified city and displays it on the
page.
- UVIndex(ln, lt): This function retrieves the UV index for a given set of
coordinates (latitude and longitude).
- forecast(cityid): This function fetches and displays a 5-day weather
forecast for the specified city.
- addToList(c): This function dynamically adds the searched city to the
search history list.
9
 - invokePastSearch(event): When a past search item in the history list is
clicked, this function is called to fetch and display the weather for that city.
- loadlastCity(): This function loads the last searched city from local
storage and displays its weather.
- clearHistory(event): When the "Clear history" button is clicked, this
function clears the search history from the page and local storage.

3. CSS Styling:
- The CSS includes styling for various elements, such as setting the box-
sizing, font size, and fonts.
- It also includes some hover effects for list items in the search history.

4. External Resources:
- The code uses external resources like Bootstrap, Font Awesome, and
jQuery for styling and functionality.

10
The features of the code are :

1. HTML Structure: The HTML file provides the structure of the web page. It
includes sections for displaying current weather, a 5-day forecast, and a
search history.

2. Bootstrap and Font Awesome: It uses Bootstrap and Font Awesome CSS
libraries for styling, including responsive design and icons.

3. Input Search Box: Users can input a city name in the search box and click
the search button to retrieve weather information for that city.

4. Search History: The application maintains a search history in a list. Users

can click on previous search entries to see weather information for those
cities.

5. Current Weather: The current weather for the selected city is displayed,
including temperature, humidity, wind speed, and the UV index. Icons are
used to represent weather conditions.

6. 5-Day Forecast: The application displays a 5-day weather forecast for the
selected city, including dates, weather icons, temperature, and humidity.

7. API Integration: It makes use of the OpenWeatherMap API to fetch

weather data for the specified city.

8. Local Storage: It stores the search history in the browser's local storage,
so the user can access previous searches even after refreshing the page.

9. Clear History: Users can clear the search history with the "Clear history"
button.

10. Event Handling: The code includes event handling for clicking the search
button, clicking on past searches, and clearing the search history.

11
Program :

HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Weather Dashboard</title>
<!--Bootstrap CSS CDN-->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/4.0.0/css/bootstrap.min.css" />
<!-- Font Awesome CSS Icons (For cool glyphicons) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Jumbotron for Title-->
<div class="jumbotron container-fluid mt-2 text-center p-2"
style="background-color:#404040 ;color: white;">
<h1> <strong>Weather Dashboard</strong></h1>
</div>
<div class="container">
<!--Row for searching a city-->
<div class="row">
<div class="col-sm-4 bg-light">
<!--Here we create an HTML form for handling the inputs-->
<h4 class="pt-1"><strong>Search for a City:</strong></h4>
<!--Here we create the text box for capturing the search city Name-
->
<div class="input-group mb-3">

12
 <input type="text" class="form-control"id="search-city" aria-
label="City Search" aria-describedby="search-button">
<div class="input-group-append">
<button class=" btn bg-primary text-light" id="search-
button"><i class="fa fa-search"></i></button>
</div>
</div>
<!--section for search city history-->
<button class=" btn btn-primary" type="button" id="clear-
history">Clear history</button>
<ul class="list-group">

</ul>
</div>
<div class="col-sm-8">
<div class="row ml-2 border border-dark rounded">
<div class="col-sm-12" id="current-weather">
<h3 class="city-name mb-1 mt-2 bolder" id="current-
city"></h3>
<p>Temperature:<span class="current"
id="temperature"></span></p>
<p>Humidity:<span class="current"
id="humidity"></span></p>
<p>Wind Speed:<span class="current" id="wind-
speed"></span></p>
<p>UV index:<span class="current bg-danger rounded py-2 px-
2 text-white" id="uv-index"></span></p>
</div>
</div>
<!--Row for future data to be dumped here-->
<div class="col-sm-12" id ="future-weather">
<h3>5-Day Forecast:</h3>
<div class="row text-light">
<div class="col-sm-2 bg-primary forecast text-white ml-2 mb-3
p-2 mt-2 rounded" >
<p id="fDate0"></p>
13
 <p id="fImg0"></p>
<p>Temp:<span id="fTemp0"></span></p>
<p>Humidity:<span id="fHumidity0"></span></p>
</div>
<div class="col-sm-2 bg-primary forecast text-white ml-2 mb-3
p-2 mt-2 rounded" >
<p id="fDate1"></p>
<p id="fImg1"></p>
<p>Temp:<span id="fTemp1"></span></p>
<p>Humidity:<span id="fHumidity1"></span></p>
</div>
<div class="col-sm-2 bg-primary forecast text-white ml-2 mb-3
p-2 mt-2 rounded">
<p id="fDate2"></p>
<p id="fImg2"></p>
<p>Temp:<span id="fTemp2"></span></p>
<p>Humidity:<span id="fHumidity2"></span></p>
</div>
<div class="col-sm-2 bg-primary forecast text-white ml-2 mb-3
p-2 mt-2 rounded">
<p id="fDate3"></p>
<p id="fImg3"></p>
<p>Temp:<span id="fTemp3"></span></p>
<p>Humidity:<span id="fHumidity3"></span></p>
</div>
<div class="col-sm-2 bg-primary forecast text-white ml-2 mb-3
p-2 mt-2 rounded" >
<p id="fDate4"></p>
<p id="fImg4"></p>
<p>Temp:<span id="fTemp4"></span></p>
<p>Humidity:<span id="fHumidity4"></span></p>
</div>
</div>
</div>

</div>
14
 </div>
</div>
<!--jQuery JS-->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<!--Code to Jvascript File-->
<script src="script.js"></script>
</body>
</html>

CSS code:

*{
box-sizing: border-box;
}
body {
font-size: 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h3{
font-weight: bold;
}
.forecast{
font-size: 0.9em;
}
span{
font-size: 1em;
}
li:hover{
background-color: lightslategray;
text-decoration: underline;
}

15
Java Script Code:
//Declare a variable to store the searched city
var city="";
// variable declaration
var searchCity = $("#search-city");
var searchButton = $("#search-button");
var clearButton = $("#clear-history");
var currentCity = $("#current-city");
var currentTemperature = $("#temperature");
var currentHumidty= $("#humidity");
var currentWSpeed=$("#wind-speed");
var currentUvindex= $("#uv-index");
var sCity=[];
// searches the city to see if it exists in the entries from the storage
function find(c){
for (var i=0; i<sCity.length; i++){
if(c.toUpperCase()===sCity[i]){
return -1;
}
}
return 1;
}
//Set up the API key
var APIKey="a0aca8a89948154a4182dcecc780b513";
// Display the curent and future weather to the user after grabing the city
form the input text box.
function displayWeather(event){
event.preventDefault();
if(searchCity.val().trim()!==""){
city=searchCity.val().trim();
currentWeather(city);
}
}
// Here we create the AJAX call
function currentWeather(city){
// Here we build the URL so we can get a data from server side.
16
 var queryURL= "https://api.openweathermap.org/data/2.5/weather?q="
+ city + "&APPID=" + APIKey;
$.ajax({
url:queryURL,
method:"GET",
}).then(function(response){
// parse the response to display the current weather including the City
name. the Date and the weather icon.
console.log(response);
//Dta object from server side Api for icon property.
var weathericon= response.weather[0].icon;
var iconurl="https://openweathermap.org/img/wn/"+weathericon
+"@2x.png";
// The date format method is taken from the
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Global_Objects/Date
var date=new Date(response.dt*1000).toLocaleDateString();
//parse the response for name of city and concanatig the date and icon.
$(currentCity).html(response.name +"("+date+")" + "<img
src="+iconurl+">");
// parse the response to display the current temperature.
// Convert the temp to fahrenheit
var tempF = (response.main.temp - 273.15) * 1.80 + 32;
$(currentTemperature).html((tempF).toFixed(2)+"&#8457");
// Display the Humidity
$(currentHumidty).html(response.main.humidity+"%");
//Display Wind speed and convert to MPH
var ws=response.wind.speed;
var windsmph=(ws*2.237).toFixed(1);
$(currentWSpeed).html(windsmph+"MPH");
// Display UVIndex.
//By Geographic coordinates method and using appid and coordinates
as a parameter we are going build our uv query url inside the function below.
UVIndex(response.coord.lon,response.coord.lat);
forecast(response.id);
if(response.cod==200){
17
 sCity=JSON.parse(localStorage.getItem("cityname"));
console.log(sCity);
if (sCity==null){
sCity=[];
sCity.push(city.toUpperCase()
);
localStorage.setItem("cityname",JSON.stringify(sCity));
addToList(city);
}
else {
if(find(city)>0){
sCity.push(city.toUpperCase());
localStorage.setItem("cityname",JSON.stringify(sCity));
addToList(city);
}
}
}
});
}
// This function returns the UVIindex response.
function UVIndex(ln,lt){
//lets build the url for uvindex.
var uvqURL="https://api.openweathermap.org/data/2.5/uvi?appid="+
APIKey+"&lat="+lt+"&lon="+ln;
$.ajax({
url:uvqURL,
method:"GET"
}).then(function(response){
$(currentUvindex).html(response.value);
});
}
// Here we display the 5 days forecast for the current city.
function forecast(cityid){
var dayover= false;

18
 var
queryforcastURL="https://api.openweathermap.org/data/2.5/forecast?id="
+cityid+"&appid="+APIKey;
$.ajax({
url:queryforcastURL,
method:"GET"
}).then(function(response){
for (i=0;i<5;i++){
var date= new Date((response.list[((i+1)*8)-
1].dt)*1000).toLocaleDateString();
var iconcode= response.list[((i+1)*8)-1].weather[0].icon;
var
iconurl="https://openweathermap.org/img/wn/"+iconcode+".png";
var tempK= response.list[((i+1)*8)-1].main.temp;
var tempF=(((tempK-273.5)*1.80)+32).toFixed(2);
var humidity= response.list[((i+1)*8)-1].main.humidity;
$("#fDate"+i).html(date);
$("#fImg"+i).html("<img src="+iconurl+">");
$("#fTemp"+i).html(tempF+"&#8457");
$("#fHumidity"+i).html(humidity+"%");
}
});
}
//Dynamically add the passed city on the search history
function addToList(c){
var listEl= $("<li>"+c.toUpperCase()+"</li>");
$(listEl).attr("class","list-group-item");
$(listEl).attr("data-value",c.toUpperCase());
$(".list-group").append(listEl);
}
// display the past search again when the list group item is clicked in search
history
function invokePastSearch(event){
var liEl=event.target;
if (event.target.matches("li")){
city=liEl.textContent.trim();
19
 currentWeather(city);
}
}
// render function
function loadlastCity(){
$("ul").empty();
var sCity = JSON.parse(localStorage.getItem("cityname"));
if(sCity!==null){
sCity=JSON.parse(localStorage.getItem("cityname"));
for(i=0; i<sCity.length;i++){
addToList(sCity[i]);
}
city=sCity[i-1];
currentWeather(city);
}
}
//Clear the search history from the page
function clearHistory(event){
event.preventDefault();
sCity=[];
localStorage.removeItem("cityname");
document.location.reload();
}
//Click Handlers
$("#search-button").on("click",displayWeather);
$(document).on("click",invokePastSearch);
$(window).on("load",loadlastCity);
$("#clear-history").on("click",clearHistory);

20
Output:

Conclusion:
The provided code is for a weather dashboard that allows users to search
for city weather information and view a 5-day forecast. However, it lacks
proper error handling, exposes the API key, and has some issues with code
commenting and clarity. It should be improved for security and usability.

Reference:
• https://google.com
• Javascript Demystified
• https://medium.com

21