Create Password Strength Checker: A Beginner’s Cybersecurity Project

Build your first beginner-friendly cybersecurity project!

It’s so easy to build — you don’t need to watch a video. Just follow the steps.

As an IT fresher or student in India, understanding password security is important for your career. Whether you’re applying for jobs at TCS, Infosys, Wipro, or any startup, knowing how to build security-focused applications will make you stand out.

What You Learn In This Project:

How to create a password strength checker from scratch
Real-world cybersecurity concepts
How to Use HTML, CSS, JavaScript, and Firebase Together

What is a Password Strength Checker?

A password strength checker is a tool that evaluates how secure a given password is. Think of it like a security guard checking if someone’s password is strong enough to protect their account or not.

Why do we need this?

80% of data breaches happen due to weak passwords
It’s a fundamental cybersecurity concept every IT professional should understand

Software Requirements:

Web Browser – (Chrome recommended)
Text Editor – VS Code (free download from code.visualstudio.com)
Node.js – Download from nodejs.org (we will use this for Firebase CLI)
Google Account – For Firebase access

Knowledge Requirements:

Basic understanding of what HTML, CSS, and JavaScript do.
Familiarity with using a computer and web browser.

Technologies We Use and Why?

HTML(HyperText Markup Language)	This works as a skeleton of our web page, which means it helps us to create the structure where users can input their password.
CSS (Cascading Style Sheets)	The styling language that makes our app look good. we use it to make our password checker visually appealing and user-friendly.
JavaScript	The programming language that adds interactivity. so we check password strength in real-time as users type.
Firebase (Google’s Cloud Platform)	A cloud database and hosting service. Stores password attempts (without storing actual passwords!) and hosts our app. (Firebase knowledge can help you land jobs at Google, Microsoft, or Indian startups)

Step 1: Install Required Software

Installing VS Code:

1. Go to code.visualstudio.com

2. Click “Download for Windows/Mac/Linux”

3. Run the installer

4. During installation, check “Add to PATH” option

5. Launch VS Code after installation

Installing Node.js:

1. Go to nodejs.org

2. Click “Download” (choose LTS version)

3. Run the installer with default settings

4. To verify installation:

– Open Command Prompt (Windows) or Terminal (Mac/Linux)

– Type: ‘node –version‘

– You should see a version number like ‘v18.17.0‘

Step 2: Create Project Structure Using VS Code

1. Open VS Code 2. Click “File” → “Open Folder”

3. Navigate to your Desktop

4. Create a new folder called `password-checker-project`

5. Select this folder and click “Open”

6. In VS Code, you’ll see an empty folder structure

Step 3: Set Up Project Files

password-checker-project/
├── index.html (Main web page)
├── style.css (Styling)
├── script.js (JavaScript logic)
├── README.md (Project documentation)
└── firebase-config.js (Firebase settings – we’ll create this later)

Step-by-Step Development

Step 1: Create the HTML Structure

