Can't complete Markdown previewer certification project

JavaScript
1

Hello, I’ve completed the frontend markdown previewer project, I’ve run all of the tests successfully myself and when I click the “Run the Tests” button the tests run it shows the tests #3 and #4 as incomplete

I’ve made some changes to the code and it still registers these errors, however I can’t seem to replicate the errors while running the tests myself

Is the problem in the code?

HTML:

<textarea id="editor">
</textarea>
<div id="preview">
</div>

JS:

import React from "https://esm.sh/react"
import {createRoot} from "https://esm.sh/react-dom/client"
import Markdown from "https://esm.sh/react-markdown"
import remarkGfm from "https://esm.sh/remark-gfm"

const preview = document.getElementById('preview');
const editor = document.getElementById('editor');

let markdown = "# Welcome to my React Markdown Previewer!\n\n## This is a sub-heading...\n### And here's some other cool stuff:\n\nHeres some code, `<div></div>`, between 2 backticks.\n\n```\n// this is multi-line code:\n\nfunction anotherExample(firstLine, lastLine) {\n  if (firstLine == '```' && lastLine == '```') {\n    return multiLineCode;\n  }\n}\n```\n\nYou can also make text **bold**... whoa!\nOr _italic_.\nOr... wait for it... **_both!_**\nAnd feel free to go crazy ~~crossing stuff out~~.\n\nThere's also [links](https://www.freecodecamp.org), and\n> Block Quotes!\n\nAnd if you want to get really crazy, even tables:\n\nWild Header | Crazy Header | Another Header?\n------------ | ------------- | -------------\nYour content can | be here, and it | can be here....\nAnd here. | Okay. | I think we get it.\n\n- And of course there are lists.\n  - Some are bulleted.\n     - With different indentation levels.\n        - That look like this.\n\n\n1. And there are numbered lists too.\n1. Use just 1s if you want!\n1. And last but not least, let's not forget embedded images:\n\n![freeCodeCamp Logo](https://cdn.freecodecamp.org/testable-projects-fcc/images/fcc_secondary.svg)\n";


editor.value = markdown;

editor.onkeydown = function setValue (){
  markdown = editor.value;
  createRoot(preview).render(<Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>)
};


createRoot(preview).render(<Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown>)
2

Are you saying that it does not pass all the test? What are using to run this code successfully out side the FCC webpage for this project.

3

It passes all the tests except the #3 and #4, I’m using CodePen to run the code

4

I would remove React if you are not going to use it properly.

5

Can you elaborate please? :slight_smile:
Where am I not using it properly or what is it missing?

6

  1. Use a single root element in the HTML.

  2. Do not use direct DOM manipulation.

  3. Use the event and state mechanism provided to you by React.

What have you done to learn React? I would start with the React docs tutorial.