I keep on getting this on line 8 in my js editor: Uncaught ReferenceError: marked is not defined
Also, I can’t seem to pass test #3…
Please help and Thank You in advance.
here is a link to my code-pen:
Um, it would seem the page isn’t setup correctly. I don’t get any output on my screen using your codepen (I was able to drag out a textarea, but nothing happens when I use it.
It seems your javascript area is setup to build a REACT dynamic page, but your HTML area is a static page, and doesn’t even have any of the elements called by your REACT script… if that doesn’t make a whole lot of sense, you may want to go back through the React coursework and make sure you fully grasp the concepts.
Hello, and sorry for the late reply.
How do you set up the page correctly?
-
You have syntax errors. Start by counting your brackets and make sure you are closing things in the correct place (tokenizer and App are both using the wrong syntax).
-
You are importing libraries in 3 different places and they are different versions as well. For example, you have React 16 in the HTML, you have React 18 in the JS settings and you have React 17 as imports in the JS codebox. That is just asking for trouble, even if it isn’t breaking anything.
-
The way marked is used isn’t correct (but that will depend on which version is used and how it is imported). The way to make it work with the current setup is
marked.parse() -
As said, the HTML you have should only be the mount point, i.e. the element with the app id. The rest is going to get replaced by React anyway. It isn’t breaking anything but it also doesn’t make any sense to have it.
You seem to have copied code from the example project. For one, that just isn’t allowed, but it’s also a bad idea if you do not understand the code. You can learn from the example by looking at it, but you can’t copy code.
Ok. Thank you. I deleted the copied code, i deleted also the different versions and took out the app id.
No that has to stay. That is where the app is mounted to.
ReactDOM.render(<App />, document.getElementById("app"));
So there has to be an HTML element with that id.
I see that but now your app isn’t really doing anything.
The point of the challenge is to use it to better learn JS or whatever framework you are using. The point isn’t just to pass the tests. If you want to make this app using React I would suggest you take some more time to better learn it. There are tons of free resources on React.
Um, sadly telling you how to layout the page from scratch would be rather out of scope for a forum help request.
At the very surface level though, Your javascript is using React to build the page, and link it to the <app/> tag on your HTML file. Last time I looked the app tag was missing, but I see its there now. Your React App is rendering the content, but then you also are repeating the content in the HTML code, so doubling up on content… basically React will overwrite what you have in the HTML.
It looks like you are also using a lot of the javascript from the code sample in the challenge if I remember it correctly. That sample was interesting in that it allowed you to hide and maximize your text windows at will… not necessary to pass the test, but just something neat they added. Without analyzing all the code I’m guessing that your mixed content in the javascript and the HTML is making the variables for hiding and showing content be set incorrectly. Also, you’re missing most of the CSS content that laid the sample page out into a presentable way which would cause it to just pile up in the corner. I believe it might be using some of the classes for its maximize and hide code, so without the CSS classes it can’t identify what to hide and show properly.
Anyway, I’d suggest reviewing your code, and see if you can identify what you’re rendering with React and what you need to render with HTML… If you’re not sure, you may want to not mix code betwee react and HTML, and build everything in react (meaning your HTML would only contain the <app/> tag. If your not sure how to build the page with REACT in javascript you may want to retake some of the course work to try and pick up what you don’t understand.
Also, some people have created walkthroughs and stuff you could review if you google or check youtube for freecodecamp markdown. I found one in freeCodeCamp, but it was for building it in Node.js so might be confusing… but if you’re really not sure, some of those can be helpful.
Thank you for the help, I will try.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.