https://github.com/vasily257/sb-shop

The single-page website with payment form and shopping cart.
https://github.com/vasily257/sb-shop

gulp javascript nunjucks scss twig

Last synced: 4 days ago
JSON representation

The single-page website with payment form and shopping cart.

• Host: GitHub
• URL: https://github.com/vasily257/sb-shop
• Owner: Vasily257
• Created: 2023-05-21T10:56:43.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-03-21T05:11:27.000Z (9 months ago)
• Last Synced: 2024-12-19T20:09:47.215Z (4 days ago)
• Topics: gulp, javascript, nunjucks, scss, twig
• Language: JavaScript
• Homepage: https://v1364358.hosted-by-vdsina.ru/sb-shop/
• Size: 1.21 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README-RU.md

Awesome Lists containing this project

README

        
# SB.Shop

Этот проект — тестовое задание для вакансии «Верстальщик-перфекционист» компании [Sborka Project](https://sborkaproject.ru/).

  

## Функциональность  

Проект является одностраничным сайтом с отзывчивой версткой, построенной на flexbox и grid layout.  

Пользователь сайта может:

- менять количество товаров

- подставлять сохранённые данные карты

- получать подсказки после каждого ввода в поля карты

- открывать и скрывать подсказку, чтобы узнать, что такое CSV

## Особенности 

У проекта есть несколько особенностей:

1. Проект верстался по Pixel Perfect, но в двух местах есть расхождения с [макетом](https://www.figma.com/file/dc1fCaC8ctLXSSTPZXyAJR/HTML-Test-%7C-16.07.2023?type=design&node-id=0%3A1&mode=design&t=13A0iLcVnBtP9WsU-1):

- в этапах оплаты сделаны одинаковые расстояния между цифрами

- в слове «conditions» исправлена опечатка

2. Проект разделен на простые компоненты (инклюды) и сложные компоненты (макро-компоненты).

3. Все параметры компонентов передаются отдельными аргументами и имеют значения по умолчанию.

4. Изображения подключены в форматах PNG/JPEG и WEBP, а также в разрешении 2X для ретина-экранов.

5. Изображения не добавлены спрайт, чтобы они кешировались в браузере.

6. Пользователь может менять зум экрана.

7. Пользователь может использовать мышь и клавиатуру, чтобы работать с интерфейсом.

8. JS-код разбит на классы и прокомментирован с помощью JSDoc.

9. Использовано наследование в рамках паттерна «Наблюдатель», чтобы связать данные экземпляра `Basket` c данными экземпляров `TotalCost` и `Header`.

10. Использована слабая связь для экземпляров `Basket` и `CreditCard`: они передаются в связанные экземпляры классов как параметры.

11. Использована композиция для экземпляров `Validator`, `Tooltip` и `Badge`, чтобы не передавать лишние параметры в связанные экземпляры классов.

## Технологический стек 

`Nunjucks`, `SCSS`, `JS`, `Gulp`, `Webpack`  

  

## Использование

Чтобы склонировать проект, вам надо открыть нужную директорию и использовать команды:  

**HTTPS**: `git clone https://github.com/Vasily257/sborka-test-task.git`  

**SSH**: `git clone [email protected]:Vasily257/sborka-test-task.git`  

Чтобы запустить проект, вам нужно открыть папку с проектом через терминал и использовать команду `npm run start`.

  

## Статус

Проект завершен, нет планов по доработке.