48+ JavaScript Password Generator Examples

This post contains a total of 48+ Hand-Picked JavaScript Password Generator Examples with Source Code. All these Password Generators are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

1. By WeiChiaChang

Made by WeiChiaChang. Nintendo 8-bit style JavaScript password generator. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<link href="https://unpkg.com/[email protected]/css/nes.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
<script src="https://rawgit.com/WeiChiaChang/Easter-egg/master/easter-eggs-collection.js"></script>
  
<style>
body {
  background: silver url("https://i.imgur.com/u49xcTY.png") fixed;
}

#app {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Press Start 2P";
  width: 650px;
  margin: 0 auto;
}
#app .container {
  margin-top: 2em;
  margin-bottom: 2em;
  background: rgba(245, 222, 179, 0.9);
}
#app .container .icon-list i {
  margin-right: 40px;
  transform: scale(3);
}
#app .container .character-container {
  background: white;
  margin-top: 2em;
}
#app .container .character-container .char-length-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#app .container .character-container .char-length-wrapper label {
  margin-bottom: 0;
}
#app .container .character-container .char-length-wrapper .range-slider_wrapper {
  position: relative;
  width: 300px;
  margin: 17px 0 30px;
}
#app .container .character-container .char-length-wrapper .range-slider {
  -webkit-appearance: none;
  appearance: none;
  background: #48e3c0;
  width: 100%;
  border-radius: 8px;
  vertical-align: bottom;
  margin: 0;
  height: 12px;
  transition: all ease-in 0.25s;
  cursor: url(./assets/cursor.png), auto;
}
#app .container .character-container .char-length-wrapper .range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  position: relative;
  width: 42px;
  height: 42px;
  background-color: #179578;
  background: url("https://i.imgur.com/t0q8nDG.png");
}
#app .container .character-container .char-length-wrapper .range-slider::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 0;
  position: relative;
  width: 23px;
  height: 24px;
  background-color: #179578;
  background: url("https://www.w3schools.com/howto/contrasticon.png");
}
#app .container .character-container .char-length-wrapper .range-slider:focus {
  outline: none;
}
#app .container .character-container .char-length-wrapper .range-slider:hover::-webkit-slider-thumb, #app .container .character-container .char-length-wrapper .range-slider:active::-webkit-slider-thumb {
  top: 0px;
}
#app .container .character-container .char-length-wrapper ::-moz-range-track {
  background: transparent;
  border: 0;
}
#app .container .character-container .char-length-wrapper input::-moz-focus-inner,
#app .container .character-container .char-length-wrapper input::-moz-focus-outer {
  border: 0;
}
#app .container .character-container .char-length-wrapper .slider-bar {
  position: absolute;
  height: 12px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  background: #1AAB8A;
  left: 0;
  bottom: 0;
  pointer-events: none;
}
#app .container .character-container .char-length-wrapper .number-tip {
  width: 30px;
}
#app .container .pwd-length-setting-wrapper {
  background: silver url(https://www.toptal.com/designers/subtlepatterns/patterns/old_wall.png) fixed;
  background: rgba(14, 190, 255, 0.4);
}
#app .container .pwd-length-setting-wrapper .message-list {
  display: flex;
  flex-direction: column;
}
#app .container .pwd-length-setting-wrapper .message-list .message.-left {
  display: flex;
  align-self: flex-start;
}
#app .container .pwd-length-setting-wrapper .message-list .message.-left .pwd_length_field {
  width: 90px;
  margin-top: 1em;
}
#app .container .pwd-length-setting-wrapper .message-list .message.-left .nes-bcrikko {
  margin-right: 2em;
}
#app .container .pwd-length-setting-wrapper .message-list .message.-right {
  display: flex;
  align-self: flex-end;
}
#app .container .pwd-length-setting-wrapper .message-list .message.-right .nes-octocat {
  margin-left: 2em;
}
#app .container .pwd-length-setting-wrapper .message-list .message.-right .pwd-strength-weak {
  color: red;
}
#app .container .pwd-length-setting-wrapper .message-list .message.-right .pwd-strength-better {
  color: blue;
}
#app .container .pwd-length-setting-wrapper .message-list .message.-right .pwd-strength-strong {
  color: #db7d3a;
}
#app .container .pwd-length-setting-wrapper .message-list .message.-right .pwd-strength-strongest {
  color: #378241;
}
#app .container .generate-pwd-container {
  background: white;
  margin-top: 2em;
}
#app .container .generate-pwd-container .btn-wrapper {
  display: flex;
  justify-content: space-between;
  width: 101%;
  margin-top: 1em;
}
</style>
</head>
<body>
  <div id="app">
    <section class="container nes-container with-title">
      <h2 class="title">Password Generator</h2>
      <section class="icon-list">
        <!-- Twitter -->
        <a href="https://twitter.com/share?url=https://weichiachang.github.io/pwd-generator/&amp;text=password-generator%20&amp;hashtags=passwordGenerator" target="_blank">
          <i class="nes-icon twitter is-large"></i>
        </a>
        <!-- Facebook -->
        <a href="https://www.facebook.com/sharer.php?u=https://weichiachang.github.io/pwd-generator/" target="_blank">
          <i class="nes-icon facebook is-large"></i>
        </a>
        <!-- Reddit -->
        <a href="https://reddit.com/submit?url=https://weichiachang.github.io/pwd-generator/&amp;title=password-generator" target="_blank">
          <i class="nes-icon reddit is-large"></i>
        </a>
        <!-- <img class="ac-logo" src="./assets/ac-8-bit.png" alt=""> -->
      </section>
      <section class="nes-container with-title pwd-length-setting-wrapper">
        <h3 class="title">Password Setting</h3>
        <div id="balloons" class="item">
          <section class="message-list">
            <section class="message -left">
              <i class="nes-bcrikko"></i>
              <!-- Balloon -->
              <div class="nes-balloon from-left">
                <p>
                  Your Password Length
                  <input
                    type="number"
                    min="6"
                    :max="config.maxLength"
                    class="nes-input pwd_length_field"
                    v-model="config.minLength"
                  >
                </p>
              </div>
            </section>
            <section class="message -right">
              <!-- Balloon -->
              <div class="nes-balloon from-right">
                <p :class="`pwd-strength-${pwdStrength.text}`">{{formatter(pwdStrength.text)}}</p>
              </div>
              <i class="nes-octocat animate"></i>
            </section>
          </section>
        </div>
      </section>
      <section class="character-container nes-container with-title">
        <h2 class="title">Character Set</h2>
        <div class="char-length-wrapper">
          <label>Symbols:</label>
          <div class="range-slider_wrapper">
            <span class="slider-bar" :style="{ width: symbolsProgress + '%' }"></span>
            <input
              type="range"
              min="0"
              :max="config.maxSymbols"
              class="range-slider"
              v-model="config.minSymbols"
            >
          </div>
          <span class="number-tip">{{ config.minSymbols }}</span>
        </div>
        <div class="char-length-wrapper">
          <label>Numbers:</label>
          <div class="range-slider_wrapper">
            <span class="slider-bar" :style="{ width: numbersProgress + '%' }"></span>
            <input
              type="range"
              min="0"
              :max="config.maxNumbers"
              class="range-slider"
              v-model="config.minNumbers"
            >
          </div>
          <span class="number-tip">{{ config.minNumbers }}</span>
        </div>
      </section>
      <section class="generate-pwd-container nes-container with-title">
        <h2 class="title">Generated Password</h2>
        <p id="pwd-input" class="nes-input">{{ password }}</p>
        <div class="btn-wrapper">
          <button type="button" class="nes-btn is-primary" @click="generatePwd">Generate Password</button>
          <button type="button" class="nes-btn is-success" @click="clipboardCopied">
            <span v-if="isCopied">Copied!</span>
            <span v-else>Copy</span>
          </button>
        </div>
      </section>
    </section>
  </div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
      <script>
new Vue({
  el: '#app',
  data: function () {
    return {
      config: {
        minLength: 6,
        minNumbers: 0,
        minSymbols: 0,
        maxLength: 24,
        maxNumbers: 12,
        maxSymbols: 12 },

      password: '',
      isCopied: false };

  },
  computed: {
    // TODO
    pwdStrength() {
      let pwdStrength = {
        text: '',
        score: 0 };


      let counter = {
        excess: 0,
        upperCase: 0,
        numbers: 0,
        symbols: 0 };


      let weight = {
        excess: 3,
        upperCase: 4,
        numbers: 5,
        symbols: 5,
        combo: 0,
        flatLower: 0,
        flatNumber: 0 };


      let baseScore = 30;

      for (let i = 0; i < this.password.length; i++) {if (window.CP.shouldStopExecution(0)) break;
        if (this.password.charAt(i).match(/[A-Z]/g)) {
          counter.upperCase++;
        }
        if (this.password.charAt(i).match(/[0-9]/g)) {
          counter.numbers++;
        }
        if (this.password.charAt(i).match(/(.*[-,#,^,+,@,^,%,|,*,?,!,$,=])/)) {
          counter.symbols++;
        }
      }window.CP.exitedLoop(0);

      counter.excess = this.password.length - 6;

      if (counter.upperCase && counter.numbers && counter.symbols) {
        weight.combo = 25;
      } else if (counter.upperCase && counter.numbers || counter.upperCase && counter.symbols || counter.numbers && counter.symbols) {
        weight.combo = 15;
      }

      if (this.password.match(/^[\sa-z]+$/)) {
        weight.flatLower = -30;
      }

      if (this.password.match(/^[\s0-9]+$/)) {
        weight.flatNumber = -50;
      }
      let score =
      baseScore +
      counter.excess * weight.excess +
      counter.upperCase * weight.upperCase +
      counter.numbers * weight.numbers +
      counter.symbols * weight.symbols +
      weight.combo + weight.flatLower +
      weight.flatNumber;

      switch (true) {
        case score < 30:
          pwdStrength.text = "weak";
          pwdStrength.score = 10;
          return pwdStrength;
        case score >= 30 && score < 75:
          pwdStrength.text = "better";
          pwdStrength.score = 40;
          return pwdStrength;
        case score >= 75 && score < 150:
          pwdStrength.text = "strong";
          pwdStrength.score = 75;
          return pwdStrength;
        default:
          pwdStrength.text = "strongest";
          pwdStrength.score = 100;
          return pwdStrength;}

    },
    // TODO
    lengthThumbPosition() {
      return (this.config.minLength - 6) / (this.config.maxLength - 6) * 100;
    },
    numbersProgress() {
      return this.config.minNumbers / this.config.maxNumbers * 100;
    },
    symbolsProgress() {
      return this.config.minSymbols / this.config.maxSymbols * 100;
    } },

  methods: {
    clipboardCopied() {
      let text = document.getElementById("pwd-input");
      let range = document.createRange();

      window.getSelection().removeAllRanges();
      range.selectNode(text);
      window.getSelection().addRange(range);
      document.execCommand("copy");
      window.getSelection().removeAllRanges();

      this.isCopied = true;
      // setTimeout
      setTimeout(() => {
        this.isCopied = false;
      }, 850);
    },
    // TODO
    generatePwd() {
      let tempPasswordArray = [];
      let tempNumbersArray = [];

      const LETTERS_ARRAY = this.generateLettersArray("a", "z");
      const SYMBOLS_ARRAY = ["-", "#", "^", "+", "@", "^", "%", "|", "*", "?", "!", "$", "="];

      // first, fill the password array with letters, uppercase and lowecase
      for (let i = 0; i < this.config.minLength; i++) {if (window.CP.shouldStopExecution(1)) break;
        // get an array for all indexes of the password array
        tempNumbersArray.push(i);
        let upperCase = Math.round(Math.random() * 1);
        if (upperCase === 0) {
          tempPasswordArray[i] = LETTERS_ARRAY[Math.floor(Math.random() * LETTERS_ARRAY.length)].toUpperCase();
        } else {
          tempPasswordArray[i] = LETTERS_ARRAY[Math.floor(Math.random() * LETTERS_ARRAY.length)];
        }
      }
      // Add digits to password
      window.CP.exitedLoop(1);for (let i = 0; i < this.config.minNumbers; i++) {if (window.CP.shouldStopExecution(2)) break;
        let digit = Math.round(Math.random() * 9);
        let numberIndex = tempNumbersArray[Math.floor(Math.random() * tempNumbersArray.length)];
        tempPasswordArray[numberIndex] = digit;
        /* remove position from tempNumbersArray  so we make sure to the have the exact number of digits in our password
        since without this step, numbers may override other numbers */
        let j = tempNumbersArray.indexOf(numberIndex);
        if (i !== -1) {
          tempNumbersArray.splice(j, 1);
        }
      }
      // add symbols
      window.CP.exitedLoop(2);for (let i = 0; i < this.config.minSymbols; i++) {if (window.CP.shouldStopExecution(3)) break;
        let symbol = SYMBOLS_ARRAY[Math.floor(Math.random() * SYMBOLS_ARRAY.length)];
        let symbolIndex = tempNumbersArray[Math.floor(Math.random() * tempNumbersArray.length)];
        tempPasswordArray[symbolIndex] = symbol;
        /* remove position from tempNumbersArray  so we make sure to the have the exact number of digits in our password
        since without this step, numbers may override other numbers */
        let j = tempNumbersArray.indexOf(symbolIndex);
        if (i !== -1) {
          tempNumbersArray.splice(j, 1);
        }
      }window.CP.exitedLoop(3);
      this.password = tempPasswordArray.join("");
    },
    formatter(s) {
      if (typeof s !== 'string') {
        return '';
      }
      return s.charAt(0).toUpperCase() + s.slice(1) + '!';
    },
    generateLettersArray(a, z) {
      let temp = [],
      i = a.charCodeAt(0),
      j = z.charCodeAt(0);

      for (; i <= j; i++) {if (window.CP.shouldStopExecution(4)) break;
        temp.push(String.fromCharCode(i));
      }window.CP.exitedLoop(4);
      return temp;
    } },

  // TODO
  watch: {
    config: {
      handler: function () {
        this.generatePwd();
      },
      deep: true } },


  mounted() {
    this.generatePwd();
  } });
    </script>
</body>
</html>

2. By Sikriti Dakua

Made by Sikriti Dakua. Javascript password generator with clipboard animation and multiple choices. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap'>
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to top, #209cff 100%, #68e0cf 200%);
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  border: 0;
  outline: 0;
}

.container {
  margin: 40px 0;
  width: 400px;
  height: 600px;
  padding: 10px 25px;
  background: #0a0e31;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15);
  font-family: "Montserrat";
}
.container h2.title {
  font-size: 1.75rem;
  margin: 10px -5px;
  margin-bottom: 30px;
  color: #fff;
}

.result {
  position: relative;
  width: 100%;
  height: 65px;
  overflow: hidden;
}
.result__info {
  position: absolute;
  bottom: 4px;
  color: #fff;
  font-size: 0.8rem;
  transition: all 150ms ease-in-out;
  transform: translateY(200%);
  opacity: 0;
}
.result__info.right {
  right: 8px;
}
.result__info.left {
  left: 8px;
}
.result__viewbox {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #fff;
  text-align: center;
  line-height: 65px;
}
.result #copy-btn {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  z-index: 2;
}
.result #copy-btn:active {
  box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.08);
}
.result:hover #copy-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.35);
}

.field-title {
  position: absolute;
  top: -10px;
  left: 8px;
  transform: translateY(-50%);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  font-size: 0.65rem;
  pointer-events: none;
  user-select: none;
}

.options {
  width: 100%;
  height: auto;
  margin: 50px 0;
}

.range__slider {
  position: relative;
  width: 100%;
  height: calc(65px - 10px);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin: 30px 0;
}
.range__slider::before, .range__slider::after {
  position: absolute;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
}
.range__slider::before {
  content: attr(data-min);
  left: 10px;
}
.range__slider::after {
  content: attr(data-max);
  right: 10px;
}
.range__slider .length__title::after {
  content: attr(data-length);
  position: absolute;
  right: -16px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

#slider {
  -webkit-appearance: none;
  width: calc(100% - (70px));
  height: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.314);
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
#slider::-webkit-slider-thumb:hover {
  background: #d4d4d4;
  transform: scale(1.2);
}
#slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}
#slider::-moz-range-thumb:hover {
  background: #d4d4d4;
}

.settings {
  position: relative;
  height: auto;
  widows: 100%;
  display: flex;
  flex-direction: column;
}
.settings .setting {
  position: relative;
  width: 100%;
  height: calc(65px - 10px);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 10px 25px;
  color: #fff;
  margin-bottom: 8px;
}
.settings .setting input {
  opacity: 0;
  position: absolute;
}
.settings .setting input + label {
  user-select: none;
}
.settings .setting input + label::before, .settings .setting input + label::after {
  content: "";
  position: absolute;
  transition: 150ms cubic-bezier(0.24, 0, 0.5, 1);
  transform: translateY(-50%);
  top: 50%;
  right: 10px;
  cursor: pointer;
}
.settings .setting input + label::before {
  height: 30px;
  width: 50px;
  border-radius: 30px;
  background: rgba(214, 214, 214, 0.434);
}
.settings .setting input + label::after {
  height: 24px;
  width: 24px;
  border-radius: 60px;
  right: 32px;
  background: #fff;
}
.settings .setting input:checked + label:before {
  background: #5d68e2;
  transition: all 150ms cubic-bezier(0, 0, 0, 0.1);
}
.settings .setting input:checked + label:after {
  right: 14px;
}
.settings .setting input:focus + label:before {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}
.settings .setting input:disabled + label:before, .settings .setting input:disabled + label:after {
  cursor: not-allowed;
}
.settings .setting input:disabled + label:before {
  background: #4f4f6a;
}
.settings .setting input:disabled + label:after {
  background: #909090;
}

.btn.generate {
  user-select: none;
  position: relative;
  width: 100%;
  height: 50px;
  margin: 10px 0;
  border-radius: 8px;
  color: #fff;
  border: none;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  letter-spacing: 1px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
}
.btn.generate:active {
  transform: translateY(-3%);
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.08);
}

.support {
  position: fixed;
  right: 10px;
  bottom: 10px;
  padding: 10px;
  display: flex;
}

a {
  margin: 0 20px;
  color: #fff;
  font-size: 2rem;
  transition: all 400ms ease;
}

a:hover {
  color: #222;
}

.github-corner svg {
  position: absolute;
  right: 0;
  top: 0;
  mix-blend-mode: darken;
  color: #eeeeee;
  fill: #353535;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.github-corner:hover .octo-arm {
  animation: octocat-wave 0.56s;
}

@keyframes octocat-wave {
  0%, 100% {
    transform: rotate(0);
  }
  20%, 60% {
    transform: rotate(-20deg);
  }
  40%, 80% {
    transform: rotate(10deg);
  }
}
</style>
</head>
<body>
  <div class="container">
	<h2 class="title">Password Generator</h2>
	<div class="result">
		<div class="result__title field-title">Generated Password</div>
		<div class="result__info right">click to copy</div>
		<div class="result__info left">copied</div>
		<div class="result__viewbox" id="result">CLICK GENERATE</div>
		<button id="copy-btn" style="--x: 0; --y: 0"><i class="far fa-copy"></i></button>
	</div>
	<div class="length range__slider" data-min="4" data-max="32">
		<div class="length__title field-title" data-length='0'>length:</div>
		<input id="slider" type="range" min="4" max="32" value="16" />
	</div>

	<div class="settings">
		<span class="settings__title field-title">settings</span>
		<div class="setting">
			<input type="checkbox" id="uppercase" checked />
			<label for="uppercase">Include Uppercase</label>
		</div>
		<div class="setting">
			<input type="checkbox" id="lowercase" checked />
			<label for="lowercase">Include Lowercase</label>
		</div>
		<div class="setting">
			<input type="checkbox" id="number" checked />
			<label for="number">Include Numbers</label>
		</div>
		<div class="setting">
			<input type="checkbox" id="symbol" />
			<label for="symbol">Include Symbols</label>
		</div>
	</div>

	<button class="btn generate" id="generate">Generate Password</button>
</div>


<div class="support">
	<a href="https://twitter.com/DevLoop01" target="_blank"><i class="fab fa-twitter-square"></i></a>
	<a href="https://codepen.io/dev_loop/" target="_blank"><i class="fab fa-codepen"></i></a>
</div>

<a class="github-corner" href="https://github.com/devloop01/password-generator" title="Fork me on GitHub" target="_blank">
	<svg width="80" height="80" viewbox="0 0 250 250">
		<title>Fork me on GitHub</title>
		<path d="M0 0h250v250" />
		<path class="octo-arm" d="M127.4 110c-14.6-9.2-9.4-19.5-9.4-19.5 3-7 1.5-11 1.5-11-1-6.2 3-2 3-2 4 4.7 2 11 2 11-2.2 10.4 5 14.8 9 16.2" fill="currentColor" style="transform-origin:130px 110px;" />
		<path class="octo-body" d="M113.2 114.3s3.6 1.6 4.7.6l15-13.7c3-2.4 6-3 8.2-2.7-8-11.2-14-25 3-41 4.7-4.4 10.6-6.4 16.2-6.4.6-1.6 3.6-7.3 11.8-10.7 0 0 4.5 2.7 6.8 16.5 4.3 2.7 8.3 6 12 9.8 3.3 3.5 6.7 8 8.6 12.3 14 3 16.8 8 16.8 8-3.4 8-9.4 11-11.4 11 0 5.8-2.3 11-7.5 15.5-16.4 16-30 9-40 .2 0 3-1 7-5.2 11l-13.3 11c-1 1 .5 5.3.8 5z" fill="currentColor" />
	</svg>
</a>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

      <script>
// This is a simple Password Generator App that will generate random password maybe you can you them to secure your account.
// I tried my best to make the code as simple as possible please dont mind the variable names.
// Also this idea came in my mind after checking Traversy Media's latest video.

// Clear the concole on every refresh
console.clear();
// set the body to full height
// document.body.style.height = `${innerHeight}px`

// Range Slider Properties.
// Fill : The trailing color that you see when you drag the slider.
// background : Default Range Slider Background
const sliderProps = {
  fill: "#0B1EDF",
  background: "rgba(255, 255, 255, 0.214)" };


// Selecting the Range Slider container which will effect the LENGTH property of the password.
const slider = document.querySelector(".range__slider");

// Text which will show the value of the range slider.
const sliderValue = document.querySelector(".length__title");

