Vanilla JS, Html 및 css로 암호 생성기 만들기

11779 단어 beginnershtmljavascripttutorial
참고할 만한 📝
  • 이 문서에서는 기본 html , Css 및 Javascript 을 이미 알고 있다고 가정합니다.

    • 시작하자
  • 먼저 좋아하는 코드 편집기를 엽니다...Vs 코드를 사용합니다. 익숙한 것을 사용할 수 있습니다
    • .
  • 우리가 호출할 프로젝트 이름으로 폴더를 생성합니다.
    • password-generator .
  • 폴더를 열고 마크업을 위한 index.html 파일을 생성합니다.
  • shift key + !의 emmet 키를 사용하면 다음과 같은 결과가 나타납니다.

    • <!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>Document</title>
</head>
<body>

</body>
</html>


    body 태그에서 다음과 같은 페이지의 골격을 만듭니다.

        <div class="container">
      <h2>Password Generator</h2>
      <div class="result-container">
        <span id="result"></span>
        <button class="btn" id="clipboard">
          <i class="far fa-clipboard"></i>
        </button>
      </div>
      <div class="settings">
        <div class="setting">
          <label>Password length</label>
          <input type="number" id="length" min="4" max="20" value="20" />
        </div>
        <div class="setting">
          <label>Include uppercase letters</label>
          <input type="checkbox" id="uppercase" checked />
        </div>
        <div class="setting">
          <label>Include lowercase letters</label>
          <input type="checkbox" id="lowercase" checked />
        </div>
        <div class="setting">
          <label>Include numbers</label>
          <input type="checkbox" id="numbers" checked />
        </div>
        <div class="setting">
          <label>Include symbols</label>
          <input type="checkbox" id="symbols" checked />
        </div>
      </div>
      <button class="btn btn-large" id="generate">Generate password</button>
    </div>


  • 그런 다음 스타일링을 위해 CSS로 이동합니다
    • .
  • 새 파일을 만들고 이름을 지정합니다. style.css
  • 이제 <link rel="stylesheet" href="style.css" />에 <head> tag를 첨부하여 CSS 파일을 html 페이지에 연결합니다.

    • 이제 CSS 상자와 본문 속성을 설정합니다.

    * {
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(110deg, #f01313, rgb(97, 167, 18));
    color: #fff;
    display: flex;
    font-family: 'Varela Round', sans-serif;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-height: 100vh;
    overflow: hidden;
}


  • 선형 그래디언트를 사용했습니다. 색상을 자유롭게 조절할 수 있습니다.
  • p , h 및 input 태그를 원하는 스타일로 설정합니다.

    • p {
    margin: 5px 0;
}

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

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


    이제 나머지 스타일링은

    .container {
    background-image: linear-gradient(110deg, rgb(58, 18, 167), #d74242);
    box-shadow: 0px 5px 10px rgba(227, 212, 212, 0.338);
    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: #4a244a;
}

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


  • 스타일링이 끝났습니다... 더 많은 디자인 아이디어를 시작할 수 있었습니다
    • .

    이제 우리는 Javascript로 이동합니다.
  • app.js라는 이름의 파일을 만들고 다음과 같이 닫는 </body> 및 </html> 태그 사이의 페이지 하단에 있는 html에 연결합니다.

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


  • app.js 파일에서 먼저 html의 ID 이름으로 요소를 가져와서 DOM을 조작합니다.

    • 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) {
        typesArr.forEach(type => {
            const funcName = Object.keys(type)[0];
            generatedPassword += randomFunc[funcName]();
        });
    }

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

    return finalPassword;
}

function getRandomLower() {
    return String.fromCharCode(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 = '!@#$%^&*(){}[]=<>/,.'
    return symbols[Math.floor(Math.random() * symbols.length)];
}



  • 먼저 클립보드와 버튼에 대한 이벤트 리스너를 만듭니다... 클립보드에 멋진 글꼴 코드를 첨부하는 것을 잊었습니다.
    여기 <스크립트
    src="https://kit.fontawesome.com/db3fa2690b.js "
    크로스오리진="익명"

    to be attached before or after the other <script> tag in the html


  • 이제 클립보드

    • 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');
});


    그런 다음 이벤트 리스너를 생성 버튼에 추가합니다. 여기서는 값이 있는 const 변수를 생성했습니다.
  • 암호 길이를 확인합니다
    • .
  • 값이 lowercaseEl인 uppercaseEl , numbersEl , symbolsEl , checked 요소에 체크 표시를 합니다.

    • 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) {
        typesArr.forEach(type => {
            const funcName = Object.keys(type)[0];
            generatedPassword += randomFunc[funcName]();
        });
    }

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

    return finalPassword;
}


    이제 문자 코드 인코딩에서 난수 생성

    function getRandomLower() {
    return String.fromCharCode(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 = '!@#$%^&*(){}[]=<>/,.'
    return symbols[Math.floor(Math.random() * symbols.length)];
}


  • 이제 맨 위로 돌아가 랜덤 함수를 저장하는 새 변수 개체를 만들어야 합니다.

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


    만세 🥳
  • 이제 암호 생성기를 성공적으로 구축했습니다... 이것은 코딩 여정의 첫 번째 프로젝트 중 하나입니다.
    그래서 여기에 공유하기로 했습니다

    • GitHub에서 소스를 확인하세요: https://github.com/JasonOboti/Password-Generator

    당신이 따라했다면 당신은 다음과 같은 것이 있어야합니다

    --packages 플래그를 사용하여 Amazon EMR Serverless를 실행하는 방법
    NLTK를 사용하는 단어 빈도 카운터

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage