Frontend Mentor | markdown editor showdownjs, react, css grid , styled components coding challenge solution

Community feedback

@jpal91

Posted about 2 years ago

Your menu transitioning so smoothly made me realize how choppy mine is so I'm going to have to go back and fix that...

Also, great idea on creating your own hook for useLocalStorage(), that was really cool and I've never though about doing something like that before. Great job!

One recommendation I'd add in, mostly because I took a while trying to do the same thing, is adding in some CSS to remove the scrollbars. This is what I used as overrides in Material UI but you should be able to get the gist for Vanilla CSS -

  html: {
    scrollBehavior: "smooth"
  },
  "::-webkit-scrollbar": {
    width: "5px"
  },
  "::-webkit-scrollbar-track": {
    visibility: "hidden"
  },
  "::-webkit-scrollbar-thumb": {
    visibility: "hidden"
  },
  ":hover": {
    "::-webkit-scrollbar-thumb": {
      border: "5px solid gray",
      borderRadius: "10px",
      visibility: "visible"
    }
  },

This way the scroll bars are only visible on hover and they look a little nicer too. Great job overall!

Oscar• 260

@OscarRobertRodriguez

Posted about 2 years ago

anyone know why my screenshot isn't appearing ?

Vanza Setia• 27,795

@vanzasetia

Posted about 2 years ago

@OscarRobertRodriguez The site loads properly on my browser. I don't know what causes it. I would let @mattstuddert know about this to investigate the problem.

By the way, great job on this challenge! It looks great to me. 👍

Matt Studdert• 13,611

@mattstuddert

Posted about 2 years ago

@vanzasetia, thanks for flagging this 👍

Sorry about that, Oscar. Your project loads fine for me as well. There's a short moment where there's no content as it loads, but I wouldn't expect that to cause an issue. We'll take a look into it. Heads up that this won't be possible until next week, but I'll message back here once I've got an update 🙏

Also, just to echo what Vanza said: fantastic work on this challenge! Everything looks brilliant and works as expected based on the brief. You've done a really good job!

Oscar• 260

@OscarRobertRodriguez

Posted about 2 years ago

@mattstuddert thanks no rush

Oscar• 260

@OscarRobertRodriguez

Posted about 2 years ago

@vanzasetia thanks

Matt Studdert• 13,611

@mattstuddert

Posted about 2 years ago

@OscarRobertRodriguez, we've taken a deeper look into this, and the screenshot isn't working because your solution is broken in Firefox, which is the browser we use to take the screenshots. I should have checked that sooner...sorry! 😅

Firefox is throwing a RangeError: date value is not finite in DateTimeFormat.format() error at the moment. You can generate a new screenshot as soon as you resolve that issue and push your changes.

A fun bit of cross-browser debugging for you! 😆

Marked as helpful

Oscar• 260

@OscarRobertRodriguez

Posted about 2 years ago

@mattstuddert ok i fixed it thanks. it doesn't take full page I'm guessing some overflow hidden i used on body

Matt Studdert• 13,611

@mattstuddert

Posted about 2 years ago

@OscarRobertRodriguez, brilliant. Good work fixing the issue! 👍

markdown editor showdownjs, react, css grid , styled components

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community