Code Tips: Making It Snow!

Hello! This is the second Code Tips and this one is Making it Snow. We’re well into winter now and its always nice to have some snow on your website. This can get Boring and repetitive though so we’re gonna spice it up a bit with a weather API.

First things first, we need an API key. Head over to Apixu and grab a free API code.

Now we’re going to use a method called cURL to fetch the data. There are a couple of sections here where you will need to add your own data, these are surrounded by the characters . Firstly, we need to get the weather for our location. This is done by calling the API and providing it with some parameters

$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, "https://api.apixu.com/v1/current.json?key=&q=");
$result = curl_exec($ch);
curl_close($ch);
$weather = json_decode($result, true);

If you run this code you’ll just get a blank page due to the fact we’re doing nothing with the returned [php]$weather[/php]. If we have a look at what is actually being returned to us by doing [php]print_r($weather)[/php]. This is what data we get back

{
    "location": {
        "name": "Edinburgh",
        "region": "City of Edinburgh",
        "country": "United Kingdom",
        "lat": 55.95,
        "lon": -3.16,
        "tz_id": "Europe/London",
        "localtime_epoch": 1512664236,
        "localtime": "2017-12-07 16:30"
    },
    "current": {
        "last_updated_epoch": 1512663308,
        "last_updated": "2017-12-07 16:15",
        "temp_c": 5,
        "temp_f": 41,
        "is_day": 0,
        "condition": {
            "text": "Partly cloudy",
            "icon": "//cdn.apixu.com/weather/64x64/night/116.png",
            "code": 1003
        },
        "wind_mph": 13.6,
        "wind_kph": 22,
        "wind_degree": 260,
        "wind_dir": "W",
        "pressure_mb": 1000,
        "pressure_in": 30,
        "precip_mm": 0,
        "precip_in": 0,
        "humidity": 70,
        "cloud": 25,
        "feelslike_c": 0.8,
        "feelslike_f": 33.5,
        "vis_km": 10,
        "vis_miles": 6
    }
}

We can see that the API does provide us with quite a bit of near realtime weather data and already we can see how we’re going to find out when it’s snowing by using the current condition text. To access JSON values we need to read them as if they are rooms with doors and people. So opening the location door provides us with eight people who all have information but we can’t open the [php]current[/php] door from here. If we go back and open the [php]current[/php] door we can see the door for [php]condition[/php] and nineteen people with different information. If we open the [php]condition[/php] door we can see three people with information and we approach with the [php]text[/php] information.

How do we convert doors to PHP code though? It’s actually as simple as the door theory, we say – I want to access the Weather array (door), then I want to access the [php]current[/php] data array followed by the [php]condition[/php] array and finally I want the value of its variable (person) [php]text[/php]. In PHP this is [php]$weatherText = $weather[‘current’][‘condition’][‘weather’];[/php]

Because there are multiple different variations of the weather text that contain snow I’m just going to provide one simple solution just now that covers all conditions. If you wanted to expand you could download the Apixu data set information and do string comparisons to decided the strength of the snow.

The simple solution is this, take the weather text and see if it contains the word snow, we’ve already set the weather text to the PHP variable [php]$weatherText[/php]

$pos = stripos($weatherText, "snow");

if ($pos !== false) {
    //It is snowing
}

So now we can tell when its snowing but we still can’t make it snow. We need a this cool JS Script to do this. Once its downloaded add the snowstorm.js file to your project and include it in your HTML head section [html][/html] Open the snowstorm.js file and edit the line that says [js]this.autostart[/js] and change it from true to false.

Now we can hook it all together

$pos = stripos($weatherText, "snow");

if ($pos !== false) {
    //It is snowing
      echo "";
}

As mentioned you could have different speeds and sizes depending on the weather if you wanted to take it further, here I’m using the related codes and setting the snow to be stronger for heavy snow

if($code == 1114 || $code == 1117 || $code == 1222 || $code == 1225)
  {     
  echo "";
}

Finally, a wee ‘winter egg’ for you too, enjoy!