Source Code Password Generator Javascript

Password Generator dalam javascript adalah program sederhana untuk menghasilkan kunci sandi acak. Seluruh pemrograman dalam HTML, CSS, dan JavaScript.

Proyek ini akan membantu pengguna untuk membuat kunci pas yang berbeda untuk berbagai program.

Kamu cukup menggunakan editor kode apa pun untuk proyek ini. Ini adalah aplikasi web sederhana namun lengkap.

Tentang sistem :
Password Generator dalam javascript terus membuat kunci lulus acak untuk kamu.

Ini adalah program ringan sederhana untuk membuat kunci yang dapat kamu gunakan di mana saja tetapi dalam versi web.

Untuk menjalankan proyek ini, pertama-tama, kamu harus memiliki browser dan editor kode apa pun.

Maka kamu harus menjalankan file indeks dari editor atau langsung dari folder.

Saat layar dimuat, kamu dapat melihat beranda.

Dari sana kamu dapat mengatur kata sandi kamu.

Untuk menjalankan proyek ini, kami sarankan kamu untuk menggunakan browser modern seperti Google Chrome, Mozilla Firefox. Proyek tidak mendukung Explorer / Microsoft Edge.

Pembuat Kata Sandi dalam proyek JavaScript dengan kode sumber gratis untuk diunduh, digunakan hanya untuk tujuan pendidikan.

Berikut ini source codenya :

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Random Password Generator</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">


</head>
<body>

    <nav class="navbar navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Random Password Generator</a>
    </nav>

    <div class="container">

        <div class="row">

            <div class="col-lg-8 col-sm-12 mx-auto">

                <div class="content">
                    <h4>Random Password Generator</h4>
                    <br />
                    <input type="text" id="display">
                    <br />
                    <input type="range" min="0" max="50" name="slider" id="slider">
                    <br />
                    <button onclick="generate()">Generate</button>
                    <button onclick="copyPassword()">Copy to Clipboard</button>
                    <div id="length"></div>
                </div>

                <div class="previous_passwords">
                    <b>Previously Generated Passwords</b>
                    <br />
                    <div id="lastNums"></div>
                </div>

            </div>

        </div>

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

//generate random password
function generate(){

    //set password length/complexity
    let complexity = document.getElementById("slider").value;

    //possible password values
    let values = "ABCDEFGHIJKLMNOPQRSTUVWZYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%^&*()_+";

    let password = "";

    //create for loop to choose password characters
    for(var i = 0; i <= complexity; i++){
        password = password + values.charAt(Math.floor(Math.random() * Math.floor(values.length - 1)));
    }

    //add password to textbox/display area
    document.getElementById("display").value = password;

    //add password to previously generated passwords section
    document.getElementById("lastNums").innerHTML += password + "<br />";

}

//set default length display of 25
document.getElementById("length").innerHTML = "Length: 25";

//function to set length based on slider position
document.getElementById("slider").oninput = function(){

    if(document.getElementById("slider").value > 0){
        document.getElementById("length").innerHTML = "Length: " + document.getElementById("slider").value;
    }
    else{
        document.getElementById("length").innerHTML = "Length: 1";
    }

}

//function to copy password to clipboard
function copyPassword(){

    document.getElementById("display").select();

    document.execCommand("Copy");

    alert("Password copied to clipboard!");

}

CSS

.content{
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: lightgray;
    padding: 20px;
    width: 100%;
}

#display{
    width: 100%;
}

#slider{
    width: 100%;
}

#length{
    display: inline-block;
    width: 100px;
}

.previous_passwords{
    margin-bottom: 20px;
}

Jadikan satu file di satu foder, hasilnya maka akan seperti ini :

Mungkin itu saja yang dapat admin sampaikan untuk kamu, semoga bermanfaat sobat.

Koding Bagus

Source Code Password Generator Javascript

Post a Comment for "Source Code Password Generator Javascript"

Menu Halaman Statis