Front End Development Libraries Projects - Build a Markdown Previewer

JavaScript
1

Ok so I’m petulantly after some advice / moral support / someone to mop up the tears.

I love this site but really feel like I’ve hit a wall with this one, and am wondering if I shouldn’t be here yet?

A little background, I have zero coding experience and have started from the beginning on free code code camp from html, CSS, JavaScript and now React. Not always been easy but I got here.

After working out how to get codepen to even understand React I completed the first challenge and built a functioning, quote machine (hi five me!) onto the this one. I have built a very basic structure and ensured anything typed in the input was replicated in the box below. But, and here’s the But…

While I have an account I’ve never used Github and don’t know what ‘GitHub flavoured markdown’ is. I haven’t imported from other libraries yet, and I have never parsed a markdown in my life. None of this has been covered (Always blame the teachers) .

I have obviously googled, found definitions, instructions on importing, and similar examples and even found a Youtube video with instructions to solve this very freecodecamp challenge. But it seems that I would just be copying the code without really understanding.

Lengthy way to ask a question. Sorry about the long whinge (I’m British, it’s what we do best).

Basic questions…

  • Should I retreat and go back and study more basics elsewhere (All tips welcome)?

  • Should I persevere and will all become clearer later on ( I don’t know if the previous knowledge requirements continue to rise or if this is an anomaly?)

  • Should I know my place, and carry on labouring for a living until either my shovel or my skeleton collapses. (Obvs not this).

Anyway. Thanks everyone involved in this. Any help/encouragement massively appreciated.

Keep on keepin on.

Your code so far

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
text: “”,
input: “this is just a test ipso do dah diddly”
}
this.handleChange = this.handleChange.bind(this);
}

handleChange(event) {
this.setState({
input: event.target.value
})
}

render() {
return (


{this.state.input}

{this.state.input}


)
}
}

ReactDOM.render(, document.getElementById(“markup-app”))

Your browser information:

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

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

Link to the challenge:

1 Like
2

HINT: You don’t need to parse Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked

I would look at the docs for the suggested lib.

You can always learn more, it is never time to stop learning. Go back and revisit the tutorials as needed and skip the parts you are already comfortable with.

Use the project as a practical way of applying what you have learned. It is fine to look at how others have done it. Using React with markdown is a common thing to have to do so you do not need to look at how other people have solved this exact challenge to learn how to make a markdown editor.

3

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