Hi everyone! Welcome back to another blog where I document the things I learned in web development. I do this because it helps retain the information and concepts as it is some sort of an active recall.

On days 63-65, after completing the first project in the Front End Development Libraries course, I moved on to the second one called “Markdown Previewer”.

It is a program that allows you to input text in the textarea element and it will render it as HTML code in the webpage.

How I did it is first, I did the plain HTML of the program. I used React because I want to practice my React skills. 

I added 2 div containers. One for the textarea element where you input your text. And another for an element where it renders your code as HTML.

Next, I moved straight to adding the functionalities to fulfill the user stories. I first initialized a state input and created functions to handle event changes in the textarea, as well as render the inputted text as HTML code to the webpage. I used the marked library given by the course in the user stories so that there's no need to parse my own. 

After that, I set an attribute to my div container named dangerouslySetInnerHTML to convert the inputted texts as HTML code. This is paired with the function I made earlier where I used the marked library. 

Lastly, I finalized the design using vanilla CSS to make it look good. 

Overall, the project was short and easier than the previous one named “Random Quote Machine”. I still feel good and satisfied with what I made since at this point, every project small or large is a good practice for me. So, I'll take this as another win for the week.

Anyways, that’s all for now, more updates in my next blog! See you there!