Open ‘index.html‘ in VS Code and add this below code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Strength Checker</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Password Strength Checker</h1>
        <p class="description">Test your password strength and learn about cybersecurity!</p>
        
        <div class="input-group">
            <label for="password">Enter your password:</label>
            <input type="password" id="password" placeholder="Type your password here...">
            <button type="button" onclick="togglePassword()" class="toggle-btn">👁️</button>
        </div>
        
        <div class="strength-meter">
            <div class="strength-bar" id="strengthBar"></div>
        </div>
        
        <div class="strength-text" id="strengthText">Password strength will appear here</div>
        
        <div class="requirements">
            <h3>Password Requirements:</h3>
            <ul id="requirements">
                <li id="length">At least 8 characters</li>
                <li id="uppercase">At least 1 uppercase letter (A-Z)</li>
                <li id="lowercase">At least 1 lowercase letter (a-z)</li>
                <li id="number">At least 1 number (0-9)</li>
                <li id="special">At least 1 special character (!@#$%)</li>
            </ul>
        </div>
        
        <div class="tips">
            <h3>💡 Password Tips:</h3>
            <ul>
                <li>Never use personal information (birthdate, name)</li>
                <li>Don't reuse passwords across different sites</li>
                <li>Consider using a password manager</li>
                <li>Update passwords regularly</li>
            </ul>
        </div>
        
        <div class="firebase-status" id="firebaseStatus" style="display: none;">
            <small>🔥 Connected to Firebase Cloud</small>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

Understanding Above HTML Code:

<!DOCTYPE html> – Tells browser this is HTML5
<meta charset="UTF-8"> – Supports all characters including Hindi
<meta name="viewport"...> – Makes it mobile-friendly
<link rel="stylesheet"...> – Connects to our CSS file
<input type="password"> – Creates password input field
id="password" – Gives unique identifier for JavaScript
onclick="togglePassword()" – Calls function when button is clicked

Test Your HTML:

1. Double-click ‘index.html‘ in File Explorer

2. It should open in your browser

3. You should see a basic form (no styling yet)

4. Type in the password field to test

Step 2: Add CSS Styling

Open ‘style.css‘ and add this below code:

/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body styling */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Main container */
.container {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Heading styles */
h1 {
    text-align: center;
    color: #333;
    margin-bottom: 10px;
    font-size: 2.2em;
}

.description {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
    font-size: 1.1em;
}

/* Input group styling */
.input-group {
    position: relative;
    margin-bottom: 25px;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

/* Password input styling */
input[type="password"], 
input[type="text"] {
    width: 100%;
    padding: 15px 50px 15px 15px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    font-family: monospace;
}

input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Toggle button styling */
.toggle-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.toggle-btn:hover {
    background-color: #f0f0f0;
}

/* Strength meter styling */
.strength-meter {
    height: 12px;
    background: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid #ddd;
}

.strength-bar {
    height: 100%;
    width: 0%;
    transition: all 0.4s ease;
    border-radius: 6px;
    position: relative;
}

.strength-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Strength text styling */
.strength-text {
    text-align: center;
    font-weight: bold;
    margin-bottom: 25px;
    font-size: 1.1em;
    padding: 10px;
    border-radius: 8px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

/* Requirements section */
.requirements {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.requirements h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.requirements ul {
    list-style: none;
}

.requirements li {
    padding: 8px 0;
    position: relative;
    padding-left: 35px;
    font-size: 0.95em;
    transition: all 0.3s ease;
}

.requirements li:before {
    content: "✗";
    position: absolute;
    left: 0;
    color: #dc3545;
    font-weight: bold;
    font-size: 1.2em;
    top: 50%;
    transform: translateY(-50%);
}

.requirements li.valid {
    color: #28a745;
}

.requirements li.valid:before {
    content: "✓";
    color: #28a745;
}

/* Tips section */
.tips {
    margin-bottom: 20px;
    padding: 20px;
    background: #e8f4f8;
    border-radius: 12px;
    border: 1px solid #bee5eb;
}

.tips h3 {
    color: #0c5460;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.tips ul {
    list-style: none;
}

.tips li {
    padding: 6px 0;
    position: relative;
    padding-left: 25px;
    font-size: 0.9em;
    color: #0c5460;
}

.tips li:before {
    content: "💡";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Firebase status */
.firebase-status {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    color: #155724;
}

/* Strength level colors */
.very-weak { 
    background: linear-gradient(90deg, #dc3545, #c82333);
}

.weak { 
    background: linear-gradient(90deg, #fd7e14, #e55100);
}

.fair { 
    background: linear-gradient(90deg, #ffc107, #ff8f00);
}

.good { 
    background: linear-gradient(90deg, #20c997, #17a2b8);
}

.strong { 
    background: linear-gradient(90deg, #28a745, #20c997);
}

/* Responsive design */
@media (max-width: 768px) {
    .container {
        padding: 20px;
        margin: 10px;
    }
    
    h1 {
        font-size: 1.8em;
    }
    
    .description {
        font-size: 1em;
    }
    
    input[type="password"], 
    input[type="text"] {
        padding: 12px 45px 12px 12px;
        font-size: 14px;
    }
}

/* Print styles */
@media print {
    body {
        background: white;
    }
    
    .container {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .toggle-btn {
        display: none;
    }
}

Test Your CSS

1. Refresh your browser

2. Your app should now look professional

3. Try resizing the browser window (should be responsive)

4. The password field should have hover effects

Step 3: Add JavaScript Functionality

Open ‘script.js‘ and add this code:

// Global variables
let passwordStrengthHistory = [];
let currentStrength = 0;

// Password strength checker function
function checkPasswordStrength(password) {
    let strength = 0;
    let feedback = [];
    
    // Check length (most important factor)
    if (password.length >= 8) {
        strength += 1;
        document.getElementById('length').classList.add('valid');
    } else {
        document.getElementById('length').classList.remove('valid');
        feedback.push('Password too short');
    }
    
    // Check for uppercase letters
    if (/[A-Z]/.test(password)) {
        strength += 1;
        document.getElementById('uppercase').classList.add('valid');
    } else {
        document.getElementById('uppercase').classList.remove('valid');
        feedback.push('Add uppercase letters');
    }
    
    // Check for lowercase letters
    if (/[a-z]/.test(password)) {
        strength += 1;
        document.getElementById('lowercase').classList.add('valid');
    } else {
        document.getElementById('lowercase').classList.remove('valid');
        feedback.push('Add lowercase letters');
    }
    
    // Check for numbers
    if (/[0-9]/.test(password)) {
        strength += 1;
        document.getElementById('number').classList.add('valid');
    } else {
        document.getElementById('number').classList.remove('valid');
        feedback.push('Add numbers');
    }
    
    // Check for special characters
    if (/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)) {
        strength += 1;
        document.getElementById('special').classList.add('valid');
    } else {
        document.getElementById('special').classList.remove('valid');
        feedback.push('Add special characters');
    }
    
    // Bonus checks for even stronger passwords
    let bonusPoints = 0;
    
    // Length bonus
    if (password.length >= 12) bonusPoints += 0.5;
    if (password.length >= 16) bonusPoints += 0.5;
    
    // Variety bonus
    if (password.length >= 8 && strength >= 4) {
        const uniqueChars = new Set(password.toLowerCase()).size;
        if (uniqueChars >= 8) bonusPoints += 0.5;
    }
    
    // Common pattern penalties
    if (/123456|password|qwerty|admin|letmein/i.test(password)) {
        bonusPoints -= 1;
        feedback.push('Avoid common patterns');
    }
    
    // Repeated characters penalty
    if (/(.)\1{2,}/.test(password)) {
        bonusPoints -= 0.5;
        feedback.push('Avoid repeated characters');
    }
    
    const finalStrength = Math.max(0, Math.min(5, strength + bonusPoints));
    
    return { 
        strength: finalStrength, 
        feedback: feedback,
        criteria: {
            length: password.length >= 8,
            uppercase: /[A-Z]/.test(password),
            lowercase: /[a-z]/.test(password),
            numbers: /[0-9]/.test(password),
            special: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)
        }
    };
}

// Update strength meter with smooth animation
function updateStrengthMeter(strength) {
    const strengthBar = document.getElementById('strengthBar');
    const strengthText = document.getElementById('strengthText');
    
    // Calculate percentage
    const percentage = (strength / 5) * 100;
    
    // Update bar width with animation
    strengthBar.style.width = percentage + '%';
    
    // Remove all strength classes
    strengthBar.classList.remove('very-weak', 'weak', 'fair', 'good', 'strong');
    
    // Update text and color based on strength
    if (strength <= 1) {
        strengthBar.classList.add('very-weak');
        strengthText.textContent = 'Very Weak 😰';
        strengthText.style.color = '#dc3545';
        strengthText.style.backgroundColor = '#f8d7da';
    } else if (strength <= 2) {
        strengthBar.classList.add('weak');
        strengthText.textContent = 'Weak 😟';
        strengthText.style.color = '#fd7e14';
        strengthText.style.backgroundColor = '#fdf4e6';
    } else if (strength <= 3) {
        strengthBar.classList.add('fair');
        strengthText.textContent = 'Fair 😐';
        strengthText.style.color = '#ffc107';
        strengthText.style.backgroundColor = '#fff9e6';
    } else if (strength <= 4) {
        strengthBar.classList.add('good');
        strengthText.textContent = 'Good 😊';
        strengthText.style.color = '#20c997';
        strengthText.style.backgroundColor = '#e6f9f5';
    } else {
        strengthBar.classList.add('strong');
        strengthText.textContent = 'Very Strong 🔒';
        strengthText.style.color = '#28a745';
        strengthText.style.backgroundColor = '#e8f5e8';
    }
    
    // Store current strength for analytics
    currentStrength = strength;
}

// Toggle password visibility
function togglePassword() {
    const passwordInput = document.getElementById('password');
    const toggleBtn = document.querySelector('.toggle-btn');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        toggleBtn.textContent = '🙈';
        toggleBtn.setAttribute('aria-label', 'Hide password');
    } else {
        passwordInput.type = 'password';
        toggleBtn.textContent = '👁️';
        toggleBtn.setAttribute('aria-label', 'Show password');
    }
}

// Generate password suggestion
function generatePasswordSuggestion() {
    const lowercase = 'abcdefghijklmnopqrstuvwxyz';
    const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const numbers = '0123456789';
    const symbols = '!@#$%^&*()_+-=[]{}|;:,.<>?';
    
    let password = '';
    
    // Ensure at least one character from each category
    password += lowercase[Math.floor(Math.random() * lowercase.length)];
    password += uppercase[Math.floor(Math.random() * uppercase.length)];
    password += numbers[Math.floor(Math.random() * numbers.length)];
    password += symbols[Math.floor(Math.random() * symbols.length)];
    
    // Fill remaining length with random characters
    const allChars = lowercase + uppercase + numbers + symbols;
    for (let i = password.length; i < 12; i++) {
        password += allChars[Math.floor(Math.random() * allChars.length)];
    }
    
    // Shuffle the password
    return password.split('').sort(() => Math.random() - 0.5).join('');
}

// Add password suggestion feature
function addPasswordSuggestion() {
    const container = document.querySelector('.container');
    const suggestDiv = document.createElement('div');
    suggestDiv.className = 'password-suggestion';
    suggestDiv.innerHTML = `
        <h3>💡 Need a strong password?</h3>
        <button onclick="useGeneratedPassword()" class="generate-btn">Generate Strong Password</button>
        <div id="suggestedPassword" style="display: none;"></div>
    `;
    
    // Add CSS for the suggestion box
    const style = document.createElement('style');
    style.textContent = `
        .password-suggestion {
            margin: 20px 0;
            padding: 20px;
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 12px;
            text-align: center;
        }
        
        .generate-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }
        
        .generate-btn:hover {
            background: #0056b3;
        }
        
        .suggested-password {
            margin-top: 15px;
            padding: 10px;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            font-family: monospace;
            font-size: 16px;
            word-break: break-all;
        }
    `;
    
    document.head.appendChild(style);
    container.appendChild(suggestDiv);
}

// Use generated password
function useGeneratedPassword() {
    const password = generatePasswordSuggestion();
    const passwordInput = document.getElementById('password');
    const suggestedDiv = document.getElementById('suggestedPassword');
    
    passwordInput.value = password;
    suggestedDiv.innerHTML = `
        <div class="suggested-password">
            <strong>Generated Password:</strong><br>
            ${password}
            <br><br>
            <small>💡 This password has been automatically filled in the field above!</small>
        </div>
    `;
    suggestedDiv.style.display = 'block';
    
    // Trigger password strength check
    passwordInput.dispatchEvent(new Event('input'));
}

// Enhanced input event listener with debouncing
let debounceTimer;
function handlePasswordInput() {
    const passwordInput = document.getElementById('password');
    const password = passwordInput.value;
    
    // Clear previous timer
    clearTimeout(debounceTimer);
    
    // Set new timer
    debounceTimer = setTimeout(() => {
        if (password.length === 0) {
            // Reset everything when password is empty
            document.getElementById('strengthBar').style.width = '0%';
            document.getElementById('strengthText').textContent = 'Password strength will appear here';
            document.getElementById('strengthText').style.color = '#666';
            document.getElementById('strengthText').style.backgroundColor = '#f8f9fa';
            
            // Reset all requirement indicators
            const requirements = ['length', 'uppercase', 'lowercase', 'number', 'special'];
            requirements.forEach(req => {
                document.getElementById(req).classList.remove('valid');
            });
            
            return;
        }
        
        // Check password strength
        const result = checkPasswordStrength(password);
        updateStrengthMeter(result.strength);
        
        // Store in history for analytics
        passwordStrengthHistory.push({
            timestamp: new Date().toISOString(),
            strength: result.strength,
            length: password.length,
            criteria: result.criteria
        });
        
        // Keep only last 10 entries
        if (passwordStrengthHistory.length > 10) {
            passwordStrengthHistory.shift();
        }
        
        // Log to console for debugging (remove in production)
        console.log('Password Analysis:', {
            strength: result.strength,
            feedback: result.feedback,
            criteria: result.criteria
        });
        
    }, 300); // 300ms delay
}

// Error handling and edge cases
function handleErrors() {
    // Handle missing DOM elements
    const requiredElements = ['password', 'strengthBar', 'strengthText'];
    const missingElements = requiredElements.filter(id => !document.getElementById(id));
    
    if (missingElements.length > 0) {
        console.error('Missing required elements:', missingElements);
        alert('Some page elements are missing. Please refresh the page.');
        return false;
    }
    
    // Handle browser compatibility
    if (!('addEventListener' in window)) {
        alert('Your browser is not supported. Please use a modern browser like Chrome, Firefox, or Safari.');
        return false;
    }
    
    return true;
}

// Initialize the application
function initializeApp() {
    console.log('🔐 Password Strength Checker Initialized');
    
    // Check for errors first
    if (!handleErrors()) {
        return;
    }
    
    // Add event listeners
    const passwordInput = document.getElementById('password');
    passwordInput.addEventListener('input', handlePasswordInput);
    
    // Add password suggestion feature
    addPasswordSuggestion();
    
    // Add accessibility features
    passwordInput.setAttribute('autocomplete', 'new-password');
    passwordInput.setAttribute('aria-describedby', 'strengthText requirements');
    
    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Ctrl+G to generate password
        if (e.ctrlKey && e.key === 'g') {
            e.preventDefault();
            useGeneratedPassword();
        }
        
        // Ctrl+H to toggle password visibility
        if (e.ctrlKey && e.key === 'h') {
            e.preventDefault();
            togglePassword();
        }
    });
    
    // Add helpful tooltips
    const tooltips = {
        'password': 'Press Ctrl+G to generate a strong password, Ctrl+H to toggle visibility',
        'strengthBar': 'Visual indicator of your password strength',
        'strengthText': 'Detailed strength assessment'
    };
    
    Object.keys(tooltips).forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            element.setAttribute('title', tooltips[id]);
        }
    });
    
    console.log('✅ App initialization complete');
}

// Start the application when DOM is loaded
document.addEventListener('DOMContentLoaded', initializeApp);

// Export functions for testing (if needed)
if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        checkPasswordStrength,
        updateStrengthMeter,
        togglePassword,
        generatePasswordSuggestion
    };
}

Test Your JavaScript

1. Refresh your browser

2. Type different passwords:

“abc” (should be very weak)
“Password123” (should be fair)
“MyStr0ng!P@ssw0rd” (should be strong)

3. Click the eye icon to toggle visibility

4. Try the keyboard shortcuts (Ctrl+G, Ctrl+H)

Step 4: Set Up Firebase Project

Now, we are creating a cloud backend for our app.

1: Create Firebase Project

Go to [Firebase Console](https://console.firebase.google.com/)
Click “Add project”
Name it password-checker-project
Disable Google Analytics (not needed for our project)
Click “Create Project” and wait for setup to complete

2: Set Up Firebase Hosting

In Firebase Console, select your project
Click “Hosting” from the left menu
Click “Get Started”
Install Firebase CLI (Command Line Interface):
- Open Command Prompt/Terminal
- Run: npm install -g firebase-tools
- Verify: firebase –version
Login to Firebase:
- Run: firebase login
- Follow browser prompts to authenticate

3: Initialize Firebase in Your Project

In your project folder (password-checker-project), open terminal
Run: firebase init
Select
- Hosting (use arrow keys and space to select)
- Use an existing project
- Select password-checker-project
- Public directory: type public (create this folder if it doesn’t exist)
- Configure as single-page app: Yes
- Set up automatic builds: No
Move index.html, style.css, script.js to the public folder

4: Add Firebase SDK to Your Project

In Firebase Console, click the web icon (</>) to register a web app
Name it password-checker
Click “Register app”
Copy the Firebase configuration object

Create a new file public/firebase-config.js:

// Firebase configuration
const firebaseConfig = {
    // Paste your Firebase configuration here
    // Example:
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const analytics = firebase.analytics();

// Function to log password strength attempt
function logPasswordAttempt(strength, criteria) {
    analytics.logEvent('password_check', {
        strength_level: strength,
        has_length: criteria.length,
        has_uppercase: criteria.uppercase,
        has_lowercase: criteria.lowercase,
        has_numbers: criteria.numbers,
        has_special: criteria.special,
        timestamp: new Date().toISOString()
    });
    console.log('Password attempt logged to Firebase');
}

Note: Replace the placeholder values in firebaseConfig with your actual Firebase configuration from the Firebase Console.

5: Update HTML to Include Firebase

Modify index.html to include Firebase SDKs and your config file. Update the section to include:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Strength Checker</title>
    <link rel="stylesheet" href="style.css">
    <!-- Firebase SDK -->
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-analytics.js"></script>
    <script src="firebase-config.js"></script>
</head>
<body>
    <div class="container">
        <h1>Password Strength Checker</h1>
        <p class="description">Test your password strength and learn about cybersecurity!</p>
        
        <div class="input-group">
            <label for="password">Enter your password:</label>
            <input type="password" id="password" placeholder="Type your password here...">
            <button type="button" onclick="togglePassword()" class="toggle-btn">👁️</button>
        </div>
        
        <div class="strength-meter">
            <div class="strength-bar" id="strengthBar"></div>
        </div>
        
        <div class="strength-text" id="strengthText">Password strength will appear here</div>
        
        <div class="requirements">
            <h3>Password Requirements:</h3>
            <ul id="requirements">
                <li id="length">At least 8 characters</li>
                <li id="uppercase">At least 1 uppercase letter (A-Z)</li>
                <li id="lowercase">At least 1 lowercase letter (a-z)</li>
                <li id="number">At least 1 number (0-9)</li>
                <li id="special">At least 1 special character (!@#$%)</li>
            </ul>
        </div>
        
        <div class="tips">
            <h3>💡 Password Tips:</h3>
            <ul>
                <li>Never use personal information (birthdate, name)</li>
                <li>Don't reuse passwords across different sites</li>
                <li>Consider using a password manager</li>
                <li>Update passwords regularly</li>
            </ul>
        </div>
        
        <div class="firebase-status" id="firebaseStatus">
            <small>🔥 Connected to Firebase Cloud</small>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

6: Update JavaScript for Firebase Integration

Update script.js to log password strength attempts to Firebase. Add this to the handlePasswordInput function, just before the console.log statement:

// Global variables
let passwordStrengthHistory = [];
let currentStrength = 0;

// Password strength checker function
function checkPasswordStrength(password) {
    let strength = 0;
    let feedback = [];
    
    if (password.length >= 8) {
        strength += 1;
        document.getElementById('length').classList.add('valid');
    } else {
        document.getElementById('length').classList.remove('valid');
        feedback.push('Password too short');
    }
    
    if (/[A-Z]/.test(password)) {
        strength += 1;
        document.getElementById('uppercase').classList.add('valid');
    } else {
        document.getElementById('uppercase').classList.remove('valid');
        feedback.push('Add uppercase letters');
    }
    
    if (/[a-z]/.test(password)) {
        strength += 1;
        document.getElementById('lowercase').classList.add('valid');
    } else {
        document.getElementById('lowercase').classList.remove('valid');
        feedback.push('Add lowercase letters');
    }
    
    if (/[0-9]/.test(password)) {
        strength += 1;
        document.getElementById('number').classList.add('valid');
    } else {
        document.getElementById('number').classList.remove('valid');
        feedback.push('Add numbers');
    }
    
    if (/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)) {
        strength += 1;
        document.getElementById('special').classList.add('valid');
    } else {
        document.getElementById('special').classList.remove('valid');
        feedback.push('Add special characters');
    }
    
    let bonusPoints = 0;
    if (password.length >= 12) bonusPoints += 0.5;
    if (password.length >= 16) bonusPoints += 0.5;
    
    if (password.length >= 8 && strength >= 4) {
        const uniqueChars = new Set(password.toLowerCase()).size;
        if (uniqueChars >= 8) bonusPoints += 0.5;
    }
    
    if (/123456|password|qwerty|admin|letmein/i.test(password)) {
        bonusPoints -= 1;
        feedback.push('Avoid common patterns');
    }
    
    if (/(.)\1{2,}/.test(password)) {
        bonusPoints -= 0.5;
        feedback.push('Avoid repeated characters');
    }
    
    const finalStrength = Math.max(0, Math.min(5, strength + bonusPoints));
    
    return { 
        strength: finalStrength, 
        feedback: feedback,
        criteria: {
            length: password.length >= 8,
            uppercase: /[A-Z]/.test(password),
            lowercase: /[a-z]/.test(password),
            numbers: /[0-9]/.test(password),
            special: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)
        }
    };
}

function updateStrengthMeter(strength) {
    const strengthBar = document.getElementById('strengthBar');
    const strengthText = document.getElementById('strengthText');
    
    const percentage = (strength / 5) * 100;
    strengthBar.style.width = percentage + '%';
    
    strengthBar.classList.remove('very-weak', 'weak', 'fair', 'good', 'strong');
    
    if (strength <= 1) {
        strengthBar.classList.add('very-weak');
        strengthText.textContent = 'Very Weak 😰';
        strengthText.style.color = '#dc3545';
        strengthText.style.backgroundColor = '#f8d7da';
    } else if (strength <= 2) {
        strengthBar.classList.add('weak');
        strengthText.textContent = 'Weak 😟';
        strengthText.style.color = '#fd7e14';
        strengthText.style.backgroundColor = '#fdf4e6';
    } else if (strength <= 3) {
        strengthBar.classList.add('fair');
        strengthText.textContent = 'Fair 😐';
        strengthText.style.color = '#ffc107';
        strengthText.style.backgroundColor = '#fff9e6';
    } else if (strength <= 4) {
        strengthBar.classList.add('good');
        strengthText.textContent = 'Good 😊';
        strengthText.style.color = '#20c997';
        strengthText.style.backgroundColor = '#e6f9f5';
    } else {
        strengthBar.classList.add('strong');
        strengthText.textContent = 'Very Strong 🔒';
        strengthText.style.color = '#28a745';
        strengthText.style.backgroundColor = '#e8f5e8';
    }
    
    currentStrength = strength;
}

function togglePassword() {
    const passwordInput = document.getElementById('password');
    const toggleBtn = document.querySelector('.toggle-btn');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        toggleBtn.textContent = '🙈';
        toggleBtn.setAttribute('aria-label', 'Hide password');
    } else {
        passwordInput.type = 'password';
        toggleBtn.textContent = '👁️';
        toggleBtn.setAttribute('aria-label', 'Show password');
    }
}

function generatePasswordSuggestion() {
    const lowercase = 'abcdefghijklmnopqrstuvwxyz';
    const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const numbers = '0123456789';
    const symbols = '!@#$%^&*()_+-=[]{}|;:,.<>?';
    
    let password = '';
    password += lowercase[Math.floor(Math.random() * lowercase.length)];
    password += uppercase[Math.floor(Math.random() * uppercase.length)];
    password += numbers[Math.floor(Math.random() * numbers.length)];
    password += symbols[Math.floor(Math.random() * symbols.length)];
    
    const allChars = lowercase + uppercase + numbers + symbols;
    for (let i = password.length; i < 12; i++) {
        password += allChars[Math.floor(Math.random() * allChars.length)];
    }
    
    return password.split('').sort(() => Math.random() - 0.5).join('');
}

function addPasswordSuggestion() {
    const container = document.querySelector('.container');
    const suggestDiv = document.createElement('div');
    suggestDiv.className = 'password-suggestion';
    suggestDiv.innerHTML = `
        <h3>💡 Need a strong password?</h3>
        <button onclick="useGeneratedPassword()" class="generate-btn">Generate Strong Password</button>
        <div id="suggestedPassword" style="display: none;"></div>
    `;
    
    const style = document.createElement('style');
    style.textContent = `
        .password-suggestion {
            margin: 20px 0;
            padding: 20px;
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 12px;
            text-align: center;
        }
        
        .generate-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }
        
        .generate-btn:hover {
            background: #0056b3;
        }
        
        .suggested-password {
            margin-top: 15px;
            padding: 10px;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            font-family: monospace;
            font-size: 16px;
            word-break: break-all;
        }
    `;
    
    document.head.appendChild(style);
    container.appendChild(suggestDiv);
}

function useGeneratedPassword() {
    const password = generatePasswordSuggestion();
    const passwordInput = document.getElementById('password');
    const suggestedDiv = document.getElementById('suggestedPassword');
    
    passwordInput.value = password;
    suggestedDiv.innerHTML = `
        <div class="suggested-password">
            <strong>Generated Password:</strong><br>
            ${password}
            <br><br>
            <small>💡 This password has been automatically filled in the field above!</small>
        </div>
    `;
    suggestedDiv.style.display = 'block';
    
    passwordInput.dispatchEvent(new Event('input'));
}

let debounceTimer;
function handlePasswordInput() {
    const passwordInput = document.getElementById('password');
    const password = passwordInput.value;
    
    clearTimeout(debounceTimer);
    
    debounceTimer = setTimeout(() => {
        if (password.length === 0) {
            document.getElementById('strengthBar').style.width = '0%';
            document.getElementById('strengthText').textContent = 'Password strength will appear here';
            document.getElementById('strengthText').style.color = '#666';
            document.getElementById('strengthText').style.backgroundColor = '#f8f9fa';
            
            const requirements = ['length', 'uppercase', 'lowercase', 'number', 'special'];
            requirements.forEach(req => {
                document.getElementById(req).classList.remove('valid');
            });
            
            return;
        }
        
        const result = checkPasswordStrength(password);
        updateStrengthMeter(result.strength);
        
        // Log to Firebase
        if (typeof firebase !== 'undefined' && firebase.analytics) {
            logPasswordAttempt(result.strength, result.criteria);
            document.getElementById('firebaseStatus').style.display = 'block';
        }
        
        passwordStrengthHistory.push({
            timestamp: new Date().toISOString(),
            strength: result.strength,
            length: password.length,
            criteria: result.criteria
        });
        
        if (passwordStrengthHistory.length > 10) {
            passwordStrengthHistory.shift();
        }
        
        console.log('Password Analysis:', {
            strength: result.strength,
            feedback: result.feedback,
            criteria: result.criteria
        });
        
    }, 300);
}

function handleErrors() {
    const requiredElements = ['password', 'strengthBar', 'strengthText'];
    const missingElements = requiredElements.filter(id => !document.getElementById(id));
    
    if (missingElements.length > 0) {
        console.error('Missing required elements:', missingElements);
        alert('Some page elements are missing. Please refresh the page.');
        return false;
    }
    
    if (!('addEventListener' in window)) {
        alert('Your browser is not supported. Please use a modern browser like Chrome, Firefox, or Safari.');
        return false;
    }
    
    return true;
}

function initializeApp() {
    console.log('🔐 Password Strength Checker Initialized');
    
    if (!handleErrors()) {
        return;
    }
    
    const passwordInput = document.getElementById('password');
    passwordInput.addEventListener('input', handlePasswordInput);
    
    addPasswordSuggestion();
    
    passwordInput.setAttribute('autocomplete', 'new-password');
    passwordInput.setAttribute('aria-describedby', 'strengthText requirements');
    
    document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && e.key === 'g') {
            e.preventDefault();
            useGeneratedPassword();
        }
        
        if (e.ctrlKey && e.key === 'h') {
            e.preventDefault();
            togglePassword();
        }
    });
    
    const tooltips = {
        'password': 'Press Ctrl+G to generate a strong password, Ctrl+H to toggle visibility',
        'strengthBar': 'Visual indicator of your password strength',
        'strengthText': 'Detailed strength assessment'
    };
    
    Object.keys(tooltips).forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            element.setAttribute('title', tooltips[id]);
        }
    });
    
    console.log('✅ App initialization complete');
}

