Weight lose BMI
Source Code
Password Generator
css/style.css
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
}
body{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h2{
font-weight: 400;
color: teal;
}
.container{
width: 300px;
}
.form-group{
width: 100%;
display: flex;
margin:20px 5px ;
gap:10px;
}
This script generates a random password based on user's specified parameters, such as length and the types of characters to include (numbers, uppercase letters, lowercase letters, and symbols). The script starts by fetching the necessary elements from the HTML page, such as the output element where the generated password will be displayed, the form element, the button element to copy the password, and the checkbox elements to specify the type of characters to include.
Then, it defines several functions to generate random characters of a specific type:
generateRandomChar(min,max): generates a random character based on the ASCII range provided as arguments.
captitalValue(): generates a random uppercase letter
smallValue(): generates a random lowercase letter
numberValue(): generates a random number
symbolValue(): generates a random symbol from predefined set of symbols
It also defined an array of objects which consist of an element property and a fun property. The element property is the checkbox element, and fun property is the function that generates random characters of that type.
The script adds an event listener to the form element, so that when the form is submitted, the script generates a random password based on the user's specified parameters. It then loops through the password length specified by the user, and for each iteration, it generates a random character from the functions that are checked. The generated password is displayed in the output element and the user can copy the password using the copy button. The script also checks if the password generated is empty or not and shows the corresponding message.
js/script.js
const outputElement=document.querySelector('#output');
const btnCopy=document.querySelector('#btnCopy');
const passwordLengthElement=document.querySelector('#length');
const numberElement=document.querySelector('#number');
const captialElement=document.querySelector('#captial');
const smallElement=document.querySelector('#small');
const symbolElement=document.querySelector('#symbol');
const frm=document.querySelector('#frm');
//Button Click to copy password
btnCopy.addEventListener('click',async()=>{
const pass=outputElement.value;
if(pass){
await navigator.clipboard.writeText(pass);
alert("Copied to clipboard");
}else{
alert("There is no password to copy");
}
});
/*
ASCII - American Standard Code for Information Interchange
0-128
0-255
65-90 - A-Z
97-122 - a-z
48-57 - 0-9
32 - space
*/
function generateRandomChar(min,max)
{
const limit=max-min+1;
return String.fromCharCode(Math.floor(Math.random()*limit)+min);
}
function captitalValue(){
return generateRandomChar(65,90);
}
function smallValue(){
return generateRandomChar(97,122);
}
function numberValue(){
return generateRandomChar(48,57);
}
function symbolValue(){
const symbols="~!@#$%^&*()_+|}{<>*./";
return symbols[Math.floor(Math.random()*symbols.length)];
}
const functionArray=[
{
element:numberElement,
fun:numberValue
},
{
element:captialElement,
fun:captitalValue
},
{
element:smallElement,
fun:smallValue
},
{
element:symbolElement,
fun:symbolValue
}
];
frm.addEventListener('submit',(e)=>{
e.preventDefault();
const limit=passwordLengthElement.value;
let generatedPassword="";
const funArray=functionArray.filter(({element})=>element.checked);
//console.log(funArray);
for(i=0;i
Comments
Post a Comment