range input + password generation if the inputs were changed

karinasulm · Jan 18, 2022 · a7b1c31 · a7b1c31
1 parent fe6ef23
commit a7b1c31
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 9 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -130,6 +130,7 @@ body {
 .passwordgenerator__length-input {
   width: 80px;
   padding: 10px 20px;
+  margin-bottom: 5px;
   border: none;
   border: 1px solid rgba(255, 255, 255, 0.4);
   border-radius: 5px;
@@ -144,6 +145,9 @@ body {
   -webkit-appearance: none;
   margin: 0;
 }
+.passwordgenerator__range {
+  width: 300px;
+}
 .passwordgenerator__checkbox-input {
   position: absolute;
   z-index: 100;
@@ -178,3 +182,30 @@ body {
   margin-left: 40px;
   cursor: pointer;
 }
+.range__input-wrapper {
+  position: relative;
+}
+.range__input {
+  appearance: none;
+  width: 100%;
+  height: 10px;
+  border-radius: 20px;
+  box-shadow: 5px 5px 10px rgba(57, 46, 39, 0.2);
+  background-color: #bfbfbf;
+}
+.range__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: #392e27;
+  z-index: 100;
+}
+.range__input::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  background-color: #392e27;
+}
diff --git a/assets/css/style.less b/assets/css/style.less
@@ -131,6 +131,7 @@ body {
 .passwordgenerator__length-input {
     width: 80px;
     padding: 10px 20px;
+    margin-bottom: 5px;
     border: none;
     border: 1px solid fadeout(@secondary-color, 60%);
     border-radius: 5px;
@@ -147,6 +148,10 @@ body {
   margin: 0;
 }
 
+.passwordgenerator__range {
+    width: 300px;
+}
+
 // passwordgenerator custom checkbox
 
 .passwordgenerator__checkbox-input {
@@ -185,4 +190,37 @@ body {
 .passwordgenerator__checkbox-label {
     margin-left: 40px;
     cursor: pointer;
+}
+
+// range
+
+.range__input-wrapper {
+	position: relative;
+}
+
+.range__input {
+	appearance: none;
+	width: 100%;
+	height: 10px;
+	border-radius: 20px;
+    box-shadow: @box-shadow-elements;
+    background-color: darken(#fff, 25%);
+}
+
+.range__input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 25px;
+    height: 25px;
+	border-radius: 50%;
+    cursor: pointer;
+    background-color: @primary-color;
+	z-index: 100;
+}
+
+.range__input::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+	cursor: pointer;
+    background-color: @primary-color;
 }
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -13,14 +13,25 @@ document.addEventListener('DOMContentLoaded', function () {
 	const charsetSpecialInput = document.getElementById("charset_special");
 	const randomPasswordInput = document.getElementById("random_password");
     const copyBtn = document.getElementById("copy_btn");
+	const rangeInput = document.getElementById("range-input");
+	const minLength = 4;
+	const maxLength = 24;
+
 	let charsetNumbers = "0123456789";
 	let charsetLowercase = "abcdefghijklmnopqrstuvwxyz";
 	let charsetUppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 	let charsetSpecial = "!№;%:?*()_+=";
-
 	let length = passwordLengthInput.value;
 	let charset = generateCharset(); 
 	let password = generatePassword(length, charset);
+	let checkboxInput = document.getElementsByClassName("passwordgenerator__checkbox-input");
+
+	passwordLengthInput.value = rangeInput.value;
+
+	rangeInput.oninput = function() {
+		passwordLengthInput.value = this.value;
+	}
+
 	showPassword(password);
 
 	generateBtn.addEventListener("click", function () {
@@ -31,17 +42,42 @@ document.addEventListener('DOMContentLoaded', function () {
 	});
 
 	passwordLengthInput.addEventListener("input", function() {
-		let length = passwordLengthInput.value;
-		let charset = generateCharset(); 
-		let password = generatePassword(length, charset);
-		showPassword(password);
+		if ((this.value >= minLength) && (this.value <= maxLength)) {
+			let length = passwordLengthInput.value;
+			let charset = generateCharset(); 
+			let password = generatePassword(length, charset);
+			showPassword(password);
+			rangeInput.value = this.value;
+		} else if (this.value < minLength) {
+			randomPasswordInput.value = "Min. length is 5. Please, input the correct length.";
+			rangeInput.value = minLength;
+		} else if (this.value > maxLength) {
+			randomPasswordInput.value = "Max. length is 64. Please, input the correct length.";
+			rangeInput.value = maxLength;
+		}
 	});
 
 	copyBtn.addEventListener("click", function() {
         let text = randomPasswordInput.value;
         navigator.clipboard.writeText(text);
     });
 
+	rangeInput.addEventListener("input", function () {
+			let length = passwordLengthInput.value;
+			let charset = generateCharset(); 
+			let password = generatePassword(length, charset);
+			showPassword(password);
+	});
+
+	for (let i = 0; i < checkboxInput.length; i++) {
+		checkboxInput[i].addEventListener("input", function () {
+			let length = passwordLengthInput.value;
+			let charset = generateCharset(); 
+			let password = generatePassword(length, charset);
+			showPassword(password);
+		});
+	}
+
 	function generateCharset() {
 		let charset = "";
 		if (charsetNumbersInput.checked) {
@@ -61,8 +97,10 @@ document.addEventListener('DOMContentLoaded', function () {
 
 	function generatePassword(length, charset) { 
 		let password = "";
-		for (let i = 0; i < length; i++) {
-		  password += charset[Math.floor(Math.random() * charset.length)];
+		if (charset !== "") {
+			for (let i = 0; i < length; i++) {
+			password += charset[Math.floor(Math.random() * charset.length)];
+			}
 		}
 		return password;
 	  }
@@ -72,7 +110,7 @@ document.addEventListener('DOMContentLoaded', function () {
 			randomPasswordInput.value = password;
 		}
 		else {
-			randomPasswordInput.value = "error";
+			randomPasswordInput.value = "Error. Please, сhoose at least one checkbox.";
 		}
 	}
 

diff --git a/index.html b/index.html
@@ -19,7 +19,12 @@ <h1 class="passwordgenerator__title">Random Password Generator</h1>
         <div class="passwordgenerator__settings">
             <div class="passwordgenerator__length-wrap">
                 <label for="password_length" class="passwordgenerator__length-label">Password Length:</label>
-                <input id="password_length" class="passwordgenerator__length-input" type="number" value="8">
+                <input id="password_length" class="passwordgenerator__length-input" type="number" value="8" min="4" max="24">
+                <div class="passwordgenerator__range range">
+                    <div class="range__input-wrapper">
+                        <input class="range__input" id="range-input" name="range" type="range" value="8" min="4" max="24">
+                    </div>
+                </div>
             </div>
             <div class="passwordgenerator__checkbox-wrap">
                 <div class="passwordgenerator__item">