القائمة الرئيسية

الصفحات

تعديل المشاركة

كيفية إنشاء مولد كلمات مرور احترافي باستخدام HTML و CSS و JavaScript

blog
(0)

أصبحت كلمات المرور القوية من أهم وسائل حماية الحسابات والمعلومات الشخصية على الإنترنت، ولذلك يفضل الكثير من المستخدمين استخدام مولد كلمات مرور لإنشاء كلمات مرور عشوائية وآمنة يصعب تخمينها أو اختراقها.

في هذا المقال سنتعرف على كيفية إنشاء مولد كلمات مرور احترافي باستخدام HTML و CSS و JavaScript فقط، دون الحاجة إلى أي مكتبات معقدة أو إطار عمل إضافي.

ما هو مولد كلمات المرور؟

مولد كلمات المرور هو أداة تقوم بإنشاء كلمات مرور عشوائية بناءً على مجموعة من الخيارات التي يحددها المستخدم، مثل:

  • طول كلمة المرور.
  • استخدام الأحرف الكبيرة.
  • استخدام الأحرف الصغيرة.
  • استخدام الأرقام.
  • استخدام الرموز الخاصة.

كلما زاد تنوع الأحرف وطول كلمة المرور، زادت درجة الأمان والحماية.

تصميم واجهة المستخدم

تم تصميم واجهة الموقع باستخدام HTML و Tailwind CSS للحصول على مظهر حديث ومتجاوب مع جميع الأجهزة.

تتكون الواجهة من:

  • حقل لعرض كلمة المرور الناتجة.
  • زر لنسخ كلمة المرور.
  • شريط لتحديد طول كلمة المرور.
  • خيارات لاختيار أنواع الأحرف.
  • مؤشر يوضح قوة كلمة المرور.
  • زر لإنشاء كلمة مرور جديدة.

إنشاء كلمة المرور باستخدام JavaScript

تعتمد عملية التوليد على جمع الأحرف المسموح بها في متغير واحد ثم اختيار أحرف عشوائية منه حتى الوصول إلى الطول المطلوب.

على سبيل المثال:

  • الأحرف الكبيرة: A-Z
  • الأحرف الصغيرة: a-z
  • الأرقام: 0-9
  • الرموز: !@#$%^&*

بعد ذلك يتم اختيار أحرف عشوائية باستخدام الدالة Math.random().

قياس قوة كلمة المرور

يتم حساب قوة كلمة المرور بناءً على:

  • طول كلمة المرور.
  • وجود أحرف كبيرة.
  • وجود أحرف صغيرة.
  • وجود أرقام.
  • وجود رموز.

ثم يتم عرض النتيجة للمستخدم على شكل مؤشر مرئي يوضح ما إذا كانت كلمة المرور ضعيفة أو متوسطة أو قوية.

ميزة النسخ السريع

لتحسين تجربة المستخدم تم إضافة زر يسمح بنسخ كلمة المرور مباشرة إلى الحافظة باستخدام:

navigator.clipboard.writeText()

وبذلك يمكن للمستخدم استخدام كلمة المرور فوراً دون الحاجة إلى تحديدها ونسخها يدوياً.

فوائد إنشاء موقع مولد كلمات مرور

يعتبر هذا النوع من المواقع من أفضل المشاريع الصغيرة لتحقيق الأرباح من الإعلانات لأنه:

  • مطلوب بكثرة في محركات البحث.
  • سهل التطوير والصيانة.
  • سريع التحميل.
  • مناسب لإضافة إعلانات البنر.
  • يمكن إضافة أدوات أخرى مشابهة مستقبلاً.

خاتمة

إنشاء مولد كلمات مرور باستخدام HTML و CSS و JavaScript يعد مشروعاً ممتازاً للمبتدئين والمحترفين على حد سواء. كما يمكن تطويره بإضافة مزايا متقدمة مثل إنشاء كلمات مرور قابلة للنطق أو حفظ السجل أو تقييم قوة كلمات المرور الحالية.

إذا كنت ترغب في إنشاء موقع أدوات مجانية والربح منه عب

الكود 

