Takeaway Homework Assignment
“Be more ambitious. Do your homework. There’s no easy way around this.”
~ Anthony McCarten
Introduction
This document outlines the process I went through whilst implementing the
“homework” assignment I received from Takeaway.
To view the end result visit: https://blog.pother.ca/takeaway-homework-assignment/web/
Based on my my critique of the assignment I have created a
version of the assigment text which offers some improvements.
Implementation Steps taken
- Dowload, unzip and read the assignment (see my critique).
- Research Takeaway corporate identity (see style).
- Build the main UI.
- Build a UI component to represent a restaurant.
- Add some color and branding to the UI.
- Create logic to generate static JSON files for the available sort scenarios.
(see
generate.php
)
- Adds concern about the “Top Restaurants” formula (see the “Bonus
assignment” section of my critique.)
- Add logic to populate the Restaurant List in the UI from the
sample.json
(see list.js
).
- Add logic to populate the sort options in the UI
(see
sortOptions.js
).
- Moves HTML into templates for JS re-use.
- Connects JS logic to HTML (see
application.js
)
- Adds search functionality (see
jquery.filterFor.js
).
- Adds logic to filter by Restaurant State (see
filterTabs.js
)
- Adds logic to mark restaurants as favorite. (see
favorites.js
)
Implementation Choices
- I have chosen to use the
CSS framework to quickly have something decent-looking setup.
- I have chosen to use CSS custom properties (also know as “CSS variables”).
In a production environment a pre-compiler would be used to make sure that
older broswer are also able to use the created CSS.
- The HTML
class
attribute contains both framework classes and custom ones.
A pipe character |
is added to more easily distinguish between both. Please
note that the |
can not be accessed as a class as, in the context of a CSS
selector, the pipe charater is used as a namespace separator.
- I have chosen to us BEM as the naming scheme for CSS classes.
- As part of the sample application branding I have added a logo.
- Thuisbezorgd.nl uses jQuery
1.12.4
. I have chosen to use jQuery too, instead
of vanilla JS. I did choose to use a newer version.
- I have chosen to have the restaurants sorted by “Top Restaurant” by default as
this makes the most sense from a business perspective.
- Instead of also implementing a server-side application, I have chosen to
generate the JSON responses such an application would return.
- I have chosen to use a jQuery search plugin I had lying around from an earlier
project rather than write something new or go looking for the most appropriate
plugin.
- As this application does not have a backend, I have chosen to store favorites
in the browsers LocalStorage.