FT Weather App

“Build a website that shows the real-time weather for a location of your choice”

Mission: Possible!

Requirements

✅ Display real-time weather for your location: when you first visit the site, it geolocates you and serves up the weather for your location :earth_africa:

✅ Allow you to choose the city you get weather for: once the first page with local weather is loaded, you can search for any city :city_sunrise:

✅ Doesn't rely on client-side frameworks and libraries: no jQuery or React involved :+1:

Extras

✅ It's accessible:

• Semantic HTML elements were used as much as possible
• The color scheme (tested with the Chrome colorblinder extension) is high contrast and is still readable with many types of colorblindness
• The window immediately focuses to the search input, and :hover and :focus elements give a bright blue outline to let the user know they are selected.
• Users can tab through using a keyboard and hit enter to search.

✅ It's responsive: using a grid (or rather, o grid :eyes:) made the layout responsive for all sizes of screen
✅ It uses Origami components: after reading about some of the Origami components used at the FT, I chose to use:

• o-typography: to keep the typography clean and cohesive
• o-grid: usually I'm a flexbox fan, but the idea of a ready-built responsive grid model seemed too good to pass up.

✅ It's built using JS and Node, and is server-side rendered: using Express as the Node framework, and Handlebars as the templating engine

✅ It's deployed to Heroku: which you can see here!

I look forward to diving into it in more detail with you soon!