iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá crianças inocentes! Hoje eu tenho um desafio incrível para vocês, vamos construir juntos o Generate Password, um site que vai gerar senhas aleatórias super fortes e seguras. Sabemos que senhas são muito importantes para a segurança em desenvolvimento web, então vamos colocar a mão na massa.

Para começar, vocês vão precisar utilizar HTML para criar a estrutura básica da página, um formulário com os requisitos da senha e um botão para gerar a senha. Em seguida, vamos usar CSS para deixar a página mais bonita e organizada.

Agora vem a parte mais divertida, vamos utilizar JavaScript para gerar a senha. Vamos precisar de algumas funções que vão gerar senhas aleatórias com base nos requisitos escolhidos pelo usuário. Algumas dicas de comandos de JavaScript que podem ajudar vocês são: Math.random() para gerar números aleatórios, charCodeAt() para pegar o código de um caractere e String.fromCharCode() para converter um código de caractere em um caractere real.

Mas lembrem-se, crianças, a segurança é muito importante! Então vamos garantir que as senhas geradas tenham pelo menos 12 caracteres, incluam letras maiúsculas e minúsculas, números e símbolos.

Com tudo isso pronto, vocês terão construído um Generate Password incrível e muito útil para todos que precisam de senhas fortes e seguras.

Divirtam-se programando e lembrem-se sempre da importância da segurança em desenvolvimento web!

Exemplo

https://user-images.githubusercontent.com/30157522/224495402-e42606f9-2334-491f-8a4d-6bb9f56f60d9.mp4

Additional tips

Código HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Password Generator</title>
  </head>
  <body>
    <div class="container">
      <h2>Password Generator</h2>
      <div class="result-container">
        <span id="result"></span>
        <button class="btn" id="clipboard">
          <i class="far fa-clipboard"></i>
        </button>
      </div>
      <div class="settings">
        <div class="setting">
          <label>Password Length</label>
          <input type="number" id="length" min="4" max="20" value="20">
        </div>
        <div class="setting">
          <label>Include uppercase letters</label>
          <input type="checkbox" id="uppercase" checked>
        </div>
        <div class="setting">
          <label>Include lowercase letters</label>
          <input type="checkbox" id="lowercase" checked>
        </div>
        <div class="setting">
          <label>Include numbers</label>
          <input type="checkbox" id="numbers" checked>
        </div>
        <div class="setting">
          <label>Include symbols</label>
          <input type="checkbox" id="symbols" checked>
        </div>
      </div>

      <button class="btn btn-large" id="generate">
        Generate Password
      </button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

EduardoSilva09 commented 1 year ago

Grupo

Eduardo José Kézio

HTML do código

<!DOCTYPE html>

Password Generator

Password Length

Include uppercase letters

Include lowercase letters

Include numbers

Include symbols

CSS

{ outline: none; } body { margin: 0px; display: flex; height: 100vh; align-items: center; justify-content: center; color: #fffbff; font-family: Arial; }

h2 { margin: 0px; text-align: center; padding: 15px; }

.container { border: 15px solid #3c3b9a; padding: 20px; width: 280px; background-color: #25235def; }

.settings { display: grid; }

.setting { display: flex; justify-content: space-between; margin-bottom: 15px; }

input[type="checkbox"] { accent-color: #0079ff; }

.btn { cursor: pointer; color: #ffff; background-color: #3b3c9a; }

.btn-large { border: none; width: 100%; padding: 10px; }

.result-container { display: flex; width: 100%; background-color: #161438; margin-bottom: 15px; padding: 5px; font-size: 12px; justify-content: space-between; }

clipboard {

outline: none; border: none; }

.far { padding: 10px 5px; }

result {

margin-left: 5px; align-self: center; }

JavaScript

const result = document.getElementById("result"); const generate = document.getElementById("generate"); const clipboard = document.getElementById("clipboard");

function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; }

function getRandomArbitraryIntegerNumber(min, max) { return Math.trunc(getRandomArbitrary(min, max)); }

function getRandonLetter(start) { const end = start + 26; const number = getRandomArbitraryIntegerNumber(start, end); return String.fromCharCode(number); }

function getRandonLowerLetter() { return getRandonLetter(97); }

function getRandomNumber() { const pos = getRandomArbitraryIntegerNumber(48, 57); return String.fromCharCode(pos); }

function getRandonUpperLetter() { return getRandonLetter(65); }

function getRandonChar() { const charRange = getRangeChars(); const pos = getRandomArbitraryIntegerNumber(1, charRange.length); const char = String.fromCharCode(charRange[pos]); return char; }

function getRange(min, max) { let len = max - min + 1; let arr = new Array(len); for (let i = 0; i < len; i++) { arr[i] = min + i; } return arr; }

function getRangeChars() { const charRange = getRange(33, 47).concat(getRange(58, 64)); return charRange; }

if (ArrPreferences.length === 0) { return ""; }

let password = ""; for (let index = 0; index < length; index++) { let RandonPos = getRandomArbitraryIntegerNumber( 1, ArrPreferences.length + 1 ); password += ArrPreferences[RandonPos - 1](); }

return password; }

generate.addEventListener("click", () => { const uppercase = document.getElementById("uppercase").checked; const lowercase = document.getElementById("lowercase").checked; const numbers = document.getElementById("numbers").checked; const symbols = document.getElementById("symbols").checked; let length = document.getElementById("length").value; const password = getPass(uppercase, lowercase, numbers, symbols, length); result.innerText = password; });

clipboard.addEventListener("click", () => { const password = result.innerText; if (!password) { return; } const textArea = document.createElement("textarea"); textArea.value = password;

textArea.style.top = "0"; textArea.style.left = "0"; textArea.style.position = "fixed";

document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const successful = document.execCommand("copy"); } finally { textArea.remove(); } });