RANDOM PASSWORD GENERATOR USING HTML,CSS AND JAVASCRIPT
RANDOM PASSWORD GENERATOR USING
HTML,CSS AND JAVA SCRIPT
The task is to generate a random password that may consist of alphabets, numbers, and special characters. This can be achieved in various ways in this article we will discuss the most popular two methods which are discussed below to solve the problem.
Source Code :
HTML :
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" type="text/css" href="styles.css"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"></head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> | |
| <title>Generating Strong Password</title> | |
| </head> | |
| <body> | |
| <div class="alert alert-info alert-dismissible fade show" id="copyalert"> | |
| <button type="button" class="close" data-dismiss="alert">×</button> | |
| <strong id="copymsg"></strong> | |
| </div> | |
| <div class="container"> | |
| <form> | |
| <h2>Random Password Generator</h2> | |
| <div class="input-group mb-3"> | |
| <input type="text" placeholder="Create Password" id="passwdinput"/> | |
| <div class="input-group-append"> | |
| <button class="btn btn-outline-secondary" id="cpybtn" type="button" onclick="copy()"><i class="far fa-copy"></i></button> | |
| </div> | |
| </div> | |
| <div class="custom-control custom-checkbox mb-3"> | |
| <input type="checkbox" class="custom-control-input" id="Symbolscheck" name="example1"> | |
| <label class="custom-control-label" for="Symbolscheck">Include Symbols</label> | |
| </div> | |
| <div class="custom-control custom-checkbox mb-3"> | |
| <input type="checkbox" class="custom-control-input" id="Numberscheck" name="example1"> | |
| <label class="custom-control-label" for="Numberscheck">Include Numbers</label> | |
| </div> | |
| <input type="button" class="btn btn-outline-success" onclick="generate_password('Symbolscheck','Numberscheck','passwdinput')" value="Generate Password"> | |
| <input type="reset" class="btn btn-outline-danger" value="Clear"> | |
| </form> | |
| <br> | |
| <br> | |
| <div class="alert alert-info alert-dismissible fade show"> | |
| <button type="button" class="close" data-dismiss="alert">×</button> | |
| <strong>Remember</strong> to share this with your Friends | |
| </div> | |
| <p>For more such content follow us on <a href="https://www.instagram.com/codelikedev.py" target="_blank"><i class="fab fa-instagram"></i></a></p> | |
| </div> | |
| <script type="text/javascript" src="script.js"></script> | |
| </body> | |
| </html> |
CSS :
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap'); | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| user-select: none; | |
| } | |
| body{ | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| } | |
| .container | |
| { | |
| position: relative; | |
| } | |
| #copyalert{ | |
| width: auto; | |
| position: fixed; | |
| top: 10px; | |
| left: 80%; | |
| display: none; | |
| } | |
| .container form{ | |
| width: 100%; | |
| } | |
| .container h2{ | |
| font-size: 30px; | |
| font-weight: 400; | |
| color: #333; | |
| text-align: center; | |
| } | |
| .alert{ | |
| text-align: center; | |
| font-size: 18px; | |
| } | |
| .container #passwdinput{ | |
| box-shadow: -4px -4px 10px rgba(255, 255, 255,1), | |
| inset 4px 4px 10px rgba(0, 0, 0,0.05), | |
| inset -4px -4px 10px rgba(255, 255, 255,1), | |
| 4px 4px 10px rgba(0, 0, 0,0.05); | |
| width: 90%; | |
| height: 60px; | |
| background: transparent; | |
| padding: 0 20px; | |
| outline: none; | |
| border: none; | |
| font-size: 24px; | |
| letter-spacing: 4px; | |
| box-sizing: border-box; | |
| border-radius: 8px; | |
| color: #333; | |
| } | |
| #cpybtn{ | |
| border-top-right-radius: 15px; | |
| border-bottom-right-radius: 5px; | |
| } | |
| .container .input-group button i{ | |
| font-size: 24px; | |
| } | |
| .container p{ | |
| font-size: 20px; | |
| color: dimgray; | |
| font-weight: 700; | |
| font-family: 'Cinzel', serif; | |
| text-align: end; | |
| } | |
| .container p a{ | |
| color: coral; | |
| font-size: 40px; | |
| } | |
| .container p a:hover{ | |
| background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } |
JAVASCRIPT :
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function () { | |
| $('#cpybtn').tooltip({title: "Copy Password !", animation: true,delay: {show: 400, hide: 500}}); | |
| document.oncontextmenu = document.body.oncontextmenu = function () { return false; } | |
| }); | |
| bool=true | |
| function generate_password(symbol_check_id,numbers_check_id,input_id){ | |
| var chars="" | |
| if(document.getElementById(symbol_check_id).checked){ | |
| chars+="!@#$%^&*()_+?><{}[]" | |
| } | |
| if(document.getElementById(numbers_check_id).checked){ | |
| chars+="0123456789" | |
| } | |
| chars+="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" | |
| var passwordlength=12; | |
| var password=""; | |
| for(var i=0;i<passwordlength;i++) | |
| { | |
| var rn=Math.floor(Math.random() * chars.length); | |
| password+=chars.substring(rn,rn+1) | |
| } | |
| document.getElementById(input_id).value=password | |
| } | |
| function copy(){ | |
| var input=document.getElementById('passwdinput') | |
| try{ | |
| input.select() | |
| input.setSelectionRange(0, 99999) | |
| document.execCommand("copy"); | |
| document.getElementById('copymsg').innerHTML="Copied!!" | |
| document.getElementById('copyalert').style.display="block" | |
| } | |
| catch{ | |
| document.getElementById('copymsg').innerHTML="Not Copied!!" | |
| document.getElementById('copyalert').style.display="block" | |
| } | |
| } |
Note : To use this go to this link
Comment Down your views below 👇
Comments
Post a Comment