riemelt/toxin

Hotel website

Toxin Hotel

Toxin is a hotel website for room reservations, which is an educational project for learning front-end development, a part of MetaLamp's Education Program. It is based on Figma's design, which was made specifically for studying purposes.

Compatible with

• node v18.10.0
• npm 8.19.2

Demo

Goals

• Learn and understand how to build relatively big and complicated projects from scratch, using Pug, Scss, Js
• Search, install and implement jQuery plugins into project
• Work with Webpack and Figma
• Code with BEM methodology
• Use PixelPerfect extension to match web elements according to the design
• Create responsive and flexible web-pages

Pages

UI-kit

• Colors & Type
• Form Elements
• Cards
• Headers & Footers

Web-site

• Landing
• Landing / Dates Dropdown
• Landing / Guests Dropdown
• Search room / Filter
• Search room / Filter / Preferences Dropdown
• Search room / Filter / Preferences Expandable Checkbox list
• Room details
• Registration
• Sign in

Dependencies

• webpack
• material-icons
• FortAwesome-Free
• air-datepicker
• chart-js
• imask
• jquery
• moment
• noUiSlider
• paginationjs

Install

git clone https://github.com/Riemelt/Toxin.git
cd Toxin
npm i

Commands

Run on dev-server

npm start

Build in development mode

npm run dev

Build in production mode

npm run build

Project structure

├───dist                         # built web-pages
├───pixel-perfect                # exported png images of figma's design for pixel-perfect
└───src
    ├───assets                   # image, font, favicon files
    ├───components               # bem blocks, one folder per component
    ├───layouts                  # layouts with general page structure
    ├───main-styles              # scss variables, global styles, fonts loading
    ├───pages                    # final web-pages and all entry points, one folder per page
    ├───utilities                # js helper functions
    ├───.eslintrc.js             # eslint rules for js
    ├───.gitignore               # list of folders to ignore to commit such as node_modules and dist
    ├───package-lock.json        # node_modules dependencies
    ├───package.json             # project info and dependencies
    ├───README.md                # project info and documentation
    ├───webpack.config.js        # bundler config

toxin's Issues

UI/UX

1. Такой выпадающий список лучше делать position: absolute, иначе сдвигается весь контент внизу
   
2. Текст под заголовком тоже лучше сделать кликабельным
   
3. При наведении странные стили: текст становится тусклым
   
4. На больших экранах лучше сделать так:
   края страницы сделать в цвет футера и/или хедера (белый)
   продолжить хедер/футер (без контента) и за края макета
   
5. Кнопки кажутся слишком большими
   
6. В планшетных/мобильных версиях лучше выравнивать по вертикали
   
7. На мобилках можно сократить расстояния (на картинке) + всегда нужно следить, чтобы ничего не слипалось и оставлять хотя бы небольшое расстояние
   

Блок Button

Toxin/src/components/button/button.pug

Lines 30 to 37 in 85b547b

	const themeClass = {
	default: '',
	bordered: ` ${className}_theme_bordered`,
	filled: ` ${className}_theme_filled`,
	long: ` ${className}_theme_long`,
	borderedHeader: ` ${className}_theme_bordered-header`,
	longHeader: ` ${className}_theme_long-header`,
	}

Это не совсем все к теме относится, желательно разбить на разные модификаторы, чтобы можно было задавать цвет, тему и размер отдельно.

BEM

1. Тк БЭМ требует, чтобы блок был независим, необходимо, чтобы картинки, принадлежащие блоку, находились в папке с этим блоком
2. Модификатор _with-bigger-title (и другие подобные) звучит несколько нечетко. На мой взгляд лучше _title-size_big или _title-size_l
3. У блока button использованы булевые модификаторы, хотя нужны ключ-значение.

Common

1. Не запускается проект, вот одна из 7 ошибок:
   

Scss

1. Глобальные стили не допустимы. Допустимы только для тегов body, html и для переопределения box-sizing для всех тегов

PP и недочеты сайта

Привет!) Будут вопросы пиши в тг :)

Курсор при наведении на интерактивные элементы должен становится pointer

Клик на пустое пространство переключает кнопку

Давай тут и в header при наведении курсора будем убирать непрозрачность текста, чтобы визуально обозначить что элемент интерактивный

Тоже cursor pointer

Так же давай запретим бронировать номера задним числом.
(Бронировать можно от текущей даты и дальше, выбирать прошедшее число нельзя)

Package.json

Перенеси пожалуйста в dependencies всё то без чего твоя prod сборка не соберется или не будет работать после компиляции, а в devDependencies остальное. Это как один из вариантов распределения зависимостей, заодно познакомишься с этим

Pug

Для таких штук удобно использовать объекты по ключам.

Пример

Readme

Добавь пожалуйста версию node и npm которая используется в проекте. Можешь указать свою текущую на системе

JS

Наши бп (бест практис) основан на airbnb style guid. Для строк следует использовать одинарные кавычки тык. js в pug не является исключением.