Учебник о том, как создать генератор котировок с помощью JavaScript.

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

Это приложение Quote Generator имеет следующую функцию:

  1. Кнопка при нажатии генерирует котировку
  2. Кнопка Twitter при нажатии помещает цитату в Twitter

Структура каталога проекта

|-- quote-generator
| |-- css
| | |-- style.css
| |-- js
| | |-- main.js
| |-- index.html

После того, как вы создали вышеуказанные каталоги на своем локальном компьютере, следуйте инструкциям.

Реализация генератора котировок

Давайте сначала реализуем код index.html.

index.html

В заголовке вышеприведенного HTML-файла мы включили CSS, специфичный для цитаты, и CSS-значок шрифта awesome (это для цитаты и значка Twitter).

А в тело HTML добавляется div-контейнер цитаты, который будет содержать цитируемый контент, автора цитаты, кнопку Twitter и кнопку «Новая цитата».

При нажатии кнопки «Новая котировка» следующая котировка будет сгенерирована через AJAX-запрос, а ее код будет записан в файл main.js, добавленный внизу тела в файле HTML.

стиль.css

Мы используем шрифт Montserrat Google, который добавляется вверху файла CSS. Цитата Контейнер div в теле центрируется с помощью flex.

Остальные другие коды CSS говорят сами за себя.

main.js

Приведенный выше код написан на ванильном javascript. Позвольте мне подробно объяснить каждую функцию –

твитЦитировать

Эта функция отвечает за размещение цитаты в Твиттере. Он вызывает API намерения твитера с цитируемым текстом и автором цитаты в качестве параметра запроса.

fetchЦитата

Это асинхронная функция, которая отвечает за получение котировок и возврат обещаний для котировок.

Прослушиватель кликов привязан к кнопке Twitter и кнопке New Quote, которая вызывает вышеуказанные функции соответственно.

Проблемы

Чтобы показать следующую цитату при нажатии кнопки «Новая цитата», нам нужно заранее иметь список котировок, иначе UX будет очень плохим. Теперь, когда ответ API получен, т. е. котировки доступны, вам захочется сохранить его, чтобы избежать повторного нажатия на API одним нажатием кнопки.

Сохранение ответа не обязательно, да, вы не ослышались!

Чтобы решить вышеизложенное, не делая запрос при каждом нажатии кнопки, мы можем кэшировать промис.

Обещание имеет состояние, и как только оно выполнено, его значение не может быть изменено. Вы можете использовать .then() несколько раз, чтобы получить его содержимое, и каждый раз вы будете получать один и тот же результат.

Таким образом, с quotesPromise.then мы будем каждый раз получать список котировок, и там мы выбираем случайную котировку, которая отображается в контейнере котировок.

Это все в этом уроке. Если вам понравилась статья, поделитесь ею с друзьями и сообществом.

Изучение структуры данных? прочтите другую мою статью — Как реализовать стек и реверсировать его в JavaScript?

Ознакомьтесь с другими подобными статьями и руководствами на https://weekendtutorial.com/

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.