Skip to content
This repository has been archived by the owner on Jul 26, 2024. It is now read-only.

XCanG/apress-frontend_test_task

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Тестовое задание на должность фронтенд-разработчика

Необходимо разработать клиентскую часть листинга товаров с попапом заказа и добавления в корзину. Пользователь должен увидеть листинг товаров, у каждого товара есть кнопка заказа и кнопка добавления в корзину. При нажатии на кнопку заказа должен открываться попап заказа, при нажатии на кнопку добавления в корзину - попап с уведомлением об успешном добавлении в корзину.

Логику работы корзины, отправки заказа, получения списка товаров с сервера писать не нужно.

Организацию файловой структуры, архитектуру, стайлгайд, способы подключения ассетов и прочее выбираешь сам. Фреймворки, библиотеки, шаблонизаторы использовать нельзя - чистый js и css.

Весь код нужно разместить в папке src. Точка входа - src/index.html. На странице, сразу после загрузки доступны данные о товарах, которые необходимо показать, получить их можно вызвав API.products в твоем js-коде. Твой код должен использовать эти данные для отрисовки листинга товаров и попапов заказа.

Решение отправить пулл-реквестом в данный репозиторий в ветку master.

Макеты

  • макет листинга:

    listing

  • макет попапа-заказа:

    order-popup

  • макет попапа-корзины:

    cart-popup

  • схема позиционирования элементов

    cart-popup

Требования к реализации

  • IE11+;
  • только десктоп, мобильная версия не нужна;
  • pixel-perfect и 100% соответствие макетам не требуется, но визуально должно быть похоже;
  • требований к адаптивности нет - достаточно выполнить в 1 размере;
  • семантическая верстка приветствуется;
  • рендер через js на основе полученных данных из API.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 58.9%
  • JavaScript 38.1%
  • HTML 3.0%