β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!