Logo proweblab.xyz

How to make a weather widget (API, PHP)

How to make a weather widget (API, PHP)
How to make a weather widget (API, PHP)
How to make a weather widget (API, PHP)

Make a weather forecast widget.

The first thing you need to register and get an API key on the site openweathermap.org


Next, you need to write a small php code that will receive data from the server.

<?php
$json = file_get_contents("http://api.openweathermap.org/data/2.5/weather?q=$c->municipality&lang=ru&units=metric&appid=MY KEY API");
$data = json_decode($json, true);
$opisanie = $data['weather'][0]['description'];
$gorod = $data['name'];
$temp = $data['main']['temp'];
$speed = $data['wind']['speed'];
$napr = $data['wind']['deg'];
$iconka = $data['weather'][0]['icon'];
?>


Now you can display the received weather data in real time.

<div class="weatherItem even day" style="background-image: url(/icon/<?php echo $iconka;?>.png); background-repeat: no-repeat;">
<div class="weatherCity"><?php echo $gorod;?></div>
<div class="weatherTemp"><?php echo $temp;?></div>
<div class="weatherDesc"><?php echo $opisanie;?></div>
<div class="weatherRange">Вет: <?php echo $speed;?> Напр: <?php echo $napr;?>°</div>

 


This is the complete code for installing a weather widget on our website.

<div class="slide-result">
                        <?php
$json = file_get_contents("http://api.openweathermap.org/data/2.5/weather?q=$c->municipality&lang=ru&units=metric&appid=MY KEY API");
$data = json_decode($json, true);
$opisanie = $data['weather'][0]['description'];
$gorod = $data['name'];
$temp = $data['main']['temp'];
$speed = $data['wind']['speed'];
$napr = $data['wind']['deg'];
$iconka = $data['weather'][0]['icon'];
?>
<div class="weatherItem even day" style="background-image: url(/icon/<?php echo $iconka;?>.png); background-repeat: no-repeat;">
<div class="weatherCity"><?php echo $gorod;?></div>
<div class="weatherTemp"><?php echo $temp;?></div>
<div class="weatherDesc"><?php echo $opisanie;?></div>
<div class="weatherRange">Вет: <?php echo $speed;?> Напр: <?php echo $napr;?>°</div>
</div> 


Now you can already make a beautiful appearance of our widget.

.even {
  background-color: rgba(0,0,0,0.4);
}
.weatherItem {
  padding: 0.8em;
  text-align: right;
  color: #fff;
  float: left;
  width: 90%;
  margin-right: 10px;
}
.weatherDesc, .weatherCity, .weatherForecastDay {
  font-weight: 600;
}
.weatherCity {
  text-transform: uppercase;
}
.weatherTemp {
  font-size: 28px;
  font-weight: 900;
}
.weatherDesc {
  margin-bottom: 0.4em;
}
.weatherRange, .weatherWind, .weatherLink, .weatherForecastItem {
  font-size: 0.8em;
}
.weatherLink, .weatherForecastItem {
  margin-top: 0.5em;
  text-align: left;


Weather widget using API JSON, PHP, HTNL, CSS

For download, I’ll attach an HTML file with a finished widget design for 7 days.

Weather widget. 

All materials on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.