Markdown Previewer- with some interactive buttons

Hello, this is my Markdown Previewer project

I could still polish the code a bit more, but got exhausted with the project and it looks complete enough. The CSS went more loaded than i anticipated, but it was good practice for flex and grid, which i used to make the page responsive in different circumstances.
You can see its built with React and it uses Bootstrap for some appearance. Im happy about a component which renders buttons with different classes, appearance and functionalities. There are interactive buttons, some able to switch the colors. You could even add additional color button, by writing bootstrap color in the array responsible for keeping their values.

Congrats on finishing this project. I like the extra touches. I do have some suggestions just to get you thinking :slight_smile:

  • When using the keyboard only, in order to get the focus in the text input window I have to tab through all of the color buttons, both for the text input window and text preview window. That’s a lot of tabbing just to be able to type into the text input window :slight_smile: I would suggest you reorder the HTML so that the focus is on the text input window much sooner, probably before any of the color buttons. I do want to give you props though for having clear focus indicators on all of the buttons. I can easily see where my keyboard focus is.

  • The responsiveness to changes in view port width is quite good. Now I’ll give you the challenge of making it responsive to changes in text size as well. If you don’t know how to manually change the text size, using Firefox go to Edit->Preferences, scroll down to Zoom and activate ‘Zoom text only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. Your app should be able to gracefully handle a minimum of a 200% increase in text size. One tip on how to do this is to use em units instead of px for your CSS break points. Using em units will take into account both changes in view port width and text size.

hey thanks for looking up my project.
I havent pay attention that tabbing is related to the html order, i will have this in mind when i want elements of my code more easily accessible. In this case i ordered items using flex and then grid and then again reordered for different screens, so fixing up the order at this point would be much trouble. Btw the pleasant focus indicator is all thanks to Bootstrap technologies, all i did was include their default button class on my buttons :slight_smile: and didnt even realize its part of the deal!
I never paid attention on how my page behaves when zooming in, even on regular font size its enough trouble to fix make things stand in order, but that often must be duo to my creative drive to always rearrange things a certain way i see them for different resolutions. Now i saw zooming in would indeed screw user interface at few situations. This is gonna be another checkbox to look when i fix my projects accessibility in future.

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