// Using Event Listener to apply the fill and also change the value of the text.
slider.querySelector("input").addEventListener("input", event => {
  sliderValue.setAttribute("data-length", event.target.value);
  applyFill(event.target);
});
// Selecting the range input and passing it in the applyFill func.
applyFill(slider.querySelector("input"));
// This function is responsible to create the trailing color and setting the fill.
function applyFill(slider) {
  const percentage = 100 * (slider.value - slider.min) / (slider.max - slider.min);
  const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${percentage +
  0.1}%)`;
  slider.style.background = bg;
  sliderValue.setAttribute("data-length", slider.value);
}

// Object of all the function names that we will use to create random letters of password
const randomFunc = {
  lower: getRandomLower,
  upper: getRandomUpper,
  number: getRandomNumber,
  symbol: getRandomSymbol };


// Random more secure value
function secureMathRandom() {
  return window.crypto.getRandomValues(new Uint32Array(1))[0] / (Math.pow(2, 32) - 1);
}

// Generator Functions
// All the functions that are responsible to return a random value taht we will use to create password.
function getRandomLower() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}
function getRandomUpper() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}
function getRandomNumber() {
  return String.fromCharCode(Math.floor(secureMathRandom() * 10) + 48);
}
function getRandomSymbol() {
  const symbols = '[email protected]#$%^&*()_+{}":?><;.,';
  return symbols[Math.floor(Math.random() * symbols.length)];
}

// Selecting all the DOM Elements that are necessary -->

// The Viewbox where the result will be shown
const resultEl = document.getElementById("result");
// The input slider, will use to change the length of the password
const lengthEl = document.getElementById("slider");

// Checkboxes representing the options that is responsible to create differnt type of password based on user
const uppercaseEl = document.getElementById("uppercase");
const lowercaseEl = document.getElementById("lowercase");
const numberEl = document.getElementById("number");
const symbolEl = document.getElementById("symbol");

// Button to generate the password
const generateBtn = document.getElementById("generate");
// Button to copy the text
const copyBtn = document.getElementById("copy-btn");
// Result viewbox container
const resultContainer = document.querySelector(".result");
// Text info showed after generate button is clicked
const copyInfo = document.querySelector(".result__info.right");
// Text appear after copy button is clicked
const copiedInfo = document.querySelector(".result__info.left");

// if this variable is trye only then the copyBtn will appear, i.e. when the user first click generate the copyBth will interact.
let generatedPassword = false;

// Update Css Props of the COPY button
// Getting the bounds of the result viewbox container
let resultContainerBound = {
  left: resultContainer.getBoundingClientRect().left,
  top: resultContainer.getBoundingClientRect().top };

// This will update the position of the copy button based on mouse Position
resultContainer.addEventListener("mousemove", e => {
  resultContainerBound = {
    left: resultContainer.getBoundingClientRect().left,
    top: resultContainer.getBoundingClientRect().top };

  if (generatedPassword) {
    copyBtn.style.opacity = '1';
    copyBtn.style.pointerEvents = 'all';
    copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`);
    copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`);
  } else {
    copyBtn.style.opacity = '0';
    copyBtn.style.pointerEvents = 'none';
  }
});
window.addEventListener("resize", e => {
  resultContainerBound = {
    left: resultContainer.getBoundingClientRect().left,
    top: resultContainer.getBoundingClientRect().top };

});

// Copy Password in clipboard
copyBtn.addEventListener("click", () => {
  const textarea = document.createElement("textarea");
  const password = resultEl.innerText;
  if (!password || password == "CLICK GENERATE") {
    return;
  }
  textarea.value = password;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  textarea.remove();

  copyInfo.style.transform = "translateY(200%)";
  copyInfo.style.opacity = "0";
  copiedInfo.style.transform = "translateY(0%)";
  copiedInfo.style.opacity = "0.75";
});

// When Generate is clicked Password id generated.
generateBtn.addEventListener("click", () => {
  const length = +lengthEl.value;
  const hasLower = lowercaseEl.checked;
  const hasUpper = uppercaseEl.checked;
  const hasNumber = numberEl.checked;
  const hasSymbol = symbolEl.checked;
  generatedPassword = true;
  resultEl.innerText = generatePassword(length, hasLower, hasUpper, hasNumber, hasSymbol);
  copyInfo.style.transform = "translateY(0%)";
  copyInfo.style.opacity = "0.75";
  copiedInfo.style.transform = "translateY(200%)";
  copiedInfo.style.opacity = "0";
});

// Function responsible to generate password and then returning it.
function generatePassword(length, lower, upper, number, symbol) {
  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++) {if (window.CP.shouldStopExecution(0)) break;
    typesArr.forEach(type => {
      const funcName = Object.keys(type)[0];
      generatedPassword += randomFunc[funcName]();
    });
  }window.CP.exitedLoop(0);
  return generatedPassword.slice(0, length).
  split('').sort(() => Math.random() - 0.5).
  join('');
}

// function that handles the checkboxes state, so at least one needs to be selected. The last checkbox will be disabled.
function disableOnlyCheckbox() {
  let totalChecked = [uppercaseEl, lowercaseEl, numberEl, symbolEl].filter(el => el.checked);
  totalChecked.forEach(el => {
    if (totalChecked.length == 1) {
      el.disabled = true;
    } else {
      el.disabled = false;
    }
  });
}

[uppercaseEl, lowercaseEl, numberEl, symbolEl].forEach(el => {
  el.addEventListener('click', () => {
    disableOnlyCheckbox();
  });
});
    </script>
</body>
</html>

3. By Jake Albaugh

Made by Jake Albaugh. Ridiculous password generator that generates random long text and number passwords. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body {
  background: teal;
  font-weight: 300;
}

section {
  width: 95%;
  max-width: 800px;
  margin: 0 auto;
}

#input,
#output {
  display: block;
  box-sizing: border-box;
  margin: 2rem auto;
  text-align: center;
  font-size: 1.5rem;
  padding: 1rem;
  border-radius: 0.25rem;
  border: 1px solid #006767;
}

#output {
  width: 100%;
}

#input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #009a9a;
  color: white;
  text-shadow: -1px -1px 0px #006767;
  box-shadow: 0px 4px 0px 0px #006767;
  transition: box-shadow 100ms ease-out, background 100ms ease-out;
  outline: none;
}
#input:hover, #input:focus {
  background: #00b3b3;
}
#input:active {
  background: #009a9a;
  box-shadow: 0px 0px 0px 0px #006767;
}

::-moz-selection {
  background: #a6d9d9;
}

::selection {
  background: #a6d9d9;
}

h1 {
  font-weight: 300;
  color: white;
  text-shadow: -1px -1px 0px #006767;
  text-align: center;
  margin-top: 20vh;
}
</style>
</head>
<body>
  <section>
  <h1>You need a better password.</h1>
  <input id=output />
  <button id=input>Generate Ridiculous Password</button>
</section>
  <script src='https://codepen.io/jakealbaugh/pen/WvNjZB.js'></script>
      <script>
function Generator() {
  var g = {
    input: undefined,
    output: undefined,
    init: function (input, output) {
      g.input = document.getElementById(input);
      g.output = document.getElementById(output);
      g.input.addEventListener('click', g.generatePassword);
    },
    generatePassword: function () {
      var p = g.getPassword();
      g.outputPassword(p);
    },
    getPassword: function () {
      var dict = g.dictionary,
      subj1 = dict.subjects[Math.floor(Math.random() * dict.subjects.length)],
      verb = dict.verbs[Math.floor(Math.random() * dict.verbs.length)],
      count = Math.round(Math.random() * dict.counts),
      adj = dict.adjectives[Math.floor(Math.random() * dict.adjectives.length)],
      noun = dict.nouns[Math.floor(Math.random() * dict.nouns.length)],
      prep = dict.prepositions[Math.floor(Math.random() * dict.prepositions.length)],
      subj2 = dict.subjects[Math.floor(Math.random() * dict.subjects.length)],
      punct = dict.punctuations[Math.floor(Math.random() * dict.punctuations.length)],
      pw = [subj1, verb, count, adj, noun, prep, subj2, punct].join("");
      return pw;
    },
    outputPassword: function (p) {
      g.output.value = p;
    },
    dictionary: {
      subjects: ['Sophia', 'Emma', 'Olivia', 'Ava', 'Isabella', 'Mia', 'Zoe', 'Lily', 'Emily', 'Madelyn', 'Madison', 'Chloe', 'Charlotte', 'Aubrey', 'Avery', 'Abigail', 'Kaylee', 'Layla', 'Harper', 'Ella', 'Amelia', 'Arianna', 'Riley', 'Aria', 'Hailey', 'Hannah', 'Aaliyah', 'Evelyn', 'Addison', 'Mackenzie', 'Adalyn', 'Ellie', 'Brooklyn', 'Nora', 'Scarlett', 'Grace', 'Anna', 'Isabelle', 'Natalie', 'Kaitlyn', 'Lillian', 'Sarah', 'Audrey', 'Elizabeth', 'Leah', 'Annabelle', 'Kylie', 'Mila', 'Claire', 'Victoria', 'Maya', 'Lila', 'Elena', 'Lucy', 'Savannah', 'Gabriella', 'Callie', 'Alaina', 'Sophie', 'Makayla', 'Kennedy', 'Sadie', 'Skyler', 'Allison', 'Caroline', 'Charlie', 'Penelope', 'Alyssa', 'Peyton', 'Samantha', 'Liliana', 'Bailey', 'Maria', 'Reagan', 'Violet', 'Eliana', 'Adeline', 'Eva', 'Stella', 'Keira', 'Katherine', 'Vivian', 'Alice', 'Alexandra', 'Camilla', 'Kayla', 'Alexis', 'Sydney', 'Kaelyn', 'Jasmine', 'Julia', 'Cora', 'Lauren', 'Piper', 'Gianna', 'Paisley', 'Bella', 'London', 'Clara', 'Cadence', 'Jackson', 'Aiden', 'Liam', 'Lucas', 'Noah', 'Mason', 'Ethan', 'Caden', 'Jacob', 'Logan', 'Jayden', 'Elijah', 'Jack', 'Luke', 'Michael', 'Benjamin', 'Alexander', 'James', 'Jayce', 'Caleb', 'Connor', 'William', 'Carter', 'Ryan', 'Oliver', 'Matthew', 'Daniel', 'Gabriel', 'Henry', 'Owen', 'Grayson', 'Dylan', 'Landon', 'Isaac', 'Nicholas', 'Wyatt', 'Nathan', 'Andrew', 'Cameron', 'Dominic', 'Joshua', 'Eli', 'Sebastian', 'Hunter', 'Brayden', 'David', 'Samuel', 'Evan', 'Gavin', 'Christian', 'Max', 'Anthony', 'Joseph', 'Julian', 'John', 'Colton', 'Levi', 'Aaron', 'Tyler', 'Charlie', 'Adam', 'Parker', 'Austin', 'Thomas', 'Zachary', 'Nolan', 'Alex', 'Ian', 'Jonathan', 'Christopher', 'Cooper', 'Hudson', 'Miles', 'Adrian', 'Leo', 'Blake', 'Lincoln', 'Jordan', 'Tristan', 'Jason', 'Josiah', 'Xavier', 'Camden', 'Chase', 'Declan', 'Carson', 'Colin', 'Brody', 'Asher', 'Jeremiah', 'Micah', 'Easton', 'Xander', 'Ryder', 'Nathaniel', 'Elliot', 'Sean', 'Cole'],
      verbs: ['Wants', 'Feeds', 'Gets', 'Awards', 'Gives', 'Kills', 'Disguises', 'Gifts', 'Grabs', 'Pours', 'Buys', 'Sells', 'Invests', 'Throws', 'Tries', 'Births', 'HighFives', 'Worships'],
      counts: 2000,
      adjectives: ['Greedy', 'Friendly', 'Ornery', 'Wonderful', 'Lonely', 'Needy', 'Spoiled', 'Lovely', 'Yellow', 'Bored', 'Crying', 'Upset', 'Happy', 'Elated'],
      nouns: ['Dogs', 'Babies', 'Friends', 'Chickens', 'Cats', 'Men', 'Ladies', 'Goats', 'Ingredients'],
      prepositions: ['On', 'For', 'In', 'Between', 'At', 'With', 'AccordingTo', 'Without', 'AsPaymentTo', 'ToAvenge', 'BecauseTheyHate', 'BecauseTheyLove', 'InsteadOf'],
      punctuations: ['!', '?', '.'] } };


  return g;
}

var generator = new Generator();
generator.init('input', 'output');
jakealbaughSignature("light");
    </script>
</body>
</html>

4. By Joshua Michael Calafell

Made by Joshua Michael Calafell. Random Password Generator that can generate hexadecimal, ASCII and Alpha Numeric password of different length. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Lato|Oswald' rel='stylesheet' type='text/css'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  
<style>
body {
  text-align: center;
}

.header {
  font-family: "Oswald";
}

.blinker {
  animation-name: blinker;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  display: inline-block;
}

body {
  background-color: #333;
  color: white;
}

h1 {
  text-transform: uppercase;
  margin: 20px;
}

select, button {
  font-family: "Lato";
}

.pw {
  letter-spacing: 0.4em;
  font-family: monospace;
  maring-bottom: 30px;
}

@keyframes blinker {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>
</head>
<body>
  <div class='header'>
   <h1><span class='noselect'>
     > <span class='blinker'>_</span>
   </span> Random Password Generator</h1>
</div>


<select class='btn btn-default pw-select'>
  <option val='0' selected disabled>Select password type</option>
  <option val='alpha'>Alpha Numeric</option>
  <option val='ascii'>ASCII</option>
  <option val='hex'>Hexadecimal</option>
</select>

<select class='btn btn-default pw-len'>
  <option val='0' selected disabled>Select length</option>
  <option val='4'>4-chars</option>
  <option val='6'>6 chars</option>
  <option val='8'>8 chars</option>
  <option val='10'>10 chars</option>
  <option val='12'>12 chars</option>
  <option val='14'>14 chars</option>
  <option val='16'>16 chars</option>
</select>


<button class=' btn btn-success submit'>
  Generate
</button>

<h2 class='pw'>
  <div class='password'>password</div>
</h2>

<button class='btn btn-danger clip'>
  Copy To Clipboard
</button>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
(function() {
  // PW Types
  /*
   * Copies the password to an alert so that
   * the user can copy it. This is the most
   * secure way I can think to do it. 
   */
  /*
   * Generate an ascii pw
   */
  /*
   * Generate an alpha numeric or hex pw
   */
  var charset, charset_alpha, charset_hex, copy, generateAsciiPwd, generatePwd, len, pwType;

  pwType = null;

  len = null;

  charset = null;

  // Charsets except ascii
  charset_alpha = 'abcdefghijklnopqrstuvwxyz' + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + '0123456789';

  charset_hex = '0123456789ABCDEF';

  // Select a password type
  $('.pw-select').on('click', function() {
    pwType = $(".pw-select option:selected").attr('val');
  });

  // Select length
  $('.pw-len').on('click', function() {
    len = $(".pw-len option:selected").attr('val');
  });

  // Submit request for password
  $('.submit').click(function() {
    if (pwType === 'alpha') {
      charset = charset_alpha;
      generatePwd(len);
    }
    if (pwType === 'hex') {
      charset = charset_hex;
      generatePwd(len);
    }
    if (pwType === 'ascii') {
      generateAsciiPwd(len);
    }
  });

  // Copy to clipboard 
  $('.clip').on('click', function() {
    copy($('.password').text());
  });

  generatePwd = function(length) {
    var i, n, retVal;
    retVal = '';
    i = 0;
    n = charset.length;
    while (i < length) {
      retVal += charset.charAt(Math.floor(Math.random() * n));
      ++i;
    }
    if (retVal !== '') {
      return $('.password').text(retVal);
    }
  };

  generateAsciiPwd = function(length) {
    var i, n, offset, random, retVal;
    retVal = '';
    i = 0;
    offset = 33;
    n = 92;
    while (i < length) {
      random = Math.floor(Math.random() * n);
      retVal += String.fromCharCode(random + offset);
      ++i;
    }
    if (retVal !== '') {
      return $('.password').text(retVal);
    }
  };

  copy = function(text) {
    window.prompt('Copy to clipboard: Ctrl+C, Enter', text);
  };

  
  // Prompt blinking cursor animation
  $('.prompt').css('animation', 'blinker 1.5s ease-in-out infinite');

}).call(this);
    </script>
</body>
</html>

5. By Florin Pop

Made by Florin Pop. Simple JavaScript password generator with clipboard and multiple options for password customization. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'>
  
<style>
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

* {
	box-sizing: border-box;
}

body {
	background-color: #3B3B98;
	color: #fff;
	display: flex;
	font-family: 'Muli', sans-serif;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px;
	min-height: 100vh;
}

p {
	margin: 5px 0;
}

h2 {
	margin: 10px 0 20px;
	text-align: center;
}

input[type=checkbox] {
	margin-right: 0;
}

.container {
	background-color: #23235B;
	box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
	padding: 20px;
	width: 350px;
	max-width: 100%;
}

.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%;
}

.result-container #result {
  	word-wrap: break-word;
	max-width: calc(100% - 40px);
}

.result-container .btn {
	font-size: 20px;
	position: absolute;
	top: 5px;
	right: 5px;
	height: 40px;
	width: 40px;
}

.btn {
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	padding: 8px 12px;
	background-color: #3B3B98;
}

.btn-large {
	display: block;
	width: 100%;
}

.setting {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 15px 0;
}

@media screen and (max-width: 400px) {
	.result-container {
		font-size: 14px;
	}
}

/* SOCIAL PANEL CSS */
.social-panel-container {
	position: fixed;
	right: 0;
	bottom: 80px;
	transform: translateX(100%);
	transition: transform 0.4s ease-in-out;
}

.social-panel-container.visible {
	transform: translateX(-10px);
}

.social-panel {	
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);
	border: 5px solid #001F61;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: 'Muli';
	position: relative;
	height: 169px;	
	width: 370px;
	max-width: calc(100% - 10px);
}

.social-panel button.close-btn {
	border: 0;
	color: #97A5CE;
	cursor: pointer;
	font-size: 20px;
	position: absolute;
	top: 5px;
	right: 5px;
}

.social-panel button.close-btn:focus {
	outline: none;
}

.social-panel p {
	background-color: #001F61;
	border-radius: 0 0 10px 10px;
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	padding: 2px 17px 6px;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	text-align: center;
	width: 235px;
}

.social-panel p i {
	margin: 0 5px;
}

.social-panel p a {
	color: #FF7500;
	text-decoration: none;
}

.social-panel h4 {
	margin: 20px 0;
	color: #97A5CE;	
	font-family: 'Muli';	
	font-size: 14px;	
	line-height: 18px;
	text-transform: uppercase;
}

.social-panel ul {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.social-panel ul li {
	margin: 0 10px;
}

.social-panel ul li a {
	border: 1px solid #DCE1F2;
	border-radius: 50%;
	color: #001F61;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
	width: 50px;
	text-decoration: none;
}

.social-panel ul li a:hover {
	border-color: #FF6A00;
	box-shadow: 0 9px 12px -9px #FF6A00;
}

.floating-btn {
	border-radius: 26.5px;
	background-color: #001F61;
	border: 1px solid #001F61;
	box-shadow: 0 16px 22px -17px #03153B;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	line-height: 20px;
	padding: 12px 20px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
}

.floating-btn:hover {
	background-color: #ffffff;
	color: #001F61;
}

.floating-btn:focus {
	outline: none;
}

.floating-text {
	background-color: #001F61;
	border-radius: 10px 10px 0 0;
	color: #fff;
	font-family: 'Muli';
	padding: 7px 15px;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	z-index: 998;
}

.floating-text a {
	color: #FF7500;
	text-decoration: none;
}

@media screen and (max-width: 480px) {

	.social-panel-container.visible {
		transform: translateX(0px);
	}
	
	.floating-btn {
		right: 10px;
	}
}
</style>
</head>
<body>
  <!-- INSERT HTML HERE -->
<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>
<div class="social-panel-container">
	<div class="social-panel">
		<p>Created with <i class="fa fa-heart"></i> by
			<a target="_blank" href="https://florin-pop.com">Florin Pop</a></p>
		<button class="close-btn"><i class="fas fa-times"></i></button>
		<h4>Get in touch on</h4>
		<ul>
			<li>
				<a href="https://www.patreon.com/florinpop17" target="_blank">
					<i class="fab fa-discord"></i>
				</a>
			</li>
			<li>
				<a href="https://twitter.com/florinpop1705" target="_blank">
					<i class="fab fa-twitter"></i>
				</a>
			</li>
			<li>
				<a href="https://linkedin.com/in/florinpop17" target="_blank">
					<i class="fab fa-linkedin"></i>
				</a>
			</li>
			<li>
				<a href="https://facebook.com/florinpop17" target="_blank">
					<i class="fab fa-facebook"></i>
				</a>
			</li>
			<li>
				<a href="https://instagram.com/florinpop17" target="_blank">
					<i class="fab fa-instagram"></i>
				</a>
			</li>
		</ul>
	</div>
</div>
<button class="floating-btn">
	Get in Touch
</button>

<div class="floating-text">
	Part of <a href="https://florin-pop.com/blog/2019/09/100-days-100-projects" target="_blank">#100Days100Projects</a>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  
      <script>
const resultEl = document.getElementById('result');
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 clipboard = document.getElementById('clipboard');

const randomFunc = {
  lower: getRandomLower,
  upper: getRandomUpper,
  number: getRandomNumber,
  symbol: getRandomSymbol };


clipboard.addEventListener('click', () => {
  const textarea = document.createElement('textarea');
  const password = resultEl.innerText;

  if (!password) {return;}

  textarea.value = password;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  textarea.remove();
  alert('Password copied to clipboard');
});

generate.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]);

  // Doesn't have a selected type
  if (typesCount === 0) {
    return '';
  }

  // create a loop
  for (let i = 0; i < length; i += typesCount) {if (window.CP.shouldStopExecution(0)) break;
    typesArr.forEach(type => {
      const funcName = Object.keys(type)[0];
      generatedPassword += randomFunc[funcName]();
    });
  }window.CP.exitedLoop(0);

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

  return finalPassword;
}

function getRandomLower() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}

function getRandomUpper() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
  return +String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}

function getRandomSymbol() {
  const symbols = '[email protected]#$%^&*(){}[]=<>/,.';
  return symbols[Math.floor(Math.random() * symbols.length)];
}

const floating_btn = document.querySelector('.floating-btn');
const close_btn = document.querySelector('.close-btn');
const social_panel_container = document.querySelector('.social-panel-container');

floating_btn.addEventListener('click', () => {
  social_panel_container.classList.toggle('visible');
});

close_btn.addEventListener('click', () => {
  social_panel_container.classList.remove('visible');
});
    </script>
</body>
</html>

6. By Erzen Gaming

JavaScript Password Generator by Erzen Gaming. Program to generate a random 46 digit password. Source

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
	<button onclick=generatePassword()>Generate Password</button>
	</body>
</html>


-----CSS-----


button {
    border:1px solid;
    width:300px;
    height:440px;
    cursor:crosshair;
}
button:hover {
    border:4px solid;
    background-color:red;
}



-----JS------


function generatePassword(){

"use strict";
var q = Math.random();
q*=1e17;
document.write(q.toString(36) + p.toString(36) + q.toString(36) + q.toString(36));
}

var p = Math.random();

7. By Vivek Kumar Mahali

Made by Vivek Kumar Mahali. Click on the Generate button to generate a random 16 digit password. You can copy the generated password by clicking on the copy icon. Source

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
        <title>Random Number Generator</title>
    </head>
    <body>
        <div class="inputbx">
        <h2>Generate Random Password</h2>
            <input type="text" placeholder="create password" id="password" readonly="">
            <i class="fa fa-clone" aria-hidden="true" onclick="copyPassword()"></i>
            
            <div class="btn" onclick= "getPassword()">generate password</div>
        </div>
        <div class="alertBx"></div>
    </body>
</html>



------CSS-------



*{
    margin:0;
    padding:0;
    font-family: 'Bangers', cursive;
    
}
body {
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    width:100%;
    
    
}
.inputbx{
    position:relative;
    width:360px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:20px;
    
}
.inputbx h2{
    font-size:1.5em;
    margin:0px 0px 20px 0px;
    font-weight:900;
    letter-spacing:2px;
    color:#2ecc71;
}
.inputbx input{
    
    height:50px;
    width:90%;
    padding:0px 10px 0px 10px;
    font-size:1.3em;
    font-weight:800;
    letter-spacing:4px;
    border:none;
    outline:none;
    color:#3498db;
    background:transparent;
    box-sizing:border-box;
    border-radius:8px;
    box-shadow: -4px -4px 10px rgba(255,255,255,1),
                 inset 4px 4px 10px rgba(0,0,0,.08),inset -4px -4px 10px rgba(255,255,255,1),
             4px 4px 10px rgba(0,0,0,.08);
                 
                    
    
}
.inputbx input::placeholder{
    letter-spacing:0px;
    color:#bdc3c7;
}
.inputbx .btn{
    width:200px;
    background:#333;
    color:#fff;
    padding:10px;
    margin:20px 0px 0px 0px;
    text-align:center;
    font-weight:700;
    border-radius:8px;
    letter-spacing:2px;
    
}
.inputbx .btn:active{
    background:#3498db;
}
i{
    position:absolute;
    right:55px;
    top:80px;
    
}
.fa{
    font-size:1.3em;
    opacity:0.2;
}
.fa:active{
    opacity:1;
}
.alertBx{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:#9b59b6;
    display:none;
    color:#fff;
    font-size:2em;
}
.alertBx.active{
    display:flex;
    justify-content:center;
    align-items:center;
}



-----JS------


        var alertBx = document.querySelector('.alertBx');
            function getPassword(){
                var char = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ#Β£_&*€Β₯$Β’^Β°=Ο€{}[]()/:;!?~`|β€’βˆšΓ·Γ—βˆ†><";
            
            var passwordLength = 16;
            var password = "";
            for(var i = 0;i<passwordLength;i++){
            var randomNumber = Math.floor(Math.random()*char.length);
            password += char.substring(randomNumber,randomNumber+1);
                
            }
            document.getElementById("password").value =  password;
         alertBx.innerHTML = "New Password Copied:<br>" + password ;
            
            
            }
          function copyPassword(){
              var copyText = document.getElementById('password');
              copyText.select();
              copyText.setSelectionRange(0,9999);
              document.execCommand('copy');
              alertBx.classList.toggle('active');
              setTimeout(function(){
               alertBx.classList.toggle('active');   
              },1500)
          }

8. By KenT4ik

Made by KenT4ik. In this program you will have to first enter how many passwords you want to generate, then select the size, after that whether you want to use symbols or not. The program has no styling. Source

var Chars = "qwertyuiopasdfghjklzxcvbnm1234567890_-QWERTYUIOPASDFGHJKLZXCVBNM"

function Password(times, sizes, special, smart){
for (let x = 1; x <= times; x++){
var password = ""
var size = sizes
var Spec = `/:;()β‚½&@.,?!'"[]{}#%^*+=\|~<>$€£‒`

if(special == true){
	Chars += Spec
}

for( i = 1; i <= size; i++){
	password += Chars[Math.floor(Math.random() * (Chars.length-1))]
if (i >= 65565){
	break;
}
}


if (smart == true){
	UpdatePassword()
}

function UpdatePassword(){

	let char = ""
	for (let i = 0; i <= password.length; i++){
		if (password[i] == char){
			password[i] = Chars[Math.floor(Math.random() * (Chars.length-1))]
		}
		if (i + 1 <= password.length-1){
		char = password[i+1]
		}
	}

}


//alert(password)
document.write(password + "<br><br>\n")
password = ""
}
}


Password(Number(prompt('Passwords times generate:')), Number(prompt('Size of password:')), confirm("Use special symbols?"), confirm("Use Updated password?"))

9. By Jace Fincham

Made by Jace Fincham. The program generates a random 16 digit password when you click on the generate button. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Password Generator</title>
    </head>
    <body>
        <h1>Password Generator <span>v1.0.1</span></h1>
        <div class="container">
            <div class="row">
                <span id="button">Generate</span>
                <span id="output" contentEditable="true"></span>
            </div>
        </div>
    </body>
</html>


------CSS------


*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: #8fedac;
}

h1 {
    font-size: 1.2em;
    margin: 1em 0;
    text-align: center;
}

h1 span {
    color: #789;
}

.container {
    border: 1px dotted #999;
    margin: 1em auto 0;
    max-width: 100%;
    padding: 15px;
    width: 350px;
}

.row {
    margin: 0 auto;
    width: 241px;
}

#button {
    background-color: #d4d4d4;
    background-image: linear-gradient(to bottom, #c4c4c4, #d4d4d4);
    border: 1px solid #666;
    border-radius: 2px;
    cursor: pointer;
    display: inline-block;
    padding: 3px 5px;
    user-select: none;
    vertical-align: top;
}

#button:active {
    background: #aaa;
}

#output {
    background-color: #f8f8f8;
    border: 1px solid #999;
    border-radius: 2px;
    display: inline-block;
    font-family: 'Consolas', monospace;
    height: 27px;
    overflow: hidden;
    padding: 3px 5px;
    vertical-align: top;
    width: 160px;
    word-wrap: normal;
}



-------JS---------



var cArr = ['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','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','0','1','2','3','4','5','6','7','8','9','+','=','%','_','@','$','!','#','/','^','&','*','(',')','?'];
var pass = [];

window.onload = function() {
    var output = document.getElementById('output');
    document.getElementById('button').onclick = function() {
       for(var i = 0; i < 16; i++) {
           pass[i] = cArr[Math.floor(Math.random() * cArr.length)];
       }
    
        output.innerHTML = pass.join('');
    };
};

10. By Mahmoud

Made by Mahmoud. Select the items you want to have in your generated password, like symbols and numbers, after that enter the length and the number of password and click on generate button. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Password generator</title>
    </head>
    <body>
    <h1>Password Generator</h1>
    <form name="generator">
    
        <label name="uppercase" for="uppercase">Uppercase</label>
        <input id="uppercase" class="checkbox" type="checkbox" name="uppercase" checked="checked"><br />
        
        <label name"lowercase" for="lowercase">Lowecase</label>
        <input id="lowercase" type="checkbox" name="lowercase" checked="checked"><br />
        
        <label name="numbers" for="numbers">Numbers</label>
        <input id="numbers"   type="checkbox" name="numbers"><br />
        
        <label name="symbols" for="symbols">Symbols</label>
        <input id="symbols"    type="checkbox" name="symbols"><br />
        
        
      <p>Password Length:</p> <input type="text" name="length" value="10"><br/>
       <p>No. of Passwords:</p> <input type="text" name="count" value="10"><br />
        
        <button type="button" onclick="getPasswords();">Generate</button>
        </form>
        <h4>Passwords:</h4>
        <ul id="password"></ul>
        
    </body>
</html>



------CSS-------


body {
    margin: 0;
    padding: 0;
    background-image:linear-gradient(red, green);
}

h1{
    text-align: center;
    text-decoration: underline ;
    animation:color 2s linear infinite;
    background:linear-gradient(to right, blue, orange, red, yellow, white);
    -webkit-text-fill-color:transparent ;
    -webkit-background-clip:text;
}

@keyframes color{
    50%{
      filter:hue-rotate(360deg);
    }
}

h4{
    text-align: center;
    font-size: 30px;
    text-decoration: underline;
    color: white;
}

ul{
    margin-left: 100px;
}

ul li{
    color: white;
    margin-top: 10px;
    list-style: none;
}

label{
    position: absolute ;
    margin-left: 80px;
    cursor: pointer;
    outline: none;
    font-size: 20px;
}

label:active{
    color: white;
    background-color: green;
}


input[type="checkbox"]{
    margin-left: 250px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

p{
    margin-left: 80px;
    font-size: 20px;
}

input[type="text"]{
    margin-left: 70px;
}

button{
    cursor: pointer;
    border:none;
    outline: none;
    margin-left: 120px;
    margin-top: 30px;
    height: 50px;
    width: 100px;
    border-radius: 50%;
    font-size: 20px;
}

button:active{
    background-color: blue;
    color: white;
}


-------JS--------



var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var lowercase = "abcdefghijklmnopqrstuvwxyz";
var numbers = "0123456789";
var symbols = "@#$%&^*)!";

function getPasswords() {
    var ul = document.getElementById('password');
    ul.innerHTML = '';
    var count = parseInt(document.generator.count.value);
    for(var i = 0; i < count; i++) {
        var li = document.createElement('li');
        li.textContent = generatePassword();
        ul.appendChild(li);
    }
};
        
function generatePassword() {
  var allowed = '';
  if(document.generator.uppercase.checked) {
      allowed += uppercase;
  }
  if(document.generator.lowercase.checked) {
      allowed += lowercase;
  }
  if(document.generator.numbers.checked) {
      allowed += numbers;
  }
  if(document.generator.symbols.checked) {
      allowed += symbols;
  }
  
  var password = '';
  var length = parseInt(document.generator.length.value);
  for(var i = 0; i < length; i++) {
      var random = Math.floor(Math.random() * allowed.length);
      password += allowed[random];
  }
  return password;
}

11. By Igor Kostrikin

Made by Igor Kostrikin. Simple javascript program that can help you generate a random password and also can help you test the strength of your password. ( Source )

<!DOCTYPE html>
<html>
	<head>
		<title>Password Generator</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js"></script>
	</head>
	<body>
	    <p>Select password length:
	        <input id="pwlen" type="number" min=6 value=8>
	        <button id="pwGen">Generate</button>
	    </p>
	    <p id="pwOUT"> </p>
	    <hr/>
	    <label for="password">Enter your password</label>
        <input type="password" id="password" required>
        <p id="password-strength-text"></p>
	</body>
</html>


-----CSS-----


body {
	background-color: LightGreen;
}

p {
    font-style: italic;
}

#pwOUT {   
   font-weight: bold;
}



-------JS-------


window.onload = function() {
    var strength = {
            0: "Worst",
            1: "Bad",
            2: "Weak",
            3: "Good",
            4: "Strong"
    }
    var password = document.getElementById('password');
    
    var text = document.getElementById('password-strength-text');
    
    password.addEventListener('input', function() {
        var val = password.value;
        var result = zxcvbn(val);
        // Update the text indicator
        if (val !== "") {
            text.innerHTML = "Strength: " + strength[result.score]; 
        } else {
            text.innerHTML = "";
        }
    });
    document.getElementById("pwGen").addEventListener("click",pwGen);
}

function pwGen() {
    var x = document.getElementById("pwlen");
    var y = document.getElementById("pwOUT");
    var alpha = 'qwertyuiopasdfghjklzxcvbnm;:,./?\!|@#$%^&*()-=+QWERTYUIOPASDFGHJKLZXCVBNM1234567890';
    var pw = "";
    for(i = 0; i < x.value; i++) {
        pw = pw + alpha[Math.floor(Math.random() * alpha.length)];
    }
    y.innerHTML = pw;
}

12. By Mykola Fedoseev

Made by Mykola Fedoseev. To generate a random password move the slider right or left, this will change the length of the password and also generate a random one. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Password Generator</title>
    </head>
    <body><h1>Password Generator</h1>
         <input type="range" min="8" max="32" value="12" class="slider" id="passlen" oninput="genPassw()"/>
        Password length: <span id="plen"></span><br />
        <div class="cont">Password:
        <div id="passw"></div>
        </div>
    </body>
</html>


------CSS--------


body {
    background: #fed;
}

h1 {
    text-align: center ;
}

span {
    margin: 3%;
}

.slider {
    width: 50%;
    margin: 5%;
}

.cont {
    display: inline-block;
    font-family: "courier";
    margin: 5%;
    width: 80%;
    
    font-size: 1.8em;
}

#passw {
    display: inline-block;
    background: #fff;
    
}


------JS-------


function genPassw(){
    var n = passlen.value;
    plen.innerHTML = n;
    var s = "";
    while (s.length < n){
        s+=String.fromCharCode(33+Math.floor(Math.random()*94) | 0);
    }
    passw.innerText = s;
}

onload = ()=> {
    genPassw();
}

13. By Amardeep kesharwani

Made by Amardeep kesharwani. First enter the length of the password you want to generate, after that select whether you want to include uppercase, lowercase letters, symbols and numbers in the generated password and click on the generate button. You can copy the password by clicking on the copy button. Source

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="amardeep kesharwani"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>password generator</title>
</head>
<body>
<section class="container">
 <div class="password_wrapper">
  <h1 class="title" >Password generator</h1>
  <div class="result-box" >
   <div class="result" >
     <span id="result"></span>
   </div>
   <button class="btn-copy"  id="copy">copy</button>
  </div><!-- result-box -->
   <span class="error" id="error"></span>
  <div class="options-box" >
   <div class="option" >
    <label for="length">Password Length</label>
    <input type="number" id="length" min="4" max="50" value="10" class="pass_lenght">
   </div>
   <div class="option" >
    <label for="lowercase">Include Lowercase letters</label>
    <input type="checkbox" id="lowercase" checked="checked" >
   </div>
   <div class="option" >
    <label for="uppercase">Include uppercase letters</label>
    <input type="checkbox" id="uppercase" checked="checked">
   </div>
   <div class="option" >
    <label for="numbers">Include numbers</label>
    <input type="checkbox" id="numbers" checked="checked" >
   </div>
   <div class="option" >
    <label for="symbols">Include symbols</label>
    <input type="checkbox" id="symbols" checked="checked" >
   </div>
  </div><!-- details-box -->
  <div class="btn-group" >
   <button class="generator-btn"  id="generator">Generator</button>
  </div>
 </div>
</section>
<div class="preloader" id="loader">
 <svg>
  <circle cx="30" cy="30" r="30">
  </circle>
 </svg>
</div>
</body>
</html>



------CSS--------



:root {
 --red:#fa3c3c;
 --dark:525252;
 --grey:#d6d6d6;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family:sans-serif;
font-weight:350;
line-height:1.2;
font-size:1em;
background:linear-gradient(52deg, rgba(163, 163, 163, 0.09) 0%, rgba(163, 163, 163, 0.09) 33.3%,rgba(100, 100, 100, 0.09) 33.3%, rgba(100, 100, 100, 0.09) 66.6%,rgba(162, 162, 162, 0.09) 66.6%, rgba(162, 162, 162, 0.09) 99%),linear-gradient(258deg, rgba(193, 193, 193, 0.06) 0%, rgba(193, 193, 193, 0.06) 33.3%,rgba(169, 169, 169, 0.06) 33.3%, rgba(169, 169, 169, 0.06) 66.6%,rgba(92, 92, 92, 0.06) 66.6%, rgba(92, 92, 92, 0.06) 99%),linear-gradient(129deg, rgba(45, 45, 45, 0.03) 0%, rgba(45, 45, 45, 0.03) 33.3%,rgba(223, 223, 223, 0.03) 33.3%, rgba(223, 223, 223, 0.03) 66.6%,rgba(173, 173, 173, 0.03) 66.6%, rgba(173, 173, 173, 0.03) 99%),linear-gradient(280deg, rgba(226, 226, 226, 0.06) 0%, rgba(226, 226, 226, 0.06) 33.3%,rgba(81, 81, 81, 0.06) 33.3%, rgba(81, 81, 81, 0.06) 66.6%,rgba(186, 186, 186, 0.06) 66.6%, rgba(186, 186, 186, 0.06) 99%),linear-gradient(85deg, rgba(225, 225, 225, 0.04) 0%, rgba(225, 225, 225, 0.04) 33.3%,rgba(95, 95, 95, 0.04) 33.3%, rgba(95, 95, 95, 0.04) 66.6%,rgba(39, 39, 39, 0.04) 66.6%, rgba(39, 39, 39, 0.04) 99%),linear-gradient(128deg, rgba(184, 184, 184, 0.06) 0%, rgba(184, 184, 184, 0.06) 33.3%,rgba(0, 0, 0, 0.06) 33.3%, rgba(0, 0, 0, 0.06) 66.6%,rgba(140, 140, 140, 0.06) 66.6%, rgba(140, 140, 140, 0.06) 99.89999999999999%),linear-gradient(323deg, rgba(40, 40, 40, 0.07) 0%, rgba(40, 40, 40, 0.07) 33.3%,rgba(214, 214, 214, 0.07) 33.3%, rgba(214, 214, 214, 0.07) 66.6%,rgba(190, 190, 190, 0.07) 66.6%, rgba(190, 190, 190, 0.07) 99.89999999999999%),linear-gradient(61deg, rgba(230, 230, 230, 0) 0%, rgba(230, 230, 230, 0) 33.3%,rgba(241, 241, 241, 0) 33.3%, rgba(241, 241, 241, 0) 66.6%,rgba(55, 55, 55, 0) 66.6%, rgba(55, 55, 55, 0) 99%),linear-gradient(0deg, #2625e3,#0bbaef);
min-height:100vh;
}
a,a:hover {
text-decoration:none;
}
.container {
 width:100%;
 max-width:520px;
 margin-left:auto;
 margin-right:auto;
 padding:1em;
}
.mt-4{
 margin-top:4em;
}
.password_wrapper {
 width:100%;
 padding:1em;
 background:#fff;
 border-radius:5px;
 box-shadow:0 0 3px rgba(0,0,0,0.2);
 margin-top:4em;
}
.title {
 text-align:center;
 color:var(--red);
 text-transform:uppercase;
 font-weight:500;
 margin-top:10px;
 margin-bottom:1em;
}
.result-box {
 width:100%;
 height:45px;
 display:flex;
 border:1px solid var(--red);
 border-radius:2px;
 margin-bottom:10px;
}
.result {
 flex:1;
 display:flex;
 align-items: center;
 padding:0 1em;
 overflow:scroll;
}
.result span {
 transition:0.3s;
}
.btn-copy{
 outline:none;
 border:none;
 background:var(--red);
 color:#fff;
 height:100%;
 width:50px;
 cursor:pointer;
 font-size:16px;
}
.options-box{
 width:100%; 
 margin-bottom:1em;
 margin-top:5px;
}
.option {
 width:100%;
 display:flex;
 justify-content: space-between;
 padding:7px 2px;
}
.option label {
 color:var(--dark);
}
.pass_lenght {
 outline:none;
 border:1px solid var(--red);
 padding:2px;
 width:50px;
}

.btn-group {
 width:100%;
 margin-bottom:10px;
}
.generator-btn {
 display:block;
 width:100%;
 outline:none;
 border:none;
 background:var(--red);
 border-radius:4px;
 height:43px;
 color:#fff;
 cursor:pointer; 
 font-size:16px;
 text-transform:uppercase;
 letter-spacing:1px;
}
.error {
 display:inline-block;
 color:var(--red);
 font-size:15px;
 font-weight:500;
 padding-left:2px;
}
.preloader {
 position:fixed;
 top:0;
 left:0;
 height:100vh;
 width:100%;
 display:none;
 justify-content: center;
 align-items: center;
 background:rgba(255,255,255,0.5);
 z-index:9;
}
.preloader.show{
 display:flex;
}
.preloader svg{
 position:relative;
 height:70px;
 width:70px;
 animation: rotate 2s linear infinite;
}
.preloader svg circle{
 width:100%;
 height:100%;
 fill:none;
 stroke-width:5px;
 stroke:#fa3c3c;
 stroke-linecap: round;
 transform:translate(5px, 5px);
 stroke-dasharray:200;
 stroke-dashoffset:200;
 animation:rotated 4s linear infinite;
}
@keyframes rotate{
 0%{
  transform:rotate(0deg);
 }
 100%{
 transform:rotate(360deg);
 }
}
@keyframes rotated{
 0%,100%{
  stroke-dashoffset:200;
 }
 50%{
  stroke-dashoffset:0;
 }
 50.1%{
 stroke-dashoffset:400;
 }
}



------JS--------



const { log } = console;
 const result = document.getElementById('result'),
       pass_length = document.getElementById('length'),
       lower = document.getElementById('lowercase'),
       upper = document.getElementById('uppercase'),
       number = document.getElementById('numbers'),
       symbol = document.getElementById('symbols'),
       generator = document.getElementById('generator'),
       copy = document.getElementById('copy'),
       error = document.getElementById('error'),
       loader = document.getElementById('loader');
 // code - http://www.net-comber.com/charset.html
 const getLowercase = () => {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
 }
 const getUppercase = () => {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
 }
 const getNumber = () => {
  return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
 }
 const getSymbol = () => {
  const symbol = "@#$&+(){}[]!?*/%^\,.";
  return symbol[Math.floor(Math.random() * symbol.length)];
 }
 
 const randomFun = {
 lower:getLowercase,
 upper:getUppercase,
 number:getNumber,
 symbol:getSymbol
 };
 
 generator.addEventListener('click',() => {
  error.textContent = '';
  const length = +pass_length.value;
  const hasLower = lower.checked;
  const hasUpper = upper.checked;
  const hasNumber = number.checked;
  const hasSymbol = symbol.checked;
  
  result.textContent = generatorPassword(length,hasLower,hasUpper,hasNumber,hasSymbol);
 });
 
const generatorPassword = (length,lower,upper,number,symbol) => {
  let password = '';
  const typeCount = lower + upper + number + symbol; 
  //log('typeCount', typeCount);
  const typeAttr =  [{lower},{upper},{number},{symbol}].filter(item => Object.values(item)[0]);
 // log('typeAttr',typeAttr[0]['lower'])
  if(length === 0){
   error.textContent = 'type password length';
   return;
  }else if(length > 50){
   error.textContent = "maximum password length 50 characters";
   return;
  } 
  if(typeCount <= 0){
   error.textContent = 'select letters your password';
  return;
  }
  loader.classList.add('show');
  result.style.opacity = '0';
  for(let i = 0; i < length; i+=typeCount){
   typeAttr.forEach(type => {
    const funName = Object.keys(type)[0];
    
    password+= randomFun[funName]();
   });
  }
  setTimeout(() => {
   loader.classList.remove('show');
   result.style.opacity = '1';
  },2000);
  return password.slice(0, length);
 }
 
 copy.addEventListener('click', () => {
  let textarea = document.createElement('textarea');
  const passwords = result.innerText;
  if(!passwords){
   return;
  }
  textarea.value = passwords;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  textarea.remove();
  alert('password copied to clipboard');
 });

14. By Arb Rahim Badsa

Made by Arb Rahim Badsa. Basic JavaScript password generator. Enter a password length between 8 – 32 and click on the generate button. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="cont">
            <input type="text" placeholder="Enter number of passwords" id="input">
            <button onclick="show()">Generate</button>
            <p id="p">Your password is : <span id="result"></span></p>
        </div>
    </body>
</html>



-----CSS------



*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: darkcyan;
}
.cont
{
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
button
{
    height: 30px;
    width: 100px;
    border: none;
    margin: 10px;
    border-radius: 6px;
}

input
{
    height: 30px;
    width : 250px;
    border : none;
    border-radius: 6px;
    padding: 0 0 0 10px;
}
button,input:focus
{
    outline: none;
}
#result
{
    color: white;
    font-weight: bold;
}
#p
{
    color : white;
    display: none;
}


-----JS------


var chars = [];
var pass = "";
function show()
{
    var num = Number(input.value);
    for (i = 33; i < 126; i++)
    {
        chars.push(String.fromCharCode(i));
    }
    if (num >= 8 && num <= 32)
    {
        for (j = 0; j < num; j++)
        {
            pass += chars[Math.floor(Math.random() * chars.length)];
        }
        result.innerHTML = pass;
        pass = "";
        input.value = "";
        p.style.display = "block";
    }
    else
    {
        alert('Number must be between 8 to 32');
    }
}

15. By Lazizbek

Made by Lazizbek. Click on the Password generator button to generate a random password of random length. Source

<!DOCTYPE html>
<html>
    <head>
        <title>sezor</title>
    </head>
    <body>
        <div class="gnrtr">
            <h2>password generator</h2>
            <input type="text" id="pass" placeholder="create password" readonly="">
            <div class="btn" onclick=getPassword()>password generator</div>
        </div>
    </body>
</html>



-----CSS------


* {
    margin:0;
 padding:0;
 box-sizing:border-box ;
}
body{
    background-color:#0e0e0e;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100vw;
    height:100vh;
    color:#fff;
    text-transform:uppercase;
}

input{
    padding:13px 7px;
    outline:none;
    font-weight:300;
    background:#ffe;
    border:none;
    color:grey;
    width:100%;
}

.btn{
    background-color:#0fc;
    color:#000;
    font-weight:300;
    margin-top:30px;
    padding:10px 5px;
    text-align:center;
    right:0;
}



-----JS-------


function getPassword(){
    var rend = "[email protected]#$&_()/\[]{}=<>:?!",
    passed = "";
    
    for(i=0;i<16;i++){
        var rendNums = Math.floor(Math.random() * rend.length);
        passed += rend.substring(rendNums, rendNums + 1);
        document.getElementById("pass").value = passed;
    }
}

16. Vap

Made by Vap. To get a random password enter the site URL of the website you are generating the password for, after that enter a seed keyword and click on the generate button. Source

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>
        <title>Password generator</title>
        <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:400,700&display=swap" rel="stylesheet">
        <script src="//unpkg.com/[email protected]/dist/d3.min.js"></script>
        <script src="//unpkg.com/[email protected]/dist/textures.js"></script>
    </head>
    <body>
        
        <div id="body"></div>

        <section class="container">
            <h1>Password Generator</h1>
            
            <form name="gen">
                <label>
                    Enter url:
                    <input type="text" name="urlSite" placeholder="Enter a site address here">
                </label>
                
                <label>
                    Enter keyword:
                    <input type="text" name="word" placeholder="Enter a keyword to strengthen password">
                </label>
                
                <button>generate</button>
            </form>
            
            <div class="output">
                <p>Your password:</p>
                <output></output>
            <div>
        </section>
    
    </body>
</html> 


------CSS------



body {
    background: url('https://i.imgur.com/MqWNtX9.jpg') no-repeat;
    background-size: 120%;
    color: #fff400;
    font-family: 'IBM Plex Serif', serif;
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0;
    text-align: center;
}

.container {
    display: flex;
    flex-direction: column;
    /*justify-content: space-around;*/
    height: 100%;
}

h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

form {
    flex: 2;
}

.output {
    flex: 1;
}

label {
    display: block;
}

input{
    border: 2px solid #eee;
    display: block;
    font-family: Verdana, Arial, sans-serif;
    margin: 10px auto 20px;
    padding: 10px 20px;
    width: 80%;
}

button {
    background: rgba(255, 244, 0, 0.9);
    border: none;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(93, 121, 23, 1);
    color: #515151;
    font-size: 1.4rem;
    font-weight: inherit;
    outline-color: rgba(0,0,0,0);
    padding: 5px 35px;
}

button:active {
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transform: translate(3px, 3px);
}

output {
    font-size: 1rem;
}


-----JS-----


document.onreadystatechange = _ => {
    if(document.readyState === 'complete') {
        
        document.forms.gen.onsubmit = function(e) {
            e.preventDefault();
        };
        
        let site, salt, secretString, pass;
        
        let generatePass = () => {
            site = document.forms.gen.elements.urlSite.value;
            salt = document.forms.gen.elements.word.value;
            
            secretString = site + salt + '4ronteder is awesome developer';
            
            password = md5(secretString);
            
            document.querySelector('output').innerHTML = password;
        };
        
        
        document.querySelector('button').onclick = generatePass;
    }
};

17. By Tarun Gautam

Made by Tarun Gautam. A simple JavaScript password generator. Source

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Pass Generator</title>
    <link rel="stylesheet" href="Password.css">
</head>
<body>
    <div class="container">
        <h2>Strong Password Generator</h2>
        <input type="text" id="input"placeholder="Create Pass">
        <button id="btn">Generate Password</button>
    </div>
</body>
</html>


-------CSS-------


body{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    
}
h2{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}
input{
    display: block;
    font-size: 1.2rem;
    border: none;
    padding:5px;
    outline: none;
    border-radius: 10px;
    padding:5px 8px;
    box-shadow: 2px 2px 25px white,-2px -2px 20px white;
    margin: 1.4rem 0rem;
    width: 11rem;
}
button{
    font-size: 1.2rem;
    outline: none;
    border: none;
    border-radius: 10px;
    background-color: white;
    padding: 8px;
    box-shadow:2px 2px 25px white,-2px -2px 25px white;
    font-weight: 600;
}
button:active{
    box-shadow:4px 4px 20px red,-4px -4px 20px red;
}


-----JS------


        const btn = document.getElementById("btn");
        var input = document.getElementById("input");
        btn.addEventListener("click",passGen)
        const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTVWXYZ1234567890+-=_)(*&^%$#@!:?;\[]";
        
        var passlen = 15;
        var pass = ""

        function passGen(){
            for(i=0;i<passlen;i++){
            let randNum = Math.round(0
            +(chars.length-1)*Math.random())
            pass+= chars[randNum]
            input.value= pass
            
        }
        pass = ""
    
        }

18. By lolo

Made by lolo. Move the slider right or left to increase and decrease the password length, after that click on the generate button. Source

<!doctype html>
<html lang="en">
	
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<title>Password generator</title>
  </head>
  <body>
	<h1>Password Generetor</h1>
	<div class="slidecontainer" style="color:white;margin-top:50px;">
		<p>Length: <span id="lenght_range"></span></p>
		<input type="range" min="8" max="32" value="8" class="slider" id="range">
	</div>
	<button type="button" id="bouton" onClick="generate()">Generate</button>
	<div><input type="text" id="result"></div>
	<button id=copy >Copy</button>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>


-------CSS--------



body {
background-color: #000000;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23404040' fill-opacity='0.15' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
	text-align:center;
}
h1{ 
	position:relative;
	padding:20px;
	margin-top:10px;
	font-size:2.5em;
	animation:color_r 2s linear infinite;
	background:linear-gradient(to right, blue, aqua, green,  orange, red, yellow);
	-webkit-text-fill-color:transparent ;
	-webkit-background-clip:text;
	color:white;
}
@keyframes color_r{
	
	50%{filter:hue-rotate(360deg);}
}
.slider {
  -webkit-appearance: none;
  width: 70%;
  height: 10px;
  border-radius: 5px;   
  background: white;
  outline: white;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: red;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: red;
  cursor: pointer;
}

#bouton{
  margin-top:30px;
  width:25%;
  padding:10px;
  border-radius:5px;
  background-color: #1A878F;
  font:14px Oswald;
  color:#FFF;
  text-transform:uppercase;
  text-shadow:#000 0px 1px 5px;
  border:1px solid #000;
  opacity:0.7;
	-webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
  -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
	box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
  border-top:1px solid rgba(255,255,255,0.8)!important;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));
}
#result{
	margin-top:50px;
	font-size:0.9em;
	background-color:white;
	width:80%;
	display:none;
	margin-left: auto;
	margin-right: auto;
	border-radius:5px;
	text-align:center;
	opacity:0.7;
	color:black;
	
}
#copy{
  margin-left: auto;
  margin-right: auto;
  display:none;
  margin-top:30px;
  font-size:0.6em;
  width:10%;
  padding:5px;
  border-radius:5px;
  background-color: red;
  color:black;
  text-transform:uppercase;
  text-shadow:#000 0px 1px 5px;
  border:1px solid #000;
  opacity:0.7;
	-webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
  -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
	box-shadow: 0 8px 6px -6px rgba(0,0,0,0.7);
  border-top:1px solid rgba(255,255,255,0.8)!important;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2)));
}



