4.8 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7157d8c242eddfaeb5bd13 | Створити програму попереднього перегляду Markdown | 3 | 301372 | build-a-markdown-previewer |
--description--
Мета: створити застосунок, функціонально схожий до цього: https://markdown-previewer.freecodecamp.rocks/.
Виконайте історію користувача та пройдіть тести. Використовуйте необхідні вам бібліотеки або 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 (розрив рядка) елементів.
Ви можете створити свій проєкт, використовуючи цей шаблон CodePen і натиснувши Save. Або ви можете використати це посилання CDN для запуску тестів у будь-якому середовищі, яке вам подобається: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Після того, як ви закінчите, надішліть URL-адресу свого робочого проєкт з усіма його тестами.
--solutions--
// solution required