WTF: Where's the food?

By Titanium

(Jamie, Kin, Reda and Roshan)

---

---

Goals this week:

• Make a 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, leveraging searching and filtering ✅
• A large data file is required to search through - (we chose an object of country: dish pairs) ✅
• Consider how implementation affects user experience and web performance ✅

---

Stretch goals this week:

• Submit button returns the national dish related to the country searched ✅
• Highlight untyped parts of the suggestions in list
• Further functionality (link to google or recipe search on the dish found)
• Utilise good UI practice from this week's design burst - eg colour li on hover ✅
• Add randomiser
• Return to Home upon h1 click ✅

---

To run our site:

Heroku link Otherwise:

• Clone the Github repo
• navigate to repo folder
• run npm install
• run npm start
• visit localhost:3000 in browser

---

WTF is WTF?

An autocomplete widget site where you search for a country and discover its national dish.

---

The Start

• After a little team deliberation we decided to use countries as a data set - it is small enough to quickly create the key value object ourselves and avoid making api calls to a live database.

• We got to designing the architecture and file structure...

---

Design

Desktop wireframe

---

Mobile wireframe

---

A11y

---

Architecture - Outline

---

Architecture - Final

---

Get the server going

• Basic functionality using node and accounting for linked files
• Modular file structure - server.js, router.js, handler.js

---

Work out what the API should actually do!

• Be called on each keypress for the input field
• Send the search URL through the server to our data file and bring back array of filtered data
• Call a function to append the autofill suggestions to the DOM

---

Handling the search

• Passing the endpoint through the router
• decodeURI to correct the JSON string (spaces as %20)
• toLowerCase to homogenise cases
• filter to find results and append to an array
• stringify the array and send back to API

---

Getting the dish

• We created a separate API request and handler function to get the name of the selected country's dish
  • learnt that we have to JSON.stringify a string to pass it back to API

---

killAllChildren()

• Function to refresh the suggestions list on every input to search field
• Tried everything, from selecting suggestions <ul> by className, selecting by tagName, for loop, forEach
• From 20 lines of code to this
• HTML Collections and NodeLists

---

Testing

• Given more time we would have liked to create tests and refactor some code
• We had planned to separately write pure functions (such as filter for searching)

---

• Can't test pure functions if you don't have pure functions

---

Thank you!