-------JS-------



window.onload = function() {
	var slider = document.getElementById("range");
	var output = document.getElementById("lenght_range");
		output.innerHTML = slider.value; 


	slider.oninput = function() {
		output.innerHTML = this.value;
	}
	
  var copyPw = document.querySelector('#copy');
  copyPw.addEventListener('click', function(event) {
  var resultPw = document.querySelector('#result');
  var range = document.createRange();
  range.selectNode(resultPw);
  window.getSelection().addRange(range);

  try {
	
	var successful = document.execCommand('copy');
	var msg = successful ? 'successful' : 'unsuccessful';
	console.log('Copy password command was '  + msg + ' => ' + result.value  );
  } catch (err) {
	console.log('Oops, unable to copy');
  }

  window.getSelection().removeAllRanges();
});
}

function generate() {
			var charPos;
			var pwChar;
			var pwLength = document.getElementById('range').value;
			var listChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!?#%@&";
			var pw = "";
			for (i = 0; i < pwLength; i++) {
				charPos = Math.floor(Math.random() * listChars.length);
				pwChar = listChars.charAt(charPos);
				pw = pw + pwChar;
			}
			result.value = pw;
			document.getElementById("result").style.display = "block";
			document.getElementById("copy").style.display = "block";
}

19. By Henri Evjen

Made by Henri Evjen. This JavaScript program has two features, you can generate a password and you can check its strength. Source

<!DOCTYPE html>
<html>
	<head>
		<title>Password Generator</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<meta charset="UTF-8">
        <meta name="description" content="Password Generator">
        <meta name="keywords" content="password,generator,JavaScript">
        <meta name="author" content="Henri Evjen">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>

        <div class = "start">
            <p>Welcome to the Password Tool</p>
            <div class = "button-row">
                <button class = "password-generator-button popup-button" title = "Generate A Password">Password Generator</button>
                <button class = "password-strength-button popup-button" title = "Check Password Strength">Password Strength Checker</button>
            </div> <br>
            <a href = "https://lifehacker.com/how-to-create-a-strong-password-1797681069">
                <button class = "strong-password-button popup-button" title = "How to create a strong password">How to Create a Strong Password</button>
            </a>
        </div>
        
        <img src = "http://pluspng.com/img-png/arrow-png-no-background-download-this-image-as-600.png" id = "back-button" title = "Back">

        <div class = "password-generator">

    	    <div class = "text-ask">
    	        <p>How long do you want your password to be?<br>(Between 8 and 32 characters)</p>
    	        <input type = "text" id = "ask" maxlength = "2" autocomplete = "off"> <br><br><br>
    	        <button id = "button" title = "Generate Password">Generate</button>
    	    </div>
    	    
    	    <div id = "required"><p>Please enter a number value between 8 and 32 characters</p></div>
    	    
    	    <div class = "text-password">
    	        <p>Your generated password is...</p> <br>
    	        <input type = "text" id = "password" READONLY> <br><br>
    	        <button id = "copy">Copy to Clipboard</button>
    	        <p id = "copied">Copied</p>
    	    </div>
    	    
	    </div>
	    
	    <div class = "password-strength-checker">
	        <div id = "checker-header">
    	        <p>Type in your password:</p> <br><br>
    	        <input type = "text" id = "password-check" maxlength = "32" autocomplete = "off"> <br><br><br><br><br>
    	        
    	        <p>Password Strength</p> <br><br>
    	        <progress id = "check-progress" value = "0" max = "8"></progress>
    	        <p id = "strength-indicator"></p>
	        </div>
	    </div>
	    
	    <noscript>Sorry, your browser does not support JavaScript!</noscript>
		
	</body>
</html>



-------CSS-------



.start {
    position: absolute;
    width: 70vw;
    height: 50vh;
    top: 20vh;
    left: 15vw;
    border-radius: 3%;
    background-color: #E4E8F4;
    text-align: center;
    display: none;
    font-size: 3vw;
}

#back-button {
    position: absolute;
    left: 3vw;
    top: 2vh;
    width: 5vw;
    height: auto;
    display: none;
    z-index: 1;
}

#back-button:hover {
    cursor: pointer;
    opacity: .85;
}

.button-row {
    position: relative;
}

.popup-button {
    height: 12vh;
    border-radius: 2%;
    background-color: #aabbd4;
    padding: 0;
    border: none;
    outline: none;
    font-size: 1.5vw;
}

.popup-button:hover {
    cursor: pointer;
    opacity: .85;
}

.password-generator-button, .password-strength-button {
    width: 12vw;
}

.strong-password-button {
    width: 16vw;
}

.password-generator, .password-strength-checker {
    visibility: hidden;
}

body {
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.text-ask {
    position: relative;
    top: 6vh;
    left: 0;
    width: 100vw;
    height: auto;
    text-align: center;
    font-size: 3vw;
}

#ask {
    width: 2em;
    height: 8vh;
    font-size: 6.6vw;
    text-align: center;
    border-radius: 4%;
}

#button {
    width: 12vw;
    height: 8vh;
    border-radius: 5%;
    background-color: #aabbd4;
    padding: 0;
    border: none;
    outline: none;
    font-size: .75em;
    
}

#required {
    position: relative;
    top: 14vh;
    left: 0;
    width: 100vw;
    height: auto;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vw;
    color: #f00;
    visibility: hidden;
}

#button:hover {
    opacity: .85;
    cursor: pointer;
}

.text-password {
    position: relative;
    top: 20vh;
    left: 0;
    width: 100vw;
    height: auto;
    text-align: center;
    font-size: 2.8vw;
}

#password, #password-check {
    width: 25em;
    text-align: center;
    outline: none;
    border-radius: 4%;
}

#strength-indicator {
    position: relative;
    font-size: 2vw;
    display: none;
}

#copied {
    margin-bottom: 7em;
    visibility: hidden;
    font-size: 2vw;
    color: #00ff00;
}

#checker-header {
    position: absolute;
    top: 10vh;
    left: 0;
    width: 100vw;
    height: 100vh;
    text-align: center;
}



-------JS-------



$(document).ready(function() {
    
    $('.start').show(1500);
    
    $('#back-button').click(function() {
       
        $('.start').show();
        $('.password-generator').css("visibility", "hidden");
        $('.password-strength-checker').css("visibility", "hidden");
        $('#back-button').hide();
        $('#required').css("visibility", "hidden");
        $('#ask').val("");
        $('#password').val("");
        
    });
    
    $('.password-generator-button').click(function() {
       
        $('.start').hide();
        $('.password-generator').css("visibility", "visible");
        $('#back-button').show();
        
    });
    
    $('.password-strength-button').click(function() {
       
        $('.start').hide();
        $('.password-strength-checker').css("visibility", "visible");
        $('#back-button').show();
        $('#password-check').select();
        
    });
    
    
    $('#ask').keyup(function(event) {
        if (event.keyCode === 13) {
            $('#button').click();
        }
    });
   
   let 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"];
   let upperCase = ["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"];
   let numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
   let symbols = ["~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "-", "_", "+", "=", "|", "]", "}", "[", "{", "'", ";", ":", "/", "?", ".", ">", ",", "<"];
   let allArrs = [lowerCase, upperCase, numbers, symbols]
   
   
   $('#button').click(function() {
       
      // Hides keyboard when click enter on mobile version 
      $('#ask').blur(); 
       
      let passwordLength = parseInt($('#ask').val().trim());
      
      if(isNaN(passwordLength) || passwordLength === "" || passwordLength < 8 || passwordLength > 32)
      {
          $('#required').css("visibility", "visible");
      }
      else
      {
          $('#required').css("visibility", "hidden");
          var password = "";
          
          for(let i = 0; i < passwordLength; i++)
          {
              let randomArrNum = Math.round(Math.random() * 3);
              if(randomArrNum === 0)
              {
                  let randomLetterNum = Math.round(Math.random() * (lowerCase.length - 1));
                  password += lowerCase[randomLetterNum];
              }
              if(randomArrNum === 1)
              {
                  let randomLetterNum = Math.round(Math.random() * (upperCase.length - 1));
                  password += upperCase[randomLetterNum];
              }
              if(randomArrNum === 2)
              {
                  let randomLetterNum = Math.round(Math.random() * (numbers.length - 1));
                  password += numbers[randomLetterNum];
              }
              if(randomArrNum === 3)
              {
                  let randomLetterNum = Math.round(Math.random() * (symbols.length - 1));
                  password += symbols[randomLetterNum];
              }
          }
          
          $('#password').val(password);
          
      }
       
   });
   
   
   $('#copy').click(function() {
       
       if($('#password').val().length !== 0)
       {
            $('#password').select();
            document.execCommand("copy");
            $('#copied').css("visibility", "visible");
            
            setTimeout(function() {
                $('#copied').css("visibility", "hidden");
            }, 1000);
       }
       
   });
   
   
   // Check Password Strength
   $('#password-check').keyup(function(event) {
        if (event.keyCode > 0) {
            
            let progressLength = 0;
            let progressLowerCase = 0;
            let progressUpperCase = 0;
            let progressNumbers = 0;
            let progressSymbols = 0;
            
            let text = $('#password-check').val().split("");
            
            if(text.length > 7)
            {
                progressLength = 4;
            }
            else if(text.length > 5)
            {
                progressLength = 3;
            }
            else if(text.length > 3)
            {
                progressLength = 2;
            }
            else if(text.length > 1)
            {
                progressLength = 1;
            }
            else if(text.length <= 1)
            {
                progressLength = 0;
            }
            
            for(i = 0; i < text.length; i++)
            {
                if(lowerCase.includes(text[i]))
                {
                    progressLowerCase = 1;
                }
            }
            for(i = 0; i < text.length; i++)
            {
                if(upperCase.includes(text[i]))
                {
                    progressUpperCase = 1;
                }
            }
            for(i = 0; i < text.length; i++)
            {
                if(numbers.includes(text[i]))
                {
                    progressNumbers = 1;
                }
            }
            for(i = 0; i < text.length; i++)
            {
                if(symbols.includes(text[i]))
                {
                    progressSymbols = 1;
                }
            }
            
            $('#check-progress').val(progressLength + progressLowerCase + progressUpperCase + progressNumbers + progressSymbols);
            
                // Strength Indicator
                if($('#check-progress').val() > 7)
                {
                    $('#strength-indicator').css("color", "#0f0");
                    $('#strength-indicator').text("Great Password!");
                    $('#strength-indicator').show();
                }
                else if($('#check-progress').val() > 5)
                {
                    $('#strength-indicator').css("color", "#008000");
                    $('#strength-indicator').text("Good Password!");
                    $('#strength-indicator').show();
                }
                else if($('#check-progress').val() > 3)
                {
                    $('#strength-indicator').css("color", "#000000");
                    $('#strength-indicator').text("OK Password!");
                    $('#strength-indicator').show();
                }
                else if($('#check-progress').val() > 1)
                {
                    $('#strength-indicator').css("color", "#f00");
                    $('#strength-indicator').text("Password needs to be stronger");
                    $('#strength-indicator').show();
                }
                else if($('#check-progress').val() < 1)
                {
                    $('#strength-indicator').hide();
                }
        }
    });
   
});

20. By Mike Perkowski

Made by Mike Perkowski. Enter password length and click on generate. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Password Generator</title>
    </head>
    <body>
    <div class = "card">
        <h4>Enter a password length</h4>
        <form id = "gen">
            <input id = "pwl" type = "number" placeholder = "Password length" step = "1">
            <input type = "submit" value = "Generate">
        </form>
    </div>
    </body>
</html>



-------CSS--------



.card{
    margin: 15px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 2px 3px 5px rgba(0,0,0,0.25);
    background-color: #e9e9e9;
    word-wrap: break-word;
}


-------JS-------


window.onload = ()=>{

var pwf = document.getElementById("gen");
var pwl = document.getElementById("pwl");

pwf.addEventListener("submit", (e)=>{
    e.preventDefault();
    var str = "";
    for(var i = 0; i< pwl.value; i++){
        str += String.fromCharCode(Math.round(Math.random()*93)+33);
    }
    var nC = document.createElement("div");
    nC.className = "card";
    nC.innerHTML = "Password: <br>" + str;
    document.body.appendChild(nC);
});

}

21. By Harshit Srivastava

Made by Harshit Srivastava. Click generate to generate a random 16 digit password, after that you can copy it by clicking on the copy button. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    </head>
    <body>
    <div>
        <input type="text" id="input" readonly=""><br>
        <input type="button" value="Generate" id="gen" onclick="gen()"><br>
        <input type="button" value="Copy" id="cop">
    </div>
    <cover></cover>
    </body>
</html>



-------CSS-------


* {
     margin: 0;
     padding: 0;
     font-family: monospace;
}

body {
    background-color: deepskyblue;
    min-height:100vh;
}

input::selection {
    background-color: transparent;
}

input:focus {
    outline: none;
}

input {
    background-color: transparent ;
    border: none;
}

input {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align:center;
    margin:10px;
}

#input {
    color:grey;
    background-color: white;
    box-shadow: 2px 2px 2px red, -2px -2px 2px black;
    font-size: 1.5em;
    width:auto;
}

#gen {
    background-color: pink;
    padding: 2px 5px;
}

#cop {
    background-color: yellow;
    padding: 2px 5px;
}

div {
    position:absolute ;
    width:auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

cover {
    position:fixed;
    background-color: yellow;
    width:100%;
    height: 100%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display: none;
    transition-duration: 10ms;
    text-align:center;
    font-weight: 700;
    font-size: 1.5em;
}

cover#active {
    display: inline-block;
}



------JS-------


        var chars = "[email protected]#$&%*";
        var length = 16;
        var pass = $("#input");
        var genb = $("#gen");
        var passw = "";
        var gen = (()=>{
            passw = "";
           for (let j=1; j<=length; j++) { 
         passw+=chars.charAt(Math.random()*70);
           }
           pass.attr("value", passw);
        });
        var copied = (()=>{
            $("cover").toggle("#active");
        });
        var copy = $("#cop").click(()=>{
            pass.select();
            document.execCommand("copy");
            $("cover").html("New Password Copied:<BR>"+passw);
            copied();
            setTimeout(copied, 500);
        });
        gen();

22. By Dariush Vesal

Made by Dariush Vesal. Enter the password length and select the options that you want to use. After that click the generate button to generate a random password. Source

  <!DOCTYPE html>
  <html>
  <head>
    <title>Password generator</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


    <script type="text/javascript">

      function new_pass() {
        var len = document.getElementById('len').value;
        var mix = document.getElementById('mix').checked;
        var number = document.getElementById('number').checked;
        var mixWithSymbols = document.getElementById('mixWithSymbols').checked;
        var uniqe = document.getElementById('uniqe').checked;
        var secure = document.getElementById('secure').checked;


        var pass = document.getElementById('pass');
        pass.value =  password_generator(len,mix,number,mixWithSymbols,uniqe,secure);
      }

    </script>
  </head>
  <body>
    <p>
      Generate strong password.
      you can test generated password in <a href="http://www.passwordmeter.com/">http://www.passwordmeter.com/</a>
    </p>

    <hr />
    
    <h3>Option</h3>

    <label>
      Length of generated password
    </label>
    <input id="len" value="16" class="form-control" type="text" placeholder="Length of generated password" />

    <label class="checkbox-inline">
      <input type="checkbox" id="mix" value="mix" checked> 
      Mixup words and numbers
    </label>

    <label class="checkbox-inline">
      <input type="checkbox" id="number" value="number" > 
      Generated password contain only number
    </label>


    <label class="checkbox-inline">
      <input type="checkbox" id="mixWithSymbols" value="mixWithSymbols" checked> 
      Mixup with symbols
    </label>

    <label class="checkbox-inline">
      <input type="checkbox" id="uniqe" value="uniqe" checked> 
      Generated password more uniqe than before use date.now() for this purpose
    </label>


    <label class="checkbox-inline">
      <input type="checkbox" id="secure" value="secure" checked> 
      Increase security for prevent burst force
    </label>


    <hr />

    <div class="col-lg-6">
      <div class="input-group">
        <span class="input-group-btn">
          <button class="btn btn-primary"  onclick="new_pass()" type="button">Generate password</button>
        </span>
        <input id="pass" type="text" class="form-control" placeholder="password">
        <span class="input-group-btn">
        <button class="btn btn-primary" id="copy" data-clipboard-action="copy" data-clipboard-target="#pass">copy</button>
        </span>
      </div>
      <span id="notice">-</span>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.13/clipboard.min.js"></script>

