From a674801571e289727cf51e09a6b8bb88149ab8d2 Mon Sep 17 00:00:00 2001 From: nitishkhobragade Date: Wed, 21 Feb 2024 00:30:48 +0530 Subject: [PATCH] update in random password generator correction in responsiveness, and made it dynamic for user to control length --- 09_random_password_gen/app.js | 15 +++- 09_random_password_gen/index.html | 7 ++ 09_random_password_gen/styles.css | 123 +++++++++++++++++++++++++----- 3 files changed, 122 insertions(+), 23 deletions(-) diff --git a/09_random_password_gen/app.js b/09_random_password_gen/app.js index 4437625..5ac9afa 100644 --- a/09_random_password_gen/app.js +++ b/09_random_password_gen/app.js @@ -1,5 +1,8 @@ const passwordBox = document.getElementById("password"); -const length = 12; +let length = 6; // Initialize length variable with default value + +const passwordLengthSlider = document.getElementById('passwordLength'); +const lengthValue = document.getElementById('lengthValue'); const upperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; const lowerCase = "abcdefghijklmnopqrstuvwxyz"; @@ -8,6 +11,13 @@ const symbol = "@#$^&*()_+~}{[]<>?-="; const allChars = upperCase + lowerCase + number + symbol; +///for password length +// Event listener for password length slider +passwordLengthSlider.addEventListener('input', function() { + length = parseInt(this.value); // Update length variable + lengthValue.textContent = length; // Update displayed value +}); + ////for creating password function createPassword() { password = ""; @@ -48,4 +58,5 @@ function showCopyMessage() { setTimeout(() => { copyMessage.style.display = "none"; }, 3000); -} \ No newline at end of file +} + diff --git a/09_random_password_gen/index.html b/09_random_password_gen/index.html index d8ccbbc..4d43411 100644 --- a/09_random_password_gen/index.html +++ b/09_random_password_gen/index.html @@ -15,7 +15,14 @@

Generate a
Random Password

Password copied
+
+ + + 6 +
+ + diff --git a/09_random_password_gen/styles.css b/09_random_password_gen/styles.css index 5e82727..30edd68 100644 --- a/09_random_password_gen/styles.css +++ b/09_random_password_gen/styles.css @@ -3,7 +3,7 @@ --white: #fff; } -*{ +* { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; @@ -16,50 +16,49 @@ body { } .container { - border: 2px solid red; - margin: 12%; + margin: 2rem; width: 90%; - max-width: 700px; + max-width: 45rem; /* 700px converted to REM */ } .display { width: 100%; - margin-top: 50px; - margin-bottom: 30px; + margin-top: 3rem; /* 50px converted to REM */ + margin-bottom: 1.5rem; /* 30px converted to REM */ background: #fff; color: #333; display: flex; align-items: center; justify-content: space-between; - padding: 26px 20px; - border-radius: 5px; + padding: 1.625rem 1.25rem; /* 26px 20px converted to REM */ + border-radius: 0.3125rem; /* 5px converted to REM */ } .container h1 { font-weight: 500; - font-size: 45px; + font-size: 2.8125rem; /* 45px converted to REM */ } .container h1 span { color: var(--theme1); - border-bottom: 4px solid var(--theme1); - padding-bottom: 7px; + border-bottom: 0.25rem solid var(--theme1); + padding-bottom: 0.4375rem; /* 7px converted to REM */ } .display img { - width: 30px; + width: 1.875rem; /* 30px converted to REM */ cursor: pointer; } .display input { border: 0; outline: 0; - font-size: 24px; + font-size: 1.5rem; /* 24px converted to REM */ } .container button img { - width: 28px; - margin-right: 10px; + width: 1.75rem; /* 28px converted to REM */ + margin-right: 0.625rem; /* 10px converted to REM */ } .container button { @@ -67,24 +66,106 @@ body { outline: 0; background: var(--theme1); color: #fff; - font-size: 22px; + font-size: 1.375rem; /* 22px converted to REM */ font-weight: 300; display: flex; align-items: center; justify-content: center; - border-radius: 5px; + border-radius: 0.3125rem; /* 5px converted to REM */ cursor: pointer; + padding: 0.5rem; } .copy-message { display: none; position: fixed; - top: 10px; + top: 1rem; /* 10px converted to REM */ left: 50%; transform: translateX(-50%); - padding: 10px 20px; + padding: 0.625rem 1.25rem; /* 10px 20px converted to REM */ background-color: #4CAF50; color: white; - border-radius: 5px; + border-radius: 0.3125rem; /* 5px converted to REM */ z-index: 999; -} \ No newline at end of file +} + +/* Media query for screens below 420px */ +@media (max-width: 420px) { + .container { + margin: 1rem; + } + + .display { + margin-top: 2rem; /* Adjust margin top */ + margin-bottom: 1rem; /* Adjust margin bottom */ + padding: 1rem; /* Adjust padding */ + } + + .container h1 { + font-size: 2rem; /* Adjust font size */ + } + + .display input { + font-size: 1.25rem; /* Adjust font size */ + width: 70%; + } + + .container button { + font-size: 1.05rem; /* Adjust font size */ + padding: 0.5rem 0.3rem; + } + + .copy-message { + padding: 0.5rem 1rem; /* Adjust padding */ + font-size: 0.875rem; /* Adjust font size */ + } +} + +/* for password length */ +.container { + margin: 2rem; + width: 80%; + max-width: 600px; +} + +input[type="range"] { + width: 100%; + height: 1.5rem; + -webkit-appearance: none; + background: linear-gradient(to right, #019f55, #fbd208); /* Gradient color */ + border-radius: 0.5rem; + outline: none; +} + +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 2rem; + height: 2rem; + background: #fff; + border-radius: 50%; + cursor: pointer; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); +} + +input[type="range"]::-moz-range-thumb { + width: 2rem; + height: 2rem; + background: #fff; + border-radius: 50%; + cursor: pointer; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); +} + +label { + display: block; + margin-bottom: 0.5rem; +} + +#lengthValue { + display: inline-block; + margin-top: 0.5rem; + font-size: 2rem; + color: #fff8f8; + margin: 0.5rem; +}