second test task from MetaLamp.
start page on the server https://frontendx.ru/public/toxin/
config
Contains all webpack configs, they are imported in the webpack.config.js from the root directory
src
| index.js
└─── components
└─── pages
index.js is a main file that import every .js | .js file in the src directory. So when you create new .js | .js file it will be automatically added to the bundle.
components is a folder with all possible components shared between all pages.
pages is a folder with all possible pages of the project.
components has the following structure:
components
└─── date-dropdown
| | date-dropdown.pug
| | DateDropDown.js
| | date-dropdown.scss
| └─── img
| | | arrow-back.svg
| | | arrow-forward.svg
| | | tip.svg
|
└─── dropdown
| | dropdown.pug
| | DropDown.js
| | dropdown.scss
| └─── img
| | | tip.svg
componentscontains only directories per component.- Each component contains main
.pugfile with the template,.js | .jsthat is dynamically loaded in theindex.jsand contains all scripts for the component (and only the component) and.scssfile. .scssshould be imported in the.js | .jsand contains one BEM block in the root of the files and all possible elements and modificators inside this block's definition.
pages has the following structure:
pages
└─── landing-page
| | landing-page.pug
| | landing-page.scss
| └─── img
| | | room.webp
|
└─── room-details
| | room-details.pug
| | room-details.scss
| └─── img
| | | small-room.webp
| | | room.webp
| | | mask-group.webp
landing-page.pug,room-details.pugare independent separated pages, extended frompages/index/index.pug, so they have<html>,<head>,<body>tags.- Page ideally should NOT contain any element except of imports of different components.
plugins using third-party plugins in the following components:
1. date-dropdown: air-datepicker: v3.0.1
2. range-slider: ion-rangeslider: v2.3.1
- These plugins are used in components of the project
- Node version v14.18.1
npm i
npm start
go to http://localhost:8080/
npm run build
npm run linter