Mary Briskin

Is It Raining? Another Chrome Extension

I enjoyed making my last one and thought I'd give it another go. This extension plays a simple animation (falling rain) over the client's page to let him or her know whether it is raining in his or her region. See video for demonstration.

Get 'Is it Raining?' HERE.



I used Canvas to animate the falling rain.

Once I finished that, I wrote a function, using jQuery, to send a GET request to http://ipinfo.io, which returned a JSON object containing the user's IP address. Learned a small lesson on JSONP on the way.

function find_ip_address() {
  $.get("http://ipinfo.io", function(response) {
      user_ip = response.ip;
  }, "jsonp");
}

I then wrote a function to send a GET request to http://api.worldweatheronline.com , filling in the user's IP address and my key as parameters.

function check_weather(){

  $.get("http://api.worldweatheronline.com/free/v2/weather.ashx?key=xxxx.xxxx.xxxx&q=" + user_ip +"&format=json", function(response) {
    if(response.data.error){
      // check to see if weather data for client's geographical is available.
      console.log("No weather data for your region. Sorries!")
    } else if(response.data.current_condition[0].precipMM > 0){
      console.log("it's raiiinin!");
      // if there is precipitation, start the rain animation
      make_it_rain();
    }
  }, "jsonp");
}



In order to avoid annoying the client with a continuous rainfall, I wrote the make_it_rain() function to only run for a few seconds. However, every 20 minutes, setInterval calls an anonymous function, which calls the check_weather() function (seen above) to determine whether it is still raining.
setInterval(function() {
  check_weather();
}, 1000 * 60 * 20);




Newer >>