How to find the HTML Code for one thing

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I'm trying to add the HTML Code from a weather website I'm only wanting the current weather not the entire web page. How do I just get the current weather?
Photo of noah

noah

  • 70 Points

Posted 4 years ago

  • 1
Photo of Neal

Neal

  • 61,252 Points 50k badge 2x thumb
Noah,

Prior to you getting the HTML code for the weather, are there any options available to customize what you want?  It may be best to ask the providers of the weather feed if they have a way of providing just the current weather.

Thanks.
Photo of Joseph Mayberry

Joseph Mayberry

  • 1,206 Points 1k badge 2x thumb
I'm not sure what specifically you are looking for, or how adverse you would be to doing a bit of your own coding to get it. But I'm currently using the wunderground weather api (you can get access to this through a free developer account which allows for a reasonable number of calls each day: http://www.wunderground.com/weather/api/).

You'll have to call the api, and parse either the xml or the json data it gives to you (depending on which version you call). But then you can display it as you want in your display. It is a bit of work to get it to show what you want, styled the way you want, but doing it this way gives you more or less complete control of the content and the formatting which is nice. If you're interested but concerned about the coding involved I can grab some samples from the code I wrote to do this and post them here (obviously you'd have to make changes to these to fit your needs, but it could be a decent starting point)
(Edited)
Photo of Mylife614 .

Mylife614 .

  • 2,326 Points 2k badge 2x thumb
Joseph,
Id be interested in seeing some of the code examples if you dont mind.... I dont know much about writing etc but I have a client that is wanting to display Their Wunderground 
Thanks
Photo of Joseph Mayberry

Joseph Mayberry

  • 1,206 Points 1k badge 2x thumb
There are essentially 2 parts to the code I am using for my weather feed, though both can be put into the same <script></script> tags in your display.

The first is to actually get the weather data:

$(document).ready(function(){
      requestWeatherData(wunder, makeWeather);
});
 
function requestWeatherData(url, callback) {
      $.ajax({
            url : url,
            dataType : "jsonp",
            success : function(parsed_json) {
                  callback(parsed_json);
            }
      });
}


Basically, I made a variable that I called wunder, I set that equal to the url associated with my wunderground account, and then I made a call using that variable to get the data that I needed. I set up an interval later in my code to repeat the requestWeatherData function every 30-45 minutes (you'll have to be sure that you are not over calling this api since they only allow so many each day).

Once you have the data, you send it to a function where you parse it out. This doesn't lend itself to an example because it is going to be different depending on what data you want, and how you want to display it.

The idea, though, is that you make a collection of variables associated with the information you want: Day, High/Low Temperature, Weather Conditions, Weather Icon, etc. Then, using the parsed_json file that you created in the first section of code, you point each of those variables at the specific bit of data that you want.

the core of my code ends up looking like this:

for (i = 0; i < Div.length; i++){
      day = cast[i].date.weekday_short;
      tempH = Math.round(cast[i].high.fahrenheit);
      tempL = Math.round(cast[i].low.fahrenheit);
      cond = cast[i].conditions;
      if (conditionTable[cond]) {
            icon = conditionTable[cond]();
      } else {
            icon = conditionTable[cast[i].icon]();
      };
      weatherDiv = Div[i];
      weatherString = '<p class="day">' + day 
            + '</p><img class="icon" src="'+ icon 
            + '" width="150" height="125" align="center"></img><p class="cond">' + cond 
            + '</p><p class="tempH">' + tempH + '°F / <span class="tempL">' + tempL + '°F</span></p>';
      $(weatherDiv).html(weatherString);
};

Here the first section is populating the data that I want for each day that I intend to show. Div.length is how many spots I have in my presentation to fill with weather.

Once I have my variables populated I style it. I'm using classes here, but you can style it inline (it just gets a little long if you do it that way). And finally, I send it to the correct place in my presentation, and repeat the process for each day I want to show.
(Edited)
Photo of XMedia Dubai

XMedia Dubai

  • 2,786 Points 2k badge 2x thumb
Hi Noah,

You can also check javascript website 

http://simpleweatherjs.com/

regards
Prakash