<script type="text/javascript">
  

var clipboard = new Clipboard('#copy');
clipboard.on('success', function(e) {
    var notice = document.getElementById("notice");
    notice.outerHTML = "<div style='color:green'>Password copied to clipboard </div> ";
});

clipboard.on('error', function(e) {
    var notice = document.getElementById("notice");
    notice.outerHTML = "<div style='color:red'>Password can not copy to clipboard</div>";
});

</script>

  </body>
  </html>



--------JS--------



function password_generator(len,mix,onlyNumber,mixWithSymbols,capitalMixed,uniqe,secure){
      /*
        len = length of random phrase to be generated
        mix = phrase contain both of words and numbers
        onlyNumber = random phrase only include numbers
        mixWithSymbols = random phrase contain symbols
        capitaclmixed = random phrase  contain capital word
        uniqe = random phrase more uniqe than before use date.now() for this purpose
        secure = random phrase very secure prevent to burst password 
        check generated phrase in http://www.passwordmeter.com/ for security
        */
        var _func = {
          private:{
            words : 'abcdefghijklmnopqrstuvwxyz',
            numbers:'0123456789',
            symbols:'[email protected]#$%^&*+-?[]{}<>',
          },
          random:function(length){
            return Math.floor(Math.random()* length)
          },
          explode:function(str){
            return str.split('');
          },
          _typeOf:function(char){

            if(this.private.words.indexOf(char) != -1 ){
              return "word";
            }else if(this.private.numbers.indexOf(char) != -1){
              return "number";
            }else if(this.private.symbols.indexOf(char) != -1){
              return "symbol";
            }else{
              return 'notFound';
            }

          },
          advanced:function(tmp){
            var incomplete = true;
            var result="";
            var tmpChar = '';
            var lastChar='';
            var turn =false;

            while(incomplete){

              if(capitalMixed && turn ){
                turn =false;
                tmpChar = (tmp[this.random(tmp.length)]).toUpperCase();
              }else{
                turn =true;
                tmpChar = (tmp[this.random(tmp.length)]);
              }

              if( result.indexOf(tmpChar) == -1 ){
                if(this._typeOf(lastChar) != this._typeOf(tmpChar)){
                  lastChar = tmpChar; 
                  result+=tmpChar;
                }
              }

              if(result.length >= len){
                incomplete=false;
              }
            }

            return result;


          },
          make:function(){
            var words = this.explode(this.private.words);
            var numbers = this.explode(this.private.numbers);
            var tmp = [];
            var result = "";
            if(mix){
              tmp = words.concat(numbers);
            }else if(mix == false && onlyNumber == false){
              tmp = words;
            }else if(mix == false && onlyNumber){
              tmp = numbers;
            }

            if(mixWithSymbols){
             tmp = tmp.concat( this.explode( this.private.symbols ) );  
           }

           if(uniqe){
             tmp = tmp.concat( this.explode(Date.now().toString()) );  
           }

           if(secure){
            return this.advanced(tmp)
          }

          var tmpChar='';
          var turn =false;

          for(var i = 0 ; i < len ; i++){
            if(capitalMixed && turn){
              turn = false;
              tmpChar = (tmp[this.random(tmp.length)]).toUpperCase();
            }else{
              turn =true;
              tmpChar = tmp[this.random(tmp.length)];
            }
            result += tmpChar;
          }

          return result;
        }
      };

      return _func.make();

    }
    

23. By RomatoPotato

Made by RomatoPotato. Enter password length between 8 – 32 and click on the OK button. Source


<!DOCTYPE html>
<html>
    <head>
        <title>Password Generator</title>
    </head>
    <body>
        <div id="title">PASSWORD GENERATOR</div>
        <div id="writed">
            <p>Write password length:</p>
            <input type="number" id="inp"/>
            <button id="ok">OK</button>
        </div>
        <div id="output">
            <p id="txtPass">Your password:</p>
            <input id="outputTxt" value="########"></p>
        </div>
    </body>
</html>



------CSS-------


            body {
                background: green;
            }
            
            #title{
                color: green;
                text-align: center;
                font-size: 25px;
                background: #beb;
                text-shadow: 2px 2px 2px black;
                margin: 0px 0px 10px;
                border-radius: 5px;
            }
            
            #writed, #output{
                background: #bbe;
                border-radius: 5px;
            }
            
            input, p{
                margin: 5px;
            }
            
            #txtPass{
                text-align: center;
                color: green;
                font-weight: bold;
            }
            
            #outputTxt{
                background: #ebb;
                border-radius: 5px;
                padding: 10px;
                font-weight: bold;
                font-size: 15px;
                text-align: center;
                width: 310px;
            }



-----JS------


            var ok = document.getElementById("ok");
            
            function createPassword(){
                var wr = document.getElementById("inp").value;
                
                if (wr < 8 || wr > 32){
                    alert("Enter a number from 8 to 32");
                    document.getElementById("inp").value = "";
                }else{
                    var outTxt = document.getElementById("outputTxt").value;
                    var s = "";
                    
                    for (var i = 0; i <= wr; i++){
                        symbols = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!+Γ—><{}?^-[]=%_.,/";
                        s += symbols[Math.floor(Math.random() * symbols.length)];
                    }
                    
                    document.getElementById("outputTxt").value = s;
                }
            }
            
            ok.addEventListener("click", createPassword);

24. By Kamil

Made by Kamil. Basic JavaScript pass generator. Select the features you want to use and after that enter the length of the password you want to generate. Source

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset='utf-8'>
      <title>Password generator pro</title>
   </head>
   <body><span>
      <div class='container'>
         <div class="checkbox">
          <input class="check" type="checkbox" value="1" id="checkbox1" name="" />
          <label for="checkbox1"></label><p>uppercase letters</p>
      </div>
          <div class="checkbox">
          <input class="check" type="checkbox" value="1" id="checkbox2" name="" />
          <label for="checkbox2"></label><p>lowercase letters</p>
      </div>
          <div class="checkbox">
          <input class="check" type="checkbox" value="1" id="checkbox3" name="" />
          <label for="checkbox3"></label><p>numbers</p>
      </div>
   <div class="checkbox">
          <input class="check" type="checkbox" value="1" id="checkbox4" name="" />
          <label for="checkbox4"></label><p>symbols</p>
      </div>
    <br/>
         <input type='number' id='length' placeholder="length"><br /><br />
         <input type='button' id='generate' value='generate' onclick="getvalues()">

         <div id="infotext">Your Password is:</div></span>
         <div id="password"></div>
      </div>
      
   </body>
</html>



------CSS-------



p{
    width: 200px;
    position: relative;
    left: 135px;
    top: 5px;
    font-size: 20px;
    font-family: arial;
    font-weight: 800;
        
}

.checkbox {
    width: 120px;
    height: 40px;
    background: #333;
    margin: 2% 5%;
 
    border-radius: 50px;
    position: relative;
}
.checkbox:before {
    content: 'On';
    position: absolute;
    top: 12px;
    left: 13px;
    height: 2px;
    color: #26ca28;
    font-size: 16px;
}
.checkbox:after {
    content: 'Off';
    position: absolute;
    top: 12px;
    left: 84px;
    height: 2px;
    color: #111;
    font-size: 16px;
}
.checkbox label {
    display: block;
    width: 52px;
    height: 22px;
    border-radius: 50px;

    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 9px;
    z-index: 1;
    left: 12px;
    background: #ddd;
}
.checkbox input[type=checkbox]:checked + label {
    left: 60px;
    background: #26ca28;
}
.check{
   display: none; 
}
#length{
    position: relative;
    left: 35%;
    width: 30%;
    height: 50px;
    font-size: 25px;
    border: 7px solid #333;
    box-sizing: border-box;
    font-weight: 800;
    border-radius: 10px;
    text-align: center;
    color: #26ca28;
}
#generate{
    outline: none;
    position: absolute;
    z-index: 1;
    width: 40%;
    height: 12%;
    left: 30%;
    background: #333;
    border: 2px solid white;
    box-sizing: border-box;
    border-radius: 20px;
    color: white;
    font-size: 25px;
    font-family: arial;
    font-weight: 700;
}
#generate:active{
    border: 2px solid #26ca28;
}

#infotext{
    text-align: center;
    position: relative;
    font-size: 25px;
    font-family: arial;
    font-weight: 700;
    color: #333;
    padding-top: 20%;
}
#password{
    width: 100%;
    text-align: center;
    position: relative;
    font-size: 25px;
    font-family: arial;
    font-weight: 400;
    color: #333;
    padding-top: 5%;
    overflow: break;
}



-------JS--------



window.onload = function(){
alert('Tipp:  Press the grey buttons to activate the switches!');
};

var uppercase_letters = ['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'];
var lowercase_letters = ['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'];
var numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
var symbols = ['/', '[', ']', '$', '-', ':', '_', '?', '{', '}', '~', '!', '@', '#', '%', '&', '*', '(', ')', '"', '^', 'Β§', ',', '.', 'Β°', '+', '-', ':'];
var length1;

//--------------------

var check1;
var check2;
var check3;
var check4;
var password = '';


//--------------------

function getvalues() {
   
   check1 = document.getElementsByClassName("check")[0];
   check2 = document.getElementsByClassName("check")[1];
   check3 = document.getElementsByClassName("check")[2];
   check4 = document.getElementsByClassName("check")[3];
   length1 = parseFloat(document.getElementById("length").value);
   checkinput(length1);
}

function checkinput(length1) {
   
   if (length1 > 100) {
      alert("Too long! It might crash/freeze the app! max:100");
      cleannumber();
   } else if (length1 < 0) {
      alert("Enter a positive number");
      cleannumber();
   } else if(isNaN(length1)){
      alert("Not a Number!");
      cleannumber();
   } else if (length1 === 0) {
      alert("The length can't be 0");
      cleannumber();
   } else if(length1 % 1 !== 0){
      alert ("No decimal numbers allowed!");
      cleannumber();
   } else {
      generatestring();
   }
   
}

function generatestring() {
var string = [''];

   if (check1.checked === true) {string = string.concat(uppercase_letters); }
   
   if (check2.checked === true) {string = string.concat(lowercase_letters); }
   
   if (check3.checked === true) {string = string.concat(numbers); }
   
   if (check4.checked === true) {string = string.concat(symbols); }

   if(check1.checked === true || check2.checked === true || check3.checked === true || check4.checked === true){
   generatepassword(string);
   }else{
      alert("Please choose at least one option!");
   }
}
   

function generatepassword(string) {
   var i;
   for (i = 0; i < length1; i++) {
      var random = Math.floor(Math.random() * (string.length - 1)) + 1 ;
      password += string[random];
   }
   show(password);
   password = '';
}

function show(password) {
   var output = document.getElementById("password");
   output.innerHTML = password;
   clean();
}

function clean(){
   cleanchecks();
   cleannumber();
}

function cleanchecks(){
   check1.checked = false;
   check2.checked = false;
   check3.checked = false;
   check4.checked = false;
}

function cleannumber(){
   document.getElementById("length").value = '';
}

25. By Noil Kizilov

Made by Noil Kizilov. Click generate to generate a random password that is 8 digits in length. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="container">
            <h2>Generate password</h2>
            <input type="text" placeholder="Password" id ="password">
            <button id="generateBtn">Generate</button>
            <button id="copyBtn">Copy</button>
            <p id="copied">Copied!</p>
        </div>
    </body>
</html>


------CSS-------


body {
    
}
#password {
    width: 90px;
    font-weight: bold;
}
#copied{
    display: none;
    font-weight: bold;
    text-align: center;
}

.container {
    padding: 50px;
    background-color: #00CED1;
    border-radius: 10px;
    text-align: center;
}
button {
    background-color: #4682B4;
}



------JS------


window.onload=()=>{

const password = document.getElementById("password");

const generateBtn = document.getElementById("generateBtn");

const copy = document.getElementById("copyBtn");

const copied_p = document.getElementById("copied");

let res ="";
let chars = "[email protected]#$_&^%()";

generateBtn.onclick=()=>{
res="";
    let n = chars.length;
    for(let i = 0; i < 8; i++){
        res +=chars[Math.floor(Math.random()*n)];
    }
    password.value = res;
}
 
copy.onclick=()=>{
    password.select();
    document.execCommand("copy");
    copied_p.style.display="block";
    navigator.vibrate(100);
    setTimeout(()=>{
        copied_p.style.display="none";
    }, 2000);
}
    
}

26. By K137

Made by K137. This JavaScript password generator generates a random 10 digit password. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Password Generator</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1 id="password">0000000000</h1>
        <input type="button" value="Generate password" onclick="generatePassword(10);">
    </body>
</html>


-------CSS---------


html, body {
background-color: #4B0082;
color: #F5DEB3;
font-family: "Lucida Console", "Courier New", monospace, sans-serif;
text-align: center;
}
#password {
font-size: 3em;
margin-top: 250px;
}
input {
background-color: #800080;
color: #DEB887;
font-family: "Lucida Console", "Courier New", monospace, sans-serif;
font-size: 1.5em;
}


-----JS------


            'use strict';
            var passw0rd = document.getElementById('password');
            var charArr = ['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','1','2','3','4','5','6','7','8','9','0','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'];
            var charString = charArr.join('');
            var randomChar = 0, q;
            var passwordArr = [];
            var passwordString = '';
            function generatePassword(length) {
               for(q = 0; q < length; q += 1) {
                  randomChar = Math.random() * charString.length ^ 0;
                  passwordArr[q] = charString.substr(randomChar, 1);
               }
               passwordString = passwordArr.join('');
               passwordArr.length = 0;
               passw0rd.textContent = passwordString;
            }

27. By Md. Abdul Ahad Khan

Made by Md. Abdul Ahad Khan. With this password generator you can generate 4 different length passwords that are 8, 12, 14 and 16 in length. Source

<!DOCTYPE html>
<html>
    <head>
        <title>GetYourPassword</title>
    </head>
    
    <body>
    
    <h3>GetYourPassword.com</h3>
    
    <aside>Password Corner</aside>
    
      <label for="pass1">
      
          
     <section>
         
     <input type="radio"  onclick="genarate8()" id="pass1">
     
      8 characters password

</section>

    <p id="p2"></p>
        
    </label>
    
    <label for="pass2">
     <section><input type="radio" onclick="generate()" id="pass2">
     
    
      12 characters password

      </section>
     
    <p id="p"></p>
        
    </label>
    
         <label for="pass3">
            <section>
         <input type="radio" onclick="generate14()" id="pass3">
         14 characters password
         </section>
    <p id="p3"></p>
        
    </label>
    
        <label for="pass4">
            <section>
         <input type="radio" onclick="generate16()" id="pass4">
         16 characters password
         </section>
    <p id="p4"></p>
        
    </label>
    <br>
    <aside align="center">How to create a strong password:</aside>
    <p>Typically a strong password that is hack resistant or uncrackable has at least 12    characters. And they include:</p>
    
    <ul>
    <li>Minimum 2 uppercase letters</li>
    <li>Minimum 2 lowerscase letters</li>
    <li>Minimum 2 Numbers</li>
    <li>Minimum 2 special charecters</li>
    </ul>
    <p>Whenever you create a password, keep on mind that these characters are a must to
use</p>

<br>
    <footer style="font-variant:small-caps; text-align:center; color:rgb(20,50,110); font-weight:bold;">Created by Md. Abdul Ahad Khan</footer>
        
    </body>
</html>



-------CSS-------


            h3 {
             background-color:rgb(21,50,110);
            color:white;
            position:relative;
            bottom:17px;
            right:8px;
            padding-top:12px;
            padding-bottom:12px;
            padding-left:4px;
            width:110%;
            font-size:16px;
}
            label {
                color:white;
                font-family:helvetica;
                
                
}
            
           section {
            background-color:rgb(21,77,120);
            padding:10px;
            border-radius:4px;
            position:relative;
            right:4px;
            
            
}

          section:hover {
            background-color:rgb(21,50,120);
}
          aside {
          background-color:grey;
          box-shadow: 1px 3px 2px rgb(0,0,20);
          padding:4px;
          position:relative;
          right:4px;
          border-radius:2px;
          color:#FFFFFF;
          margin-bottom:10px;
          padding: 8px 8px 8px 8px;
          
          
          
}       .heading {
          color:rgb(21,50,120);
          background-color:grey;
          position:relative;
          left:40px;
          font-size:17px;
}        p {
         color:rgb(20,50,110);
         position:relative;
         bottom:2px;
         text-align:left;
         font-family:times new roman;
         font-size:14px;
         
}       ul {
        position:relative;
        bottom:4px;
        color:rgb(0,210,0);
}




-------JS--------



    
    alert("Welcome to GetYourPassword.com \n \n Select a specific password length, and it will genarate you a strong password of that length \n \n Instructions: \n 1. Tap the radio button or the text next to it or the genarated password  \n \n 2. With every tap it will genarate a new password");
    
    
        function generate() {
        var characslow = "abcdefghijklmnopqrstuvwxyz";
        var characsup = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var characssp = "@#$*:;!&'/.,Γ—%^'?"
        
        var z = characssp[Math.floor(Math.random()*8)];
        var p = characsup[Math.floor(Math.random()*26)];
        var x = characsup[Math.floor(Math.random()*26)];
        var h = characslow[Math.floor(Math.random()*26)];
        var i = characslow[Math.floor(Math.random()*26)];
         var b = characsup[Math.floor(Math.random()*26)];
        var q = Math.floor(Math.random()*8);
        var m = characslow[Math.floor(Math.random()*26)];
        var g = characslow[Math.floor(Math.random()*26)];
        var k = characsup[Math.floor(Math.random()*26)];
        var y = Math.floor(Math.random()*9);
        var n  = Math.round(Math.random() *10)
        
        var d = characssp[Math.floor(Math.random()*8)];
        
       var res = [x,m,p,z,g,q,k,n,y,d,h,b];

        var password = res.sort(() => Math.random() - 0.5);


var last = password.join("");



        let here = document.getElementById("p").innerHTML = last;
        document.getElementById("p").style.fontSize = "20px";
document.getElementById("p").style.color = "white";
document.getElementById("p").style.backgroundColor = "black";
document.getElementById("p").style.textAlign = "center";
document.getElementById("p").style.borderRadius = "10px";
document.getElementById("p").style.padding = "20px";
document.getElementById("p").style.boxShadow = "2px 4px 2px gray";
document.getElementById("p").style.position = "relative";
document.getElementById("p").style.bottom = "8px";


        }
        
        function genarate8() {
        var characslow = "abcdefghijklmnopqrstuvwxyz";
        var characsup = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var characssp = "@#$*:;!&'/.,Γ—%^'?"
        
        var z = characssp[Math.floor(Math.random()*8)];
        var p = characsup[Math.floor(Math.random()*26)];
        var x = characsup[Math.floor(Math.random()*26)];
        var h = characslow[Math.floor(Math.random()*26)];
        var i = characslow[Math.floor(Math.random()*26)];
         var b = characsup[Math.floor(Math.random()*26)];
        var q = Math.floor(Math.random()*8);
        var m = characslow[Math.floor(Math.random()*26)];
        var g = characslow[Math.floor(Math.random()*26)];
        var k = characssp[Math.floor(Math.random()*26)];
        var y = Math.floor(Math.random()*9);
        var n  = Math.round(Math.random() *10) 
        var w = characssp[Math.floor(Math.random()*8)];
        
        var d = characssp[Math.floor(Math.random()*8)];
        
       var res = [x,m,p,z,g,q,k,n];

        var password = res.sort(() => Math.random() - 0.5);


var last = password.join("");



        let here = document.getElementById("p2").innerHTML = last;
        document.getElementById("p2").style.fontSize = "20px";
document.getElementById("p2").style.color = "white";
document.getElementById("p2").style.backgroundColor = "black";
document.getElementById("p2").style.textAlign = "center";
document.getElementById("p2").style.borderRadius = "10px";
document.getElementById("p2").style.padding = "20px";
document.getElementById("p2").style.boxShadow = "2px 4px 2px gray";
document.getElementById("p2").style.position = "relative";
document.getElementById("p2").style.bottom = "8px";
        }
        
        function generate14() {
        var characslow = "abcdefghijklmnopqrstuvwxyz";
        var characsup = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var characssp = "@#$*:;!&'/.,Γ—%^'?"
        
        var z = characssp[Math.floor(Math.random()*8)];
        var p = characsup[Math.floor(Math.random()*26)];
        var x = characsup[Math.floor(Math.random()*26)];
        var h = characslow[Math.floor(Math.random()*26)];
        var i = characslow[Math.floor(Math.random()*26)];
         var b = characsup[Math.floor(Math.random()*26)];
        var q = Math.floor(Math.random()*8);
        var m = characslow[Math.floor(Math.random()*26)];
        var g = characslow[Math.floor(Math.random()*26)];
        var k = characsup[Math.floor(Math.random()*26)];
        var y = Math.floor(Math.random()*9);
        var n  = Math.round(Math.random() *10)
        var w = characsup[Math.floor(Math.random()*26)];
        var l = Math.floor(Math.random()*9);
        var e = characssp[Math.floor(Math.random()*8)];
        
        var d = characssp[Math.floor(Math.random()*8)];
        
       var res = [x,m,p,z,g,q,k,n,y,d,h,b,w,e];

        var password = res.sort(() => Math.random() - 0.5);


var last = password.join("");



        let here = document.getElementById("p3").innerHTML = last;
        document.getElementById("p3").style.fontSize = "20px";
document.getElementById("p3").style.color = "white";
document.getElementById("p3").style.backgroundColor = "black";
document.getElementById("p3").style.textAlign = "center";
document.getElementById("p3").style.borderRadius = "10px";
document.getElementById("p3").style.padding = "20px";
document.getElementById("p3").style.boxShadow = "2px 4px 2px gray";
document.getElementById("p3").style.position = "relative";
document.getElementById("p3").style.bottom = "8px";
        }
        
        function generate16() {
        var characslow = "abcdefghijklmnopqrstuvwxyz";
        var characsup = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var characssp = "@#$*:;!&'/.,Γ—%^'?"
        
        var z = characssp[Math.floor(Math.random()*8)];
        
        var p = characsup[Math.floor(Math.random()*26)];
        
        var x = characsup[Math.floor(Math.random()*26)];
        
        var h = characslow[Math.floor(Math.random()*26)];
        
        var i = characslow[Math.floor(Math.random()*26)];
        
         var b = characsup[Math.floor(Math.random()*26)];
         
        var q = Math.floor(Math.random()*8);
        
        var m = characslow[Math.floor(Math.random()*26)];
        
        var g = characslow[Math.floor(Math.random()*26)];
        
        var w =  characssp[Math.floor(Math.random()*8)];
        
        var k = characsup [Math.floor(Math.random()*26)];
        var y = Math.floor(Math.random()*9);
        var n  = Math.round(Math.random() *10)
        var e = Math.floor(Math.random()*9);
        var u = characsup[Math.floor(Math.random()*26)];
        var l = characssp[Math.floor(Math.random()*8)];
        
        var d = characssp[Math.floor(Math.random()*8)];
        
       var res = [x,m,p,z,g,q,k,n,y,d,h,b,w,e,u,l];

        var password = res.sort(() => Math.random() - 0.5);
        
        


var last = password.join("");



        let here = document.getElementById("p4").innerHTML = last;
        document.getElementById("p4").style.fontSize = "20px";
document.getElementById("p4").style.color = "white";
document.getElementById("p4").style.backgroundColor = "black";
document.getElementById("p4").style.textAlign = "center";
document.getElementById("p4").style.borderRadius = "10px";
document.getElementById("p4").style.padding = "20px";
document.getElementById("p4").style.boxShadow = "2px 4px 2px gray";
document.getElementById("p4").style.position = "relative";
document.getElementById("p4").style.bottom = "8px";
document.getElementById("p4").style.right = "2px";
  }

