Help on Build a Markdown Previewer on codepen

JavaScript
#1

Tell us what’s happening:
I’ve done my project locally with node packages locally, and it’s ok on localhost:3000. But when i paste my codes on codepen, nothing works. I’m so confused with this. What to do for it to work on codepen too PLEASE?

Your code so far
This is the link to my project markdown_previewer
Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:62.0) Gecko/20100101 Firefox/62.0.

Link to the challenge:

#2

Because of dependencies.

You installed react, remarkable, etc… packages on your local machine using node. But obvioulsy you can’t do the same on codepen. You will need to bring dependencies in a different way. If you click settings button on JS part of your codepen. You can bring in react and react dom. I am not sure about other packages though.

So it’s probably better to actually deploy a site on your local machine without using codepen. Check into netlify or github pages.

#3

The way you make a react app on codepen works a little differently.

You’ll want to go into the JS settings tab and import React, Remarkable and react-DOM.

Then you will be able to able to render your project like you have in the FCC examples:

put #app in your html tab and ReactDOM.render(
, document.getElementById(‘app’)); in your react page and it should likely work.

I will double check for you to make sure I’m not leading you down the wrong road.

Good Luck!

#4

Those steps should get you to start rendering you page, it looks like you may just have to do a little editing on your render function to get a final result.

Good Luck!

#5

what kind of editing @bgrosser0 ? Help me on what to do else exactly, for it looks wells locally with node, but we have to get the same result on codepen, which works differently.

#6

I’ve got the react and react-dom links on that setting button on the js part, but no success. What to do exactly @shimphillip ? I just wish to get the same result as i did locally with react. As you know we have to make it work on codepen as well as locally. How did you do that??

#7

I’ve spent a while looking at your code and it looks like your are rendering things correctly, my only guess would be looking into how remarkable works, it may be worth your time and just retyping your javascript on a new pen as well, sometimes I’ve had Codepen be a bit difficult with copy and pasted code.

This can also be a good way to check for bugs given you only have roughly 40 lines of code in your JS file.
(Worst case you get some typing practice :neutral_face:)

See if you notice where things aren’t functioning the way they should be and start there.

#8