Create Password Generator Using HTML, CSS & JAVASCRIPT

Password Generator Password Generator is the interesting Project for a beginners initially the page will generate 8 digits strong password everytime you click in Generate Button Also provides you the option to choose the length of the password till 20 digits but not less than 8 digit because strong password are not less than 8 digits. So Do this Project for your betterment in Javascript

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">
        <title>Password Generator</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://kit.fontawesome.com/04158e9780.js" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="card">
                <div class="password">
                    ******
                </div>
                <div class="incredecre">
                    <div class="minus">-</div>
                    <div class="num">8</div>
                    <div class="plus">+</div>
                </div>
                <div class="text">
                    Generate Strong Password!
                </div>
                <div class="button">
                    <button id="gen">Generate</button>
                </div>
                <div class="icons">
                    <i class="fa-brands fa-twitter"></i>
                    <i class="fa-brands fa-facebook"></i>
                    <i class="fa-brands fa-instagram"></i>
                    <i class="fa-brands fa-github"></i>
                    <i class="fa-brands fa-youtube"></i>
                </div>
                <div class="footer">
                    Genuine Coded By Coding Nepal Birtamode
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
    </html>

CSS

*{
        margin: 0;
        padding: 0;
    }
    body{
        background-color:#EAF6F6;
    }
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        height:100vh;
    }
    .container .card{
        height:500px;
        width:800px;
        background-color:#282c34;
        border-radius:12px;
        display: flex;
        flex-direction:column;
        align-items: center;
    }
    .container .card .password{
        height:50px;
        width:500px;
        margin-top:5%;
        border-radius:75px;
        color:#FF0063;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family:gilroy;
        font-weight:600;
        font-size:2rem;
        letter-spacing:4px;
        box-shadow: rgba(38, 38, 43, 0.3) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px inset;
    }
    .container .card  .incredecre{
        display: flex;
        align-items: center;
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px inset;
        height:50px;
        width:100px;
        margin-top:2%;
        color:#FF0063;
        font-family:poppins;
        font-size:1.5rem;
        justify-content: space-between;
        padding-left:2%;
        padding-right:2%;
        cursor: pointer;
    }
    .container .card .text{
        font-family: 'Source Code Pro', monospace;
        color:white;
        font-size:1.5rem;
        margin-top:5%;
    }
    .container .card .button button{
        height:50px;
        width:150px;
        border-radius:2px;
        background-color:#FF0063;
        font-family:Poppins;
        letter-spacing:2px;
        color:white;
        border:none;
        cursor: pointer;
    }
    .container .card .button{
        margin-top:5%;
    }
    .container .card .icons{
        margin-top:5%;
        width:100%;
        display: flex;
        justify-content: center;
    }
    .container .card .icons i{
        font-size:1.5rem;
        border:2px solid #FF0063;
        color:#FF0063;
        height:40px;
        width:40px;
        border-radius:50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right:2%;
        cursor: pointer;
    }
    .container .card .icons i:hover{
        background-color:#FF0063;
        color:white;
        transition-duration:0.3s;
    }
    .container .card .footer{
        font-family:poppins;
        font-weight:lighter;
        color:white;
        font-size:0.9rem;
        margin-top:3%;
    }

JAVASCRIPT

let uppercase ="ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('');
    let lowercase ="abcdefghijklmnopqrstuvwxyz".split('');
    let numbers ="123456789".split('');
    let sign ="!@#$%^&*()-_+={}[]<>,./?".split('');
    let password = uppercase.concat(lowercase,sign,numbers);
    let genpassword="";
    // password length
    let increase = document.querySelector('.plus');
    let decrease = document.querySelector('.minus');
    let number = document.querySelector('.num');
    let n=8;
    increase.addEventListener('click',()=>{
        n<20?n++:n=8;
        number.textContent=n;
    })
    decrease.addEventListener('click',()=>{
        n>8?n--:n=20;
        number.textContent=n;
    })
    // main
    function auto(){
    for(let i=1;i<=n;i++){
        genpassword = genpassword + password[randomch()];
    }
    function randomch(){
        let random = Math.floor(Math.random()*password.length);
        return random;
    }
    }
    // password
    let pword = document.querySelector('.password');
    let button = document.getElementById('gen');
    button.addEventListener('click',()=>{
        auto();
    pword.textContent = genpassword;
    genpassword="";
    })

Password Generator

HTML

CSS

JAVASCRIPT

Subscribe to my newsletter

Dipesh Murmu

Dipesh Murmu