40 lines
4.7 KiB
Markdown
40 lines
4.7 KiB
Markdown
|
---
|
|||
|
|
id: bd7157d8c242eddfaeb5bd13
|
|||
|
|
title: Створити програму попереднього перегляду Markdown
|
|||
|
|
challengeType: 3
|
|||
|
|
forumTopicId: 301372
|
|||
|
|
dashedName: build-a-markdown-previewer
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
**Мета:** Створити додаток [CodePen.io](https://codepen.io), який функціонально схожий до цього:<https://codepen.io/freeCodeCamp/full/GrZVVO>.
|
|||
|
|
|
|||
|
|
Заповніть нижче [user stories](https://en.wikipedia.org/wiki/User_story) та пройдіть усі тести. Виконайте завдання у власному стилі.
|
|||
|
|
|
|||
|
|
Ви можете використовувати різноманітні ресурси 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='nofollow'>за допомогою цього шаблону CodePen</a> і натиснути `Зберегти`, щоб створити власний pen. Або ви можете використати це посилання CDN для запуску тестів у будь-якому середовищі, яке вам подобається: ` https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js `
|
|||
|
|
|
|||
|
|
Після того, як ви закінчите, надішліть URL-адресу свого робочого проєкт з усіма його тестами.
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// solution required
|
|||
|
|
```
|