Front End Development Libraries Projects - Build a Markdown Previewer

Tell us what’s happening:
Describe your issue in detail here.
Hi I am having trouble with adding ### User Story #4: When I enter GitHub flavored markdown into the #editor element, the text is rendered as HTML in the #preview element as I type (HINT: You don’t need to parse Markdown yourself - you can import the Marked library for this: my entire screen goes blank especially adding the ##dangerouslySet … in my JS
Your code so far
please see link

Your browser information:buildMarkdown

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

Challenge: Front End Development Libraries Projects - Build a Markdown Previewer

Link to the challenge:

Hi, looking at the code it seems that there are two constructors.
In the same class.

That could be one of the issues.

From the docs:

" There can be only one special method with the name constructor in a class. Having more than one occurrence of a constructor method in a class will throw a SyntaxError error ."

thanks GeorgeCrisan the error has been cleared how ever I am still struggling with the dangerously Set element it also removes the display

The console has this

"[Package Error] 'marked@v4.2.12' could not be built. 
[1/5] Verifying package is valid…
[2/5] Installing dependencies from npm…
[3/5] Building package using esinstall…
Running esinstall...
Failed to load node_modules/marked/bin/marked.js
  Unexpected token (1:0) in marked/bin/marked.js
Install failed.
Install failed."

I think is something related with import for marked library.
I can see multiple attempts to import it in the code.

I’ve managed to fix it.

Solution 1.

Remove imports of “maked” from the js file and keep the one form html then use marked.parse() instead of marked() inside dangerouslySetInnerHTML.

Here is a working fork based on your project.

Notice that I’ve upgraded the package to the latest version, 4.2.12 but you don’t have to.

// I am located in the html file
<script src=""></script>

It worked with the older version also.

Solution 2.

  1. Import the package like this, using the Settings button

It may be more easy to keep the imports in one place rather than 3 different places (html, js, and Settings)
You can move the import for react in Settings too.
Is just a matter of preferences but whichever way you want to reference js libraries, try to be consistent.

  1. Remove other imports of marked from html and the js file.

  2. Use the parse method like this marked.parse(). Example below.

<div id="preview" dangerouslySetInnerHTML={{__html: marked.parse(}} />

Final result:

Please let me know if you still need help with this.
(Sorry for the odd print screen, I am on a small screen, not at my desk)

Thanks a lot GeorgeCrisan I can now submit my Markdown Previewer all thanks to you :pray:t6:

1 Like

Hi Sir

I have a challenge regarding this function

display.textContent = eval(expression);

if (action === 'calculate') {
  let expression = `${keys.dataset.firstValue} ${keys.dataset.operator} ${displayedNum}`;
  display.textContent = eval(expression);
  keys.dataset.previousKeyType = 'calculate';

the minute I add this code everything goes back to 0 please assist as you have done so before.

You are trying to use variables in scopes they are not available in.

For example:

if (action === "calculate") {
  // expression is blocked scoped to the if statement
  let expression = `${keys.dataset.firstValue} ${keys.dataset.operator} ${displayedNum}`;

// expression does not exist in this outer scope
display.textContent = eval(expression);

I am not winning, this eval function is challenging.

You didn’t close the performCalculation function and your are calling performOperation which doesn’t exist anywhere.