Additional work

HTML

• I attained this 100% score by:
  • Making buttons and input forms sufficiently tall and wide as per this guide. See main.css, lines 1-9.
  • Making <li> items have sufficient vertical padding when the viewport is narrower than 500px. See main.css, lines 90-92. I did this using an adjacent sibling selector, to avoid padding the first & last elements

CSS

• This layout was achieved using a CSS media query - see main.css, lines 77-89
• Within this media query, I overrided grid and flexbox properties to make the logo beside the footer, and the links vertical. Specifically:
  • Lines 78-80 make the links vertical
  • 81-83 make the main content span the width of the page
  • 84-86 make the sidebar on the same row as the footer
  • 87-89 make the footer occupy 2/3 of the width
  • (90-92 are to attain 100% accessability)

JavaScript

• The sample tests provided were well-structured but not comprehensive for all the required behaviour
• The only modification I made to the supplied tests is specifying navigation to the right page at the start of every test so they can be run individually
• So I copied the contents and added the following new tests:
• In the people search form (see js-tests.js lines 120-141):
  • Test searching by license number only
  • Validation: neither input filled/both filled should return an error
  • A search which yields no results should say 'no results'
  • Correctly rendering Null/Empty data as "???"
• In the vehicle search form (see lines 155-166):
  • Validating: an empty registration number should return an error
  • A search which yields no results
  • Rendering empty/null data as ???
• In the vehicle create form (see lines 204-247):
  • Check owner button enable/disable logic
  • Using a pre-existing owner in vehicle creation
  • Check owner - owner not found
  • Create vehicle - button initially disabled
  • Showing an error when:
    • Adding a new person fails
    • Adding a new vehicle fails
  • Disallowing adding new vehicles/people that already exist