Создайте машину случайных цитат
Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/qRZeGZ . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и использование их на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я вижу элемент оболочки с соответствующим id="quote-box"
. User Story # 2: В #quote-box
я вижу элемент с соответствующим id="text"
. User Story # 3: В #quote-box
я вижу элемент с соответствующим id="author"
. User Story # 4: В #quote-box
я вижу элемент с кликабелем с соответствующим id="new-quote"
. User Story # 5: В #quote-box
я вижу кликабельную id="tweet-quote"
. User Story # 6: При первой загрузке моя машина цитирования отображает случайную цитату в элементе с id="text"
. User Story # 7: При первой загрузке моя машина цитирования отображает автора случайной цитаты в элементе с id="author"
. User Story # 8: Когда нажата кнопка #new-quote
, моя машина цитирования должна получить новую цитату и отобразить ее в элементе #text
. User Story # 9: Моя машина цитирования должна использовать автора #new-quote
нажатии кнопки #new-quote
и отображать ее в элементе #author
. User Story # 10: Я могу прокрутить текущую цитату, щелкнув элемент #tweet-quote
a
. Этот элемент должен включать a
"twitter.com/intent/tweet"
путь в этом href
атрибута чирикать текущую котировку. User Story # 11: Элемент оболочки #quote-box
должен располагаться по горизонтали. Запустите тесты с уровнем масштабирования браузера на 100% и увеличьте страницу. Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.