A sample weather app pulling data from OpenWeatherMap. Currently live on phonghtran.com.
A version that doesn't use the API can found here.
Just download and open. jQuery included in files.
- For time constraints, I went minimal over full utility. So it's just temperature and general weather condition.
- In that mindset, I wanted to contrast existing apps with less photography and graphs and general clutter.
- The amount of info was intended to let people roughly plan their day, and get a hint of the week's weather.
- The API also only allowed for fairly coarse time increments (3 hours), so decided to lean into that.
- I did like the idea of different locations. Made it easier to test. Would be more useful if users could customize.
- Accessibility. Colors were pulled from Google Material Design. Choose a chunk thick font to stand up to the colors. Wouldn't pass AAA, and the lighter colors push the contrast at 3.64:1. Originally I was using black and bold versions of Biryani, but swapped the bold for regular for visual contrast. The bold at smaller sizes was losing legibility.
- The icons were created with the typeface as the basis for the shapes. Needed more time to fully execute.
- I started the skeleton for search and geolocation, but had to cut it for time.
- The responsive cutoffs are a bit rough. The 600-800 pixel range needs refinement. Landscape on mobile was treated as an edge case.
- Too much visual styling and HTML generation in the Javascript. It allowed me to generate color gradients on the fly. If I had committed to the style earlier, I probably would have turned them into CSS classes.
- Went for super minimal data presentation in-lieu of stats like humidity and wind. Cleaner but less useful.
- The JS has a few cheats to save time like size-specific magic numbers and inefficient loops.
- The intention was to pull shapes from the typeface to create the icons, but the timeframe didn't allow for much finesse.
- Didn't use a framework. Seemed like overkill and didn't need the scaling. But still being in JS, you'll lose SEO for future development. Speed over robustness.
- Refactor JS to allow new location search
- Animations on cards when switching from view to search mode on mobile
- Lazy-load the backup weather data (currently it's just large JSON file that gets loaded every time)
- Current location gathering
- More accurate weather animations. I'd like to use OpenWeatherMap weather coding to modulate the intensity of the weather
- Subtle motion on the secondary icons
- A bit smarter object population on the canvas animation
- Motion on the clear weather state e.g. sun and moon
- Real favorite cities
- Recent search list to mesh with favorites list
- The weather states for "Atmosphere" is pretty varied, it'd be nice to add more animations and icons for that
- More robust animations, probably refactor to be more versatile
- Better redraw when resizing the browser