diff --git a/css/style.css b/css/style.css index 18c0778..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 { @@ -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 { diff --git a/index.html b/index.html index 94ed4f4..5cc9440 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
- +
- +
- +
- - - - diff --git a/js/script.js b/js/script.js index 631bfc4..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` @@ -81,8 +79,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 +95,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 +103,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; @@ -150,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%)"; @@ -177,11 +158,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 }) }