---
id: bd7158d8c442eddfaeb5bd13
title: Створити генератор випадкових цитат
challengeType: 3
forumTopicId: 301374
dashedName: build-a-random-quote-machine
---

# --description--

**Мета:** створити застосунок, функціонально схожий до цього: <a href="https://random-quote-machine.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://random-quote-machine.freecodecamp.rocks/</a>.

Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем.

Ви можете по-різному поєднувати HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux та jQuery для завершення цього проекту. Слід використовувати frontend framework (наприклад, React), тому що цей розділ присвячений саме їх вивченню. Інші технології та ресурси, що не були вказані вище, не рекомендуються до використання, але ви можете застосовувати і їх на ваш розсуд. Ми розглядаємо варіант використання інших frontend frameworks для розробки інтерфейсу користувача таких, як Angular та Vue, проте наразі вони не підримуютьcя. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Вдалого програмування!

**Історія користувача #1:** Я бачу оболонковий елемент з відповідним `id="quote-box"`.

**Історія користувача #2:** У межах `#quote-box`, я бачу елемент з відповідним `id="text"`.

**Історія користувача #3:** У межах `#quote-box`, я бачу елемент з відповідним `id="author"`.

**Історія користувача #4:** У межах `#quote-box`, я бачу клікабельний елемент з відповідним `id="new-quote"`.

**Історія користувача #5:** У межах `#quote-box`,, я бачу клікабельний елемент `a` з відповідним `id="tweet-quote"`.

**Історія користувача #6:** При першому завантаженні, генератор відображає випадкову цитату в елементі з `id="text"`.

**Історія користувача #7:** При першому завантаженні, генератор відображає автора випадкової цитати в елементі з `id="author"`.

**Історія користувача #8:** При натисканні на кнопку `#new-quote`, генератор повинен отримати нову цитату та відобразити її в елементі `#text`.

**Історія користувача #9:** Генератор повинен отримати нового автора цитати при натисканні кнопки `#new-quote` та відобразити її в елементі `#author`.

**Історія користувача #10:** Я можу твітнути поточну цитату, натискаючи на елемент `#tweet-quote` `a`. Цей елемент `a` повинен включати шлях `"twitter.com/intent/tweet"` у своєму атрибуті `href`, щоб твітнути поточну цитату.

**Історія користувача #11:** Оболонковий елемент `#quote-box` повинен мати горизонтальне центрування. Будь ласка, запустіть тести з рівнем масштабування браузера 100% і розгорнутою сторінкою.

Ви можете створити свій проєкт, <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">використовуючи цей шаблон CodePen</a> і натиснувши `Save`. Або ж ви можете скористатися посиланням CDN, щоб запустити тест в будь-якому середовищі, наприклад: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`

Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами.

**Примітка:** Twitter може перешкоджати завантаженню посилання в iframe. Спробуйте використати атрибут `target="_blank"` or `target="_top"` на `#tweet-quote` якщо ваш твіт не завантажуватиметься. `target="_top"` замінить поточну вкладку, тому переконайтеся, що ви зберегли роботу.

# --solutions--

```js
// solution required
```
