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! 🙌🏼
(⌛ please wait for complete loading if not shown yet)
I need to work more on its responsiveness. Coming soon!
- HTML5 markup
- Pure CSS
- Vanilla JavaScript
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.
- Website - Amir Sabagh
- GitHub - @amir-the6th
- LinkedIn - Amir Sabagh
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.