freeCodeCamp

5.4 KiB

Raw Blame History

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7158d8c442eddfaeb5bd13	Build a Random Quote Machine	true	3		Создайте машину случайных цитат

Description

Цель: создать приложение 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, если вы застряли.

Instructions

Tests

tests: []

Challenge Seed

Solution

// solution required

5.4 KiB Raw Blame History Unescape Escape