Skip to content
Submitted 13 days ago

Password generator app

Hector Ramirez•380
@hectorlil48
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

What are you most proud of, and what would you do differently next time?

I am proud of the fact that I was able to do and finish this project. When I started the project, I didn't think it was that hard, but I procrastinated because I didn't know where to start. It took me two weeks to finally convince myself I could do it, and I finally started it. So next time, I will stop doubting myself and just start, and if I get stuck, I can always ask for help.

What challenges did you encounter, and how did you overcome them?

My biggest challenge was starting the project, but once I began to, it wasn't too hard to figure out. I was stuck on the logic part of the code. I ended up getting some practice by writing functions and solving problems on codewars.com. I also got some practice using the Dom. After I got some practice, I got back and was able to accomplish it.

What specific areas of your project would you like help with?

I want to get more practicing using the Dom and writing functions. I'm getting better at CSS, but I still want to get practice on some of the input styles and animations.

Community feedback

  • Chamu•13,340
    @ChamuMutezvaPosted 13 days ago

    Hi Hector Ramirez

    I have gone through your project, here are my observations

    • it is very important to use semantic elements always, that makes you site accessible with little or no additional code. This <div class="icon-container flex"> contains an icon which is used to copy the generated password. Using an image as an interactive element is not advisable as that will be a source of confusion to assistive technology users and secondly the image will require a lot more code to make it accessible to keyboard users. Wrap the icon with a button element and add text in a span that has the sr-only class , so that the text can be visually hidden but available to assistive technology users.
    • I tried to generate a password but nothing is happening. You need to debug your Js
    Marked as helpful
    1
    Hector Ramirez•380
    @hectorlil48Posted 12 days ago

    @ChamuMutezva Hello Chamu, I didn't realize it wasn't working. But I just fixed it. I had changed a class for my styles but forgot to change it in Javascript, which was causing it not to work. I also add the SVG image inside a button tag for better accessibility.

    0

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