Skip to content

Latest commit

 

History

History

listing

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
css
css
 
 
js
js
 
 
res
res
 
 
README.md
README.md
 
 
index.html
index.html
 
 

README.md

Список предложений

Необходимо вывести список предложений каталога Etsy.com, используя библиотеку React. После загрузки данных и отрисовки список должен выглядеть так: Список предложений

Данные списка предложений

Данные для списка доступны в формате JSON по адресу https://neto-api.herokuapp.com/etsy

Это массив объектов, каждый объект представляет одно предложение. У предложение доступно множество свойств, но в приложении необходимо использовать следующие:

  • listing_id — уникальный идентификатор предложения, число;
  • url — ссылка на предложение, строка;
  • MainImage — информация об изображении, объект, нам необходимо использовать свойство url_570xN для получения адреса главной картинки, строка;
  • title — название предложения, строка;
  • currency_code — код валюты, строка;
  • price — цена, строка;
  • quantity — доступное количество, число.

Описание компонента

Для отображения списка создайте компонент Listing, который принимает следующие атрибуты:

  • items — список предложений, массив объектов, по умолчанию пустой массив.

Коспонент должен создавать на основе списка предложений следующий HTML-код:

<div class="item-list">
  <div class="item">
    <div class="item-image">
      <a href="https://www.etsy.com/listing/292754135/woodland-fairy">
        <img src="https://img1.etsystatic.com/156/0/12814579/il_570xN.1173240751_50hv.jpg">
      </a>
    </div>
    <div class="item-details">
      <p class="item-title">Woodland Fairy</p>
      <p class="item-price">$3.99</p>
      <p class="item-quantity level-medium">12 left</p>
    </div>
  </div>
</div>

Если название предложения привышает 50 символов, то необходимо выводить только первые 50 символов, и добавлять символ … в конце.

При выводе стоимости предложения необходимо учитывать валюту. Если цена задана:

  • в долларах США, код USD, то цену вывести в формате $50.00;
  • в евро, код EUR, то цену вывести в формате €50.00;
  • в остальных случаях цену вывести в формате 50.00 GBP, где GBP — код валюты.

Вывести остаток, подсветив его в зависимости от количества, используя класс level-*:

  • level-low — если остаток меньше 10 включительно,
  • level-medium — если остаток меньше 20 включительно,
  • level-high — если остаток больше 20.

Реализация

Необходимо загрузить данные списка предложений, и отобразить их используя компонент Listing в DOM-узле с идентификатором root.

Локально с использованием git

Компонент необходимо реализовать в файле ./js/app.js. Файл уже подключен к документы, поэтому другие файлы изменять не требуется.

В песочнице CodePen

Реализуйте компонент во вкладке JS(Babel). Перед началом работы сделайте форк этого пена:

https://codepen.io/Netology/pen/wmORzJ