bookmark_borderFCC: Markdown Previewer

I completed my first project off of FCC’s Front-End Libraries Certification! Below is my CodePen for the Markdown Previewer.

The partially resizable windows were inspired by their featured sample and the look and feel by an old Windows OS.

See the Pen FCC: Markdown Previewer – MS Inspired by Ari (@yecantu) on CodePen.

There was a few issues that I stumbled upon while working on this mini project:

  1. I needed to learn how to nest React Components for components who don’t know who their future children are. This was the case for the window objects.
  2. The scrollbar on the editor text area is not perfect. I wanted each window to have a scrollbar appear when the content overflows. However, text area already has it’s own scrollbar. My initial method of approaching this was with a parent CSS selector but I discovered they don’t exist! It took me a while to notice that it’s display property is inline by default. After specifying the editor’s display property to block, I was able to cover the scrollbar from it’s parent div. However, it does not appear to be properly aligned and I cannot apply padding to the text area.
  3. Markdown itself.