Правила и регламент

• Экзамен: правила, рекомендации и порядок проведения

Задание

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

Запуск и сборка приложения

Для запуска приложения используйте команду:

make run # запускается сервер и сборка

Задача 1

В файле src/app.js напишите и экспортируйте по умолчанию функцию, которая добавляет форму поиска в index.html и два div элемента с соответствующими классами. Форма должна быть добавлена как дочерний элемент по отношению к элементу с классом search-form-container.

Форма

<div class="col-auto">
    <i class="fas fa-search h4 text-body mr-2"></i>
</div>
<div class="col">
<input class="form-control form-control-lg form-control-borderless" type="search"
    placeholder="Search topics or keywords">
</div>
<div class="col-auto">
    <button class="btn btn-lg btn-success" type="submit">Search</button>
</div>

Задача 2

Добавьте в приложение логику, которая при клике на кнопку submit отправляет запрос на сервер и, в случае успешной отправки, выводит общее количество товаров в специальном контейнере с классом .results-container:

<div class="goods-quantity">Goods total: 60</div>

Этот контейнер необходимо будет отрендерить в качестве дочернего элемента у родителя с классом .results-container

Задача 3

Добавьте в функцию поиск по введенному запросу по данным с бекенда. Поиск осуществляется по полю title. При клике на кнопку submit все товары с совпадениями в названии должны быть выведены в контейнере .search-results в следующем виде для каждого товара:

<div class="card">
    <img src="..." class="card-img-top" alt="..."> # не забудьте использовать картинку!
    <div class="card-body">
        <h5 class="card-title">{{title}}</h5>
        <p class="card-text">{{description}}</p>
        <h3 class="card-text">{{price}}</h3>
    </div>
</div>

Задача 4

Добавьте в приложение такую функциональность, которая вешает color-success на цену самого выгодного товара.