From 50ea227d915d938ccb03f3c68ff9586616688632 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=90=D0=BA=D1=81=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Wed, 9 Feb 2022 15:39:18 +0800 Subject: [PATCH 1/6] Removed shitty copyBtn --- js/script.js | 28 +++------------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/js/script.js b/js/script.js index 631bfc4..532d7e5 100644 --- a/js/script.js +++ b/js/script.js @@ -81,8 +81,6 @@ const symbolEl = document.getElementById("symbol"); // Button to generate the password const generateBtn = document.getElementById("generate"); -// Button to copy the text -const copyBtn = document.getElementById("copy-btn"); // Result viewbox container const resultContainer = document.querySelector(".result"); // Text info showed after generate button is clicked @@ -99,22 +97,6 @@ let resultContainerBound = { left: resultContainer.getBoundingClientRect().left, top: resultContainer.getBoundingClientRect().top, }; -// This will update the position of the copy button based on mouse Position -resultContainer.addEventListener("mousemove", e => { - resultContainerBound = { - left: resultContainer.getBoundingClientRect().left, - top: resultContainer.getBoundingClientRect().top, - }; - if(generatedPassword){ - copyBtn.style.opacity = '1'; - copyBtn.style.pointerEvents = 'all'; - copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`); - copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`); - }else{ - copyBtn.style.opacity = '0'; - copyBtn.style.pointerEvents = 'none'; - } -}); window.addEventListener("resize", e => { resultContainerBound = { left: resultContainer.getBoundingClientRect().left, @@ -123,10 +105,10 @@ window.addEventListener("resize", e => { }); // Copy Password in clipboard -copyBtn.addEventListener("click", () => { +resultContainer.addEventListener("click", () => { const textarea = document.createElement("textarea"); const password = resultEl.innerText; - if (!password || password == "CLICK GENERATE") { + if (!password || password == "-") { return; } textarea.value = password; @@ -177,11 +159,7 @@ function generatePassword(length, lower, upper, number, symbol) { function disableOnlyCheckbox(){ let totalChecked = [uppercaseEl, lowercaseEl, numberEl, symbolEl].filter(el => el.checked) totalChecked.forEach(el => { - if(totalChecked.length == 1){ - el.disabled = true; - }else{ - el.disabled = false; - } + el.disabled = totalChecked.length == 1 }) } From 4d39d0615060ad0ae6b371127fdfaa9f55f0c657 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=90=D0=BA=D1=81=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Wed, 9 Feb 2022 15:40:15 +0800 Subject: [PATCH 2/6] Result scaling based on length & removed console.clear() --- js/script.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/js/script.js b/js/script.js index 532d7e5..82b8700 100644 --- a/js/script.js +++ b/js/script.js @@ -2,8 +2,6 @@ // I tried my best to make the code as simple as possible please dont mind the variable names. // Also this idea came in my mind after checking Traversy Media's latest video. -// Clear the concole on every refresh -console.clear(); // set the body to full height // document.body.style.height = `${innerHeight}px` @@ -132,6 +130,7 @@ generateBtn.addEventListener("click", () => { const hasSymbol = symbolEl.checked; generatedPassword = true; resultEl.innerText = generatePassword(length, hasLower, hasUpper, hasNumber, hasSymbol); + resultEl.style.fontSize = (30 - (length / 2)) + "px"; copyInfo.style.transform = "translateY(0%)"; copyInfo.style.opacity = "0.75"; copiedInfo.style.transform = "translateY(200%)"; From e1e0376125fc7956106f72f82737d5638c88f407 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=90=D0=BA=D1=81=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Wed, 9 Feb 2022 15:48:09 +0800 Subject: [PATCH 3/6] Removed copyBtn styles --- css/style.css | 29 +---------------------------- 1 file changed, 1 insertion(+), 28 deletions(-) diff --git a/css/style.css b/css/style.css index 18c0778..eef31c2 100644 --- a/css/style.css +++ b/css/style.css @@ -80,34 +80,7 @@ button { color: #fff; text-align: center; line-height: 65px; -} - -.result #copy-btn { - position: absolute; - top: var(--y); - left: var(--x); - width: 38px; - height: 38px; - background: #fff; - border-radius: 50%; - opacity: 0; - -webkit-transform: translate(-50%, -50%) scale(0); - transform: translate(-50%, -50%) scale(0); - -webkit-transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275); - transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275); - cursor: pointer; - z-index: 2; -} - -.result #copy-btn:active { - -webkit-box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.08); - box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.08); -} - -.result:hover #copy-btn { - opacity: 1; - -webkit-transform: translate(-50%, -50%) scale(1.35); - transform: translate(-50%, -50%) scale(1.35); + font-family:monospace; } .field-title { From b0f6631a9fe0831df4278c416aa70e4616a0ebcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=90=D0=BA=D1=81=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Wed, 9 Feb 2022 15:52:10 +0800 Subject: [PATCH 4/6] HTML corrections --- index.html | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 94ed4f4..b8a1e3e 100644 --- a/index.html +++ b/index.html @@ -1,15 +1,12 @@ - Password Generator - -

Password Generator

@@ -17,39 +14,34 @@
Generated Password
click to copy
copied
-
CLICK GENERATE
- +
-
length:
-
settings
- +
- +
- +
- - - From e66f73a46a0b3cdc35098243573af3f58d3a83ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=90=D0=BA=D1=81=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Wed, 9 Feb 2022 16:37:26 +0800 Subject: [PATCH 5/6] Moved generate button above length slider --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index b8a1e3e..5cc9440 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@
copied
-
+
length:
@@ -39,7 +40,6 @@
- From ab2d5719b6a80ad7fd1cb59e4f8eac8dc4d976be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=90=D0=BA=D1=81=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2?= Date: Wed, 9 Feb 2022 16:37:45 +0800 Subject: [PATCH 6/6] Default font sans-serif --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index eef31c2..c66a2fe 100644 --- a/css/style.css +++ b/css/style.css @@ -35,7 +35,7 @@ button { border-radius: 10px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15); - font-family: "Montserrat"; + font-family: "sans-serif"; } .container h2.title {