Gerador de Senha

「👤」Por:ErikrafT 「🌎」Publicado:

「🔑」Vamos fazer um Gerador de Senhas usando HTML, CSS e JavaScript. Este projeto é ótimo para iniciantes e irá ajudá-lo a aprender como criar uma ferramenta útil.


Download7,04KB

Ver Modelo Pronto

HTML

O código fornecido é um documento HTML para uma interface geradora de senha. Inclui um contêiner com título, campos de entrada, um indicador de força da senha, opções de comprimento e caixas de seleção para configurações de senha. Há também um botão para gerar senhas. O documento está vinculado a um arquivo CSS externo para estilo e a um arquivo JavaScript externo para funcionalidade. As fontes “Material Symbols Rounded” e “Montserrat” são importadas do Google Fonts.

Password Generator 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Password Generator</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap'>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <h2>Password Generator</h2>
  <div class="wrapper">
    <div class="input-box">
      <input type="text" disabled>
      <span class="material-symbols-rounded">copy_all</span>
    </div>
    <div class="pass-indicator"></div>
    <div class="pass-length">
      <div class="details">
        <label class="title">Password Length</label>
        <span></span>
      </div>
      <input type="range" min="1" max="30" value="15" step="1">
    </div>
    <div class="pass-settings">
      <label class="title">Password Settings</label>
      <ul class="options">
        <li class="option">
          <input type="checkbox" id="lowercase" checked>
          <label for="lowercase">Lowercase (a-z)</label>
        </li>
        <li class="option">
          <input type="checkbox" id="uppercase">
          <label for="uppercase">Uppercase (A-Z)</label>
        </li>
        <li class="option">
          <input type="checkbox" id="numbers">
          <label for="numbers">Numbers (0-9)</label>
        </li>
        <li class="option">
          <input type="checkbox" id="symbols">
          <label for="symbols">Symbols (!-$^+)</label>
        </li>
        <li class="option">
          <input type="checkbox" id="exc-duplicate">
          <label for="exc-duplicate">Exclude Duplicate</label>
        </li>
        <li class="option">
          <input type="checkbox" id="spaces">
          <label for="spaces">Include Spaces</label>
        </li>
      </ul>
    </div>
    <button class="generate-btn">Generate Password</button>
  </div>
</div>
<!-- partial -->
  <script src="./script.js"></script>
</body>
</html>

CSS

Este código CSS estiliza uma interface de gerador de senha com uma aparência moderna. Ele usa a fonte “Montserrat” e um fundo gradiente. Os campos de entrada, um indicador de força da senha, opções de comprimento e caixas de seleção para configurações são estilizados. O botão gerar tem efeitos flutuantes e ativos. O design é responsivo para telas menores.


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  color: #fff;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(180deg, #070807 50%, #dca314 50%);
}

.container {
  width: 430px;
  background: #222;
  border-radius: 7px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.container h2 {
  font-weight: 600;
  font-size: 21px;
  padding: 16px 30px;
  border-bottom: 1px solid #444;
  text-align: center;
}

.wrapper {
  margin: 20px 30px;
}

.input-box {
  position: relative;
}

.input-box input {
  width: 100%;
  height: 53px;
  color: #fff;
  background: none;
  font-size: 17px;
  font-weight: 500;
  border-radius: 4px;
  letter-spacing: 1.4px;
  border: 1px solid #555;
  padding: 0 48px 0 16px;
}

.input-box span {
  position: absolute;
  top: 0;
  right: 14px;
  line-height: 53px;
  font-size: 23px;
  cursor: pointer;
}

.input-box span:hover {
  color: #666;
}

.pass-indicator {
  background: #333;
  height: 8px;
  margin-top: 10px;
  border-radius: 5px;
}

.pass-length {
  margin-top: 20px;
}

.details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.title {
  font-size: 16px;
  font-weight: 500;
}

.pass-length input {
  width: calc(100% - 40px);
  background: #333;
  border: none;
  outline: none;
  -webkit-appearance: none;
  border-radius: 5px;
  height: 5px;
  cursor: pointer;
}

.pass-settings {
  margin-top: 30px;
}

.options {
  list-style-type: none;
}

.option {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.option input[type="checkbox"] {
  margin-right: 10px;
  cursor: pointer;
}

.option label {
  cursor: pointer;
}

.generate-btn {
  background: #007bff;
  color: #fff;
  border: none;
  outline: none;
  padding: 15px 20px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  margin-top: 30px;
  cursor: pointer;
}

.generate-btn:hover {
  background: #0056b3;
}

JavaScript

O código fornecido é um trecho de código JavaScript que cria uma funcionalidade de gerador de senha. Inclui ouvintes de eventos, funções e variáveis ​​para gerar uma senha aleatória com base nas opções selecionadas pelo usuário. No geral, este código fornece uma interface funcional de gerador de senha com opções para personalizar o comprimento da senha e os tipos de caracteres.


const lengthSlider = document.querySelector(".pass-length input"),
  options = document.querySelectorAll(".option input"),
  copyIcon = document.querySelector(".input-box span"),
  passwordInput = document.querySelector(".input-box input"),
  passIndicator = document.querySelector(".pass-indicator"),
  generateBtn = document.querySelector(".generate-btn");

const characters = {
  lowercase: "abcdefghijklmnopqrstuvwxyz",
  uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
  numbers: "0123456789",
  symbols: "^!$%&|[](){}:;.,*+-#@<>~"
};

const generatePassword = () => {
  let staticPassword = "",
    randomPassword = "",
    excludeDuplicate = false,
    passLength = lengthSlider.value;

  options.forEach((option) => {
    if (option.checked) {
      if (option.id !== "exc-duplicate" && option.id !== "spaces") {
        staticPassword += characters[option.id];
      } else if (option.id === "spaces") {
        staticPassword += `  ${staticPassword}  `;
      } else {
        excludeDuplicate = true;
      }
    }
  });

  for (let i = 0; i < passLength; i++) {
    let randomChar =
      staticPassword[Math.floor(Math.random() * staticPassword.length)];
    if (excludeDuplicate) {
      !randomPassword.includes(randomChar) || randomChar == " "
        ? (randomPassword += randomChar)
        : i--;
    } else {
      randomPassword += randomChar;
    }
  }
  passwordInput.value = randomPassword;
};

const updatePassIndicator = () => {
  passIndicator.id =
    lengthSlider.value <= 8
      ? "weak"
      : lengthSlider.value <= 16
      ? "medium"
      : "strong";
};

const updateSlider = () => {
  document.querySelector(".pass-length span").innerText = lengthSlider.value;
  generatePassword();
  updatePassIndicator();
};
updateSlider();

const copyPassword = () => {
  navigator.clipboard.writeText(passwordInput.value);
  copyIcon.innerText = "check";
  copyIcon.style.color = "#4285F4";
  setTimeout(() => {
    copyIcon.innerText = "copy_all";
    copyIcon.style.color = "#707070";
  }, 1500);
};

copyIcon.addEventListener("click", copyPassword);
lengthSlider.addEventListener("input", updateSlider);
generateBtn.addEventListener("click", generatePassword);

Como você pode ver, criar um gerador de senhas usando HTML, CSS e JavaScript é uma ótima maneira de aprender programação, pois trata-se de uma ferramenta útil que envolve segurança. Usando palavras simples e técnicas básicas de codificação, os iniciantes podem facilmente acompanhar e adquirir habilidades valiosas.


Download

Download7,04KB


Resultado

Ver Modelo Pronto



「🏷️」Tags:

ErikrafT

O ErikrafT é um Influencer Digital que AMA Minecraft

「💖」Você pode gostar

Ver todos
Postagem Anterior Próxima Postagem
Compartilhar com outros aplicativos
Copiar Link da postagem