28. By Jay

Made by Jay. Click on the generate button to generate a random password of random length. Source

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Basic Password Generator</title>
    <link href="https://fonts.googleapis.com/css?family=Public+Sans&display=swap" rel="stylesheet">
</head>
<body>
    <section id="mySection">
        <div id="inputSection">
            <input id="myInput" type="text" value="Press Generate below" readonly/>
        </div>
        <div id="buttonSection">
            <button id="generateButton">Generate</button>
        </div>
    </section>
</body>
</html>


------CSS------



        body{

            font-family: 'Public Sans', sans-serif;

        }

        #inputSection{

            width: 100%;
            text-align: center;

        }

        #buttonSection{

            width: 100%;
            text-align: center;
            margin-top: 5px;

        }

        #myInput{

            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: grey;

        }

        #generateButton{

            padding: 5px;
            color: white;
            background-color: darkgreen;
            font-size: 18px;
            font-weight: bold;

        }



------JS-------




        document.getElementById("generateButton").addEventListener("click",clickEvent,false);

        function clickEvent(event){

            document.getElementById("generateButton").removeEventListener("click",clickEvent,false);
            generate();

            setTimeout(function(){

                document.getElementById("generateButton").addEventListener("click",clickEvent,false);

            },5100);

        }

        function generate(){

            var myInput = document.getElementById("myInput");
            var iterations = 0;
            var anInterval;

            clearInterval(anInterval);

            anInterval = setInterval(function(){

                var newPass = "";
                var maxChars = Math.floor(Math.random()*8)+8;
                var letters = ["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"];
                var symbols = ["@","#","$","%","[","]","{","}","(",")",",",".","<",">","~"];
                var numbers = ["0","1","2","3","4","5","6","7","8","9"];

                var arr = [letters,letters,symbols,numbers];

                var combinations = [];

                for(let i=0; i<maxChars; i++){

                    combinations.push(Math.floor(Math.random()*arr.length));

                }

                for(let i=0; i<arr.length; i++){

                    if(combinations.indexOf(i) == -1){

                        combinations.push(i);
                        maxChars++;

                    }

                }

                for(let i=0; i<maxChars; i++){

                    if(combinations[i] == 1){

                        newPass += ""+arr[combinations[i]][Math.floor(Math.random()*(arr[combinations[i]].length))].toUpperCase();

                    } else {

                        newPass += ""+arr[combinations[i]][Math.floor(Math.random()*(arr[combinations[i]].length))];

                    }

                }

                myInput.value = newPass;

                if(iterations > 125){

                    clearInterval(anInterval);

                } else {

                    iterations++;

                }

            },40);

        }

29. By KRIPoff

Made by KRIPoff. Source

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Pass Generator</title>
    <link rel="stylesheet" href="Password.css">
</head>
<body>
<frameset>
<frame src="left.html" name="leftFrame" noresize>
</frameset>
    <div id="load">
     <div id ="load1">
     <div id="load2">
     <div id="load3">
         <div id="load4">
         <div id="load5">
         <div id="load6">
         <div id="load7">
         </div>
         </div>
         </div>
         </div>
     </div>
     </div>
     </div>
    <div class="container">
        <h2><font color="white">Password Generator</font></h2>
        <input type="text" id="input"placeholder="Create Pass">
        <button style="height:40px;width:183px" id="btn">Generate Password</button>
    <p><h1>FFFFFFFFFFFFFFF
FFFFFFFFFFFFFF</h1></p>
    </div>
</body>
</html>



-------CSS-------


body {
    background-color:black;
}
#load{
    position:absolute ;
    top:30%;
    left:17%;
     right:17%;
}
#load1{
    border:10px outset red;
    border-radius:50%;
    width:220px;
    height:220px;
    margin:auto;
    border-left-color:transparent ;
    border-bottom-color:transparent ;
    border-right-color:transparent ;
    animation:spin 3s linear infinite ;
}
#load2{
    border:10px outset yellow;
    border-radius:50%;
    width:190px;
    height:190px;
    margin:auto;
    border-right-color:transparent ;
    border-left-color:transparent ;
    border-bottom-color:transparent ;
    animation:spin 3s linear infinite ;
}
#load3{
    border:10px inset blue;
    border-radius:50%;
    width:160px;
    height:160px;
    margin:auto;
    border-right-color:transparent ;
    border-bottom-color:transparent ;
    border-left-color:transparent ;
    animation:spin 3s linear infinite ;
}
#load4{
    border:10px outset rgb(0,200,0);
    border-radius:50%;
    width:130px;
    height:130px;
    margin:auto;
    border-right-color:transparent ;
    border-bottom-color:transparent ;
    border-left-color:transparent ;
    animation:spin 3s linear infinite ;
}
#load5{
    border:10px inset cyan;
    border-radius:50%;
    width:100px;
    height:100px;
    margin:auto;
    border-right-color:transparent ;
    border-bottom-color:transparent ;
    border-left-color:transparent ;
    animation:spin 3s linear infinite ;
}
#load6{
    border:10px outset orange;
    border-radius:50%;
    width:70px;
    height:70px;
    margin:auto;
    border-right-color:transparent ;
    border-bottom-color:transparent ;
    border-left-color:transparent ;
    animation:spin 3s linear infinite ;
}
#load7{
    border:10px outset gold;
    border-radius:50%;
    width:40px;
    height:40px;
    margin:auto;
    border-right-color:transparent ;
    border-bottom-color:transparent ;
    border-left-color:transparent ;
    animation:spin 3s linear infinite ;
}

@keyframes spin{
    100%{transform:rotateZ(360deg);}
}



-------JS--------



        const btn = document.getElementById("btn");
        var input = document.getElementById("input");
        btn.addEventListener("click",passGen)
        const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTVWXYZ1234567890+-=_)(*&^%$#@!:?;\[]";
        
        var passlen = 15;
        var pass = ""

        function passGen(){
            for(i=0;i<passlen;i++){
            let randNum = Math.round(0
            +(chars.length-1)*Math.random())
            pass+= chars[randNum]
            input.value= pass
            
        }
        pass = ""
    
        }

30. By Henry Kamulanje

Made by Henry Kamulanje. JavaScript password generator with history logs. First enter password length and after that click generate to generate a random password, it also has logs so that you can see all the previously generated passwords. Source

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body><form action="_self">
        <div id="div">
            <h3>Password Generator</h3>
            <hr>
            <input id="in" type="number" min="3" max="32" placeholder="Enter password length" autofocus>
            <button onclick="gen()">generate</button>
            <button onclick="toggle()">toggle log</button>
            <output id="out"></output>
            <div id="log"></div>
        </div></form>
    </body>
</html>


------CSS-------


h3 {
    color: #333;
    margin: 0 0 15px 0;
}
#div {
    width: 320px;
    padding: 10px;
    margin: 0 auto;
    border-radius: 5px;
    border: 1px solid silver;
    background-color: powderblue;
}
input {
    width: 135px;
}
output {
    min-height: 20px;
    width: 320px;
    color: #444;
    display: block;
    background-color: #fff;
}
#log {
    padding: 5px;
    color: #555;
    background-color: silver;
}



------JS--------


            var inp = document.getElementById("in");
            var outp = document.getElementById("out");
            var log = document.getElementById("log");
            var x = 1;
            log.style = "display: none";
            function gen() {
                if (inp.value < 3 || inp.value > 32) {
                } else {
                    outp.innerHTML = "";
                    for (i = 0; i < inp.value; i++) {
                        outp.innerHTML += "&#" + Math.round((33 + Math.random() * 94)) + ";";
                    }
                    log.innerHTML = outp.innerHTML + "<br>" + log.innerHTML;
                }
            }
            function toggle() {
                if (inp.value < 3 || inp.value > 32) {
                } else if (x != 0) {
                    log.style = "display: show";
                    x = 0;
                } else {
                    log.style = "display: none";
                    x = 1;
                }
            }

31. By Thomas Hj

Made by Thomas Hj. This program has multiple features like dark mode and options to select different items for your generated password. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Password Generator</title>
    </head>
    <body>
    <div class="header">
        <span class="sL">Password Generator</span>
        <span class="sR" id="nM">Night Mode</span>
        <div class="sC"></div>
    </div>
    <div class="body" data="0">
        <div class="sT">
            <div class="sTr sTh">
                <div class="sTc">Length</div>
                <div class="sTc">
                    <input id="pL" type="number" value="8"/>
                </div>
            </div>
            <div class="sTr">
                <div class="sTc sTo"></div>
            </div>
            <div class="sTr">
                <div class="sTc"></div>
                <div class="sTc">
                    <span class="sL">a - z</span>
                    <span class="sR">
                        <input id="pSl" type="checkbox" checked/>
                    </span>
                    <div class="sC"></div>
                </div>
            </div>
            <div class="sTr">
                <div class="sTc"></div>
                <div class="sTc">
                    <span class="sL">A - Z</span>
                    <span class="sR">
                        <input id="pBl" type="checkbox" checked/>
                    </span>
                    <div class="sC"></div>
                </div>
            </div>
            <div class="sTr">
                <div class="sTc"></div>
                <div class="sTc">
                    <span class="sL">0 - 9</span>
                    <span class="sR">
                        <input id="pN" type="checkbox"/>
                    </span>
                    <div class="sC"></div>
                </div>
            </div>
            <div class="sTr">
                <div class="sTc"></div>
                <div class="sTc">
                    <span class="sL">Special Characters</span>
                    <span class="sR">
                        <input id="pS" type="checkbox"/>
                    </span>
                    <div class="sC"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="header">
        <span class="sL">Output</span>
        <span class="sR" id="nP">New Password?</span>
        <div class="sC"></div>
    </div>
    <div class="body out" id="oP">h</div>
    </body>
</html>



-------CSS--------


body {
    background: #eee;
    font-family: monospace;
    margin: auto;
    max-width: 500px;
}

body[data='1'] {
    background: #111;
    color: #fff;
}

input[type="checkbox"] {
    margin-top: -1px;
}

input[type="number"] {
    background: transparent;
    border: 0;
    margin: 0;
    outline: 0;
    padding: 0;
    width: 100%;
}

body[data='1'] input[type="number"] {
    color: #fff;
}

.sC {
    clear: both;
}

.sL {
    float: left;
}

.sR {
    float: right;
}

.sT {
    box-sizing: border-box;
    display: table;
    width: 100%;
}

.sTo {
    height: 8px;
}

.sTh {
    box-shadow: 0 -1px 0 #ccc inset;
}

.sTr {
    display: table-row;
}

.sTc {
    display: table-cell;
    padding: 4px 0;
}

.header {
    background: #fff;
    box-shadow: 0 2px 2px #ccc, 0 0 2px #ccc inset;
    font-weight: bold;
    padding: 8px 15px;
}

body[data='1'] .header {
    background: #222;
    box-shadow: 0 2px 2px #111, 0 0 2px #000 inset;
}

.body {
    font-size: 14px;
    margin: 30px;
}

.out {
    word-break: break-word;
}



--------JS--------


// Storage
var p = {
    a: null,
    b: null,
    c: null,
    d: null,
    e: null,
    f: null,
    h: false
}


// Event -> Web-page loading
window.onload = function() {
    p.a = g('pL')
    p.a.oninput = genPass
    p.b = g('pSl')
    p.b.onchange = genPass
    p.c = g('pBl')
    p.c.onchange = genPass
    p.d = g('pN')
    p.d.onchange = genPass
    p.e = g('pS')
    p.e.onchange = genPass
    p.f = g('oP')
    g('nP').onclick = genPass
    g('nM').onclick = nM
    genPass()
}

// Create password
function genPass() {
    var a = ''
    var b = ''
    if(p.a.value.length == 0 || Number(p.a.value) == 0) {
        b = 'Error!\nPlease enter password length.'
    } else if(Number(p.a.value) > 9999) {
        b = 'Error!\nPassword length is too long.'
    } else {
        if(p.b.checked) {
            a += 'abcdefghijklmnopqrstuvwxyz'
        }
        if(p.c.checked) {
            a += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
        }
        if(p.d.checked) {
            a += '0123456789'
        }
        if(p.e.checked) {
            a += '+=%_|<>{}[][email protected]#$/^&*()\`~-\'":;,?'
        }
        if(a.length !== 0) {
            for(var c = 0; c < Number(p.a.value); c++) {
                b += a.charAt(Math.floor(Math.random() * a.length))
            }
        } else {
            b = 'Error!\nRequired one or more options to generate password.'
        }
    }
    p.f.innerText = b
}

// Night Mode Toggle
function nM() {
    p.h = !p.h
    document.body.setAttribute('data', (p.h ? '0' : '1'))
    g('nM').innerText = (p.h ? 'Night' : 'Day') + ' Mode'
}

// Get element by id
function g(a) {
    return document.getElementById(a)
}

32. By Daniel Asherov

Made by Daniel Asherov. This is a numerical JavaScript password generator, you can select password length and different items you want to include in the password, it also displays the password strength. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1 align="center">Password Generator</h1>
        <input type="text" id="field">
        <p style="float:right;">Password Stength</p>
        <div>
            <p id ="passlength">Password   length: 10 </p>
            <input type="range" id="range" min="4" max="24" value="10" oninput="lengthChange(value)">
            <progress id="strength" style="float:right;" min="0" max ="120">
        </div>
        <p>Include Numbers?</p>
        <input type="checkbox" id="nums" checked="true">
        
        <p>Include Letters?</p>
        <input type="checkbox" id="letters">
        <p>Include Uppercase?</p>
        <input type="checkbox" id="ucase">
        <p>Include Special Characters?</p>
        <input type="checkbox" id="special">
        <hr>
        <button onclick="check()">Generate</button>
        
    </body>
</html>


-------CSS-------


p {
    margin-bottom:0px;
    margin-top:0px;
}

button {
    height:70px;
    width:95.5vw;
    border-radius:5%;
    border-top-color:silver;
    border-bottom-color:black;
    background-color:silver;
}

#field {
    height:50px;
    width:94.5vw;
    font-size:25px;
    border-color:black;
}

body {
    background-color:silver;
}

progress{
background-color:black;
}

progress::-webkit-progress-bar {
background-color:none;
}
progress::-webkit-progress-value {
background-color:orange;
} 



-------JS--------



function lengthChange(val) {
    var passLen = document.getElementById("passlength");
    passLen.innerText=""
    passLen.innerText = "Password length: " + val;
}

