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.