+ 
+
+
+
+
Originally named Friendly-Parakeet-Master, the JavaScript Password Generator was one of my first attempt at putting together a working app. It runs on a browser and features dynamically updated HTML and CSS that's powered by you guessed it.. JavaScript! As of 2022 I've come back to this project to give the code a facelift and rectify a few issues that were in the last version of this Password Generator. Please enjoy yourselves, thank you for stopping by, and happy coding.
++The JavaScript Password Generator is an app that quickly creates a randomized password based on the users parameters. Users must choose a length between 8️⃣ - 1️⃣2️⃣8️⃣ characters and will then be prompted with multiple questions through window.alert's to determine the parameters for the generated password. Users can choose to include either: Integers, Special Characters, Lowercase Characters, and or Uppercase Characters. Finally users can copy their generated password onto their clipboard for quick and easy deployment. This application should work just fine for mobile devices, for both the desktop and mobile versions users can click on the center text-area to start the program. + +The project was put together with the basics: HTML, CSS, and JavaScript. This application was the first time I used JavaScript to put together an application on my own. Give it a try and generate a few passwords! Thanks so much for checking this Password Generator out, I hope this helps in anyway possible for all your 🤫 secretive needs. Happy Coding! + + +
## :book: User Story: **AS AN employee with access to sensitive data** @@ -42,12 +57,20 @@ Main Resources: - JavaScript ## :minidisc: Installation and Usage: -Install: +### Install: - You can do this by clicking the *GREEN* button above and you can download it by ZIP or copy the SSH! -Usage: +### Usage: - Click "Generate Password" + +Or + +- Click on the box with "Your Secure Password" + +Then + - Select what to include into password - Randomly generated password should then appear in center box +- Copy to clipboard by clicking designated button ## :e-mail: Contact Information: - ### [jwilferd10](https://github.com/jwilferd10) diff --git a/Develop/style.css b/assets/css/style.css similarity index 64% rename from Develop/style.css rename to assets/css/style.css index 310fa58..05a31ec 100644 --- a/Develop/style.css +++ b/assets/css/style.css @@ -40,6 +40,7 @@ header h1 { padding-bottom: 10px; margin: 0 auto 35px auto; width: 30%; + margin-bottom: 5px; } /* Card Container Styles */ @@ -54,6 +55,7 @@ header h1 { margin: 0 auto; max-width: 800px; padding: 30px 40px; + margin-top: 7% } .card-header::after { @@ -140,9 +142,49 @@ header h1 { overflow: hidden; } +#gitHubImg { + display: block; + position: absolute; + margin-left: auto; + margin-right: auto; + padding-bottom: 20px; + left: 0; + right: 0; + text-align: left; + width: 100px +} + /* Media Queries */ +@media (max-width: 1400px) { + .card { + margin-top: 9% + } +} + +@media (max-width: 1200px) { + .card { + margin-top: 10% + } +} + +@media (max-width: 1060px) { + .card { + margin-top: 14% + } +} + +@media (max-width: 760px) { + .card { + margin-top: 18%; + } +} + @media (max-width: 690px) { + .card { + margin-top: 20%; + } + .btn { font-size: 1rem; margin: 16px 0px 0px 0px; @@ -158,6 +200,12 @@ header h1 { } } +@media (max-width: 550px) { + .card { + margin-top: 24% + } +} + @media (max-width: 500px) { .btn { font-size: 0.8rem; @@ -166,10 +214,74 @@ header h1 { header h1 { width: 70%; } + + h2 { + font-size: 125%; + white-space: nowrap; + text-align: center; + } +} + +@media (max-width: 490px) { + #password { + padding-bottom: 45%; + position: none; + } + + .card { + margin-top: 28%; + } } -@media (max-width: 380px) { +@media (max-width: 440px) { + .card { + margin-top: 30%; + } +} + +@media (max-width: 400px) { header h1 { width: 85%; } + + #password { + padding-bottom: 50%; + } + + .card { + margin-top: 32%; + } +} + +@media (max-width: 360px) { + #password { + padding-bottom: 60%; + } + h2 { + font-size: 110%; + white-space: nowrap; + text-align: center; + } + .card { + margin-top: 38% + } +} + +@media (max-width: 329px) { + #password { + padding-bottom: 80%; + } +} + +@media (max-width: 300px) { + #password { + padding-bottom: 100%; + } + h2 { + font-size: 100%; + white-space: nowrap; + } + .card { + margin-top: 44%; + } } \ No newline at end of file diff --git a/assets/img/GitHub.png b/assets/img/GitHub.png new file mode 100644 index 0000000..ea6ff54 Binary files /dev/null and b/assets/img/GitHub.png differ diff --git a/assets/img/passGenDesktop.jpg b/assets/img/passGenDesktop.jpg new file mode 100644 index 0000000..0265036 Binary files /dev/null and b/assets/img/passGenDesktop.jpg differ diff --git a/assets/img/passGenMobile400x887.jpg b/assets/img/passGenMobile400x887.jpg new file mode 100644 index 0000000..43f7fb1 Binary files /dev/null and b/assets/img/passGenMobile400x887.jpg differ diff --git a/Develop/script.js b/assets/js/script.js similarity index 98% rename from Develop/script.js rename to assets/js/script.js index b48c6da..fd579d5 100644 --- a/Develop/script.js +++ b/assets/js/script.js @@ -94,8 +94,8 @@ let generatePassword = function() { else { // alert user window.alert("You need to provide a valid length!"); - // return user back to their questions - return generatePassword(); + // return user back to initialState + return initialState; } }; diff --git a/index.html b/index.html index db1dedb..549441a 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@
+
+