midudev · davferod · Oct 8, 2022 · Oct 8, 2022 · Oct 9, 2022 · Oct 9, 2022
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/forms": [
+      "default",
+      {
+        "label": "off"
+      }
+    ]
+  }
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -13,5 +13,8 @@
   "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
   "editor.insertSpaces": false,
   "editor.detectIndentation": false,
-	"stylelint.enable": true
+	"stylelint.enable": true,
+	"githubPullRequests.ignoredPullRequestBranches": [
+		"main"
+	]
 }
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@astrojs/svelte": "1.0.1",
     "@astrojs/tailwind": "2.0.2",
     "@astrojs/vue": "1.1.0",
-    "astro": "1.3.1",
+    "astro": "^1.3.1",
     "preact": "10.6.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -63,5 +63,18 @@
     "*.{astro,cjs,js,jsx,mjs,ts,tsx}": "eslint --cache --fix",
     "*.css": "stylelint --cache --fix",
     "*": "prettier --cache --ignore-unknown --write"
-  }
+  },
+  "description": "<a href=\"https://hacktoberfest-2022.vercel.app/\">\r <img src=\"public/banner_gh.jpg\">\r </a>",
+  "main": ".prettierrc.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/davferod/hacktoberfest-2022.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/davferod/hacktoberfest-2022/issues"
+  },
+  "homepage": "https://github.com/davferod/hacktoberfest-2022#readme"
 }
diff --git a/src/components/davferod/GnrPsswrd.astro b/src/components/davferod/GnrPsswrd.astro
@@ -0,0 +1,187 @@
+---
+import './css/style.css'
+---
+<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,GRAD@20..48,100..700,0..1,-50..200" />
+    <link rel="stylesheet" href="css/style.css">
+    <title>Generador de Password</title>
+</head>
+<body id="davferod">
+    <div class="container">
+        <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">
+                    <input type='range' min='4' max="40" value="4" step="1" id="n_caracteres" />
+                    <output id="outRange" for="n_caracteres">4</output>
+                </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 = {
+        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()})
+
+    // mostrar valor del track //
+    app.elements.namedItem('n_caracteres').addEventListener('change', () => {
+        document.getElementById('outRange').value = inputCharacters.value
+    })
+
+    // botones //
+
+    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 < inputCharacters.value; 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>