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