Создайте предварительный просмотр Markdown
Цель: создать приложение CodePen.io , функционально похожее на это: https://codepen.io/freeCodeCamp/full/GrZVVO . Выполните приведенные ниже истории пользователей и получите все тесты для прохождения. Дайте ему свой личный стиль. Вы можете использовать любое сочетание HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux и jQuery для завершения этого проекта. Вы должны использовать фреймворк frontend (например, React), потому что этот раздел посвящен изучению интерфейсных фреймворков. Дополнительные технологии, не перечисленные выше, не рекомендуются, и использование их на свой страх и риск. Мы смотрим на поддержку других интерфейсных фреймворков, таких как Angular и Vue, но в настоящее время они не поддерживаются. Мы примем и попытаемся исправить все отчеты о проблемах, которые используют предлагаемый стек технологий для этого проекта. Счастливое кодирование! User Story # 1: Я вижу элемент textarea с соответствующим id="editor" . User Story # 2: Я вижу элемент с соответствующим id="preview" . User Story # 3: Когда я ввожу текст в элемент #editor элемент #preview обновляется по мере ввода текста для отображения содержимого текстового поля. User Story # 4: Когда я #editor GitHub в элемент #editor , текст отображается как HTML в элементе #preview мере ввода (СОВЕТ: вам не нужно самостоятельно анализировать Markdown - вы можете импортировать отмеченную библиотеку для этого: https://cdnjs.com/libraries/marked ). User Story # 5: Когда мой предварительный просмотр по #editor сначала загружается, текст по умолчанию в поле #editor должен содержать допустимую уценку, которая представляет собой по крайней мере один из следующих элементов: заголовок (размер H1), заголовок sub (размер H2) , ссылку, встроенный код, блок кода, элемент списка, блок-образец, изображение и полужирный текст. User Story # 6: Когда мой предварительный просмотр по #editor сначала загружается, #editor по умолчанию в поле #editor должна отображаться как HTML в элементе #preview . Дополнительный бонус (вам не нужно проходить этот тестовый проход). Мой предварительный просмотр markdown интерпретирует возврат каретки и отображает их как элементы br (line break). Вы можете создать свой проект, нажимая эту ручку CodePen . Или вы можете использовать эту ссылку CDN для запуска тестов в любой среде: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js Как только вы закончите, отправьте URL-адрес своей рабочей проект с прохождением всех его тестов. Не забудьте использовать метод Read-Search-Ask, если вы застряли.