Вы геймер? Вы когда-нибудь покупали игру где-то только для того, чтобы понять, что где-то в другом месте была более выгодная сделка? Если да, то у меня есть решение вашей проблемы.

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

Поиск по умолчанию установлен на Red Dead Redemption. В основном это связано с тем, что после настройки панели поиска для поиска введенной пользователем игры стало сложно искать что-то каждый раз, когда я пытался протестировать новую функцию. Этот поиск по умолчанию можно легко настроить в строке 31 index.js.

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

Для этого мне нужно было добавить прослушиватель событий к каждому элементу списка, отображаемому в результатах. Я просмотрел полученные результаты и добавил событие click для каждого из этих элементов, когда они добавлялись в DOM.

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

Он делает это, отправляя запрос на выборку в API CheapShark с конечной точкой предупреждения об изменении.

Теперь проблема в том, что я написал весь этот код, чтобы эта программа работала так, как задумано. Но есть ключевая функция, которая отсутствует на данный момент, а именно тот факт, что при обновлении страницы игры, добавленные пользователем в избранное, исчезают.

Решение, которое я придумал для этого, было:

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

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

Не буду здесь врать, мне потребовалось некоторое время, чтобы найти это решение. Но в конце концов меня осенило, почему бы просто не установить идентификатор объектов базы данных любимых игр равным объекту результата, поэтому, когда я хочу удалить эту игру, все, что мне нужно, это идентификатор объекта результата, который у меня уже есть. объект результата. Больше не нужно искать нужный товар.

Третья функция на этом изображении — просто добавление любимых игр на вкладку любимых игр при загрузке страницы.

Теперь игры, которые пользователь решил добавить в избранное, остаются на странице после перезагрузки. Есть уловка, мне нужно было использовать json-сервер, чтобы это работало правильно. Это означает, что для корректной работы сервер должен быть запущен.

Если вам интересно взглянуть на код, ссылка на GitHub — https://github.com/Momot1/Phase-1-FinalProject. Не стесняйтесь поиграть с ним и изменить его так, как вы считаете нужным.