5.3 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7158d8c442eddfaeb5bd13 | Створити генератор випадкових цитат | 3 | 301374 | build-a-random-quote-machine |
--description--
Мета: створити застосунок, функціонально схожий до цього: https://random-quote-machine.freecodecamp.rocks/.
Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або 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% і розгорнутою сторінкою.
Ви можете створити свій проєкт, використовуючи цей шаблон CodePen і натиснувши Save. Або ж ви можете скористатися посиланням CDN, щоб запустити тест в будь-якому середовищі, наприклад: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Як тільки ви закінчите, надішліть URL-адресу вашого робочого проєкту з усіма пройденими тестами.
Примітка: Twitter може перешкоджати завантаженню посилання в iframe. Спробуйте використати атрибут target="_blank" or target="_top" на #tweet-quote якщо ваш твіт не завантажуватиметься. target="_top" замінить поточну вкладку, тому переконайтеся, що ви зберегли роботу.
--solutions--
// solution required