I created a simple password generator app using JavaScript, HTML, and CSS. The app allows users to generate a random password with a length of 14 characters, which can include uppercase and lowercase letters, numbers, and special characters. The app has a "copy" button that allows users to easily copy the generated password to their clipboard.
I also added an alert message that appears for 2 seconds after the password is copied, letting the user know that the password has been copied successfully. The app is responsive and can be used on both desktop and mobile devices. Overall, it was a fun project that allowed me to practice my JavaScript skills and learn more about DOM manipulation.
You can try out the application by visiting this link.
- HTML
- CSS
- JavaScript
To get started with this project, clone the repository and open the index.html file in your preferred web browser.
I learned some new concepts while working on the password generator app.
readonly - For instance, I discovered the readonly keyword in HTML, which allowed me to create input fields that could not be modified by the user.
I also learned about Content Delivery Networks (CDNs), which are networks of servers used to provide faster and more reliable delivery of web content like JavaScript libraries and CSS stylesheets.
I learned how to use the fa-2x CSS class to display Font Awesome icons at a size of 2 times their original size. I also learned how to use the transform: scale(0.95) CSS property to scale an element, such as a Font Awesome icon, to a size of 95% of its original size.
In addition, I discovered the inputEl.setSelectionRange(0, 9999) JavaScript method, which allowed me to select all the text in an input field, making it easier to copy the generated password to the clipboard.
Finally, I learned about the navigator.clipboard JavaScript object, which provided a simple way to work with the clipboard. I used the writeText() method to copy the generated password to the clipboard when the user clicked the "copy" button.
I faced a few challenges while working on the password generator app. One of the main issues I encountered was the number of new concepts I needed to use and implement. It was challenging to keep track of everything at first, but I tried my best to break down each new concept into smaller parts to better understand how they worked and how to use them in my project.
Another challenge I faced was with the setTimeout method. It took me a little while to get the hang of it, but I spent some time experimenting with different approaches and testing them out until I found a solution that worked.
Despite these challenges, I learned a lot from this project and feel more confident in my ability to work with these new concepts going forward.
