Postcode Autocomplete link 🏁

Team

Tony😋
Christine😉
Gigi😌
Francesca😀

Aim 🎯

Our aim was to build a simple postcode autocomplete app using Node.JS, HTML and CSS.

Group Mantra

1. Our focus this week is on everyone learning the most rather than having the most fabulous project
2. Pair programming - esure everyone pairs up with everyone at least once
3. Use 20/20/20 - if a pair has not found an answer after 20 min we can open the problem up to the team and do a mob

The Project

Features & APIs

1. We use an autocomplete API link

2. Autocomplete dropdown: https://www.w3schools.com/howto/howto_js_autocomplete.asp

3. Lsiten to input value change: https://stackoverflow.com/questions/26946235/pure-javascript-listen-to-input-value-change

4. Initially we set up a dummy JSON file and made an API call from the client side to our own backend dummy data. This was successful, however we were unable to make an API call from our server to the Postcodes API, hence we just enhanced our app by making the API call from client side to the Postcodes API.

Task List

Day 1

• Deploy to Heroku as a group (+ link to our repos)
• App architecture mock up
• Set up skeleton files
• Agree on file structure for server side code

Day 2

• Decide on new task list + distribute to pairs
• Access object from server side and populate dom dropdown
  • Event listener on key_press and re query the object
  • Use query string to to concatante to longer query string and parse in order to return updated object data (irrelevant as inconsistent with app architecture)
• Create pure functions + tests (irrelevant as inconsistent with app architecture)
• Create dom functions
• CSS Styling
• Put in favicon
• Ensure file structure is good and maintainable (continues to work)
• Keep an eye on Heroku deployment
• Keep Readme updated

Requirements

• website that enables users to quickly find and select words from a list of suggestions, as they type.
• The list is dynamically generated from a pre-populated list of values (i.e. a dictionary file), leveraging searching and filtering.
• A large data file is required to search through - consider the best data structure for this (e.g. .txt or .json).
• Consider how implementation affects user experience and web performance (e.g. time to load and search through the data file).

Strech Goals

• API call to postcodes.io