Build a Markdown Previewer: where to start?

Hi,
For the first time since I started this fcc learning adventure, I don’t know where/how to begin with solving the problem (ouch! ). Everyone else seems to be up to the task, so I am under the impression that I missed something huge during my learning.
Theoretically, this looks fairly simple. I take text from the HTML element into the React, make React do the required markdown and render it back to the HTML. In practice, it gets complicated.

  1. Everyone seems to be using this “mark” method. Is it a method from JS, React,JSON, Ajax or something else?
  2. What additional learning must I do before taking on this challenge (JSON, Ajax, etc.)? Links to these lessons would be appreciated (if possible)?
  3. What libraries do I need to set-up for this challenge?
  4. Any other advice given is advice well received :smiley:

Thank you.

  1. marked is a JS library used to convert markdown to HTML.

  2. Mainly just React. I would suggest a bit of reading about what markdown is to be useful as well.

  3. React and some kind of markdown-to-HTML library.

  4. Start, fail, try again. Rinse, repeat. Keep at it. If you need help at some point with anything specific you can always create a forum thread asking for help.

Good luck, and happy coding.

If you are going to use React (which I think is a good idea) then I would recommend you build it on your own computer using Create React App, which will set up everything for you.

definitely become more acquinted with what markdown is and how to convert markdown to visual representation(using html). There is a library that can do that for you and greatly simplify your code. I dont recall having to use any other particular technologies apart of react.
This is how i solved the challenge a while ago and there could definitely be improvements looking at it now, but its fairly simple. Since the marked librariy made things so short, i used the opportunity to add some additional funcitonalities like style coloring buttons and practiced some scss and grid

1 Like

Thank you for sending a link to yor solution of this problem. It helps me to ‘solidify’ what I’ve learned so far.
Definitely, I need to learn properly about mark down-which is the lesson in it’s self from this challenge :smiley:

All the best.

Thank you for the reply. It helps me to sort out ‘what is what’ :sweat_smile:

Thanx . I saved the this page to my favorites book marks., in the browser.

Well, not really washed up…more like beaten up :weary: and not exactly an expert on Markdown library…but I have an idea on what’s what :grinning_face_with_smiling_eyes:

I mean, it get easier, right? :sweat_smile:

Thank for the help!

Hi,
I’ve managed to complete the test with the help of your solution. Thank you.

If I can bother you a bit more, I’d have a question with regards to the creation of buttons with Bootstrap.

Part of your code:

const MyButton=props=>{return (<button className={props.stats[0]} onClick={props.stats[3]}><i className={props.stats[2]}/> {props.stats[1]}</button>)}

You are assigning a className to a button and creating onClick method with props.stats[0], or props.stats[1], or props.stats[3].
Where is this stats array coming from? Bootstrap library? How can I know what is in this props.stats array?

Thanx.

hey, thanks for the question.
My code can be a bit confusing and it is because ive tried to use different approaches, disregarding how efficient or not they are, simply for the sake of try them and see how they do. It also might be inconsistent as i might have started with one thing in mind, but as i evolved the project and added new features, i sometimes would do on top of old ones, which can make the code strey from its initial degsin. Idk, if that makes much sense^^. Even i need to look around closely to figure out how i actually wrote it, so i can asnwer your question :wink: . One of my goals was to shorten the code and instead of write raw data, i used functions to create those, you will see in the following explanation.
As you have figured out, there is the stats array, which contains data for each button, first element being the class name(s)(bootstrap button classes), second button text, 3rd icon class name(font awesome classes), and last element being the on click event. This line of code in the beginning of my code declares the several types of color buttons in an array:

const palette=['warning', 'danger', 'success', 'primary', 'dark']

The code is wrote in such fashion, that you can type in additional valid bootstrap color codes, which will add the respective button to the document, for example you can add ‘info’ . Its another topic how well that would look, as i havent bothered to test more buttons ^^.
Inside the App component(in the render function), you can see where i additionally manipulate the array of the different type of color buttons so it can be used for the buttons element:

const palette1=palette.map(item=>[`m-1 btn btn-${item}`, '', `fas fa-paint-brush`, ()=>this.setColor(item)])

It goes thru every element(‘warning’, ‘danger’ etc) and creates an array, which is in fact the stats array you’ve been looking for. You can see the first element being “m-1 btn btn-${item}”, where item is replaced with the respective code, ‘danger’ for example, which will create the bootstrap danger button. The second element is empty, as it represents the button text, which i dont use for the color buttons. 3rd element you can see the font awesome icon class “fas fa-paint-brush”, which is a brush icon. Last element is the button on click event, ()=>this.setColor(item), the App method which changes color. It uses the same bootstrap color codes as parameters. That color is then stored in the component state and all elements has it applies as bootstrap class to set their coloring.
Here is where i finally map thru every element in the palette buttons array to actually create the elements:

<div id='bb1'>{palette1.map(item=><MyButton stats={item}/>)}</div>

Its within the JSX body of the render function. it goes thru the buttons data for the first set of color buttons(as i have two sets, one controls the colors for the input area, the other takes over the preview area) and creates button elements.
For the functionality buttons you can see the data array is created differently:

const buttons=[[' Clear', 'trash', this.clearConsole],[' Reset', 'redo', this.refreshCode]].map(item=>{return [`m-1 btn btn-dark`, item[0], `fas fa-${item[1]}`, item[2]]})

Its decalred again within the render function. its only two buttons, “Clear” and "Reset. I decalred only their key words: button text, front awesome icon name and button on click event(methods within the app component, this is why the arrays are created inside the app, so they can easily access its methods). I map throught the two buttons, to render the data in the correct format, so it can be used in the button component, which ive already mentioned is a 4 elements array of bootstrap button classes, button text, font awesome icon(classes) and button on click event. Unlike the colors buttons, here we have button text, the bootstrap classes are identical, but the fontawesome icons are different, as well as the on click events.
The fun thing is, how the different buttons are so…different in design, yet they use the same button component to be rendered, as its designed to be flexible

PS: if you add this line of code:

console.log(buttons, palette1, palette2)

after those arrays are declared in the App render function, you can see in your browser console how the arrays used as parameters for the button components actually look like

1 Like

Hey, thank you for this detailed answer. I think taking different ways to experement a bit is a great approach.
Your input is rich with info and it will take me some time to digest it, but is certanly a goood way for newbie like myself to make progress.

Thanks a lot.
Cheers :grinning:

1 Like

sure, feel free to ask where things remain unclear, im aware my explanation can be confusing at times

1 Like

Just to be clear. You are supposed to code this yourself, not using other people’s code.


  1. You will not learn much, if anything, by just copying code.

  2. Submitting a project that is copying code is in violation of the Academic Honesty Policy that you have to agree to. You can look at code for inspiration and guidance, but you can not just copy it.

I am not copying the code. Not sure why would you think that.
Academic dishonesty being one of the reason. The other reason is I surely would not want to be waisting my time sitting all the long hours and learn nothing.

The codes are open for guidance and I do use them for this purpose. Hence “I’ve managed to complete the test with the help of your solution”.

I hope this is clear now.

1 Like

It just sounded that way. First, you said it works with their solution and then you started to ask about their code. Anyway, it was just an FYI.

It reads out in a completely different way sir.

We were discussing matters that go beyond conditions to pass the test. While passing the test was no motive, learning most certainly was. Mr. Sylvant has walked extra miles in solving this problem and has generously shared his findings with me.

Last but not least, questioning someone’s integrity is never on FYI only basis.

I am happy that we resolved this matter.

All the best.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.