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