Skip to content
Submitted about 2 years ago

Password Generator - Light and dark themes - React && StyledComponents

David•8,000
@DavidMorgade
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Password generator app
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hello and welcome to my Password-Generator solution

Extra Features:

  • Light and Dark themes. (inspired from Github user search App)
  • Sets the default theme on load (depending on your preferred browser/OS theme)
  • Theme gets saved on reload.
  • Custom tooltip when copying the password on the clipboard

Built with:

  • Create React App
  • Styled Components
  • Mobile First

What I Learnt:

  • How to use an manipulate state with an <input type='range'> (Probably gonna update this project with an input range instead of a button)

Doubts:

  • Is it worth using a <span> instead of a placeholder? They seem to be more customizable through CSS than a placeholder (positioning at least), probably going to try it for my next text input.

  • Also looking for opinions on the color pallete for the light theme.

As always, any feedback is welcome here, if you have any suggestion / change I will update the project if necessary! Also looking for someone to test the App and find any bugs I missed

Thanks everyone, keep coding!

Community feedback

  • Akande Daniel•40
    @Akandedaniel7Posted about 2 years ago

    Hi David! What a wonderful project indeed, i got inspired by this project which made me realize to never give up.

    1
    David•8,000
    @DavidMorgadePosted about 2 years ago

    @Akandedaniel7 Thanks for the vibes man! this is a long race where you need patience to win, keep it going and learning everything you can!

    0
  • Asha•1,210
    @livinglifemeaningPosted about 2 years ago

    Hi David! Beautiful project! One thing I wanted to let you know of is that on my computer when I open it, the sizing seems off, as the password generator part is too high where I cannot see the sun and moon symbol. When I open inspector tools and view mobile version I can. Also, in my personal opinion, I feel like the transition between the two color themes is slightly jarring.

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord