How to make Password Generator Using HTML, CSS, & JavaScript

How to make Password Generator Using HTML, CSS, & JavaScript

How to make Password Generator Using HTML, CSS, & JavaScript

Hello everyone. Welcome to today’s tutorial on Codewithrandom. This project will help to create a random password that will contain all characters and symbols mixed and complex. In Today’s session, We will use HTML, CSS, and JavaScript to complete this Project. The HTML (Hypertext Markup Language) will help us to create the structure for the list with some necessary attributes and elements.

Then we will use CSS (Cascading Stylesheet) which will help us to style or design the project with suitable padding and alignment. At last, we will use JS (JavaScript) which will add logic to make the project responsive from the user end.

In this article, we present How to make Password Generator Using HTML, CSS, &JavaScript with complete source code for you so you can copy and paste it into your project.

I hope you have got an idea about the project.

HTML Code for Password Generator

<html lang="en">
<head>
    <title>Random Password Generator</title>
    <!--Fontawesome Icons-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
    <!--Google Font-->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <input type="text" id="output">
        <button>
            <i class="fas fa-random" onclick="genPassword()"></i>
        </button>
        <button>
            <i class="far fa-copy" onclick="copyClipboard()"></i>
        </button>
        <input type="range" id="length" min="8" max="20" value="8" oninput="genPassword()">
        <h3 id="length-val">8</h3>
    </div>

<!--Script-->
<script src="script.js"></script>
</body>
</html>

First, we’ll start with creating the structure of the Random Password Generator project for that as you can see in the above code we have used all the necessary elements & attributes. We have used a button and range bar so that it is an indicator of the password length. Let us know code the CSS part to add styling and aligned the tags.

How To Create OTP Input Field Using HTML, CSS,&Javascript

CSS Code for Password Generator

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: none;
}
body{
    height: 100vh;
    background: linear-gradient(
        -135deg,
        #0048ce,
        #008bfd
    );
}
.container{
    width: 40%;
    min-width: 450px;
    background-color: #1c1e21;
    padding: 80px 30px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    border-radius: 8px;
    box-shadow: 0 15px 20px rgba(0,0,0,0.15);
}
#output{
    background-color: transparent;
    border:none;
    border-bottom: 2px solid #e2e2e2;
    width: 75%;
    height: 35px;
    padding: 20px 5px;
    font-family: 'Roboto Mono', monospace;
    color: #f5f5f5;
    font-size: 18px;
    letter-spacing: 1px;
}
button{
    width: 11%;
    height: 38px;
    background-color: transparent;
    border: none;
    color: #ffffff;
    font-size: 18px;
    float: right;
    text-align: right;
    cursor: pointer;
}
input[type="range"]{
    -webkit-appearance: none;
    appearance: none;
    width: 85%;
    height: 3.5px;
    margin-top: 80px;
    background-color: #e2e2e2;
    border-radius: 3.5px;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 20px;
    background-color: #008bfd;
    border-radius: 50%;
}
h3{
    font-family: 'Roboto Mono',sans-serif;
    display: inline-block;
    width: 10%;
    color: #1c1e21;
    background-color: #ffffff;
    text-align: center;
    padding: 5px 0;
    margin-left: 3%;
    border-radius: 3px;
    font-size: 18px;
}

Second, comes the CSS code which we have styled for the structure we have padded as well as aligned the Random Password Generator project so that it is properly situated and doesn’t get messy with suitable CSS elements. Now, let’s code the JavaScript part to make it responsive.

Quiz App with Timer using HTML, CSS, &JavaScript

JavaScript Code for Password Generator

const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!\"$%&/()=?@~`\\.\';:+=^*_-0123456789';
let output = document.getElementById("output");

function randomValue(value){
    return Math.floor(Math.random()*value);
}

function genPassword(){
    let length = document.getElementById('length').value;
    document.getElementById("length-val").textContent = length;
    let str = '';

    for(let i=0; i<length ; i++){
        let random = randomValue(characters.length);
        str += characters.charAt(random);
    }
    output.value = str;

}

function copyClipboard(){
    output.select();
    document.execCommand('copy');
    alert("Password Copied!");
}
genPassword();

Last stage of the project the JavaScript which we added the logic and coded as per the requirement with some conditions. Then we created a logic to randomize the character while providing the password. Let us see the Final Output of the project on how to make a Password Generator Using HTML, CSS, &JavaScript.

Final Output Of Password Generator Using HTML, CSS, & JavaScript

We have successfully created our How to make Password Generator Using HTML, CSS, &JavaScript.  You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You And Happy Learning!!!

Code Idea – codingartist

Written By – Harsh Sawant

Code By – @harshh9



Tags: , ,

Leave a Reply