Front End Development Libraries Projects - Build a Markdown Previewer

JavaScript
1

Tell us what’s happening:

My “markdown-previewer” app doesn’t pass the tests

You can test my app in the following link:

Per my understanding, I’ve followed all the user stories, except for the Optional one.

Do you have any idea?

Thanks for your help! :slight_smile:
Lucho…

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Challenge Information:

Front End Development Libraries Projects - Build a Markdown Previewer

2

Hello, you have an error in your CSS as a unrecognized unit.

100dvw

From the error log I would try to fix the first one#preview is not being updated as I type into #editor (should update on every keyup) : expected '' to equal 'a' after that you imported marked but this can be configured in the settings.

1 Like
3

Hi @robheyays,

Thank you so much for your help on this :slight_smile: . I’ve made some changes in the code and now it’s passing the tests!

In App.js:

  const [plainText, setPlainText] = useState(initialText);

  const handleChange = (e) => {
    setPlainText(e.target.value);
  }

//Remove the userEffect()

In Preview component:

//Replaced the marked.js library by another one from "https://cdn.jsdelivr.net/npm/marked-react@3.0.0/+esm"
const Preview = (props) => {
  return (
      <div className="box-preview"> 
        <h2>Preview</h2>
        <div id="preview">
          <Markdown>{props.input}</Markdown>
        </div> 
      </div>
  )
}

Regards,
Lucho.

1 Like
4

If you want to pass the last optional test, you need to set the gfm and breaks components props options to true.

<Markdown gfm={true} breaks={true}>{props.input}</Markdown>
1 Like