diff --git a/Develop/script.js b/Develop/script.js index 6e1d797..14dc5a3 100644 --- a/Develop/script.js +++ b/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); diff --git a/Develop/style.css b/Develop/style.css index 37dc6b1..668a91d 100644 --- a/Develop/style.css +++ b/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; + } }