Atomic logic merge main

Develop/script.js

@@ -1,14 +1,67 @@
-// Código de asignación
-var generateBtn = document.querySelector("#generate");
+//Variables
 
-// Escriba la contraseña en la entrada #password
-function writePassword() {
-  var password = generatePassword();
-  var passwordText = document.querySelector("#password");
+let generateBtn = document.querySelector('#generate');
+let passwordText = document.querySelector('#password');
 
-  passwordText.value = password;
+let numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
+let capLett = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'M', 'N', 'O', 'p', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
 
+let lowLett = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
+
+let espChar = ['"', '!', '"', '#', '$', '%', '&', "'", '(', ')', '*', '+', '-', '.', '/', ':', ';', '<', '>', '?', '@', '[', ']', '^', '_', '{', '|', '}', '~'];
+
+//Functions
+function passwordGenerator(len) {
+	let passwordArray = [];
+	let tempArr = [];
+	let arrPasswGen = function (len) {
+		for (let i = 0; i < len; i++) {
+			passwordArray.push(tempArr[Math.floor(Math.random() * tempArr.length)]);
+		}
+	};
+
+	//Asking the user preferences
+	let withLowLett = confirm('¿Te gustaría incluir letras minúsculas?');
+	withLowLett ? tempArr.push(...lowLett) : '';
+
+	let withCapLett = confirm('¿Te gustaría incluir letras mayúsculas?');
+	withCapLett ? tempArr.push(...capLett) : '';
+
+	let withNumbEspChar = prompt('¿Te gustaría incluir números? Presiona 1. ¿Mejor con caracteres espciales? Presiona 2. Las dos opciones presiona 3');
+
+	switch (
+		withNumbEspChar //Asking user if she/he wants numbers and/or special characters
+	) {
+		case '1':
+			tempArr.push(...numbers);
+			break;
+		case '2':
+			tempArr.push(...espChar);
+			break;
+		case '3':
+			tempArr.push(...numbers, ...espChar);
+			break;
+	}
+
+	arrPasswGen(len);
+
+	let rslt = passwordArray.join(''); //Convert the password array to a string
+	return rslt;
+}
+
+function generatedPassword() {
+	let passLen = Number(prompt('Seleccione el largo de la contraseña entre 8 y 128 carácteres'));
+	let password;
+
+	if (passLen >= 8 && passLen <= 128) {
+		password = passwordGenerator(passLen); //rslt returned
+		console.log(password.length);
+		return (passwordText.textContent = password);
+	} else {
+		alert('Porfavor seleccione entre 8 y 128 carácteres');
+	}
 }
 
-// Agregar oyente de eventos para generar el botón
-generateBtn.addEventListener("click", writePassword);
+//Final Product
+
+generateBtn.addEventListener('click', generatedPassword);

Develop/style.css

@@ -1,137 +1,136 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 
 html,
 body,
 .wrapper {
-  height: 100%;
-  margin: 0;
-  padding: 0;
+	height: 100%;
+	margin: 0;
+	padding: 0;
 }
 
 body {
-  font-family: sans-serif;
-  background-color: #f9fbfd;
+	font-family: sans-serif;
+	background-color: #f9fbfd;
 }
 
 .wrapper {
-  padding-top: 30px;
-  padding-left: 20px;
-  padding-right: 20px;
+	padding-top: 30px;
+	padding-left: 20px;
+	padding-right: 20px;
 }
 
 header {
-  text-align: center;
-  padding: 20px;
-  padding-top: 0px;
-  color: hsl(206, 17%, 28%);
+	text-align: center;
+	padding: 20px;
+	padding-top: 0px;
+	color: hsl(206, 17%, 28%);
 }
 
 .card {
-  background-color: hsl(0, 0%, 100%);
-  border-radius: 5px;
-  border-width: 1px;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
-  color: hsl(206, 17%, 28%);
-  font-size: 18px;
-  margin: 0 auto;
-  max-width: 800px;
-  padding: 30px 40px;
+	background-color: hsl(0, 0%, 100%);
+	border-radius: 5px;
+	border-width: 1px;
+	box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
+	color: hsl(206, 17%, 28%);
+	font-size: 18px;
+	margin: 0 auto;
+	max-width: 800px;
+	padding: 30px 40px;
 }
 
 .card-header::after {
-  content: " ";
-  display: block;
-  width: 100%;
-  background: #e7e9eb;
-  height: 2px;
+	content: ' ';
+	display: block;
+	width: 100%;
+	background: #e7e9eb;
+	height: 2px;
 }
 
 .card-body {
-  min-height: 100px;
+	min-height: 100px;
 }
 
 .card-footer {
-  text-align: center;
+	text-align: center;
 }
 
 .card-footer::before {
-  content: " ";
-  display: block;
-  width: 100%;
-  background: #e7e9eb;
-  height: 2px;
+	content: ' ';
+	display: block;
+	width: 100%;
+	background: #e7e9eb;
+	height: 2px;
 }
 
 .card-footer::after {
-  content: " ";
-  display: block;
-  clear: both;
+	content: ' ';
+	display: block;
+	clear: both;
 }
 
 .btn {
-  border: none;
-  background-color: hsl(360, 91%, 36%);
-  border-radius: 25px;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px rgba(0, 0, 0, 0.2) 0px 1px 1px
-    0px;
-  color: hsl(0, 0%, 100%);
-  display: inline-block;
-  font-size: 22px;
-  line-height: 22px;
-  margin: 16px 16px 16px 20px;
-  padding: 14px 34px;
-  text-align: center;
-  cursor: pointer;
+	border: none;
+	background-color: hsl(360, 91%, 36%);
+	border-radius: 25px;
+	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px rgba(0, 0, 0, 0.2) 0px 1px 1px 0px;
+	color: hsl(0, 0%, 100%);
+	display: inline-block;
+	font-size: 22px;
+	line-height: 22px;
+	margin: 16px 16px 16px 20px;
+	padding: 14px 34px;
+	text-align: center;
+	cursor: pointer;
 }
 
 button[disabled] {
-  cursor: default;
-  background: #c0c7cf;
+	cursor: default;
+	background: #c0c7cf;
 }
 
 .float-right {
-  float: right;
+	float: right;
 }
 
 #password {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: none;
-  display: block;
-  width: 100%;
-  padding-top: 15px;
-  padding-left: 15px;
-  padding-right: 15px;
-  padding-bottom: 85px;
-  font-size: 1.2rem;
-  text-align: center;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  border: 2px dashed #c0c7cf;
-  border-radius: 6px;
-  resize: none;
-  overflow: hidden;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	border: none;
+	display: block;
+	width: 100%;
+	padding-top: 15px;
+	padding-left: 15px;
+	padding-right: 15px;
+	padding-bottom: 85px;
+	font-size: 1.2rem;
+	text-align: center;
+	margin-top: 10px;
+	margin-bottom: 10px;
+	border: 2px dashed #c0c7cf;
+	border-radius: 6px;
+	resize: none;
+	/* overflow: hidden; */
 }
 
 @media (max-width: 690px) {
-  .btn {
-    font-size: 1rem;
-    margin: 16px 0px 0px 0px;
-    padding: 10px 15px;
-  }
+	.btn {
+		font-size: 1rem;
+		margin: 16px 0px 0px 0px;
+		padding: 10px 15px;
+	}
 
-  #password {
-    font-size: 1rem;
-  }
+	#password {
+		font-size: 1rem;
+	}
 }
 
 @media (max-width: 500px) {
-  .btn {
-    font-size: 0.8rem;
-  }
+	.btn {
+		font-size: 0.8rem;
+	}
 }