Its a Random Password Generator which is made up of Html, Css and Javascript, In this post we will see how to make it. So let's get started.
Html Portion
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="yt">
<a href="https://codewaditya.blogspot.com/?m=1">My website</a><br><br><br><br><br><a href="https://youtu.be/nfjA7FTUJxc" class="youtube">Lets Learn</a>
</div>
<div class="container">
<div class="box">
<span id="outpt" class="text1"></span>
</div>
<div class="row">
<div class="left">
Password Length
</div>
<div class="right">
<input type="number" name="" id="lent" max="30" min="2" value="10" />
</div>
</div>
<div class="row">
<label for="upper-case">
<div class="left">
Contains Uppercase
</div>
</label>
<div class="right">
<input type="checkbox" name="" id="upper-case" checked/>
</div>
</div>
<div class="row">
<label for="lower-case">
<div class="left">
Contains Lowercase
</div>
</label>
<div class="right">
<input type="checkbox" name="" id="lower-case" />
</div>
</div>
<div class="row">
<label for="numbers">
<div class="left">
Contains Numbers
</div>
</label>
<div class="right">
<input type="checkbox" name="" id="numbers" />
</div>
</div>
<div class="row">
<label for="symbols">
<div class="left">
Contains Symbols
</div>
</label>
<div class="right">
<input type="checkbox" name="" id="symbols" />
</div>
</div>
<div class="row">
<button id="btn">
Generate
</button>
</div>
</div>
</html>
Css Portion
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');
*{
margin:0;
padding:0;
box-sizing:border-box ;
font-family:'Comfortaa', cursive;
transition: 1.5s ;
}
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
flex-direction:column;
background:#efefef;
}
.container{
height:310px;
width:350px;
border:1px solid #efefef;
box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
-6px -6px 10px rgba(255, 255, 255, .5),
6px 6px 8px rgba(255, 255, 255, .075),
6px 6px 10px rgba(0, 0, 0, .15);
border-radius:10px;
}
.box{
height:50px;
width:90%;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
margin:20px;
box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
-6px -6px 10px rgba(255, 255, 255, .5),
6px 6px 8px rgba(255, 255, 255, .075),
6px 6px 10px rgba(0, 0, 0, .15);
}
.row {
width: 80%;
display: flex;
margin-top: 10px;
justify-content: space-between;
color: black;
font-size: 20px;
margin-left:40px;
}
button{
padding:15px;
width:90%;
margin-left:10px;
border:none;
box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
-6px -6px 10px rgba(255, 255, 255, .5),
6px 6px 8px rgba(255, 255, 255, .075),
6px 6px 10px rgba(0, 0, 0, .15);
border-radius:10px;
}
a{
text-decoration:none;
color:black;
padding:10px;
box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
-6px -6px 10px rgba(255, 255, 255, .5),
6px 6px 8px rgba(255, 255, 255, .075),
6px 6px 10px rgba(0, 0, 0, .15);
border-radius:10px;
margin:20px;
}
.youtube{
position:absolute;
margin-top:-50px;
}
Js Portion
window.onload = () => {
alert("Join Programmers Group\nhttps://chat.whatsapp.com/HA2RrgV8XKM3wNdeL8rwUz ")
alert("guys please upvote my code if you like it")
console.log("hello everyone")
const cap = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
const sma = "abcdefghijklmnopqrstuvwxyz"
const num = "1234567890"
const spe = "_€£¥₩!@#$%^&*()?"
const paBx = document.getElementById("outpt")
const lenth = document.getElementById("lent")
const capital = document.getElementById("upper-case")
const small = document.getElementById("lower-case")
const nums = document.getElementById("numbers")
const symbs = document.getElementById("symbols")
const randData = (dataSet) => {
return dataSet[Math.floor(Math.random() * dataSet.length)]
}
const genPass = (password = "") => {
if (capital.checked){
password += randData(cap)
}
if (small.checked){
password += randData(sma)
}
if (nums.checked){
password += randData(num)
}
if (symbs.checked){
password += randData(spe)
}
if (password.length < lenth.value){
return genPass(password)
}
paBx.innerText = truncateString(password, lenth.value)
}
genPass();
document.getElementById("btn").addEventListener(
"click",
function() {
genPass();
}
)
function truncateString(str, num){
if (str.lenght > num ){
let subStr = str.substring(0, num);
return subStr;
}
else {
return str;
}
}
}