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!
Top comments (0)