A web (and eventually mobile) app that, when the site/app is visited, will ask the user for their location, take that location and use an API to get the weather for that location, and then display it for the user to see.
- If weather is sunny AND warm, display sunny sky and warm city image
- If weather is cloudy AND cold, display cloudy sky and cold city image
- If weather is rainy AND hot, display rainy sky and hot city image
- Etc...
Mockups and images will be provided by a designer (yours truly). Until then, just worry about getting user's location and weather.
Temperatures are defined as follows (farenheit):
- Hot: 85*+
- Warm: 60 - 84.9*
- Cool: 35 - 59.9*
- Cold: 34.9* or below
Weather will be:
- Sunny
- Cloudy
- Rainy
- Snowy
- Use the html5 Geolocation API (with jQuery) to ask for and get user's location
- Use any weather API of choice (with jQuery) to take user's location info and get weather info (just google "weather api" and see what looks promising... I think Yahoo has one that might be good)
- Get html/css/jquery files all set up and working (blank page to start)
- Use javascript/jquery and the html5 geolocation api to ask for and return a location in the console by
console.loging (lat/long) when a user visits the page - Use that location and pass it to a weather api to get back some weather (using jQuery's
$.ajaxmethod).console.logthat to the console (still blank webpage at this point) - Create a blank div in the html called
<div id="weather"></div>or something to that effect - Insert the location and current temperature into that div (see mockup below)
- Once I give you images, insert appropriate classnames into the html based on the temperature (technically you can do this before you have the images, they just won't show). Code example below.
- Figure out what to name the app, get a domain, add it to hosting, then thow this puppy on the web.
<body class="sunnySky sunnyCity>
<div id="weather"></div>
</body>
Here's a lil mockup of what this could look like, including a v2 feature (what to wear). Ignore the actual background and icons, I will create new illustrations for this project.
