An application that a user can use to generate a random password based on criteria they’ve selected. Features dynamically updated HTML and CSS using Javascript. Application is fully responsive to small and wide views.
Built using Javascript, HTML and CSS. The password generator is an application where a user can generate a secure, random password - between 8 - 128 characters, and providing options to include numbers, special characters as well as upper and lowercase letters.
To get a local copy up and running follow these simple steps. You can also download the source files provided. You will need a text editor such as Visual Studio Code, Xcode or similar to edit the source code.
-
Clone the repo
git clone https://github.com/FAC-73/password-generator.git
-
Pull the latest
git pull
- HTML, CSS and Javascript files include the source code for running the password generator application
- This project demonstrates ways in which javavscript cane be used to manipulate the DOM elements in the browser window and dynamically updating HTML.
The generate button is used to trigger the series of prompts requiring the user to provide parameters for their password as follows:
- Provide a value between 8 - 128 for your password string length. If the user inputs an invalid value they'll go into a loop until a valid value is input.
- If the user wishes to exit the dialog after invoking the action they can do so using the cancel action and returned back to the main view.
- Once they have provided a valid string length value, sequential confirmation dialogs include additional paramenters for generating the password. Each parameter is optional. Parameters include options for numbers, special characters, upper and lowercase letters.
- If the user does not confirm at least one parameter from the four options the user is looped and an alert is shown asking them to choose at least one parameter.
-
Once the user chooses a parameter the selections are stored as a variable and concatenated with the array of letters, numbers and characters determined by the user in the confirm dialogs.
-
A password is then randomly generated using a for loop using the values stored in the passwordCreate variable and the the math.random function. The stringLength variable provides the length of the password to be generated as specified by the user.
-
Once the password is successfully created and populated into the textarea HTML element using a function.
- The password can be copied to clipboard using the 'copy to clipboard' action. This uses an eventListener for the button click, and and execCommand to copy the string, once copied the text changes to green using setAtrribute.
- Index.html - Contains basic layout structure using a custom div element named 'card' to display main content. Semantic html is used for elements such as buttons and textarea
- styles.css - Contains layout, styling and media-queries for html content
- script.js - Contains Variables and variable arrays for numbers, special characters, uppercase and lowercase letters. Two event listeners, loops using while statement for invalid prompt and confirmation inputs, for loop for generating password. Function for generating and writing password to HTML. Function for copying random password to clipboard and manipulating password styles in html text area.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/FeatureName) - Commit your Changes (
git commit -m 'Add some FeatureName) - Push to the Branch (
git push origin feature/FeatureName) - Open a Pull Request
Distributed under the MIT License.
See LICENSE for more information.
Kay Davis
Project repo link: [https://fac-73.github.io/password-generator/](https://fac-73.github.io/password-generator/
Project website: https://github.com/FAC-73/password-generator/