weather forecast widget

[justinbmeyer]

I would like the HTML + CSS designed for a weekly weather forecast.

The basic functionality can be seen here: http://jsbin.com/gaqimum/edit?html,js,output .

A user can enter a location like New York.

If there are multiple matches, a list of similar places will be shown:

• New York Town
• New York State

Once a single location is picked, a 10 day forecast will be displayed with:

• The date
• the low and high temperature
• A description of that day's weather

Ideally the widget won't take up very much horizontal space. This is to keep it visible as someone works on it in a JSBin.

Ideally you can find images that match all of the weather possibilities (and if these are the entire list of possibilities):

• Snow
• Showers
• Scattered Thunderstorms
• Thunderstorms
• Breezy
• Partly Cloudy
• Rain
• Mostly Sunny
• Sunny

[justinbmeyer]

Here's the design I was originally given:

[adrifolio]

@justinbmeyer I worked on this and have a work in progress here:
http://jsbin.com/ragipun/edit?html,css,output

A few notes:

• I changed the order of low/high temp to high/low, as this is usually how it is displayed on weather sites (this makes sense as the high corresponds to the day temperature and the low to the night temperature, so it is shown in the order of events)
• Pending:
• Adding up and down arrows to the temperatures
• Styling the "loading places..." indicator
• Showing the corresponding icon for each temp. For this I need a way to hook each icon to each temp. Can you generate a specific class for each temp?

Let me know what you think. Thanks!

[justinbmeyer]

@adrifolio What do you mean by:

Adding up and down arrows to the temperatures?

howing the corresponding icon for each temp.

Do you mean the icon for the descriptions ( Partly Cloudy, Breezy )?

[adrifolio]

@justinbmeyer I updated the jsbin as follows:

• Added the arrows for low and high temps:

• Styled the "loading places..." message -> simply centered it

• Added the classes for the description icons. Currently I hard coded one:
  <span class='description breeze'>{{text}}</span>
  but once they are made dynamic you can remove it and the icons should for each description.

[chasenlehara]

Hi @adrifolio, I’m putting this into a guide and I noticed we’re missing icons for some weather conditions.

I can’t find an exhaustive list of all the codes (the ones Yahoo documents aren’t correct), so here are some I found with some quick searching:

• Cloudy
• Rain And Snow
• Scattered Showers

May I get some guidance on how to add these to the icon font please?

[adrifolio]

@chasenlehara I can take care of it. It's a simple thing when using icomoon. I will add them today later on.

[adrifolio]

@chasenlehara I just pushed an update to the branch you are working on with the new icons.

[chasenlehara]

@adrifolio Thanks for all your work on this!