Strong Password Checker with HTML, CSS, and JavaScript @rayen-code

Rayen

Welcome to the realm of enhanced security as we delve into creating a Strong Password Checker using the trifecta of HTML, CSS, and JavaScript. This essential tool empowers users to create robust passwords, safeguarding their digital identities against unauthorized access.




Step 1: HTML Markup:

Begin by structuring your HTML to incorporate the password input field and the elements for displaying password strength. Define the container and the necessary components, setting the foundation for your password checker.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="container">
        <div class="input-area">
            <input type="text" onkeyup="check()" id="password" placeholder="enter your password">
            <div class="output">
                <p>Password must include:</p>
                <li><span id="length">Minimum 8 characters</span></li>
                <li><span id="lower">At least one lowercase letter</span></li>
                <li><span id="upper">At least one uppercase letter</span></li>
                <li><span id="number">At least one number</span></li>
                <li><span id="special">At least one special character</span></li>
            </div>
        </div>
    </div>

    <script src="main.js"></script>
</body>
</html>

Step 2: Styling with CSS:

Elevate the visual appeal of your password checker with CSS styles. Customize the appearance of the input field and the strength meter to provide a user-friendly experience.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --blue: #E7F2F8;
    --aqua: #74BDCB;
    --salmon: #FFA384;
    --freesia: #EFE7BC;
}
body {
    min-height: 100vh;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--aqua);
}
.container {
    padding: 30px;
    position: relative;
}
input {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--salmon);
    font-size: 1.3rem;
    outline: none;
}
input:focus {
    border: 2px solid var(--salmon);
}
.output {
    position: absolute;
    padding: 30px;
    background: var(--blue);
    border-radius: 10px;
    top: -135%;
    left: 50%;
    width: 350px;
    border: 1px solid #0002;

    display: none;
    opacity: 0;
    animation: anime 0.5s ease forwards;
}
@keyframes anime {
    to {
        top: -150%;
        opacity: 1;
    }
}

input:focus + .output {
    display: block;
 
}
.output::before {
    content: "";
    position: absolute;
    bottom: -16px;
    width: 30px;
    aspect-ratio: 1;
    background: inherit;
    rotate: 45deg;
    border-bottom: 1px solid #0002;
    border-right: 1px solid #0002;
}

.output p {
    font-weight: bold;
    margin-bottom: 10px;
}
.output li {
    margin-left: 20px;
}
 .output span {
    font-size: .9rem;
    color: red;
    line-height: 1.2rem;
 }

Step 3: Adding JavaScript Interaction:

Implement the logic for checking password strength using JavaScript. Define rules for password complexity and update the strength meter dynamically based on the user's input.
//-------------------- Java Script --------------------//
let password = document.getElementById("password");
let output = document.querySelector(".output");

let length = document.getElementById("length");
let lower = document.getElementById("lower");
let upper = document.getElementById("upper");
let number = document.getElementById("number");
let special = document.getElementById("special");

function check() {
    let passwordValue = password.value;
    // console.log(passwordValue)
    if (passwordValue.length > 0) {
        output.style.display = "block";
    }else {
        output.style.display = "";
    }


    if (passwordValue.length >= 8) {
        length.style.color = "green";
    }else {
        length.style.color = "";
    }

    if(passwordValue.search(/[a-z]/) != -1) {
        lower.style.color = "green";
    }else {
        lower.style.color = "";
    }
    
    if(passwordValue.search(/[A-Z]/) != -1) {
        upper.style.color = "green";
    }else {
        upper.style.color = "";
    }

    
    if(passwordValue.search(/[0-9]/) != -1) {
        number.style.color = "green";
    }else {
        number.style.color = "";
    }

    if(passwordValue.search(/[\!\@\#\$\%\^\&\*\(\)\_\+\{\}\:\"\<\>\?\|\[\]\\\;\'\,\.]/) != -1) {
        special.style.color = "green";
    }else {
        special.style.color = "";
    }
}

the Strong Password Checker project enhances security by guiding users to create resilient passwords. With the amalgamation of HTML, CSS, and JavaScript, you can fortify digital identities and protect sensitive information effectively.

0 Comments