5.2 KiB
id, title, challengeType, forumTopicId, dashedName
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7158d8c442eddfaeb5bd13 | Створити генератор випадкових цитат | 3 | 301374 | build-a-random-quote-machine |
--description--
Мета: Створити додаток CodePen.io, який функціонально схожий на цей: https://codepen.io/freeCodeCamp/full/qRZeGZ.
Нижче заповніть user stories та отримайте всі тести для проходження. Виконайте завдання у власному стилі.
Ви можете по-різному поєднувати 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