---
id: bd7157d8c242eddfaeb5bd13
title: Створити програму попереднього перегляду Markdown
challengeType: 3
forumTopicId: 301372
dashedName: build-a-markdown-previewer
---

# --description--

**Мета:** створити застосунок, функціонально схожий до цього: <a href="https://markdown-previewer.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://markdown-previewer.freecodecamp.rocks/</a>.

Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або API. Оформте за власним стилем.

Ви можете використовувати різноманітні ресурси HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux та jQuery для того, щоб виконати цей проєкт. Слід використовувати frontend framework (наприклад, React), тому що цей розділ присвячений саме їх вивченню. Інші технології та ресурси, що не були вказані вище, не є рекомендованими до використання, але ви можете застосовувати і їх на свій страх і ризик. Ми розглядаємо варіант використання інших frontend frameworks для розробки інтерфейсу користувача таких, як Angular та Vue, проте наразі вони не підримуютьcя. Ми візьмемо до уваги і спробуємо виправити всі звіти, що використовують запропонований технологічний стек у цьому проєкті. Вдалого програмування!

**Історія користувача №1:** Я бачу `textarea` елемент з відповідним `id="editor"`.

**Історія користувача №2:** Я бачу елемент з відповідним `id="preview"`.

**Історія користувача №3:** Коли я вводжу текст до елемента `#editor`, елемент `#preview` оновлюється, коли я вводжу текст для відображення у textarea.

**Історія користувача №4:** Коли я вводжу позначку GitHub в елемент `#editor`, текст відображається як HTML у `#preview` елементі під час введення тексту (ПОРАДА: Вам не потрібно самостійно аналізувати Markdown, бо для цього можна імпортувати бібліотеку Marked:<https://cdnjs.com/libraries/marked>).

**Історія користувача №5:** Коли моя програма попереднього перегляду Markdown вперше завантажується, текст у `#editor` полі повинен містити дійсну розмітку, що представляє принаймні одну кожного з наступних елементів: заголовок (H1), підзаголовок (H2), посилання, вбудований код, блок коду, елемент списку, цитата в блоці, зображення та жирний текст.

**Історія користувача №6:** Коли моя програма попереднього перегляду Markdown вперше завантажується, автоматична розмітка в `#editor` полі має бути відображена як HTML у `#preview` елементі.

**Необов'язковий бонус (вам не потрібно проходити цей тест):** Моя програма попереднього перегляду Markdown інтерпретує повернення каретки та відображає їх як `br` (розрив рядка) елементів.

Ви можете створити свій проєкт, <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">використовуючи цей шаблон CodePen</a> і натиснувши `Save`. Або ви можете використати це посилання CDN для запуску тестів у будь-якому середовищі, яке вам подобається: ` https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js `

Як тільки закінчите, надайте посилання на свій проєкт з усіма пройденими тестами.

# --solutions--

```js
// solution required
```