document.addEventListener('DOMContentLoaded', initializeApp);

if (typeof module !== 'undefined' && module.exports) {
    module.exports = {
        checkPasswordStrength,
        updateStrengthMeter,
        togglePassword,
        generatePasswordSuggestion
    };
}

Step 5: Deploy Your App

Now we are making our app live on the internet.

In your project folder (password-checker-project), open terminal
Run: firebase deploy
Wait for deployment to complete
You’ll get a URL (e.g., https://password-checker-project.web.app)
Visit this URL in your browser to see your live app

Test Your Deployment

Open the deployed URL
Test password checking functionality
Check Firebase Console → Analytics to see logged events
Try generating passwords and toggling visibility

Project Documentation:
Your project is ready!
The next important step is to add a README.md file.
This helps others and your future self also to understand what your project does and how to run it.

Troubleshooting Common Issues

Firebase not logging events:
- Check Firebase configuration in firebase-config.js
- Ensure SDK scripts are loaded
- Verify internet connection
CSS not applying:
- Check file paths in index.html
- Clear browser cache
- Ensure correct CSS selectors
JavaScript errors:
- Open browser console (F12)
- Look for missing elements
- Check for typos in IDs/classes
Deployment issues:
Run firebase login again
Verify project selection
Check if files are in public folder

Conclusion

Congratulations! You’ve built a professional-grade password strength checker that:

Good UI
Have a Database
Provides real-time feedback, which means it’s functional
Uses cloud technology
Shows your cybersecurity knowledge

This project not only strengthens your frontend skills but also gives you a taste of real-world cybersecurity practices.

What’s next?

Deploy this project to your GitHub Pages and add it to your resume.

Create Password Strength Checker: A Beginner’s Cybersecurity Project

Table of Contents

What You Learn In This Project:

What is a Password Strength Checker?

Why do we need this?

Software Requirements:

Knowledge Requirements:

Technologies We Use and Why?

Step 1: Install Required Software

Installing VS Code:

Installing Node.js:

Step 2: Create Project Structure Using VS Code

Step 3: Set Up Project Files

Step-by-Step Development

Step 1: Create the HTML Structure

Understanding Above HTML Code:

Test Your HTML:

Step 2: Add CSS Styling

Test Your CSS

Step 3: Add JavaScript Functionality

Test Your JavaScript

Step 4: Set Up Firebase Project

1: Create Firebase Project

2: Set Up Firebase Hosting

3: Initialize Firebase in Your Project

4: Add Firebase SDK to Your Project

5: Update HTML to Include Firebase

6: Update JavaScript for Firebase Integration

Step 5: Deploy Your App

Test Your Deployment

Troubleshooting Common Issues

Conclusion

About The Author

Saurav

Leave a Comment Cancel Reply

Create Password Strength Checker: A Beginner’s Cybersecurity Project

Table of Contents

What You Learn In This Project:

What is a Password Strength Checker?

Why do we need this?

Software Requirements:

Knowledge Requirements:

Technologies We Use and Why?

Step 1: Install Required Software

Installing VS Code:

Installing Node.js:

Step 2: Create Project Structure Using VS Code

Step 3: Set Up Project Files

Step-by-Step Development

Step 1: Create the HTML Structure

Understanding Above HTML Code:

Test Your HTML:

Step 2: Add CSS Styling

Test Your CSS

Step 3: Add JavaScript Functionality

Test Your JavaScript

Step 4: Set Up Firebase Project

1: Create Firebase Project

2: Set Up Firebase Hosting

3: Initialize Firebase in Your Project

4: Add Firebase SDK to Your Project

5: Update HTML to Include Firebase

6: Update JavaScript for Firebase Integration

Step 5: Deploy Your App

Test Your Deployment

Troubleshooting Common Issues

Conclusion

About The Author

Saurav

Share

Related Posts

Leave a Comment Cancel Reply