diff --git a/demo/README.md b/demo/README.md new file mode 100644 index 0000000..1b26914 --- /dev/null +++ b/demo/README.md @@ -0,0 +1,20 @@ +# Project Update for Password Generator +## Introduction +This repository is a fork of the original [Password Generator](https://github.com/sebastienrousseau/password-generator) by [Sebastien Rousseau](https://github.com/sebastienrousseau). We've created this fork to specifically address an enhancement outlined in [Issue #9](https://github.com/sebastienrousseau/password-generator/issues/9). + +## Purpose +The purpose of this update is to create a web-based user demo interface of a password generator. + +## Features +#### Customizable Password Length: +Users can specify the exact length of the password, with a specific number of iteration of various length. + +#### Character Inclusion Options: +- Digits: Users can choose to include or exclude digits (0-9) in the password. +- Special Characters: For added security, the option to include special characters (such as +/) can be toggled on or off. + +#### Copy functionality +Once a password is generated, it can be easily copied to the clipboard with a single clic. + +#### Password strength indicator +The copy button carries a color indicator based on the length of the password, its purpose is to reflect the strength of the password. \ No newline at end of file diff --git a/demo/demo.html b/demo/demo.html new file mode 100644 index 0000000..5a91298 --- /dev/null +++ b/demo/demo.html @@ -0,0 +1,41 @@ + + + + + + Password Generator + + + +
+

Password Generator

+
+ + + +
+
+
+
+ + +
+
+ + +
+ +
+
+ + + +
+ +
+ +
+ + + + diff --git a/demo/script.js b/demo/script.js new file mode 100644 index 0000000..e27322e --- /dev/null +++ b/demo/script.js @@ -0,0 +1,68 @@ +function generatePassword() { + // Getting input data from html + const lengthInput = document.getElementById('iterationLength'); + const separatorInput = document.getElementById('separator') + const iterationInput = document.getElementById('iteration') + const includeSpecialChars = document.getElementById('specialChars').checked; + const includeDigits = document.getElementById('digits').checked; + + // Parsing input + const length = parseInt(lengthInput.value); + const iteration = parseInt(iterationInput.value); + const separator = separatorInput.value; + + const baseCharset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; + const digits = "0123456789"; + const specialChars = "+/"; + + let charset = baseCharset; + if (includeDigits) { + charset += digits; + } + if (includeSpecialChars) { + charset += specialChars; + } + + + let password = ""; + + for (let j = 0; j'); + background-position: center; +} + + +input[type="checkbox"]:hover { + filter: brightness(0.95); +} + + + + +button { + padding: 20px 20px; + font-size: 16px; + cursor: pointer; + background-color: #0075e2; + color: white; + border: none; + border-radius: 5px; +} + +h1 { + color: #e2e2e2; +}