From 55564b95ea98ca6bea8a388f6842fdb2b7ad2ab0 Mon Sep 17 00:00:00 2001 From: Diego Jonguitud DellPc Date: Sat, 1 Oct 2022 16:34:39 -0500 Subject: [PATCH 1/5] chore: add random password all characters --- Develop/script.js | 109 ++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 106 insertions(+), 3 deletions(-) diff --git a/Develop/script.js b/Develop/script.js index 6e1d797..48a9f66 100644 --- a/Develop/script.js +++ b/Develop/script.js @@ -1,7 +1,7 @@ -// Código de asignación +/* var generateBtn = document.querySelector("#generate"); -// Escriba la contraseña en la entrada #password + function writePassword() { var password = generatePassword(); var passwordText = document.querySelector("#password"); @@ -10,5 +10,108 @@ function writePassword() { } -// Agregar oyente de eventos para generar el botón generateBtn.addEventListener("click", writePassword); + */ + +let tempArr = []; +let password; +const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9']; +const 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', +]; + +const 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', +]; + +const espChar = [ + '"', + '!', + '"', + '#', + '$', + '%', + '&', + "'", + '(', + ')', + '*', + '+', + '-', + '.', + '/', + ':', + ';', + '<', + '>', + '?', + '@', + '[', + '\\', + ']', + '^', + '_', + '{', + '|', + '}', + '~', +]; + +const passLen = Number(prompt('Seleccione el largo de la contraseña entre 8 y 128 carácteres')); + +let concatArr = [...numbers, ...capLett, ...lowLett, ...espChar]; + +for (let i = 0; i < passLen; i++) { + tempArr.push(concatArr[Math.floor(Math.random() * (concatArr.length + 1))]); +} + +console.log(tempArr); +8; From 3a1b31e7c94110d11d46f2f7f37a4873ad1d0112 Mon Sep 17 00:00:00 2001 From: Diego Jonguitud DellPc Date: Sun, 2 Oct 2022 01:25:10 -0500 Subject: [PATCH 2/5] chore: create each part of algorithm --- Develop/script.js | 52 +++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 44 insertions(+), 8 deletions(-) diff --git a/Develop/script.js b/Develop/script.js index 48a9f66..220568f 100644 --- a/Develop/script.js +++ b/Develop/script.js @@ -13,8 +13,6 @@ function writePassword() { generateBtn.addEventListener("click", writePassword); */ -let tempArr = []; -let password; const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9']; const capLett = [ 'A', @@ -95,7 +93,6 @@ const espChar = [ '?', '@', '[', - '\\', ']', '^', '_', @@ -105,13 +102,52 @@ const espChar = [ '~', ]; -const passLen = Number(prompt('Seleccione el largo de la contraseña entre 8 y 128 carácteres')); +// Code to generate password +/* const passLen = Number(prompt('Seleccione el largo de la contraseña entre 8 y 128 carácteres')); + +let tempArr = []; +let password; -let concatArr = [...numbers, ...capLett, ...lowLett, ...espChar]; +const concatArr = [...numbers, ...capLett, ...lowLett]; -for (let i = 0; i < passLen; i++) { +tempArr.push(espChar[Math.floor(Math.random() * (espChar.length + 1))]); +for (let i = 0; i < passLen - 1; i++) { tempArr.push(concatArr[Math.floor(Math.random() * (concatArr.length + 1))]); } -console.log(tempArr); -8; +password = tempArr.join(''); +console.log(password); +console.log(password.length); + */ + +let password; +let passwordArray = []; +let tempArr = []; + +const passLen = Number(prompt('Seleccione el largo de la contraseña entre 8 y 128 carácteres')); + +//Logic will apply + +const withNumb = confirm('Numbers?'); + +withNumb ? tempArr.push(...numbers) : null; + +const withLowLett = confirm('Low letters?'); + +withLowLett ? tempArr.push(...lowLett) : null; + +const withCapLett = confirm('Cap letters?'); + +withCapLett ? tempArr.push(...capLett) : null; + +// Generate password array to convert to string +passwordArray.push(espChar[Math.floor(Math.random() * (espChar.length + 1))]); // Select a random special character +for (let i = 0; i < passLen - 1; i++) { + passwordArray.push(tempArr[Math.floor(Math.random() * (tempArr.length + 1))]); // Iterate by the password lenght selected +} + +console.log(passwordArray); + +password = passwordArray.join(''); + +console.log(password); From 5160418e3f6a346af257cff7c36f560d25585fd4 Mon Sep 17 00:00:00 2001 From: Diego Jonguitud DellPc Date: Sun, 2 Oct 2022 01:46:46 -0500 Subject: [PATCH 3/5] feat: add logic to password generator --- Develop/script.js | 74 +++++++++++++++++------------------------------ 1 file changed, 27 insertions(+), 47 deletions(-) diff --git a/Develop/script.js b/Develop/script.js index 220568f..191976c 100644 --- a/Develop/script.js +++ b/Develop/script.js @@ -1,17 +1,13 @@ -/* -var generateBtn = document.querySelector("#generate"); - +var generateBtn = document.querySelector('#generate'); function writePassword() { - var password = generatePassword(); - var passwordText = document.querySelector("#password"); - - passwordText.value = password; + var password = generatePassword(); + var passwordText = document.querySelector('#password'); + passwordText.value = password; } -generateBtn.addEventListener("click", writePassword); - */ +generateBtn.addEventListener('click', writePassword); const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9']; const capLett = [ @@ -102,52 +98,36 @@ const espChar = [ '~', ]; -// Code to generate password -/* const passLen = Number(prompt('Seleccione el largo de la contraseña entre 8 y 128 carácteres')); - -let tempArr = []; -let password; - -const concatArr = [...numbers, ...capLett, ...lowLett]; - -tempArr.push(espChar[Math.floor(Math.random() * (espChar.length + 1))]); -for (let i = 0; i < passLen - 1; i++) { - tempArr.push(concatArr[Math.floor(Math.random() * (concatArr.length + 1))]); -} - -password = tempArr.join(''); -console.log(password); -console.log(password.length); - */ - let password; -let passwordArray = []; -let tempArr = []; - const passLen = Number(prompt('Seleccione el largo de la contraseña entre 8 y 128 carácteres')); -//Logic will apply +const passwordGenerator = function (len) { + let passwordArray = []; + let tempArr = []; + let rslt; -const withNumb = confirm('Numbers?'); + const withNumb = confirm('Numbers?'); + withNumb ? tempArr.push(...numbers) : alert('No selected'); -withNumb ? tempArr.push(...numbers) : null; + const withLowLett = confirm('Low letters?'); + withLowLett ? tempArr.push(...lowLett) : alert('No selected'); -const withLowLett = confirm('Low letters?'); + const withCapLett = confirm('Cap letters?'); + withCapLett ? tempArr.push(...capLett) : alert('No selected'); -withLowLett ? tempArr.push(...lowLett) : null; + passwordArray.push(espChar[Math.floor(Math.random() * (espChar.length + 1))]); -const withCapLett = confirm('Cap letters?'); + for (let i = 0; i < len - 1; i++) { + passwordArray.push(tempArr[Math.floor(Math.random() * (tempArr.length + 1))]); + } -withCapLett ? tempArr.push(...capLett) : null; + rslt = passwordArray.join(''); -// Generate password array to convert to string -passwordArray.push(espChar[Math.floor(Math.random() * (espChar.length + 1))]); // Select a random special character -for (let i = 0; i < passLen - 1; i++) { - passwordArray.push(tempArr[Math.floor(Math.random() * (tempArr.length + 1))]); // Iterate by the password lenght selected -} + return rslt; +}; -console.log(passwordArray); - -password = passwordArray.join(''); - -console.log(password); +if (passLen >= 8 && passLen <= 129) { + password = passwordGenerator(passLen); +} else { + alert('Porfavor seleccione entre 8 y 128 carácteres'); +} From dd0d4789bfb27aabaab6f682ed8c63d9ceadcad9 Mon Sep 17 00:00:00 2001 From: Diego Jonguitud DellPc Date: Sun, 2 Oct 2022 19:13:35 -0500 Subject: [PATCH 4/5] chore: finish password generator, test output for all user's inputs --- Develop/script.js | 86 ++++++++++++++---------- Develop/style.css | 163 +++++++++++++++++++++++----------------------- 2 files changed, 133 insertions(+), 116 deletions(-) diff --git a/Develop/script.js b/Develop/script.js index 191976c..a5a47ef 100644 --- a/Develop/script.js +++ b/Develop/script.js @@ -1,14 +1,3 @@ -var generateBtn = document.querySelector('#generate'); - -function writePassword() { - var password = generatePassword(); - var passwordText = document.querySelector('#password'); - - passwordText.value = password; -} - -generateBtn.addEventListener('click', writePassword); - const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9']; const capLett = [ 'A', @@ -98,36 +87,65 @@ const espChar = [ '~', ]; -let password; -const passLen = Number(prompt('Seleccione el largo de la contraseña entre 8 y 128 carácteres')); +//Variables + +const generateBtn = document.querySelector('#generate'); +let passwordText = document.querySelector('#password'); -const passwordGenerator = function (len) { +//Functions +function passwordGenerator(len) { let passwordArray = []; let tempArr = []; - let rslt; - - const withNumb = confirm('Numbers?'); - withNumb ? tempArr.push(...numbers) : alert('No selected'); + 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; + } - const withLowLett = confirm('Low letters?'); - withLowLett ? tempArr.push(...lowLett) : alert('No selected'); + arrPasswGen(len); - const withCapLett = confirm('Cap letters?'); - withCapLett ? tempArr.push(...capLett) : alert('No selected'); + let rslt = passwordArray.join(''); //Convert the password array to a string + return rslt; +} - passwordArray.push(espChar[Math.floor(Math.random() * (espChar.length + 1))]); +function generatedPassword() { + let passLen = Number(prompt('Seleccione el largo de la contraseña entre 8 y 128 carácteres')); + let password; - for (let i = 0; i < len - 1; i++) { - passwordArray.push(tempArr[Math.floor(Math.random() * (tempArr.length + 1))]); + 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'); } +} - rslt = passwordArray.join(''); - - return rslt; -}; +//Final Product -if (passLen >= 8 && passLen <= 129) { - password = passwordGenerator(passLen); -} else { - alert('Porfavor seleccione entre 8 y 128 carácteres'); -} +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; + } } From 803ca9368cace0c79a984bb0f25cf22208d9d861 Mon Sep 17 00:00:00 2001 From: Diego Jonguitud DellPc Date: Sun, 2 Oct 2022 19:13:35 -0500 Subject: [PATCH 5/5] chore: finish password generator, test output for all user's inputs --- Develop/script.js | 99 ++++++++++++++++++---------- Develop/style.css | 163 +++++++++++++++++++++++----------------------- 2 files changed, 144 insertions(+), 118 deletions(-) diff --git a/Develop/script.js b/Develop/script.js index 191976c..c034143 100644 --- a/Develop/script.js +++ b/Develop/script.js @@ -1,16 +1,10 @@ -var generateBtn = document.querySelector('#generate'); +//Variables -function writePassword() { - var password = generatePassword(); - var passwordText = document.querySelector('#password'); +let generateBtn = document.querySelector('#generate'); +let passwordText = document.querySelector('#password'); - passwordText.value = password; -} - -generateBtn.addEventListener('click', writePassword); - -const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9']; -const capLett = [ +let numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9']; +let capLett = [ 'A', 'B', 'C', @@ -38,7 +32,7 @@ const capLett = [ 'Z', ]; -const lowLett = [ +let lowLett = [ 'a', 'b', 'c', @@ -66,7 +60,7 @@ const lowLett = [ 'z', ]; -const espChar = [ +let espChar = [ '"', '!', '"', @@ -98,36 +92,69 @@ const espChar = [ '~', ]; -let password; -const passLen = Number(prompt('Seleccione el largo de la contraseña entre 8 y 128 carácteres')); - -const passwordGenerator = function (len) { +//Functions +function passwordGenerator(len) { let passwordArray = []; let tempArr = []; - let rslt; - - const withNumb = confirm('Numbers?'); - withNumb ? tempArr.push(...numbers) : alert('No selected'); + 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; + } - const withLowLett = confirm('Low letters?'); - withLowLett ? tempArr.push(...lowLett) : alert('No selected'); + arrPasswGen(len); - const withCapLett = confirm('Cap letters?'); - withCapLett ? tempArr.push(...capLett) : alert('No selected'); + let rslt = passwordArray.join(''); //Convert the password array to a string + return rslt; +} - passwordArray.push(espChar[Math.floor(Math.random() * (espChar.length + 1))]); +function generatedPassword() { + let passLen = Number(prompt('Seleccione el largo de la contraseña entre 8 y 128 carácteres')); + let password; - for (let i = 0; i < len - 1; i++) { - passwordArray.push(tempArr[Math.floor(Math.random() * (tempArr.length + 1))]); + 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'); } +} - rslt = passwordArray.join(''); +//Final Product - return rslt; -}; +generateBtn.addEventListener('click', generatedPassword); -if (passLen >= 8 && passLen <= 129) { - password = passwordGenerator(passLen); -} else { - alert('Porfavor seleccione entre 8 y 128 carácteres'); -} +/* function contains(a, obj) { + for (var i = 0; i < a.length; i++) { + if (a[i] === obj) { + return true; + } + } + return false; +} */ 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; + } }