How to make a weather widget (API, PHP)

Jan 28, 2020 28 0

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;
}