<!DOCTYPE html><html lang="ar" dir="rtl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>مولد كلمات المرور الاحترافي</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>body{    background: linear-gradient(135deg,#0f172a,#1e293b,#0f172a);}
.glass{    backdrop-filter: blur(15px);    background: rgba(255,255,255,0.08);    border:1px solid rgba(255,255,255,0.1);}
.glow{    box-shadow: 0 0 30px rgba(59,130,246,.3);}</style></head><body class="min-h-screen flex items-center justify-center p-5">
<div class="glass glow w-full max-w-xl rounded-3xl p-8 text-white">
    <div class="text-center mb-8">        <h1 class="text-4xl font-bold mb-2">            🔐 مولد كلمات المرور        </h1>        <p class="text-slate-300">            أنشئ كلمات مرور قوية وآمنة بضغطة زر        </p>    </div>
    <div class="mb-6">        <label class="block mb-3 font-semibold">            كلمة المرور        </label>
        <div class="flex gap-2">            <input                id="password"                type="text"                readonly                class="flex-1 bg-slate-800 border border-slate-700 rounded-xl p-4 outline-none text-lg"            >
            <button                id="copyBtn"                class="bg-blue-600 hover:bg-blue-700 px-5 rounded-xl transition"            >                نسخ            </button>        </div>    </div>
    <div class="mb-6">        <div class="flex justify-between mb-2">            <span>طول كلمة المرور</span>            <span id="lengthValue">16</span>        </div>
        <input            id="length"            type="range"            min="6"            max="50"            value="16"            class="w-full"        >    </div>
    <div class="grid grid-cols-2 gap-4 mb-8">
        <label class="flex items-center gap-2">            <input id="uppercase" type="checkbox" checked>            أحرف كبيرة        </label>
        <label class="flex items-center gap-2">            <input id="lowercase" type="checkbox" checked>            أحرف صغيرة        </label>
        <label class="flex items-center gap-2">            <input id="numbers" type="checkbox" checked>            أرقام        </label>
        <label class="flex items-center gap-2">            <input id="symbols" type="checkbox" checked>            رموز        </label>
    </div>
    <div class="mb-6">        <div class="flex justify-between mb-2">            <span>قوة كلمة المرور</span>            <span id="strengthText">قوية</span>        </div>
        <div class="bg-slate-700 h-3 rounded-full overflow-hidden">            <div id="strengthBar"                 class="bg-green-500 h-full w-full transition-all duration-300">            </div>        </div>    </div>
    <button        id="generateBtn"        class="w-full bg-gradient-to-r from-blue-500 to-cyan-500 hover:scale-105 transition-all duration-300 py-4 rounded-xl text-lg font-bold"    >        ✨ إنشاء كلمة مرور جديدة    </button>
</div>
<script>const passwordField = document.getElementById("password");const generateBtn = document.getElementById("generateBtn");const copyBtn = document.getElementById("copyBtn");
const lengthSlider = document.getElementById("length");const lengthValue = document.getElementById("lengthValue");
const uppercase = document.getElementById("uppercase");const lowercase = document.getElementById("lowercase");const numbers = document.getElementById("numbers");const symbols = document.getElementById("symbols");
const strengthBar = document.getElementById("strengthBar");const strengthText = document.getElementById("strengthText");
lengthSlider.addEventListener("input", () => {    lengthValue.textContent = lengthSlider.value;});
function generatePassword() {
    let chars = "";
    if (uppercase.checked)        chars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    if (lowercase.checked)        chars += "abcdefghijklmnopqrstuvwxyz";
    if (numbers.checked)        chars += "0123456789";
    if (symbols.checked)        chars += "!@#$%^&*()_+-=[]{}|;:,.<>?";
    if(chars.length === 0){        alert("اختر نوعاً واحداً على الأقل");        return;    }
    let password = "";
    for(let i = 0; i < lengthSlider.value; i++){        password += chars.charAt(            Math.floor(Math.random() * chars.length)        );    }
    passwordField.value = password;
    updateStrength();}
function updateStrength(){
    let score = 0;
    if(uppercase.checked) score++;    if(lowercase.checked) score++;    if(numbers.checked) score++;    if(symbols.checked) score++;
    score += Number(lengthSlider.value) > 15 ? 1 : 0;
    if(score <= 2){        strengthBar.className = "bg-red-500 h-full transition-all";        strengthBar.style.width = "35%";        strengthText.textContent = "ضعيفة";    }    else if(score <= 4){        strengthBar.className = "bg-yellow-500 h-full transition-all";        strengthBar.style.width = "70%";        strengthText.textContent = "متوسطة";    }    else{        strengthBar.className = "bg-green-500 h-full transition-all";        strengthBar.style.width = "100%";        strengthText.textContent = "قوية جداً";    }}
generateBtn.addEventListener("click", generatePassword);
copyBtn.addEventListener("click", () => {
    if(!passwordField.value) return;
    navigator.clipboard.writeText(passwordField.value);
    copyBtn.textContent = "✅ تم النسخ";
    setTimeout(() => {        copyBtn.textContent = "نسخ";    }, 2000);});
generatePassword();</script>
</body></html>

هل اعجبك الموضوع :

أخر المواضيع من قسم : أخبار تقنية

تعليقات

إرسال تعليق

التنقل السريع