amacsnyk / ftweatherapp

FT tech test

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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 🌍

βœ… 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 πŸ‘

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 πŸ‘€) 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!

About

FT tech test


Languages

Language:JavaScript 48.0%Language:HTML 42.8%Language:CSS 9.2%