From 966e7efe5d1dbb47f9645d1f9c828ff628cb08d2 Mon Sep 17 00:00:00 2001 From: Nathan Woodburn Date: Sat, 18 Feb 2023 15:06:06 +1100 Subject: [PATCH] generator: Updated socials & style changes Added on click to generated password text box if empty generate password. Added link to my website Added favicon --- generator/index.html | 27 +++++++++++++++++++++------ generator/script.js | 18 +++++++++++++++++- generator/style.css | 6 ++++++ 3 files changed, 44 insertions(+), 7 deletions(-) diff --git a/generator/index.html b/generator/index.html index a7a65bb..562f8c3 100644 --- a/generator/index.html +++ b/generator/index.html @@ -1,10 +1,25 @@ - - Password Generator | Nathan Woodburn - - + + Password Generator | Nathan.Woodburn/ + + + + + + + + + + + + + + + + + @@ -15,7 +30,7 @@
Generated Password
click to copy
copied
-
CLICK GENERATE
+
@@ -44,7 +59,7 @@
- + Nathan.Woodburn/ diff --git a/generator/script.js b/generator/script.js index aad7a8f..469bee5 100644 --- a/generator/script.js +++ b/generator/script.js @@ -81,6 +81,7 @@ const symbolEl = document.getElementById("symbol"); // Button to generate the password const generateBtn = document.getElementById("generate"); +const generateBtntxt = document.getElementById("textgenerate"); // Button to copy the text const copyBtn = document.getElementById("copy-btn"); // Result viewbox container @@ -126,7 +127,7 @@ window.addEventListener("resize", e => { copyBtn.addEventListener("click", () => { const textarea = document.createElement("textarea"); const password = resultEl.innerText; - if (!password || password == "CLICK GENERATE") { + if (!password || password == "generateBtntxt") { return; } textarea.value = password; @@ -156,6 +157,21 @@ generateBtn.addEventListener("click", () => { copiedInfo.style.opacity = "0"; }); +// When Generate is clicked Password id generated. +generateBtntxt.addEventListener("click", () => { + const length = +lengthEl.value; + const hasLower = lowercaseEl.checked; + const hasUpper = uppercaseEl.checked; + const hasNumber = numberEl.checked; + const hasSymbol = symbolEl.checked; + generatedPassword = true; + resultEl.innerText = generatePassword(length, hasLower, hasUpper, hasNumber, hasSymbol); + copyInfo.style.transform = "translateY(0%)"; + copyInfo.style.opacity = "0.75"; + copiedInfo.style.transform = "translateY(200%)"; + copiedInfo.style.opacity = "0"; +}); + // Function responsible to generate password and then returning it. function generatePassword(length, lower, upper, number, symbol) { let generatedPassword = ""; diff --git a/generator/style.css b/generator/style.css index 4a88263..7a29701 100644 --- a/generator/style.css +++ b/generator/style.css @@ -33,6 +33,7 @@ button { margin: 10px -5px; margin-bottom: 30px; color: #fff; + text-align: center; } .result { @@ -308,4 +309,9 @@ a:hover { 40%, 80% { transform: rotate(10deg); } +} +button.textgenerate { + color: white; + background-color: transparent; + font-size: larger; } \ No newline at end of file