function check() {
    var length = document.getElementById("range").value;
    var numbers = document.getElementById("nums").checked;
    var letters = document.getElementById("letters").checked;
    var specials = document.getElementById("special").checked;
    var upperCase = document.getElementById("ucase").checked;
    var field = document.getElementById("field");
    
    var numsArray = ["0","1","2","3","4","5","6","7","8","9"];
    var lettersArray = ["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"];
    var specialArray =["!","?","&","%","+","-","_","/","#"]
    
    var outputArray =[]
    
    if(numbers) {
        for(let n=0; n<numsArray.length; n++){
            outputArray.push(numsArray[n]);
        }
    }
    
    if(letters) {
        for(let l=0; l<lettersArray.length; l++){
            if(upperCase){
                if(l%2==0){
                outputArray.push(lettersArray[l].toUpperCase());
                }else{
                    outputArray.push(lettersArray[l]);
                }
            }else{
          outputArray.push(lettersArray[l]);
            }
        }
    }
    
    if(specials) {
        for(let s=0; s<specialArray.length; s++){
          outputArray.push(specialArray[s]);
        }
    }
    
    var output ="";
    
    for(let i = 0; i<length; i++) {
        output = output + outputArray[rand(outputArray.length-1)];      
    }
    field.value = output;
    
    var strength = document.getElementById("strength");
    
    strength.value = 0;
    
    for(let g=0; g<output.length; g++){
        strength.value +=3;
    }
    
    if(output.length <6){
        for(let h=output.length; h<=6; h++){
            strength.value -=2;
        }
    }else{
        
        if(output.match(/[a-z]/gi)){
            strength.value+=8;
        }
    
        if(upperCase){
            strength.value+=12;
        }
    
        if(specials){
            strength.value+=28;
        
        }
        
    }
    
    if(specials){
           var checkAgain= output.match(/[\-\!\?\&\%\+\_\/\#]/g);

            if(checkAgain ==null){
               var randChar= rand(output.length-1);
     output = output.replace(/[^\-\!\?\&\%\+\_\/\#]/, specialArray[rand(specialArray.length-1)])         
 
                field.value = output
            }
        }
        
        if(letters){
           var checkAgain= output.match(/[a-zA-z]/g);

            if(checkAgain ==null){
               var randChar= rand(output.length-1);
     output = output.replace(/[^a-zA-Z]/, lettersArray[rand(lettersArray.length-1)])         
 
                field.value = output
            }
        }
        
        if(numbers){
           var checkAgain= output.match(/\d/g);

            if(checkAgain ==null){
               var randChar= rand(output.length-1);
     output = output.replace(/!\d/, numsArray[rand(numsArray.length-1)])         
 
                field.value = output
            }
        }
}

function rand(max) {
    min = 0;
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;

}

33. By Artur

Made by Artur. Enter password length and click generate password option. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>

<form name="pgenerate">
<label>Output:</label><input type="text" size=18 name="output">
<input type="button" value="Generate Password" class="input111" onClick="populateform(this.form.thelength.value)"><br />
    Input:                           <input type="text" name="thelength" size=3 value="8">
    </form>
    </body>
</html>


-----CSS------


body {
    background:black;
    color:rgb(0,255,0);
    font-size:20px;
    margin:60px;
    font-family:Lucida Console;
}

.input111{
    height:30px;
    left:30%;
    background:black;
    border-color:rgb(0,255,0);
    color:rgb(0,255,0);
    position:absolute;
    top:125px;
    border-radius:5px;
}

input{
    outline:none;
    border-color:rgb(0,255,0);
    height:20px;
    background:black;
    color:rgb(0,255,0);
    border-color:rgb(0,255,0);
    border-radius:5px;
    font-family:Lucida Console;
}



------JS-------



var keylist="[email protected]#$%&^"
var temp=''

function generatepass(plength){
temp=''
for (i=0;i<plength;i++)
temp+=keylist.charAt(Math.floor(Math.random()*keylist.length))
return temp
}

function populateform(enterlength){
document.pgenerate.output.value=generatepass(enterlength)
}

34. By Roopesh

Made by Roopesh. Source


<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <input id="length" type="number" value="8" placeholder="Enter Length Of Password"/>
        <input type="button" id="generate" value="Generate" onclick="generate()">
        <br />
        <input id="disp" type="text">
    </body>
</html>


------CSS-------


body{
    background-color:#41C963;
}
#length {
    width:60%;
    height:20px;
    border-radius:10px;
    border:1px solid green;
    text-align:center;
    margin-left:20%;
    background-color:#7fe79a;
}
#disp{
    width:100%;
    height:35px;
    text-align:center;
    border-radius:10px;
    border:1px solid lightgreen;
    font-size:16px;
    background-color:#5cff85;
}
#generate{
    width:50%;
    height:30px;
    margin-left:25%;
    margin-top:20px;
    margin-bottom:20px;
    background-color:#27FF00;
    border-width:1px;
    border-radius:10px;
}


-----JS------



function generate(){
//keys 
   var arr ="[email protected]#$%^&*?/+-Γ—Γ·";
   var length = arr.length
   var len = document.getElementById("length");
   var display = document.getElementById("disp");
   display.value ="";
//generating
   if(len.value >7 && len.value<34){
     for(var i=0; i<len.value; i++){
       
       display.value  += 
 arr[Math.ceil(Math.random()*(length-1))];
       }
    }
  }

35. By Luca

Made by Luca. First enter password length, after that select the password type and click on the create button to generate a random password. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Password Generator</title>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">        
        <script src="https://code.jquery.com/jquery-3.1.1.js">
        </script>
    </head>
    <body onload="placeCard()" onresize="placeCard()">
        <div class="card">
            <div class="logo"> 
                <div class="wave"></div>
                <div class="lock_body"></div>
                <div class="lock_arc"></div>
                <div class="lock_hole"></div>
                <div class="lock_open"></div>
            </div>
            <div class="header">
                <p>Password Generator</p>
            </div>
            <input type="text" class="input_Length" placeholder="Password Length"/>
            <div class="input_Character_Text">Characters</div>
            <div class="input_Type_Con" onclick="openSelection()">
                <div class="input_Type">
                    Password Type
                </div>
                <div class="drop_Arrow"></div>
            </div>
            <div class="pswrd_Text_Con">
                <p>Your Password:</p>
                <p class="pswrd_Text"></p>
                <div class="btn_copy" onclick="copyPswrd()"><i class="fas fa-copy"></i></div>
                <div class="hvr_Info">Copy</div>
            </div>
            <div class="btn_Go btn_Generate" onclick="create_pswrd()">
                Create!
            </div>
            <div class="btn_Go btn_Back" onclick="go_back()">
                Back!
            </div>
            <p class="footer">Created By Luca</p>
        </div>
        <div class="selection_Type">
            <div class="radio_Container c1" onclick="background('1','2','3','Numbers')">
                <p>Numbers</p>
                <div class="underline u1"></div>
            </div>
            <div class="radio_Container c2" onclick="background('2','1','3','Letters')">
                <p>Letters</p>
                <div class="underline u2"></div>
            </div>
            <div class="radio_Container c3" onclick="background('3','1','2','Numbers and Letters')">
                <p>Numbers and Letters</p>
                <div class="underline u3"></div>
            </div>
            <div class="btn_Go btn_ok" onclick="closeSelection()">
                OK!
            </div>
        </div>
        <div class="alert">
            <div class="mark">!</div>
            <p class="alert_Text"></p>
            <div class="btn_Go btn_ok" onclick="closeAlert()">
                OK!
            </div>
        </div>
        <div class="overlay"></div>
    </body>
</html>



------CSS-------


            *{
                margin:0;
                padding:0;
                box-sizing:border-box ;
                font-family: 'Titillium Web', sans-serif;
            }
            html,body{
                width:100%;
                height:100%;
            }
            body {
                background:linear-gradient(10deg,#fc4949,#fc8148);
            }
            .overlay{
                display:none;
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background-color:rgba(0,0,0,0.15);
                opacity:0;
                z-index:4;
            }
            .card{
                position:absolute ;
                top:50%;
                left:50%;
                width:80vw;
                height:110vw;
                max-width:330px;
                max-height:450px;
                background-color:white;
                border:2px solid #EEEEEE;
                border-radius:7px;
                transform:translate(-50%,-50%);
                z-index:1;
            }
            .header{
                margin-top:44%;
                width:100%;
                text-align:center;
                color:#888888;
            }
            /*Animated logo at the top of the card*/
            .logo{
                position:absolute ;
                top:5%;
                left:50%;
                width:26vw;
                height:26vw;
                max-width:100px;
                max-height:100px;
                background-color:white;
                border-radius:50%;
                border:2px solid #EEEEEE;
                transform:translateX(-50%);
                z-index:2;
                overflow:hidden;
            }
            .wave{
                margin-top:40%;
                width:100%;
                height:60%;
                background:linear-gradient(10deg,#fc4949,#fc8148);
            }
            .wave::before{
                content:'';
                position:absolute ;
                top:-78%;
                left:-20%;
                width:145%;
                height:145%;
                border-radius:43%;
                background-color:white;
                transform:rotateZ(0deg);
                animation:rotate 6s infinite linear;
            }
            @keyframes rotate{
                from{transform:rotateZ(0deg);}
                to{transform:rotateZ(360deg);}
            }
            .lock_body{
                position:absolute;
                top:40%;
                left:50%;
                width:45%;
                height:40%;
                border:3px solid white;
                border-radius:7px;
                background:linear-gradient(30deg,#fc4949,#fc8148);
                transform:translateX(-50%);
                z-index:4;
            }
            .lock_arc{
                position:absolute;
                top:13%;
                left:50%;
                width:37%;
                height:37%;
                border:3px solid white;
                border-radius:40% 40% 0 0;
                background:linear-gradient(30deg,#fc4949,#fc8148);
                transform:translateX(-50%);
                z-index:3;
            }
            .lock_hole{
                position:absolute;
                top:21%;
                left:50%;
                width:21%;
                height:21%;
                border-radius:40% 40% 0 0;
                background-color:white;
                transform:translateX(-50%);
                z-index:3;
            }
            .lock_open{
                position:absolute;
                top:33%;
                left:50%;
                width:20%;
                height:calc(7% + 2px);
                background-color:white;
                z-index:3;
                
            }
            /*Word next to the length input*/
            .input_Character_Text{
                padding-left:5px;
                display:flex;
                justify-content:left;
                align-items:center;
                position:absolute;
                top:43%;
                left:55%;
                width:40%;
                height:10%;
                background:linear-gradient(30deg,#fc4949,#fc8148);
                color:white;
                border-radius:0 4px 4px 0;
                z-index:2;
            }
            /*Input for the length of the Password*/
            .input_Length{
                padding:0 10px 0 5px;
                position:absolute;
                top:43%;
                left:5%;
                width:50%;
                height:10%;
                color:#888888;
                text-align:right;
                border:2px solid #fc6048;
                border-radius:4px 0 0 4px;
                transition:all .1s;
                z-index:2;
            }
            /*Container for the Type of the Password*/
            .input_Type_Con{
                position:absolute;
                top:63%;
                left:5%;
                width:90%;
                height:10%;
                cursor:pointer;
                z-index:3;
            }
            .input_Type{
                display:flex;
                justify-content:left;
                align-items:center;
                padding-left:5px;
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                color:white;
                background:linear-gradient(30deg,#fc4949,#fc8148);
                border-radius:4px;
                z-index:2;
            }
            .drop_Arrow{
                position:absolute;
                left:88%;
                top:50%;
                width:0; 
                height:0; 
                border-left:6px solid transparent;
                border-right:6px solid transparent;
                border-top:6px solid white;
                z-index:2;
            }
            /*Pop-up menu and alert*/
            .selection_Type,.alert{
                padding:5px 10px 5px 10px;
                display:none;
                position:absolute ;
                top:50%;
                left:50%;
                width:80vw;
                height:50vw;
                max-width:300px;
                max-height:200px;
                background-color:white;
                border:2px solid #EEEEEE;
                border-radius:7px;
                box-shadow:0 0 22px #666666;
                transform:translate(-50%,-50%);
                opacity:0;
                z-index:5;
            }
            /*Styling for the different Password Types*/
            .radio_Container{
                display:flex;
                justify-content:center;
                align-items:center;
                margin-bottom:5%;
                width:100%;
                height:20%;
                cursor:pointer;
                z-index:6;
                border-radius:3px;
            }
            .radio_Container p{
                display:block;
                cursor:pointer;
                transition:.2s;
                z-index:2;
            }
            .radio_Container:hover > p{
                letter-spacing:1px;
            }
            .radio_Container:hover{
                background-color:#EFEFEF;
            }
            .underline{
                position:absolute;
                display:block;
                background-color:#E4E4E4;
                width:0;
                height:20%;
                border-radius:3px;
                z-index:1;
            }
            /*Styling all Buttons*/
            .btn_Go{
                display:flex;
                justify-content:center;
                align-items:center;
                position:absolute;
                top:88%;
                right:5%;
                color:white;
                background:#fc6648;
                border:2px solid white;
                border-radius:4px;
                cursor:pointer;
                transition:background .5s, border .5s, color .5s, transform .1s;
            }
            .btn_Go:hover{
                background:white;
                border:2px solid #fc6648;
                color:#fc6648;
            }
            .btn_Go:active{
                transform:scale(0.9,0.9);
            }
            .btn_Generate,.btn_Back{
                width:40%;
                height:10%;
            }
            .btn_Back{
                display:none;
                opacity:0;
            }
            .btn_ok{
                top:80%;
                width:25%;
                height:18%;
            }
            /*Styling for the exclamation mark in the alerts*/
            .mark{
                display:flex;
                justify-content:center;
                align-items:center;
                position:absolute;
                left:50%;
                top:8%;
                width:17vw;
                height:17vw;
                max-width:65px;
                max-height:65px;
                border:2px solid #ff6363;
                background-color:white;
                border-radius:50%;
                color:#ff6363;
                font-size:40px;
                font-weight:bolder;
                transform:translateX(-50%);
            }
            .alert_Text{
                margin-top:33%;
                width:100%;
                text-align:center;
                color:#888888;
            }
            /*Password output Text*/
            .pswrd_Text_Con{
                display:none;
                margin-top:15%;
                width:100%;
                height:15%;
                text-align:center;
                color:#888888;
                opacity:0;
            }
            .pswrd_Text{
                display:inline-block;
                width:75%;
                padding-left:3px;
                border:1px solid #888888;
                border-radius:5px 0 0 5px;
                font-size:0.8em;
            }
            .btn_copy{
                display:inline-block;
                width:15%;
                margin-left:-4px;
                background-color:#888888;
                color:white;
                border:1px solid #888888;
                border-radius:0 5px 5px 0;
                cursor:pointer;
                font-size:0.8em;
            }
            .hvr_Info{
                margin-left:72%;
                margin-top:1%;
                width:20%;
                background-color:#444444;
                color:white;
                border-radius:3px;
                opacity:0;
                transition:opacity .4s;
            }
            .btn_copy:hover + .hvr_Info{
                opacity:1;
            }
            .footer{
                padding:0 0 0 3px;
                position:absolute;
                bottom:0;
                left:0;
                color:#BFBFBF;
            }



-----JS-------


            var pswrd_Type = 0;
            var pswrd = "";
            var lttrArr = ["a","A","b","B","c","C","d","D","e","E","f","F","g","G","h","H","i","I","j","J","k","K","l","L","m","M","n","N","o","O","p","P","q","Q","r","R","s","S","t","T","u","U","v","V","w","W","x","X","y","Y","z","Z"];
            var numArr = ["1","2","3","4","5","6","7","8","9"];
            var numLttrArr = lttrArr.concat(numArr,numArr,numArr);
            function placeCard(){
                if(window.innerHeight <= $(".card").innerHeight()){
                    $("html,body,.overlay").css({"height":$(".card").innerHeight() + "px"});
                    $(".card").css({"transform":"translate(-50%,0)","top":"0%"});
                    $(".alert").css({"top":$(".card").innerHeight()/2});
                }
                else{
                    $("html,body,.overlay").css({"height":"100%"});
                    $(".card").css({"transform":"translate(-50%,-50%)","top":"50%"});
                    $(".alert").css({"top":"50%"});
                }
            }
            /*Open Menu for Password Type*/
            function openSelection(){
                $(".overlay,.selection_Type").css({"display":"block"});
                $(".overlay,.selection_Type").animate({"opacity":"1"},150);
            }
            /*Close Menu for Password Type*/
            function closeSelection(){
                $(".overlay,.selection_Type").animate({"opacity":"0"},150);
                setTimeout(function(){
                    $(".overlay,.selection_Type").css({"display":"none"});
                },150);
            }
            /*Animate the background for the selection of the different Password Types on click*/
            function background(back_Req,back_Away,back_Away_2,pswrd_Type_Req){
                $(".u"+back_Away+",.u"+back_Away_2).animate({"width":"0%"},300);
                $(".u"+back_Req).animate({"width":"97%"},300);
                pswrd_Type = pswrd_Type_Req;
                $(".input_Type").text(pswrd_Type);
            }
            /*Create random Password with given Values*/
            function pswrd_for(arr,arrLength){
                for(i = 0; i < $(".input_Length").val(); i++){
                    newChar = arr[Math.floor(Math.random()*arrLength)];
                    pswrd += newChar;
                }
            }
            /*Look, if input is valid and get values for the pswrd_for() function*/
            function create_pswrd(){
                if(pswrd_Type != 0 && $(".input_Length").val() != 0 && $(".input_Length").val() <= 25){
                    if(pswrd_Type == "Numbers"){
                        pswrd_for(numArr,numArr.length);
                    }
                    if(pswrd_Type == "Letters"){
                        pswrd_for(lttrArr,lttrArr.length);
                    }
                    if(pswrd_Type == "Numbers and Letters"){
                        pswrd_for(numLttrArr,numLttrArr.length);
                    }
                    /*Animate the card if all inputs were valid*/
                    $(".input_Character_Text,.input_Length,.input_Type_Con,.btn_Generate").animate({"opacity":"0"},700);
                    $(".lock_body,.lock_arc,.lock_hole,.lock_open").animate({"top":"-=7%"},600);
                    $(".lock_body,.lock_arc,.lock_hole").animate({"top":"+=7%"},350);
                    $(".lock_open").animate({"top":"+=15%"},350);
                    setTimeout(function(){
                        $(".input_Character_Text,.input_Length,.input_Type_Con,.btn_Generate").css({"display":"none"});
                        $(".btn_Back").css({"display":"flex"});
                        $(".pswrd_Text_Con").css({"display":"block"});
                        $(".btn_Back,.pswrd_Text_Con").animate({"opacity":"1"},700);
                    },700);
                    $(".pswrd_Text").text(pswrd);
                    pswrd = "";
                }
                /*If inputs aren't valid a alert appears with the invalid input as text*/
                else if($(".input_Length").val() > 25 || $(".input_Length").val() == 0){
                    $(".overlay,.alert").css({"display":"block"});
                    $(".overlay,.alert").animate({"opacity":"1"},150);
                    $(".alert_Text").text("Your Password must be between 1-25 Characters!");
                }
                else if(pswrd_Type == 0){
                    $(".overlay,.alert").css({"display":"block"});
                    $(".overlay,.alert").animate({"opacity":"1"},150);
                    $(".alert_Text").text("Please enter a Password Type!");
                }
            }
            /*Close on alert on button click*/
            function closeAlert(){
                $(".overlay,.alert").animate({"opacity":"0"},150);
                setTimeout(function(){
                    $(".overlay,.alert").css({"display":"none"});
                },150);
            }
            function copyPswrd(){
                var pswrdText = $(".pswrd_Text").html();
                var tempPswrd = $('<input>').val(pswrdText).appendTo('body').select();
                document.execCommand('copy');
                tempPswrd.remove();
                $(".hvr_Info").text("Copied");
            }
            /*Hide the output and appears the beginning inputs*/
            function go_back(){
                $(".btn_Back,.pswrd_Text_Con").animate({"opacity":"0"},350);
                $(".lock_open").animate({"top":"-=8%"},450);
                setTimeout(function(){
                    $(".btn_Back,.pswrd_Text_Con").css({"display":"none"});
                    $(".input_Character_Text,.btn_Generate").css({"display":"flex"});
                    $(".input_Type_Con,.input_Length").css({"display":"block"});
                    $(".input_Character_Text,.input_Length,.input_Type_Con,.btn_Generate").animate({"opacity":"1"},350);
                    $(".hvr_Info").text("Copy");
                },350);
            }

36. By Maximus

Made by Maximus. Select password length by moving the slider right or left, after that click on the generate button to generate a random password. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Password generator</title>
        <input type="textbox" id="result" value="--------" readonly/>
        <div class="cboxdiv"><input type="checkbox" id="cnums" class="cb" /><p class="ctext" >Numbers</p></div>
        
        <div class="cboxdiv"><input type="checkbox" id="cletters" class="cb" checked="true"/><p class="ctext" >Letters</p></div>
    
        <div class="cboxdiv"><input type="checkbox" id="csymbols" class="cb" /><p class="ctext" >Symbols</p></div>
        
        <p id="min">8</p>
        <p id="cur">8</p>
        <p id="max">32</p>
        
        <input type="range" id="range" min="8" max="32" value="8"/>
        <input type="button" id="gen" value="Generate"/>
        <input type="button" id="copy" value="Copy"/>
    </head>
    <body> 
    </body> 
</html>


------CSS-------


body {
    width:90%;
    height:100%;
    margin:0 auto;
    padding:0;
    font-family:sans-serif;
}
#range
{
    
    width:100%;
    margin-bottom:30px;
    
}
#result
{
   
    width:100%;
    
    vertical-align:center;
    margin-bottom:0px;
    text-align:center;
    height:150px;
    border-style:none;
    
}
#min
{
    float:left;
    text-align:left;
    display:inline;
    width:calc(100% / 3);
    margin-top:20%;
}
#cur
{
    float:left;
    text-align:center;

    display:inline;
    width:calc(100% / 3);
    font-size:6vw;
    margin-top:10%;
}
#max
{
    float:right;
    display:inline;
    text-align:right;
    width:calc(100% / 3);
    margin-top:20%;
}
#gen
{
    float:left;
    width:45%;
    display:inline;
    height:50px;
    background:#fff;
    border-color:silver;
    border-style:solid;
}
#copy
{
    float:right;
    width:45%;
    display:inline;
    height:50px;
    background:#fff;
    border-color:silver;
    border-style:solid;
}
.cb
{
    width:25px;
    height:25px;
    float:left;
    display:inline;
    margin:15px 2px;
    
}



.cboxdiv
{
    float:left;
    width:calc(100% / 3);
    height:50px;
    display:inline ;
    
}
.cboxdiv p
{ 
    float:left;
    vertical-align:top;
    display:inline;
    
    
}



------JS-------


var range;
var result;
var cur;
var bcopy;
var cletters;
var csymbols;
var cboxes = [false,true,false];
window.onload = function start(event)
{ 
  range =  document.getElementById("range");
  result = document.getElementById("result");
  cur = document.getElementById("cur");
  bcopy = document.getElementById("copy");
  bcopy.disabled = true;
  cnums  = document.getElementById("cnums");
  cletters  = document.getElementById("cletters");
  csymbols = document.getElementById("csymbols");
 result.style.fontSize = result.offsetWidth / range.value*1.3 + "px";
} 

document.getElementById("range").onchange = function change(event){
         result.value = "";
     cur.innerHTML = range.value;
        while(result.value.length < range.value)
        {
            result.value += '-';
        }
    result.style.fontSize = result.offsetWidth / range.value*1.3 + "px";
};

function password_generator()
{   
    var chars= "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!\"#$%&'()*+,-./:;<=>[email protected][\\]^_`{|}~";
    var password = "";
    if(cboxes[0] === false && cboxes[1] === false && cboxes[2] === false )
    {
        while(password.length < range.value)
        {
            password += '-';
        }
    bcopy.disabled = true;
    return password;
    }
    while(password.length < range.value)
  {
      var s = Math.floor(Math.random() * 3);
      if(cboxes[s] === false)
        continue;
        
        switch(s)
        {
            case 0:
                       password += chars.charAt(Math.floor(Math.random() * 10));               
                break;
            case 1:
                       password += chars.charAt(Math.floor(Math.random() * 52)+9);               
                break;
            case 2:
                       password += chars.charAt(Math.floor(Math.random() * 32) + 62);               
                break;
        }

 
        
    }
    bcopy.disabled = false;
    return password;
}
document.getElementById("gen").onclick = function gen(event)
{
    result.value = password_generator();
}
document.getElementById("copy").onclick = function copy()
{
 prompt("copy text", result.value );
};
document.getElementById("cnums").onclick = function nchange(event)
{
  cboxes[0] = cnums.checked;
}
document.getElementById("cletters").onclick = function lchange()
{
  cboxes[1] = cletters.checked;
}
document.getElementById("csymbols").onclick = function schange()
{
  cboxes[2] = csymbols.checked;
}

37. By Emperor Bob

Made by Emperor Bob. Click anywhere inside the green box to generate a random password that is 8 digits in length. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body align="center">
        <button onclick="random()">Generate</button>
        <br />
        <br />
        <div id="password">Password</div>
        <h4>Make sure to upvote this code if you liked itπŸ‘. Of you have any color suggestions make sure to tell me!</h4>
    </body>
</html>


------CSS------


body {
}
button {
    background-color:lime;
    border-style:none;
    padding:20%;
}
div {
    background-color:black;
    color:white;
    padding:10%;
    font-size:200%;
}



------JS------


var myArray = [ "1", "2", "3","4","5","6","7","8","9","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"];
function random() {
 var randomItemOne = myArray[Math.floor(Math.random()*myArray.length)];
 
 var randomItemTwo = myArray[Math.floor(Math.random()*myArray.length)];
 
 var randomItemThree = myArray[Math.floor(Math.random()*myArray.length)];
 
 var randomItemFour = myArray[Math.floor(Math.random()*myArray.length)];
 
 var randomItemFive = myArray[Math.floor(Math.random()*myArray.length)];
 
 var randomItemSix = myArray[Math.floor(Math.random()*myArray.length)];
 
 var randomItemSeven = myArray[Math.floor(Math.random()*myArray.length)];
 
 var randomItemEight = myArray[Math.floor(Math.random()*myArray.length)];
 
 var password = randomItemOne + randomItemTwo + randomItemThree + randomItemFour + randomItemFive + randomItemSix + randomItemSeven + randomItemEight;
 
document.getElementById("password").innerHTML = password;
}

38. By Chat d’Oeuf (Baron)

Made by Chat d’Oeuf (Baron). This basic JavaScript password generator generates a random 6 digits password when you click the generate button. Source

<!DOCTYPE html>
<html>
    <body>
      <input type="checkbox" checked>Normal characters<br>
      <input type="checkbox" checked>Numerical characters<br>
      <input type="checkbox" checked>Uppercase characters<br>
      <div class="up">^</div><br><div>6</div><div class="down">v</div><br><br>
      <input class="a" disabled><br>
      <button>Generate</button>
    </body>
</html>


------CSS-------


.a {
    width: 66px;
}
div {
    margin-left: 28px;
    position: absolute;
}
.up {
    font-size: 20px;
    margin-left: 28.6px;
    margin-top: 4px;
}
.down {
    margin-top: 15px;
    margin-left: 29px;
}



-----JS------


var val = 6;
var chars = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var gen = "";
window.onload = function() {
    document.getElementsByTagName("div")[0].addEventListener("click", function() {
    if (val < 16) {
        val++;
        document.getElementsByTagName("div")[1].innerHTML = val;
        }
    });
    document.getElementsByTagName("div")[2].addEventListener("click", function() {
    if (val > 6) {
        val--;
        document.getElementsByTagName("div")[1].innerHTML = val;
        }
    });
    document.getElementsByTagName("input")[0].addEventListener("change", function() {
        if (document.getElementsByTagName("input")[0].checked) {            chars+="abcdefghijklmnopqrstuvwxyz";
        } else {
            chars = chars.replace(/abcdefghijklmnopqrstuvwxyz/g, "");
        }
    });
    document.getElementsByTagName("input")[1].addEventListener("change", function() {
        if (document.getElementsByTagName("input")[1].checked) {            chars+="0123456789";
        } else {
            chars = chars.replace(/0123456789/g, "");
        }
    });
    document.getElementsByTagName("input")[2].addEventListener("change", function() {
        if (document.getElementsByTagName("input")[2].checked) {            chars+="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        } else {
            chars = chars.replace(/ABCDEFGHIJKLMNOPQRSTUVWXYZ/g, "");
        }
    });
    document.getElementsByTagName("button")[0].addEventListener("click", function() {
    gen="";
    for (i=0;i<val;i++) {
        gen+=chars[Math.floor(Math.random() * chars.length)];
    }
    document.getElementsByTagName("input")[3].value = gen;
    });
};

39. By Ruslan Kovalev

Made by Ruslan Kovalev. Enter password length you want to generate a random password. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <h1>Your Password</h1>
    </head>
    <body>
        
    </body>
</html>


------CSS-------


h1 {
    color: blue;
}

body {
    background-color: yellow;
}



-------JS-------


var alphabet = "abcdefghijklmnopqrstuvwxyz";
var numbers = "1234567890";
var characters = "@#$%&!?^_/";
var randomString = "";
var stringLength = prompt("number of characters");

while (randomString.length < stringLength) {
    randomString += alphabet[Math.floor(Math.random() * alphabet.length)] += numbers[Math.floor(Math.random() * numbers.length)] += characters[Math.floor(Math.random() * characters.length)]
}

if (randomString.length > stringLength) {
    randomString = randomString.slice(0, -1)
}
document.write(randomString);

40. By William

Made by William. The program generates a 50 digit long password when you click the generate button. Source

<!DOCTYPE html>
<html>
	<head>
		<title>Password Generator</title>
	</head>
	<body>
		<p>Password Generator</p>
		<span id="generated"></span>
		<button id="generate">Generate</button>
	</body>
</html>


------CSS------


body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #222;
	text-align: center;
	color: #fff;
	font-family: sans-serif;
	height: 100vh;
	font-size: 18px;
}
button {
	background-color: #ff5500;
	padding: 15px 25px;
	border: none;
	color: #fff;
	font-size: 15px;
}
span{
	height: 100px
}


------JS-------


const btn = document.getElementById("generate");
const rsl = document.getElementById("generated");
const length = 50;
var qwe = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890.-_";
btn.addEventListener("click", () => {
	qwe.split("");
	var gen = "";
	for (var i = 0; i < length; i++) {
		var ren = Math.floor(Math.random()   * qwe.length);
		gen += qwe.substring(ren, ren + 1);
	}
	rsl.innerHTML = gen;
	gen = "";
	return;
}); 

41. By Coding Master

Made by Coding Master. Source

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="https://image.flaticon.com/icons/png/512/128/128609.png">
 <title>Password Generator</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="a">
<h1>Password Generator</h1>
 <p id="pass" class="password"></p>
 <button onclick="generatePassword()">Generate Password</button>
 </div>
 <p id = "mensaje">Press the button!</p>
 <br>
 <br>
 <br>
 <div>Icon made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
 <script src="script.js"></script>
</body>
</html>


------CSS-------


body {
 text-align: center;
 background-color: lightyellow;
 
}

.password{
background-color: white;
margin-top:20px;
border: solid 1px black;
border-radius: 25px;
width: 100%;
height: 50px;
text-align: center;

}

#pass{
font-size: 30px;
font-family: courier new;
}

h1 {
 color: #242424;
 font-family: fantasy;
 font-size: 28px;
 margin-top: 20px;
}

button{
border: solid 1px black;
border-radius: 10px;
height: 30px;
margin-bottom: 25px;
background-color: lightGreen;
box-shadow: 0 1.5px darkGreen;
}
button:active{
 
}


#mensaje {
 border: solid 1px darkGray;
 padding: 10px;
 border-radius: 5px;
 background-color: lightGray;
}

.a{
background-color:lightBlue;
padding: 30px 12px 50px 12px;
margin: 10px;
border: solid 1.7px black;
border-radius: 15px;
box-shadow: 7px 7px 10px rgba(0,0,0,0.15);
}

a {
 text-decoration: none;
 color: darkGreen;
 
}



------JS-------



var uppercase = ["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"
];

var 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"
];

var numbers = ["1", "2", "3", "4",
 "5", "6", "7", "8", "9", "0"
];

var specialCharacters = ["!", "@",
 "#", "$", "%", "&"
];


// A pickRandom function

function pickRandom(myArray) {
 let random = Math.floor(Math
  .random() * myArray.length);

 return myArray[random];
}

//Array of randoms

var funcUpp = [
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase),
 pickRandom(uppercase)
];

var funcLow = [
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase),
 pickRandom(lowercase)
];

var funcNum = [
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers),
 pickRandom(numbers)
];


