ホームページ >ウェブフロントエンド >CSSチュートリアル >パスワード生成ウェブサイトを構築する

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

王林オリジナル: 2024-08-25 20:30:331137ブラウズ

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 ファイルは、入力フィールド、コントロール、表示領域などのパスワードジェネレーターの構造を定義します。スニペットは次のとおりです:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    acd8feeb3a0ea7477b979779de32785a
    26faf3d1af674280d03ba217d87e9421
    af75c476cdb7e6c074ca6da9b40841de
    d8503bdefe6992dd59b651156c1a80eb
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
    b2386ffb911b14667cb8f0f91ea547a7Password Generator6e916e0f7d1e588d4f442bf645aedb2f
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
      4a249f0d628e2318394fd9b75b4636b1Password Generator473f0a7621bec819994bb5020d29372a

      34a25c77a2e9da798136e01b207e55d8
        9f296658183c8dc217a6dd649074b65b
        b447d4e20918108d1f227b35d3f83b0ccontent_copy54bdf357c58b8a65c66d7c19c8e4d114
      16b28748ea4df4d9c2150843fecfba68

      2099bb55d2af935eea656fe56e182519

      39bbc163833ae4e036fa5108a4263823
        e388a4556c0f65e1904146cc1a846beePassword Length94b3e26ee717c64999d7867364b1b4a3
        98f5e630a88a7d7159f08c0a14a2752d54bdf357c58b8a65c66d7c19c8e4d114
      16b28748ea4df4d9c2150843fecfba68

      39bbc163833ae4e036fa5108a4263823
        e7dc9bb71ade5e1b977b4fc7169140c4Include Lowercase Letters (a-z)8c1ecd4bb896b2264e0711597d40766c
        a8b444646b004d6a82c0efc74a0796e3
      16b28748ea4df4d9c2150843fecfba68

      39bbc163833ae4e036fa5108a4263823
        dcc61bab82ce65042ff81e61d412a812Include Uppercase Letters (A-Z)8c1ecd4bb896b2264e0711597d40766c
        86ca2e498f4feae7bb126ce425dec34f
      16b28748ea4df4d9c2150843fecfba68

      39bbc163833ae4e036fa5108a4263823
        0128196305b1d83f036472d48485215bInclude Numbers (0-9)8c1ecd4bb896b2264e0711597d40766c
        b9a60207358383794656d179ccc43b2c
      16b28748ea4df4d9c2150843fecfba68

      39bbc163833ae4e036fa5108a4263823
        74ac59835abb23d9c05434e220125466Include Symbols (@-*)8c1ecd4bb896b2264e0711597d40766c
        1c9eb7b8553dbb5287a55dc1961edc08
      16b28748ea4df4d9c2150843fecfba68

      1fd90c1118fb6157c85d8e0f0e7a7221
        Generate Password
      65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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 4c18bbaca350f2b916a43e11d91f001a {
  if (passBox.value !== "") {
    navigator.clipboard.writeText(passBox.value);
    copyIcon.innerText = "check";
    copyIcon.title = "Password Copied";

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

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

ライブデモ

ここでパスワードジェネレータープロジェクトのライブデモをチェックできます。

結論

パスワードジェネレーターの作成は、フロントエンド開発スキルを応用できる楽しいプロジェクトでした。このツールは強力なパスワードを生成するのに役立ち、Web 開発プロジェクトへの優れた追加機能となります。皆さんも私と同じように役立つと思います。コーディングを楽しんでください!

クレジット

このプロジェクトは、JavaScript スキルを向上させ、実用的な Web ツールを作成するという私の旅の一環として開発されました。

著者

アビシェク・グルジャル
- GitHub プロフィール

以上がパスワード生成ウェブサイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css html for select include Directory using Length Interface copy JS this display input github

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS を使用して Div を中央に配置するためのさまざまな効果的な方法次の記事：CSS を使用して Div を中央に配置するためのさまざまな効果的な方法

続きを見る