3.1 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| bd7157d8c242eddfaeb5bd13 | Erstelle einen Markdown Previewer | 3 | 301372 | build-a-markdown-previewer |
--description--
Objective: Build an app that is functionally similar to this: https://markdown-previewer.freecodecamp.rocks/.
Erfülle die folgenden User Stories und bestehe alle Tests. Verwende Bibliotheken und APIs deiner Wahl. Gib dem Ganzen deinen persönlichen Stil.
Du kannst jede Mischung aus HTML, JavaScript, CSS, Bootstrap, SASS, React, Redux und jQuery verwenden, um dieses Projekt abzuschließen. Du solltest ein Frontend-Framework (wie zum Beispiel React) verwenden, da es in diesem Abschnitt um das Lernen von Frontend Frameworks geht. Zusätzliche Technologien, die oben nicht aufgeführt sind, werden nicht empfohlen und die Verwendung erfolgt auf eigene Gefahr. Wir prüfen die Unterstützung anderer Frontend-Frameworks wie Angular und Vue, aber sie werden derzeit nicht unterstützt. Wir werden alle Fehlerberichte akzeptieren und versuchen, sie zu beheben, die den vorgeschlagenen Technologie-Stack für dieses Projekt verwenden. Viel Spaß beim Programmieren!
User Story #1: Ich kann ein textarea-Element mit einem entsprechenden id="editor" sehen.
User Story #2: Ich kann ein Element mit einem entsprechenden id="preview" sehen.
User Story #3: Wenn ich Text in das #editor-Element eingebe, wird das #preview-Element während der Eingabe aktualisiert, um den Inhalt des Textfeldes anzuzeigen.
User Story #4: Wenn ich GitHub-Markdown in das #editor-Element eingebe, wird der Text als HTML im #preview-Element wiedergegeben, während ich tippe (TIPP: Du brauchst Markdown nicht selbst zu parsen - du kannst die Marked-Bibliothek dafür importieren: https://cdnjs.com/libraries/marked).
User Story #5: Wenn mein Markdown-Previewer zum ersten Mal geladen wird, sollte der Standardtext im #editor-Feld gültiges Markdown enthalten, das mindestens eines der folgenden Elemente darstellt: ein Überschriftenelement (H1-Größe), ein Unterüberschriftenelement (H2-Größe), einen Link, Inline-Code, einen Codeblock, ein Listenelement, ein Blockquote, ein Bild und fettgedruckten Text.
User Story #6: Wenn mein Markdown-Previewer zum ersten Mal geladen wird, sollte das Standard-Markdown im #editor-Feld als HTML im #preview-Element dargestellt werden.
Optionaler Bonus (du musst diesen Test nicht bestehen): Mein Markdown-Previewer interpretiert Zeilenumbrüche und gibt sie als br (Zeilenumbruch) Elemente aus.
Du kannst dein Projekt aufbauen, indem du diese CodePen-Vorlage verwendest und auf Save klickst, um deinen eigenen Pen zu erstellen. Oder du kannst diesen CDN-Link verwenden, um die Tests in jeder beliebigen Umgebung auszuführen: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Sobald du fertig bist, übermittle die URL zu deinem Arbeitsprojekt, wenn alle Tests bestanden sind.
--solutions--
// solution required