Password Generator

This is my solution to a solo project at Scrimba JavaScript course. I built this project from scratch and added more functionalities than what was asked such as copy-on-click, optional symbols, and determining password length. Hope you guys like it! 🙌🏼

Table of contents

• Overview
  • Links
  • Demo
  • Screenshot
• My process
  • Built with
  • What I learned
• Author
• Acknowledgments

Overview

Demo

(⌛ please wait for complete loading if not shown yet)

Screenshot

Desktop

Mobile

I need to work more on its responsiveness. Coming soon!

Links

• Solution URL: Link
• Live Site URL: Link

My process

Built with

• HTML5 markup
• Pure CSS
• Vanilla JavaScript

What I learned

I occurred many difficulties throughout the project, including:

• Configuring the copy-on-click button: I was displaying the password in a <p> element and Clipboard API kind of only welcomes <input> & <textarea>. It took me a while to understand this and set everything again.
• I wanted to display the characters array in another file and import it in the index.js file. But that didn't turn out well because in order to do that, your js file should be of type module; and when I set the type, the onclick() event caused me problems. I tried to use .addEventListener to fix the problem, but then another issue happened in the copyOnClick() where the caught error stated that "Document is not focused!"

Overall, I really enjoyed my time working on this project. It made me realize a simple-looking task can become pretty complex when you try to add more functionalities to it.

Author

• Website - Amir Sabagh
• GitHub - @amir-the6th
• LinkedIn - Amir Sabagh

Acknowledgments

I want to give a shout-out to the Scrimba CEO and professor, Per Harald Borgen(@perborgen). I recently finished the HTML and CSS course on Scrimba and am currently doing the follow-up course, Learn JavaScript for Free.