var funcSpCh = [
 pickRandom(specialCharacters),
 pickRandom(specialCharacters),
 pickRandom(specialCharacters),
 pickRandom(specialCharacters),
 pickRandom(specialCharacters),
 pickRandom(specialCharacters),
 pickRandom(specialCharacters),
 pickRandom(specialCharacters),
 pickRandom(specialCharacters),
 pickRandom(specialCharacters),
];

//Randoms

var a = [
 pickRandom(funcUpp),
 pickRandom(funcLow),
 pickRandom(funcNum),
 pickRandom(funcSpCh),
 pickRandom(funcUpp),
 pickRandom(funcLow),
 pickRandom(funcNum),
 pickRandom(funcSpCh),
 pickRandom(funcUpp),
 pickRandom(funcLow),
 pickRandom(funcNum),
 pickRandom(funcSpCh),
 pickRandom(funcUpp),
 pickRandom(funcLow),
 pickRandom(funcNum),
 pickRandom(funcSpCh),
 pickRandom(funcUpp),
 pickRandom(funcLow),
 pickRandom(funcNum),
 pickRandom(funcSpCh),
 pickRandom(funcUpp),
 pickRandom(funcLow),
 pickRandom(funcNum),
 pickRandom(funcSpCh)
];

function generatePassword() {

 var password = pickRandom(a) +
  pickRandom(a) +
  pickRandom(a) +
  pickRandom(a) +
  pickRandom(a) +
  pickRandom(a) +
  pickRandom(a) +
  pickRandom(a);

 console.log(password);
 document.getElementById("pass")
  .innerHTML = password;

 document.getElementById(
   "mensaje").innerHTML =
  "Feel free to use these passwords!";
}

42. By Juan David Padilla Diaz

Made by Juan David Padilla Diaz. Enter the password length in the input field after that click generate to generate a random password. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>Welcome to my password generator.</h1>
        <p id="ins">To generate a password you have to <strong>type any number from 8(min num) to 32(max num).</strong></p>
     <div id="form">
     <form  onsubmit="return genPass();">
            <input id="lval" />
           <input type="submit" value="Generate" id="btn" />
        </form>
        </div> 
        <p id="passg"></p>
    </body>
</html>


------CSS------


body {
 margin: 0;
 padding: 0;
 background: #2f3640;
 font-family: "montserrat", sans-serif;
 display: block;
}
h1 {
 background: #fff;
 text-align: center;
 padding: 15px;
 margin: 0;
}
#ins {
 position: relative;
 color: #fff;
 font-weight: 500;
 text-align: center;
 top: 100px;
 display: block;
}
#form {
 position: relative;
}

#lval {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 padding: 5px;
 border-radius: 0px 10px 0px 10px;
 outline: none;
 border: 1px solid;
}
#btn {
 position: absolute;
 top: 50%;
 left: 68%;
 transform: translate(-50%,-50%);
 padding: 5px;
 border-radius: 0px 10px 0px 0px;
 outline: none;
 border: 1px solid;
 color: #2f3640;
}
#passg {
 color: #fff;
 position: relative;
 display: flex;
 top: 110px;
 left: 10px;
}


------JS------



function genPass() {
    let lval =                   
    document.getElementById("lval").value;
    let p = "Success! Generated password: <br />";
    if (lval < 8) {
        alert("Error! Number is less than 8. The value of the number is 8 now");
        lval = 8;
    }
    if (lval > 32) {
        alert("Error! Number is more than 32. The value of the number is 32 now");
        lval = 32;
    }
    for (let i = 0; i < lval; i++) {
        let x = Math.floor((Math.random() * (126 - 33 ) + 33));
        p += String.fromCharCode(x);
    }
    txt = document.getElementById("passg");
    txt.innerHTML = p;
    return false;
}

43. By Patrik KΓ€pyaho

Made by Patrik KΓ€pyaho. Very basic JavaScript password generator program. Enter password length and click generate. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <input placeholder="Password length" id="length"></input>
        <textarea placeholder="Click the button to generate a password." id="pwd"></textarea>
        <button onclick="generatePassword(document.getElementById('length').value)">Generate password</input>
    </body>
</html>



------CSS-------


textarea {
    height: 80px;
    float: left;
    clear: both;
    margin-bottom: 5px;
}
input {
    float: left;
    clear: both;
    margin-bottom: 5px;
}
button {
    float: left;
    clear: both;
}



----JS----


function generatePassword(length) {
    password = "";
    for(i = 0;i <= length;i++) {
        password += String.fromCharCode(Math.random() * (127 - 33) + 33);
        if(i == length){
            document.getElementById("pwd").value = password;
        }
    }
}

44. By Sil GR

Made by Sil GR. Enter password length and click on generate. The program also has the option to check password strength. Source

<!DOCTYPE html>

<!--Sometimes unexpectingly produces sorter password, perhaps because of the symbols. Just click again generator!-->

<html>

<head>
    <meta charset="UTF-8">

    <title>Password Generator</title>

</head>

<body style="background-color:white;">

    <h1 style="color: red">Password Generator</h1>
    <p>Number of characters: <input id="num" type='number' min=8 max=32 /><button type="button" onclick="generator()">Generator!</button></p>

    <p style="color:gray">Password: <span id="pass" style="color:black"></span></p>
    <br />
    <p style="color:red">Check the strength of your password:</p>
    <input id="userpass" type="text">
    <button type="button" onclick="checkPass()">Check strength!</button>
    <br />
    <p id="myanswer" style="background-color: white)"></p>
    <table id="mytable">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <p id="test"></p>
    <br />
    <br /><br />
</body>

</html>



-------CSS-------


table {
display: none;
}
        
td {
width: 15px;
height: 5px;
background-color: lightgrey;
}


-------JS---------


        function generator() {
            var lowercase = "abcdefghijklmnopqrstuwxyz";
            var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            var numbers = "0123456789";
            var symbols = '\'!"#$%&()*+,-./:;<=>[email protected][]^_`{|}~';



            var num = document.getElementById('num').value;

            var password = "";
            for (i = 0; i < num; i++) {
                var rand1 = Math.floor(Math.random() * 23);
                var rand2 = Math.floor(Math.random() * 23);
                var rand3 = Math.floor(Math.random() * 10);
                var rand4 = Math.floor(Math.random() * 30);
                var rand5 = Math.floor(Math.random() * 4);
                var rands = [lowercase[rand1], uppercase[rand2], numbers[rand3], symbols[rand4]];
                password += rands[rand5];

            }

            document.getElementById('pass').innerHTML = password;
        }

        function checkPass() {
            var userpass = document.getElementById("userpass").value;
            var myanswer = document.getElementById("myanswer");
            var pattern1 = /[a-z]/g;
            var pattern2 = /[A-Z]/g;
            var pattern3 = /[0-9]/g;

            var count = 0;
            var length = userpass.length;
            var pattern4 = /[-!\"#\\\$%&()\'\*\+,.\/\:\;\<\=>[email protected][]\^_`{\|}~]/g;
            if (userpass.match(pattern1 )!== null) {
                count += 1;
            }
            if (userpass.match(pattern2 )!== null) {
                count += 1;
            }
            if (userpass.match(pattern3 )!== null) {
                count += 1;
            }
            if (userpass.match(pattern4 )!== null) {
                count += 1;
            }
            if (length > 8 && length <= 10) {
                count += 0;
            };
            if (length > 10 && length <= 20) {
                count += 1;
            };
            if (length > 20 && length <= 32) {
                count += 2;
            };
            document.getElementById('test').innerHTML=count;

            //myanswer.innerHTML = count;
            var td = document.getElementById('mytable').getElementsByTagName("tr")[0].getElementsByTagName('td');
            if (count === 1) {
                document.getElementById('mytable').style.display = "inline";
                td[0].style.backgroundColor = "lightgreen";
                td[1].style.backgroundColor = "lightgrey";
                td[2].style.backgroundColor = "lightgrey";
                td[3].style.backgroundColor = "lightgrey";
                td[4].style.backgroundColor = "lightgrey";
                td[5].style.backgroundColor = "lightgrey";
                myanswer.innerHTML = "Very weak password!"
            }
            if (count === 2) {
                document.getElementById('mytable').style.display = "inline";
                td[0].style.backgroundColor = "lightgreen";
                td[1].style.backgroundColor = "lightgreen";
                td[2].style.backgroundColor = "lightgrey";
                td[3].style.backgroundColor = "lightgrey";
                td[4].style.backgroundColor = "lightgrey";
                td[5].style.backgroundColor = "lightgrey";
                myanswer.innerHTML = "Weak password!"
            }
            if (count === 3) {
                document.getElementById('mytable').style.display = "inline";
                td[0].style.backgroundColor = "lightgreen";
                td[1].style.backgroundColor = "lightgreen";
                td[2].style.backgroundColor = "lightgreen";
                td[3].style.backgroundColor = "lightgrey";
                td[4].style.backgroundColor = "lightgrey";
                td[5].style.backgroundColor = "lightgrey";
                myanswer.innerHTML = "Medium password!"
            }
            if (count === 4) {
                document.getElementById('mytable').style.display = "inline";
                td[0].style.backgroundColor = "lightgreen";
                td[1].style.backgroundColor = "lightgreen";
                td[2].style.backgroundColor = "lightgreen";
                td[3].style.backgroundColor = "lightgreen";
                td[4].style.backgroundColor = "lightgrey";
                td[5].style.backgroundColor = "lightgrey";
                myanswer.innerHTML = "Strong enough password!"
            }
            if (count === 5) {
                document.getElementById('mytable').style.display = "inline";
                td[0].style.backgroundColor = "lightgreen";
                td[1].style.backgroundColor = "lightgreen";
                td[2].style.backgroundColor = "lightgreen";
                td[3].style.backgroundColor = "lightgreen";
                td[4].style.backgroundColor = "lightgreen";
                td[5].style.backgroundColor = "lightgrey";
                myanswer.innerHTML = "Strong password!"
            }
            if (count === 6) {
                document.getElementById('mytable').style.display = "inline";
                td[0].style.backgroundColor = "lightgreen";
                td[1].style.backgroundColor = "lightgreen";
                td[2].style.backgroundColor = "lightgreen";
                td[3].style.backgroundColor = "lightgreen";
                td[4].style.backgroundColor = "lightgreen";
                td[5].style.backgroundColor = "lightgreen";
                myanswer.innerHTML = "Very strong password!"
            }
        }

45. By Sandakan Nipunajith

Made by Sandakan Nipunajith. Enter password length between 5 – 32 to generate a random password. Source

                                     
<!DOCTYPE html>
<html>
    <head>
        <title>Password Generator</title>
    </head>
    <body onload=passwordGenerator()>
        
    </body>
</html>



------CSS-------


body {
    background: linear-gradient(to left, #00ccff 0%, #ff66cc 100%);
}


-------JS-------


function passwordGenerator() {
var len = prompt("Enter the maximum length for your generating password.. \nMax : 32\nMin : 5 ");

if(len==""||len==null){
    alert("You entered nothing for the length column..!");
    return passwordGenerator();
}else if(len < 5 || len > 32){
    alert("Maximum or Minimum length overreached..!");
    return passwordGenerator();
    }else{
var arr = ["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","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","1","2","3","4","5","6","7","8","9","0","!","@","#","$","%","^","&","*","(",")","\\","\/","\=","\-","\_","\+","\:","\;","\'","\"","\?","\<","\,","\>","\{","\|","\}","\[","\]"];

var output = "";
for(var i=0; i<parseInt(len); i++) {
    output += arr[Math.floor(Math.random()*arr.length)];
    
    }
    alert(output);
    var conf = confirm("Do you need to generate another password ?");
    if(conf){
       return passwordGenerator(); 
       }
     
     }
   
   }

46. By Daniel FernΓ‘ndez OcaΓ±a

Made by Daniel FernΓ‘ndez OcaΓ±a. Enter any number in the input box then click on the send button, the program will generate a random password of random length. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Password Generator</title>
    </head>
    <body>
    <div id="inputNum">
    <h1><ins>PASSWORD GENERATOR</ins></h1>
       Enter a number <input type="tel" id="number" name="number"></input>  <button onclick="CreatePassword()" id="sendBut">Send</button>
       </div>
       <div>
        <p id="passwordD"></p>
       </div>
       
      <script>
      </script> 
    </body>
</html>



-------CSS--------


           * {
    background:#222;
    padding:0;
    margin:0;
    color:white;
    word-wrap:break-word;
}

h1{
    text-align:center;
    padding-bottom:20px;
}

#inputNum{
    text-align:center;
    padding-top:20px;
}


input,button {
   background:rgba(130,130,130,0.5); 
   width:50px;
}

#passwordD{
    font-size:30px;
    text-align:center;
    padding-top:20px;
    padding-left:15px;
    padding-right:20px;
    padding-bottom:15px;
}
.password{
    color:#CCC;
    font-size:20px;
} 



------JS--------



var cPassword = document.getElementById ("passwordD");
var pass ="";
var password = "";
//= document.getElementById ("passwordP");
var number=document.getElementById("number");
var pChar=['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','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','1', '2', '3', '4', '5', '6', '7', '8', '9'];


function CreatePassword(){
    var passLenght = number.value;
    for(var i = 0; i < passLenght; i++){
        var rnd = Math.floor(Math.random()*pChar.length);
        password = pass + pChar[rnd];
        pass = password;
    }
    // cPassword.style.display = "normal";
    
    var x=0;
var text="Your password is: " + password;
var writtenText = "";
    
   setInterval(function (){
  if(writtenText.length < text.length ){
    writtenText += text[x];
    cPassword.innerHTML = writtenText;
    x++;}
} , 100);
}

47. By Beasty

Basic JavaScript password generator by Beasty. Enter password length and click on generate, the program will generate it and also show its bytes. Source

<!DOCTYPE html>
<html>
	<head>
		<title>Password generator</title>
	</head>
	<body>
		<form class="Generator-Form">
            <header class="Generator-Form-Header">
                <h1 class="Generator-Form-Header-Title">Password generator</h1>
            </header>
            <div class="Generator-Form-Input">
                <input type="text" id="PasswordLengthBox" placeholder="Put password length here" class="Generator-Form-Input-Box">
                <input type="text" id="GeneratedBox" placeholder="Generated" disabled class="Generator-Form-Input-Box">
                <input type="text" id="GeneratedBytes" placeholder="Bytes" disabled class="Generator-Form-Input-Box">
                <input type="button" class="Generator-Form-Input-Box" onclick="Generate()" value="Generate">
            </div>
        </form>
	</body>
</html>



--------CSS--------



.Generator-Form {
    margin: 0 auto;
    display: block;
    border-radius: 5px;
    height: 205px;
    width: 280px;
    box-shadow: 0px 0px 3px 0px black;
    background-color: rgb(235, 235, 235);
}

.Generator-Form-Header {
    width: 100%;
    height: auto;
    text-align: center;
}

.Generator-Form-Header-Title {
    color: black;
    font-size: 28px;
    text-shadow: 0px 2px grey;
}

.Generator-Form-Input {
    text-align: center;
}

.Generator-Form-Input-Box {
    outline: none;
    height: 30px;
    width: 250px;
    margin: 2px;
    border-radius: 3px;
    background-color: rgb(222, 222, 222);
    border: none;
}

.Checkbox {
    position: relative;
    left: 7px;
    width: 25px;
    height: 25px;
    float: left;
}

.Checkbox-Div h2 {
    display: flex;
    position: relative;
    top: 7px;
    left: 2px;
    font-size: 16px;
}

.Generator-Form-Input-Generate-Button {
    transition: 1s;
}

.Generator-Form-Input-Generate-Button:hover {
    transition: 1s;
    transform: scale(1.04);
    font-size: 15px;
}

.Checkbox {
    margin: .4rem;
}


-------JS--------


function ConvertToByte(str){
    if (typeof(str) == "string"){
        var Converted = "";
        var bytes = new Uint8Array(str.length);
        for (var StringLength = 0; StringLength <= str.length; StringLength++){
            bytes[StringLength] = str.charCodeAt(StringLength);
            Converted = Converted + " " + bytes[StringLength];
        }
        return Converted;
    }
}

function UnconvertFromByte(bytes){
    var split = bytes.split(" ");
    var converted = "";
    for (var Index = 0; Index <= split.length; Index++){
        var DecodedVar = String.fromCharCode(split[Index]);
        converted = converted + DecodedVar;
    }
    return converted;
}

function Random(Min, Max) {
    return Math.floor(Math.random() * (Max - Min + 1)) + Min;
}

function Generate(){
    var Length = document.getElementById("PasswordLengthBox").value;
    if (Length == "0" | Length == ""){
        Length = 10
    }
    var Letters = 'abcdefghijklmnopqrstuvwxyz1234567890!"$%^&*(){}[];@#~,.<>-_+=Β£';
    var Generated = "";
    for (var Index = 1; Index <= Length; Index++){
        var LettersPosition = Random(1, Letters.length);
        var AddedLetter = Letters.substring((LettersPosition - 1), LettersPosition);
        Generated = Generated + AddedLetter;
    }
    var TotalBytes = ConvertToByte(Generated);
    document.getElementById("GeneratedBox").value = Generated
    document.getElementById("GeneratedBytes").value = TotalBytes.replace("undefined", "")
}

48. By Martin Sidorov

Made by Martin Sidorov. Enter the password length and select whether you want numbers and symbols to be included or not, after that click generate. Source

<!DOCTYPE html>
<html>
    <head>
        <title>Password Generator</title>
        <meta charset="utf-8">
    </head>
    <body>
        
    <h1>Password Generator</h1>
    <hr/>
    <form>
    <div id="info">
        <b>Password Length:</b>
<input type="number" id="numLength" name="numLength" value="8"/>
        <br/><br/>
        <b> Do you want numbers in password?<b/><input type="checkbox" name="numbers" id="numbers"/>
        <br/><br/>
        <b> Do you want special symbols in password?</b>
<input type="checkbox" name="symbols" id="symbols"/>
        </div>
    </form>
    <br/>
    
    <center>
    <button name="button" id="button" onclick="generate()"><b>Generate</b></button>
    </center>
    
    <div id="password"></div>
    </body>
</html>



-----CSS-------


body {
    background-color:orange;
}
#numLength{
    width:80px;
    height:15px;
}
#button{
    width:200px;
    height:50px;
    background-color:red;
    text-align:center;
    margin-top:30px;
    border-style:solid;
    border-color:black;
}
#info{
    border-style:groove;
    border-width:2px;
    border-radius:10px;
    border-color:green;
    margin-top:50px;
    background-color:#ff5733;
    height:300px;
}


------JS--------


function generate(){
var numberChars = document.getElementById('numbers');
var symbolsChars = document.getElementById('symbols');
if(numberChars.checked){
var chars = "0987654321qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
}else if(symbolsChars.checked){
    var chars = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM+=%_|<>{}[][email protected]#$/^&*()\`~-:;,?";
}else if(numberChars.checked && symbolsChars.checked){
    var chars = "0987654321qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM+=%_|<>{}[][email protected]#$/^&*()\`~-:;,?";
}else{
    var chars = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
}
var string_length = document.getElementById('numLength').value;

var randomstring = ''; 
for (var i=0; i<string_length; i++) { 
var rnum = Math.floor(Math.random() * chars.length);
randomstring += chars.substring(rnum,rnum+1);
}
document.write(randomstring);
}

49. By Apongpoh Gilbert

Made by Apongpoh Gilbert. Simple password generator made using JavaScript. Click generate to generate a random password, the password will be hidden by default which you can unhide by clicking the eye icon. You can also copy it by clicking the copy button. Source

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Random Password Generator</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
  <div class="body">
    <div class="box">
      <h2>Random Password Generator</h2> <input type="password" name="" placeholder="Create password" id="password" readonly>
      <i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
      <table>
        <th><div id="button" class="btn1"onclick="genPassword()">
          Generate
        </div>
        </th> <th><a id="button" class="btn2" onclick="copyPassword()">Copy</a></th>
      </table>
    </div>
  </div>
  
  <script>
      {
const togglePassword = document.querySelector('#togglePassword');

const password = document.querySelector('#password');

togglePassword.addEventListener('click', function (e) {

let type = password.getAttribute('type') === 'password' ? 'text' : 'password';

password.setAttribute('type', type);

this.classList.toggle('fa-eye-slash');

});
}

  </script>
</body>
</html>



------CSS-------


body {
     background-color: #000000;
     justify-content: center;
     align-items: center;
     display: flex;
  }

.box {
     background-color: #000000;
     padding-top: 30px;
     padding: 30px;
  }

.box h2 {
     margin-bottom: 40px;
     text-align: center;
     font-size: 26px;
     color: #015a96;
     font-family: sans-serif;
  }

input {
     padding: 20px;
     user-select: none;
     height: 40px;
     width: 400px;
     border-radius: 6px;
     border: none;
     border: 2px solid rgb(13, 152, 245);
     outline: none;
     font-size: 22px;
  }

input::placeholder {
     font-size: 23px;
  }
    
#button {
     font-family: sans-serif;
     font-size: 15px;
     margin-top: 40px;
     border: 2px solid rgb(20, 139, 250);
     width: 155px;
     height: 50px;
     text-align: center;
     background-color: #0c81ee;
     display: flex;
     color: rgb(255, 255, 255);
     justify-content: center;
     align-items: center;
     cursor: pointer;
     border-radius: 7px;
  }

.btn2 {
     margin-left: 70px
  }

#button:hover {
     color: white;
     background-color: black;
  }

* {
     margin: 0px;
     padding: 0px;
     user-select: none;
     box-sizing: border-box;
 }



------JS-------


var password = document.getElementById("password");
  
  function genPassword() {
    const chars = "[email protected]#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    
    var passwordLength = 12;
    var password = "";
    
    for (var i = 0; i <= passwordLength; i++) {
      var randomNumber = Math.floor(Math.random() * chars.length);
      password += chars.substring(randomNumber, randomNumber +1);
    }
    document.getElementById("password").value = password;
  }
  
  function copyPassword() {
    var copyText = document.getElementById("password"); copyText.select(); copyText.setSelectionRange(0, 999); document.execCommand("copy");
  }