- Password Generator Web Application
This project focuses on creating a user-friendly web application that allows user to generate secure and random passwords based on their specified criteria. The application runs in the browser and dynamically updated HTML and CSS, powered by custom JavaScript code. The goal is to provide a polished and responsive user interface adaptable to various screen sizes.
Web application will:
- Generate a password when the "Generate Password" button is clicked.
- Prompt users for password criteria, including:
- Length of password (between 8 and 128 characters).
- Character types: Lowercase, Uppercase, Numeric, and Special characters.
- Validate each input, ensuring at least one character type is selected.
- Display the generated password in the page.
Download the project from GitHub repository on your local machine.
-
Open GitHub repository. (link to repository)
-
Select
Codefrom top navigation section. (reference on the image below) 👇
-
Select
<> Codedropdown button from sub section. (reference on the image below) 👇
-
Select
Download ZIPfrom dropdown menu to download project in .zip format. (reference on the image below) 👇
-
Unzip the project.
[!TIP] You can use 7-Zip if you don't have file archiver. 7-Zip is free software with open source. The most of the code is under the GNU LGPL license. Some parts of the code are under the BSD 3-clause License. Also there is unRAR license restriction for some parts of the code. Read 7-Zip License information. Download the application from official website.
-
Open project with VS Code or other IDE.
-
On GitHub.com, navigate to the main page of the repository. (link to repository).
-
Above the list of files, click Code. (reference on the image below) 👇
-
Copy the URL for the repository.
-
To clone the repository using HTTPS, under "HTTPS", click
-
To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click SSH, then click
-
To clone a repository using GitHub CLI, click GitHub CLI, then click (reference on the image below) 👇
-
Open Git Bash.
-
Change the current working directory to the location where you want the cloned directory.
-
Type
git clone, and then paste the URL you copied earlier.git clone https://github.com/FilipPaskalev/Password-generator.git -
Press Enter to create your local clone.
$ git clone https://github.com/FilipPaskalev/Password-generator.git > Cloning into `Spoon-Knife`... > remote: Counting objects: 10, done. > remote: Compressing objects: 100% (8/8), done. > remove: Total 10 (delta 1), reused 10 (delta 1) > Unpacking objects: 100% (10/10), done.
root/ main directory of the project
|----.vscode contains settings for vscode
|----assets/ directory for the assets - video, images, sounds ...
|----imgs/ contains all needed images files for project
|----scripts/ directory for javascript files
|----index.js root script file
|----logic.js store all logic for generating password
|----utils.js store all needed resources for logic.js
|----styles/ directory for the styles
|----style.css store css styles for index.html
|----.prettierrc settings if you using Prettier extension
|----index.html root html file
|----LICENSE information about the license
|----README.md file that describe the project
Screenshot of the application is on the image below.
Important
You can find deployed version of the project on 👉direct link here or by clicking on the picture above. ☝️
Change UI to give user ability to select password options with Input Type Checkbox element in html file for better interaction.
Note
Click on the image for more information. ☝️
Change UI to give user ability to select password length from html with range slider element.
Note
Click on the image for more information. ☝️
Add to UI button where user will be able to copy (to clipboard) generated password. button should be positioned next to button generate password.
Add an element that shows (after password is generated) password's score: very week, week, good, strong, very strong.
Add information sections (What makes a password strong?):
- What is a strong password?
- Why should my password be random?
- Why should my password be unique?
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages and runtime (such as C++, C#, Java, Python, PHP, Go, .NET).
VS Code extension counts blank lines, comment lines, and physical lines of source code in many programming languages. This extension uses other language extensions to determine the line of code. Therefore, you may need to install the language extension to support a new language. Conversely, as the number of language extensions increases, the range of support for this feature also increases.
Total : 7 files, 388 codes, 45 comments, 112 blanks, all 545 lines
| path | files | code | comment | blank | total |
|---|---|---|---|---|---|
| . | 7 | 388 | 45 | 112 | 545 |
| . (Files) | 3 | 183 | 0 | 71 | 254 |
| scripts | 3 | 85 | 45 | 23 | 153 |
| styles | 1 | 120 | 0 | 18 | 138 |
| filename | language | code | comment | blank | total |
|---|---|---|---|---|---|
| .prettierrc | JSON | 5 | 0 | 1 | 6 |
| README.md | Markdown | 147 | 0 | 67 | 214 |
| index.html | HTML | 31 | 0 | 3 | 34 |
| scripts/index.js | JavaScript | 7 | 3 | 4 | 14 |
| scripts/logic.js | JavaScript | 43 | 34 | 17 | 94 |
| scripts/utils.js | JavaScript | 35 | 8 | 2 | 45 |
| styles/style.css | CSS | 120 | 0 | 18 | 138 |
| language | files | code | comment | blank | total |
|---|---|---|---|---|---|
| Markdown | 1 | 147 | 0 | 67 | 214 |
| CSS | 1 | 120 | 0 | 18 | 138 |
| JavaScript | 3 | 85 | 45 | 23 | 153 |
| HTML | 1 | 31 | 0 | 3 | 34 |
| JSON | 1 | 5 | 0 | 1 | 6 |
15 Elements to Include in Your README Document
The Markdown elements outlined in the original design document.
How to concatenate strings in JavaScript?
How to check if value is undefined or null in JavaScript
Detecting an undefined object property
Complete list of GitHub markdown emojis
Copyright (c) 2024 Filip
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.