“Build a website that shows the real-time weather for a location of your choice”
Mission: Possible!
✅ Display real-time weather for your location: when you first visit the site, it geolocates you and serves up the weather for your location 🌍
✅ 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 🌇
✅ Doesn't rely on client-side frameworks and libraries: no jQuery or React involved 👍
✅ 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 👀) 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!