パスワード生成ウェブサイトを構築する-CSSチュートリアル-php.cn

パスワード生成ウェブサイトを構築する

王林

リリース： 2024-08-25 20:30:33

オリジナル

971 人が閲覧しました

Build a Password Generator Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、パスワードジェネレーターを紹介できることを嬉しく思います。このツールは、安全でランダムなパスワードを簡単に作成できるように設計されています。オンラインアカウントに強力なパスワードが必要な場合でも、JavaScript スキルを練習したい場合でも、このパスワードジェネレーターはツールキットに追加すると便利です。

プロジェクト概要

パスワードジェネレーターは、ユーザーがさまざまな構成でパスワードを生成できる Web ベースのアプリケーションです。パスワードの長さをカスタマイズし、小文字、大文字、数字、記号などの特定の文字タイプを含めたり除外したりできます。このプロジェクトでは、HTML と CSS で構築されたクリーンでユーザーフレンドリーなインターフェイスと組み合わせて、JavaScript を使用して動的なパスワードジェネレーターを構築する方法を紹介します。

特徴

カスタマイズ可能なパスワードの長さ: スライダーを使用して、生成されるパスワードの長さを調整します。
文字タイプの選択: パスワードに含める文字のタイプ (小文字、大文字、数字、記号) を選択します。
生成してコピー: ランダムなパスワードを生成し、クリップボードに簡単にコピーします。

使用されている技術

HTML: パスワードジェネレーターの構造とレイアウトを提供します。
CSS: インターフェイスのスタイルを設定し、モダンで応答性の高いデザインを保証します。
JavaScript: ユーザー操作やパスワードのコピーなど、パスワード生成ロジックを処理します。

プロジェクトの構造

プロジェクト構造の概要は次のとおりです:

Password-Generator/
├── index.html
├── style.css
└── script.js

ログイン後にコピー

index.html: パスワードジェネレーターの HTML 構造が含まれます。
style.css: 魅力的でレスポンシブなデザインを作成するための CSS スタイルが含まれています。
script.js: パスワード生成機能とユーザー操作を管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

リポジトリのクローンを作成します:
```
git clone https://github.com/abhishekgurjar-in/Password-Generator.git
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd Password-Generator
```
ログイン後にコピー
プロジェクトを実行します:
- パスワードジェネレーターを使用するには、Web ブラウザでindex.html ファイルを開きます。

使用法

Web ブラウザで Web サイトを開きます。
スライダーを使用してパスワードの長さを調整します。
含める文字の種類を選択または選択解除します。
[パスワードを生成] ボタンをクリックしてパスワードを生成します。
コピーアイコンをクリックして、パスワードをクリップボードにコピーします。

コードの説明

HTML

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" />
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <script src="script.js" defer></script>
    <title>Password Generator</title>
  </head>
  <body>
    <div class="container">
      <h1>Password Generator</h1>

      <div class="inputBox">
        <input type="text" class="passBox" id="passBox" disabled />
        <span class="material-icons" id="copyIcon">content_copy</span>
      </div>

      <input type="range" min="1" max="30" value="8" id="inputSlider" />

      <div class="row">
        <p>Password Length</p>
        <span id="sliderValue"></span>
      </div>

      <div class="row">
        <label for="lowercase">Include Lowercase Letters (a-z)</label>
        <input type="checkbox" name="lowercase" id="lowercase" checked/>
      </div>

      <div class="row">
        <label for="uppercase">Include Uppercase Letters (A-Z)</label>
        <input type="checkbox" name="uppercase" id="uppercase" checked/>
      </div>

      <div class="row">
        <label for="numbers">Include Numbers (0-9)</label>
        <input type="checkbox" name="numbers" id="numbers" checked/>
      </div>

      <div class="row">
        <label for="symbols">Include Symbols (@-*)</label>
        <input type="checkbox" name="symbols" id="symbols" checked/>
      </div>

      <button type="button" class="genBtn" id="genBtn">
        Generate Password
      </button>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

ログイン後にコピー

CSS

style.css ファイルはパスワードジェネレーターのスタイルを設定し、視覚的に魅力的で応答性の高いものにします。以下にいくつかの主要なスタイルを示します:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  max-width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
  font-weight: 600;
  flex-direction: column;
}

.container {
  border: 0.5px solid #fff;
  border-radius: 10px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  background: transparent;
  box-shadow: 8px 8px 4px #909090, 8px 8px 0px #575757;
}

.container h1 {
  font-size: 1.4rem;
  margin-block: 8px;
}

.inputBox {
  position: relative;
}

.inputBox span {
  position: absolute;
  top: 16px;
  right: 6px;
  color: #000;
  font-size: 28px;
  cursor: pointer;
  z-index: 2;
}

.passBox {
  background-color: #fff;
  border: none;
  outline: none;
  padding: 10px;
  width: 300px;
  border-radius: 4px;
  font-size: 20px;
  margin-block: 8px;
  text-overflow: ellipsis;
}

.row {
  display: flex;
  margin-block: 8px;
}

.row p, .row label {
  flex-basis: 100%;
  font-size: 18px;
}

.row input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.genBtn {
  border: none;
  outline: none;
  background-color: #2c619e;
  padding: 12px 24px;
  color: #fff;
  font-size: 18px;
  margin-block: 8px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px;
}

.genBtn:hover {
  background-color: #0066ff;
}

.footer {
  color: white;
  margin-top: 150px;
  text-align: center;
}

.footer p {
  font-size: 16px;
  font-weight: 200;
}

ログイン後にコピー

JavaScript

script.js ファイルには、パスワードの生成、ユーザー操作の管理、パスワードをクリップボードにコピーするためのロジックが含まれています。スニペットは次のとおりです:

let inputSlider = document.getElementById("inputSlider");
let sliderValue = document.getElementById("sliderValue");
let passBox = document.getElementById("passBox");
let lowercase = document.getElementById("lowercase");
let uppercase = document.getElementById("uppercase");
let numbers = document.getElementById("numbers");
let symbols = document.getElementById("symbols");
let genBtn = document.getElementById("genBtn");
let copyIcon = document.getElementById("copyIcon");

// Showing input slider value 
sliderValue.textContent = inputSlider.value;
inputSlider.addEventListener("input", () => {
  sliderValue.textContent = inputSlider.value;
});

genBtn.addEventListener("click", () => {
  passBox.value = generatePassword();
});

let lowerChars = "abcdefghijklmnopqrstuvwxyz";
let upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let allNumbers = "0123456789";
let allSymbols = "~!@#$%^&*";

// Function to generate Password
function generatePassword() {
  let genPassword = "";
  let allChars = "";

  allChars += lowercase.checked ? lowerChars : "";
  allChars += uppercase.checked ? upperChars : "";
  allChars += numbers.checked ? allNumbers : "";
  allChars += symbols.checked ? allSymbols : "";

  if (allChars === "") {
    return genPassword;
  }

  let i = 1;
  while (i <= inputSlider.value) {
    genPassword += allChars.charAt(Math.floor(Math.random() * allChars.length));
    i++;
  }

  return genPassword;
}

copyIcon.addEventListener("click", () => {
  if (passBox.value !== "") {
    navigator.clipboard.writeText(passBox.value);
    copyIcon.innerText = "check";
    copyIcon.title = "Password Copied";

    setTimeout(() => {
      copyIcon.innerHTML = "content_copy";
      copy

Icon.title = "";
    }, 3000);
  }
});

ログイン後にコピー