A single page application made with the help of Director and Handlebars to show an overview of all countries.
Fork and/or clone it. Serve the app from a webserver.
git clone https://github.com/Arash217/web-app-from-scratch-18-19- The app is made with ES6+ features without transpiling to ES5, and thus isn't production ready.
- Currently (28-2-2019) only working on Google Chrome 72+, because of the use of static class fields.
- Countries overview
- Country details
- Filter countries
- Sort countries
- Time-based cache
- Error handling
- ES6 modules
- ES6 classes
- Using higher order functions to maximise reusability
- Shorter names for functions, variables, etc.
- Handlebars templates in separate files
REST Countries is used to fetch countries data as JSON.
The API is used in the overview page to retrieve and display the name, flag and country code of all countries.
Additional data is requested and shown in the detail page.
There aren't any restrictions mentioned in the docs of REST Countries.
Best practices:
Strict mode(not needed with ES6 modules)- Constants instead of variables
- CamelCase
- Line length under 80
- End statements with semicolon
- Avoid else, return early
- Single quotes for strings
Design patterns:
IIFE(not needed with ES6 modules)- Proxy pattern for time-based cache
- Template method pattern for rendering pages
Week 2
Week 3
Note: the numbers are used to display the order of method execution.
Home
Details
Search and sort
MIT © Arash Paknezad