Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merge branch 'main' of https://github.com/davferod/hacktoberfest-2022 #295

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Merge branch 'main' of https://github.com/davferod/hacktoberfest-2022 #295

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
108ce14
este es mi aporte en para el reto
davidrd81 Oct 8, 2022
f7b1c17
Merge branch 'main' of https://github.com/davferod/hacktoberfest-2022
davidrd81 Oct 8, 2022
57940f2
se realizan modificaciones de funcionalidad
davidrd81 Oct 9, 2022
d9ecbc1
se corrigen estilos globales y se mod btn a slider
davidrd81 Oct 9, 2022
8469ec0
se corrigen estilos globales
davidrd81 Oct 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions .hintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"extends": [
"development"
],
"hints": {
"axe/forms": [
"default",
{
"label": "off"
}
]
}
}
5 changes: 4 additions & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,8 @@
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"editor.insertSpaces": false,
"editor.detectIndentation": false,
"stylelint.enable": true
"stylelint.enable": true,
"githubPullRequests.ignoredPullRequestBranches": [
"main"
]
}
215 changes: 215 additions & 0 deletions src/components/davferod/GnrPsswrd.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
---
import './css/style.css'
import logo from './img/logo.png';
---
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400&family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link rel="stylesheet" href="css/style.css">
<title>Generador de Password</title>
</head>
<body>
<div class="container">
<div class="logo">
<img src={logo}>
</div>
<form action="" class="app" id="generator">
<div class="row n_caracteres">
<div class="col">
<label for="n_caracteres">¿de cuantos caracteres?</label>
</div>
<div class="col characters">
<div>
<button class="btn" id="btn-minus">
<span class="material-symbols-outlined">
indeterminate_check_box
</span>
</button>
</div>
<div>
<input type="text" id="n_caracteres" readonly value="12">
</div>
<div>
<button class="btn" id="btn-plus">
<span class="material-symbols-outlined">
add_box
</span>
</button>
</div>
</div>
</div>
<div class="row symbols">
<div class="col">
<label for="symbols">generar con simbolos</label>
</div>
<div class="col">
<div>
<button class="btn" id="btn-symbols">
<span class="material-symbols-outlined" id="span1">check_box</span>
</button>
</div>
</div>

</div>
<div class="row numbers">
<div class="col">
<label for="numbers">generar con numeros</label>
</div>
<div class="col">
<div>
<button class="btn" id="btn-numbers">
<span class="material-symbols-outlined">check_box</span>
</button>
</div>
</div>
</div>
<div class="row capital">
<div class="col">
<label for="capital">generar con mayusculas</label>
</div>
<div class="col">
<div >
<button class="btn" id="btn-capital">
<span class="material-symbols-outlined">check_box</span>
</button>
</div>
</div>
</div>
<div class="row ignition">
<div class="col">
<button class="btn btn-generator" id="btn-ignition">
Generar
<span class="material-symbols-outlined">
lock
</span>
</button>
</div>
<div class="col">
<div >
<input type="text" class="input-password" id="input-password" readonly>
</div>
</div>
</div>
<div class="row alert">
<div class="col">
<div class="alert-copy" id="copied">
<span class="material-symbols-outlined">
content_copy
</span>
texto copiado
</div>
</div>
</div>
</form>
</div>

<!-- codigo javascript generador de contrseñas -->
<script is:inline>
(function() {
let app = document.getElementById('generator')
let inputCharacters = document.getElementById('n_caracteres')

let config = {
characters: parseInt(inputCharacters.value),
symbols: true,
numbers: true,
upperCaseLetters: true,
lowercase: true,
}

let characters = {
numbers: '0 1 2 3 4 5 6 7 8 9',
symbols: '¡ ? = ) ( / & % $ # ! ° * ] [ { } _ - . : , ; < > ¿ + ',
upperCaseLetters: 'A B C D E F G H I I J K L M N O P Q R S T U V W X Y Z',
lowercase: 'a b c d e f g h i j k l m n o p q r s t u v w x y z',
}

// evento evita refresh //
app.addEventListener('submit', (e) => {e.preventDefault()})


// botones //
app.elements.namedItem('btn-plus').addEventListener('click', () => {
config.characters++
inputCharacters.value = config.characters
})

app.elements.namedItem('btn-minus').addEventListener('click', () => {
if (config.characters > 3){
config.characters--
inputCharacters.value = config.characters
}
})

app.elements.namedItem('btn-symbols').addEventListener('click', () => {
btnToggle(app.elements.namedItem('btn-symbols'))
config.symbols = !config.symbols
console.log(config.symbols)
})

app.elements.namedItem('btn-numbers').addEventListener('click', () => {
btnToggle(app.elements.namedItem('btn-numbers'))
config.numbers = !config.numbers
})

app.elements.namedItem('btn-capital').addEventListener('click', () => {
btnToggle(app.elements.namedItem('btn-capital'))
config.upperCaseLetters = !config.upperCaseLetters
})

app.elements.namedItem('btn-ignition').addEventListener('click', () =>{
passwordGenerator()
})

// copiar contraseña //
app.elements.namedItem('input-password').addEventListener('click', () =>{
copyPassword()
})

// funciones //
function btnToggle(element) {
element.classList.toggle('false')
btnBox = element.children[0].textContent
if( element.children[0].textContent == 'check_box'){
element.children[0].textContent = 'disabled_by_default'
} else {
element.children[0].textContent = 'check_box'
}
}

function passwordGenerator(){
let finalCharacters=''
let password = ''

for(props in config){
if(config[props] == true){
finalCharacters += characters[props] + ' '
}
}
finalCharacters = finalCharacters.trim()
finalCharacters = finalCharacters.split(' ')
for( let i = 0; i < config.characters; i++){
password = password + finalCharacters[Math.floor(Math.random() * finalCharacters.length)]
}
app.elements.namedItem('input-password').value = password
}

function copyPassword(){
app.elements.namedItem('input-password').select()
document.execCommand('copy')
document.getElementById('copied').classList.add('active')

setTimeout(() => {
document.getElementById('copied').classList.remove('active')
}, 1500)
}

passwordGenerator()
}())
</script>
</body>
Loading