<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Project #18 - The Password Generator App</title>
  </head>
  <body>
    <div class="container">
      <h1>비밀번호 생성기</h1>
      <h3 id="password-display">비밀번호</h3>
      <form id="password-form">
        <label for="number-char-amount">글자 수</label>
        <div>
          <input type="range" id="range-char" min="1" max="100" value="1" />
          <input type="number" id="number-char" min="1" max="100" value="1" />
        </div>

        <label for="numbers">숫자</label>
        <input type="checkbox" id="numbers" />

        <label for="symbols">기호</label>
        <input type="checkbox" id="symbols" />

        <label for="uppercase">대문자</label>
        <input type="checkbox" id="uppercase" />

        <input type="submit" value="Generate Password" />
      </form>
    </div>
    <!-- ----------------------- -->
    <!-- JS File -->
    <script src="app.js"></script>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(160, 52, 214);
  color: rgb(117, 218, 249);
}

h1 {
  font-size: 70px;
  margin-bottom: 50px;
  font-weight: 100;
}

h3 {
  background-color: rgb(168, 165, 228);
  color: black;
  padding: 50px 20px;
  font-size: 25px;
  font-weight: 100;
  margin-bottom: 50px;
  height: 2rem;
  width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all;
}

.container {
  width: 80%;
  margin: 80px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

form {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-row-gap: 30px;
  grid-column-gap: 50px;
  justify-content: center;
  align-items: center;
}

label {
  font-size: 25px;
}

form > div {
  display: flex;
  align-items: center;
}

#range-char {
  width: 200px;
}

form > div input[type="number"] {
  width: 75px;
  margin-left: 15px;
  padding: 5px 10px;
  outline: none;
}

input[type="checkbox"] {
  height: 25px;
  width: 25px;
  place-self: center;
  border-radius: none;
}

input[type="submit"] {
  grid-column: 1 / 3;
  background: none;
  border: none;
  outline: none;
  background-color: rgb(41, 13, 78);
  padding: 20px;
  color: white;
  font-size: 25px;
  cursor: pointer;
}

const rangeCharacters = document.getElementById("range-char");
const numberCharacters = document.getElementById("number-char");
const formContainer = document.querySelector("#password-form");
const numbersEl = document.querySelector("#numbers");
const symbolsEl = document.querySelector("#symbols");
const uppercaseEl = document.querySelector("#uppercase");
const passwordDisplay = document.querySelector("#password-display");

/* 문자 코드를 배열에 넣기.
아스키 코드 시트-> https://www.petefreitag.com/cheatsheets/ascii-codes/
*/
const lowercaseCharCodes = arrayLowToHigh(97, 122);//알파벳
const numberCharCodes = arrayLowToHigh(48, 57);//숫자
const symbolCharCodes = arrayLowToHigh(33, 47)//기호
   //concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. 
   //https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
  .concat(58, 64)//계산 부호
  .concat(91, 96)//문장 부호
  .concat(123.126);
const uppercaseCharCodes = arrayLowToHigh(65, 90);//대문자

// 범위와 숫자 입력을 동기화하기.
rangeCharacters.addEventListener("input", syncCharAmount);
numberCharacters.addEventListener("input", syncCharAmount);

function syncCharAmount(e) {
  const valueAmount = e.target.value;
  rangeCharacters.value = valueAmount;
  numberCharacters.value = valueAmount;
}

// Generating the password when the form is submitted
formContainer.addEventListener("submit", function (e) {
  e.preventDefault();
  const characterAmount = numberCharacters.value; // ok
  const includeUppercase = uppercaseEl.checked;
  const includeNumbers = numbersEl.checked;
  const includeSymbols = symbolsEl.checked;

  const password = generatePassword(
    characterAmount,
    includeUppercase,
    includeNumbers,
    includeSymbols
  );

  passwordDisplay.innerText = password;
});

function generatePassword(
  characterAmount,
  includeUppercase,
  includeNumbers,
  includeSymbols
) {
  // console.log(lowercaseCharCodes);
  let charCodes = lowercaseCharCodes;
  if (includeNumbers) charCodes = charCodes.concat(numberCharCodes);
  if (includeSymbols) charCodes = charCodes.concat(symbolCharCodes);
  if (includeUppercase) charCodes = charCodes.concat(uppercaseCharCodes);

  const passwordCharacters = [];
  for (let h = 0; h < characterAmount; h++) {
    let characterCodes =
      charCodes[Math.floor(Math.random() * charCodes.length)];
    passwordCharacters.push(String.fromCharCode(characterCodes));
  }

  // console.log(passwordCharacters);
  return passwordCharacters.join("");
}

// Character Codes Looping Function
//코드 범위 안에 있는 문자들을 배열에 넣기.
function arrayLowToHigh(low, high) {
  let array = [];

  for (let i = low; i <= high; i++) {
    array.push(i);
  }
  return array;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.