자바 스크립트의 비밀번호 생성기

3226 단어 csswebdevhtmljavascript
이 게시물에서는 자바 스크립트에서 암호 생성기를 만들 것입니다.

uuid 설치
npm i uuid
index.html, style.css, index.js라는 파일을 만듭니다.

index.html 전체 소스 코드:

<!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>Password Genenrator</title>
  </head>
  <body>
    <h1>Password Generator</h1>
    <input
      type="text"
      id="keyword"
      placeholder="Enter a keyword"
      maxlength="30"
    />
    <button id="generate">Generate Password</button>
    <h3 id="password">
      When you enter a keyword and click the button the password will be
      generated here
    </h3>
    <script src="index.js"></script>
  </body>
</html>


style.css 전체 소스 코드:

* {
  padding: 0px;
  margin: 0px;
}
h1 {
  text-align: center;
  color: blueviolet;
  font-family: cursive;
}
#keyword {
  width: 1000px;
  height: 35px;
  text-align: center;
  border: 3px solid #111;
  font-family: 'Courier New', Courier, monospace;
  background-color: #333;
  border-radius: 10px;
  color: white;
  margin-left: 150px;
  margin-top: 5px;
}
#generate {
  margin-top: 20px;
  display: block;
  margin-left: 580px;
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}
#password {
  /*margin-left: 0px;
  margin-right: 0px;*/
  margin-top: 50px;
  text-align: center;
  padding: 20px;
  color: #333;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: medium;
  background-color: #f2f2f2;
}


index.js 전체 소스 코드:

import { v4 as uuidV4 } from 'uuid';
import './style.css';
const keyword = document.getElementById('keyword');
const generate = document.getElementById('generate');
const password = document.getElementById('password');

generate.addEventListener('click', function () {
  if (keyword.value == '') {
    password.innerText = 'Keyword is needed';
  } else {
    const text = `${keyword.value}`;
    const modifiedText = text.replace(' ', '-');
    password.innerText = modifiedText + '-' + uuidV4();
  }
});

document.addEventListener('dblclick', function () {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
});


라이브 데모: https://passwordgeneratorrishikesh.stackblitz.io/
소스 코드: https://stackblitz.com/edit/passwordgeneratorrishikesh

고맙습니다!!!
Linux에서 Bun 명령을 찾을 수 없음
PHP 8의 디자인 패턴: 프로토타입

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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