<!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="targetElement"></span>

      <button class="btn" id="clipboard">

        <span>
          <i class="far fa-clipboard"></i>

        </span>

        <span>Copied</span>

      </button>

    </div>

    <div class="settings">

      <div class="setting">

        <label>Password Length</label>

        <input type="number" id="length" min="4" max="20" value="8">

      </div>

      <div class="setting">

        <label>Include uppercase letters</label>

        <input class="check" type="checkbox" id="uppercase" checked>

      </div>

      <div class="setting">

        <label>Include lowercase letters</label>

        <input class="check" type="checkbox" id="lowercase" checked>

      </div>

      <div class="setting">

        <label>Include numbers</label>

        <input class="check" type="checkbox" id="numbers" checked>

      </div>

      <div class="setting">

        <label>Include symbol</label>

        <input class="check" type="checkbox" id="symbols" checked>

      </div>

    </div>

    <button class="btn-large" id="generate">

      Generate Password</button>

  </div>

  <script src="script.js"></script>

</body>

</html>
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {
  -webkit-tap-highlight-color: transparent;

  box-sizing: border-box;
}

body {
  background: rgb(12, 10, 43);

  background: linear-gradient(
    0deg,
    rgba(12, 10, 43, 1) 3%,
    rgba(0, 0, 0, 1) 91%,
    rgba(0, 0, 0, 1) 100%
  );

  color: #fff;

  opacity: 0.9;

  font-family: "Muli", sans-serif;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 100vh;

  overflow: hidden;

  padding: 10px;

  margin: 0;

  transition: all 1s ease;
}

h2 {
  margin: 10px 0 20px;

  text-align: center;
}

.container {
  background-color: #23235b;

  padding: 20px;

  width: 95%;

  max-width: 600px;

  border-radius: 1rem;
}

.result-container {
  background-color: rgba(0, 0, 0, 0.4);

  display: flex;

  justify-content: flex-start;

  align-items: center;

  position: relative;

  font-size: 18px;

  letter-spacing: 1px;

  padding: 12px 10px;

  height: 50px;

  width: 100%;

  border-radius: 1rem;

  overflow: hidden;
}

.result-container #result {
  word-wrap: break-word;

  max-width: calc(100% - 40px);

  overflow-y: scroll;

  height: 100%;
}

#result::-webkit-scrollbar {
  width: 1rem;
}

.result-container .btn {
  position: absolute;

  top: 5px;

  right: 5px;

  width: 40px;

  height: 40px;
}

.btn-large {
  border: none;

  background-color: #3b3b98;

  color: #fff;

  font-size: 16px;

  padding: 8px 12px;

  cursor: pointer;

  border-radius: 1rem;

  transition: all 0.3s ease;

  display: block;

  width: 100%;

  font-weight: bold;
}

.btn-large:active {
  background-color: #000000;
}

.far {
  color: #ffffff;
  font-size: 18px;
}

.setting {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin: 10px 0;

  height: 2rem;

  width: 100%;

  border-radius: 0.5rem;

  background-color: rgba(0, 0, 0, 0.4);
}

#length {
  border: none;

  background-color: #3b3b98;

  color: #fff;

  font-size: 18px;

  cursor: pointer;

  border-radius: 0.5rem;

  margin: 1.5%;

  text-align: center;

  outline: none;

  transition: 0.2s ease-in-out;
}

#length:active {
  box-shadow: 0 0 0 2px #756eff;
}

label {
  font-size: 16.5px;

  margin-left: 3%;
}

.check {
  margin-right: 3%;
}

/* From Uiverse.io by fabiodevbr */

.btn {
  background-color: #3b3b98;

  width: 50px;

  height: 40px;

  border: none;

  border-radius: 10px;

  font-weight: 600;

  cursor: pointer;

  overflow: hidden;

  transition-duration: 700ms;
}

.btn span:first-child {
  color: #0e418f;

  position: absolute;

  transform: translate(-50%, -50%);
}

.btn span:last-child {
  position: absolute;

  color: #b5ccf3;

  opacity: 0;

  transform: translateY(100%) translateX(-50%);

  height: 14px;

  line-height: 13px;
}

.btn:focus {
  background-color: #0e418f;

  width: 70px;

  height: 40px;

  transition-delay: 100ms;

  transition-duration: 500ms;
}

.btn:focus span:first-child {
  color: #b5ccf3;

  transform: translateX(-50%) translateY(-150%);

  opacity: 0;

  transition-duration: 500ms;
}

.btn:focus span:last-child {
  transform: translateX(-50%) translateY(-50%);

  opacity: 1;

  transition-delay: 300ms;

  transition-duration: 500ms;
}

.btn:focus:end {
  background-color: #ffffff;

  width: 70px;

  height: 40px;

  transition-duration: 900ms;
}
const resultEl = document.getElementById("targetElement");

const lengthEl = document.getElementById("length");

const uppercaseEl = document.getElementById("uppercase");

const lowercaseEl = document.getElementById("lowercase");

const numbersEl = document.getElementById("numbers");

const symbolsEl = document.getElementById("symbols");

const generateEl = document.getElementById("generate");

const clipboardEl = document.getElementById("clipboard");

const randomFunc = {
  lower: getRandomLower,

  upper: getRandomUpper,

  number: getRandomNumber,

  symbol: getRandomSymbol
};

clipboardEl.addEventListener("click", () => {
  const password = resultEl.innerText;

  if (!password) {
    return;
  }

  navigator.clipboard.writeText(password);
});

generateEl.addEventListener("click", () => {
  const length = +lengthEl.value;

  const hasLower = lowercaseEl.checked;

  const hasUpper = uppercaseEl.checked;

  const hasNumber = numbersEl.checked;

  const hasSymbol = symbolsEl.checked;

  resultEl.innerText = generatePassword(
    hasLower,
    hasUpper,
    hasNumber,
    hasSymbol,
    length
  );
});

function generatePassword(lower, upper, number, symbol, length) {
  let generatedPassword = "";

  const typesCount = lower + upper + number + symbol;

  const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(
    (item) => Object.values(item)[0]
  );

  if (typesCount === 0) {
    return "";
  }

  for (let i = 0; i < length; i += typesCount) {
    typesArr.forEach((type) => {
      const funcName = Object.keys(type)[0];

      generatedPassword += randomFunc[funcName]();
    });
  }

  const finalPassword = generatedPassword.slice(0, length);

  return finalPassword;
}

function getRandomLower() {
  return String.fromCharCode(
    (window.crypto.getRandomValues(new Uint8Array(1))[0] % 26) + 97
  );
}

function getRandomUpper() {
  return String.fromCharCode(
    (window.crypto.getRandomValues(new Uint8Array(1))[0] % 26) + 65
  );
}

function getRandomNumber() {
  return String.fromCharCode(
    (window.crypto.getRandomValues(new Uint8Array(1))[0] % 10) + 48
  );
}

function getRandomSymbol() {
  const symbols = "!@#$%^&*(){}[]=<>/,.";

  return symbols[
    window.crypto.getRandomValues(new Uint8Array(1))[0] % symbols.length
  ];
}

lengthEl.addEventListener("input", () => {
  const lengthValue = +lengthEl.value;

  if (lengthValue >= 10) {
    lengthEl.style.color = "#00F504";
  } else if (lengthValue >= 6) {
    lengthEl.style.color = "#F57E00";
  } else {
    lengthEl.style.color = "#F50000";
  }
});

generateEl.addEventListener("click", () => {
  const length = +lengthEl.value;

  const hasLower = lowercaseEl.checked;

  const hasUpper = uppercaseEl.checked;

  const hasNumber = numbersEl.checked;

  const hasSymbol = symbolsEl.checked;

  const generatedPassword = generatePassword(
    hasLower,
    hasUpper,
    hasNumber,
    hasSymbol,
    length
  );

  resultEl.innerText = generatedPassword;

  if (generatedPassword.length >= 8) {
    resultEl.style.color = "#00F504";
  } else if (generatedPassword.length >= 6) {
    resultEl.style.color = "#F57E00";
  } else {
    resultEl.style.color = "#F50000";
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.