⛩️ WarsawJS Workshop #43 — JavaScript (Intermediate Level)
https://piecioshka.github.io/warsawjs-workshop-43-online-store/
Project is based on:
- https://github.com/piecioshka/boilerplate-babel-webpack
- https://github.com/piecioshka/boilerplate-husky-lint-staged-prettier
- https://github.com/piecioshka/test-jest-typescript
- ✅ Tooling: Prettier + Jest + http-server
- ✅ Modules (4: IIFE, AMD, CommonJS, ESM)
- ✅ Classes
- ✅ Tooling: Webpack + webpack-dev-server
- ✅ Promise API
- ✅ Fetch API
- ✅ RegExp
- Prettier
- lint-staged + husky
- https://github.com/piecioshka/boilerplate-husky-lint-staged-prettier
- Jest
- How to start test runner?
- http-server
- Test app in browser
- IIFE, 1999
- CommonJS, 2009
- AMD, 2010
- ECMAScript Module, 2015
- [ES2015]
Object.assign
vsSpread Operator
- Transpile Spread
- Webpack
- webpack-dev-server
- [Functions] Create function which will be a component constructor
- [Class] Convert previous function to a class
- File:
src/components/component.js
- Requirements:
- Component could be render
- Component should have a template
- File:
- [Class][getter]
- Requirements:
- Template should be a field which can be only "get"
- Requirements:
- [Class][static]
- Requirements:
- Product should have image inside
- Requirements:
- [Class][extends] Create component: Product
- File:
src/components/product.js
- Requirements:
- It should have class "product" on top of the DOM
- File:
- [Class][super] Create component: Cart
- File:
src/components/cart.js
- Requirements:
- This module should have a list of products (initial empty)
- File:
- [Loop] Iteration through list of products
- [Promise.resolve]
- Adding product should based on Promise
- [Promise.reject]
- Adding non-product should finish failure
- [Async/await]
- Display Toast when Product will be added to Cart
- Install
node-snackbar
form npm registry - https://www.polonel.com/snackbar/
- Error handling:
try...catch
- [window.fetch]
- new [Response]
- [isomorphic-fetch]
- Fixtures
- Tasks
- When Product name has "er" string, do not add it to Cart and display Toast with error message
- [RegExp#test]
- Parts:
- [Quantifiers]:
*
,+
,?
,{n}
- [Matchers]:
.
,\w
,\d
,\n
- [Quantifiers]:
- https://regex101.com/
npm run build # generate dist/
npm run watch # generate dist/ & listen for changes
npm run dev # do not generate anything & listen for changes
npm test
npm test -- test/specs/XX # XX => 01...05
npm run coverage
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
The MIT License @ 2020