Giter Club home page Giter Club logo

postcode-autocomplete's Introduction

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 - ensure 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. Listen 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

What we have learned

  • There is a HTML5 tag that is used to provide an "autocomplete" feature on elements. Users will see a drop-down list of pre-defined options as they input data. (carefull! - cant be styled) https://www.w3schools.com/tags/tag_datalist.asp

  • We now understand the connection between server, router and handler functions

  • How the backend and frontend communicate

  • That API calls are best placed on the backend, which allows the client to continue interacting with the browser while the API makes its call

  • How to deploy to Heroku!

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

  • How usefull mobs are with unfamiliar topics

Challenges

  • Making an API call from the backend is hard!

  • Maximal confusion on how back and front-end communicate

postcode-autocomplete's People

Contributors

gminova avatar xirusux avatar frannyfra avatar tonylomax avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.