Skip to content

Commit

Permalink
Merge pull request #49 from shresritik/new-user
Browse files Browse the repository at this point in the history 
added password generator
  • Loading branch information
@Chayandas07
Chayandas07 authored Oct 21, 2023
2 parents b500550 + e52dfdf commit f2353ec
Show file tree
Hide file tree
Showing 2 changed files with 279 additions and 0 deletions.
123 changes: 123 additions & 0 deletions Password Generator/password.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css"
rel="stylesheet"
/>
<title>Password Generator</title>
<style>
.gradient-bg-services {
background-color: #0f0e13;
background-image: radial-gradient(
at 0% 0%,
hsla(253, 16%, 7%, 1) 0,
transparent 50%
),
radial-gradient(
at 50% 100%,
hsla(225, 39%, 25%, 1) 0,
transparent 50%
);
}

.gradient-bg-footer {
background-color: #0f0e13;
background-image: radial-gradient(
at 0% 100%,
hsla(253, 16%, 7%, 1) 0,
transparent 53%
),
radial-gradient(
at 50% 150%,
hsla(339, 49%, 30%, 1) 0,
transparent 50%
);
}
</style>
</head>
<body>
<div
class="wrapper w-full min-h-screen gradient-bg-services text-white grid place-content-center"
>
<div
class="rounded min-w-[60vw] md: w-[35vw] main flex flex-col items-center gap-5 bg-[rgba(256,256,256,0.1)] p-5 border-[rgba(255,255,255,0.7)] shadow-[-17px_17px_17px_rgba(10,10,10,0.25)] backdrop-blur"
>
<h1
class="w-full gradient-bg-footer font-bold text-center py-3 rounded border-b-2 border-b-gray-100"
>
Password Generator
</h1>

<div class="flex justify-between w-[95%]">
<input
readonly
placeholder="Password"
password-display
class="p-2 rounded text-white font-bold bg-blue-950 border-solid border-2 border-cyan-400"
/>
<button class="relative">
<span
datacopy-msg
class="hidden absolute top-[-15px] right-[-15px] bg-gray-700 px-2 rounded-lg"
></span>
<i class="ri-file-copy-line text-2xl text-blue-400" copy-button></i>
</button>
</div>

<div class="utility flex flex-col w-[95%] justify-between gap-2">
<div class="length flex w-full justify-between items-center">
<p>Password Length</p>
<span pass-len>0</span>
</div>
<input
type="range"
name=""
id=""
min="1"
max="20"
step="1"
slider
class=""
/>
<div class="checkbox">
<div>
<input type="checkbox" name="" id="uppercase" />
<label for="uppercase">Include UpperCase</label>
</div>
<div>
<input type="checkbox" name="" id="lowercase" />
<label for="lowercase">Include LowerCase</label>
</div>
<div>
<input type="checkbox" name="" id="number" />
<label for="number">Include Numbers</label>
</div>
<div>
<input type="checkbox" name="" id="symbol" />
<label for="symbol">Include Symbols</label>
</div>
</div>
<div class="strength flex w-full justify-between items-center">
<p>Strength</p>
<div
strength-indicator
class="w-[15px] h-[15px] rounded-full"
></div>
</div>
</div>

<button
class="w-full gradient-bg-footer text-center py-3 rounded border-b-2 border-b-gray-100 shadow-[-17px_17px_17px_rgba(10,10,10,0.25)]"
id="generate"
>
Generate Password
</button>
</div>
</div>
<script src="./password.js"></script>
</body>
</html>
156 changes: 156 additions & 0 deletions Password Generator/password.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
// Variables to access HTML
let content = document.querySelector("[password-display]");
const copyMsg = document.querySelector("[datacopy-msg]");
const copyButton = document.querySelector("[copy-button]");

let passwordNo = document.querySelector("[pass-len]");
let slideTag = document.querySelector("[slider]");

let uppercase = document.querySelector("#uppercase");
let lowerCase = document.querySelector("#lowercase");
let numberInput = document.querySelector("#number");
let symbol = document.querySelector("#symbol");

let indicator = document.querySelector("[strength-indicator]");

const generate = document.querySelector("#generate");




let passWord = "";
let passWordLen = 10; // Default
let color = '#b4b4b4';

handleSlider(); // Call for first time after reload page
function handleSlider(){
slideTag.value = passWordLen;
passwordNo.textContent = passWordLen;
}

slideTag.addEventListener('input', (event)=>{
passWordLen = event.target.value;
handleSlider();
})

indicatorfun(color); //call
indicatorfun(color);
function indicatorfun(color){
indicator.style.backgroundColor = color;
indicator.style.boxShadow = "100px 200px 2px color";

}

// Universal formula to get any random no. [min, max}
function getRandomInt(min, max){
return Math.floor( Math.random()*(max-min) ) + min ;
}

function getRandomNumber(){
return getRandomInt(0, 9);
}

function getRandomLowerCase(){
return String.fromCharCode(getRandomInt(97, 123));
}

function getRandomUpperCase(){
return String.fromCharCode(getRandomInt(65, 91));
}

const symbolArr = "\|<`(>,.?{~!@#[+-=^&*)/$%_}]";
function getRandomSymbol(){
return symbolArr.charAt((getRandomInt(0, symbolArr.length)));
}

// Calculation of strength of a password and calls for indicator
function calcStrength(){
let upperVar = uppercase.checked;
let lowerVar = lowerCase.checked;
let numberVar = number.checked;
let symbolVar = symbol.checked;

// Own Logic
if(upperVar && lowerVar && numberVar && symbolVar){
indicatorfun('#3cb371');
}else if((upperVar && lowerVar && numberVar) || (upperVar && lowerVar && symbolVar) || (upperVar && numberVar && symbolVar)){
indicatorfun('#3cb371')
}else if((upperVar && lowerVar && !numberVar && !symbolVar) || (upperVar && !lowerVar && !numberVar && symbolVar) || (!upperVar && !lowerVar && numberVar && symbolVar) || (!upperVar && lowerVar && numberVar && !symbolVar)){
indicatorfun('#ffa500');
}else{
indicatorfun('#ff0000');
}
}


// Clipboard API fetched function. [WriteText]
async function copyToClipboard(){
try{
await navigator.clipboard.writeText(content.textContent);
copyMsg.textContent = "Copied";
}
catch(e){
copyMsg.textContent = "Failed to copy";
}
copyMsg.classList.remove("hidden");
// For disappering
setTimeout(()=>{
copyMsg.classList.add("hidden");
}, 2000);
}

copyButton.addEventListener('click', (event) =>{
if(content.value) copyToClipboard(); // only is password is generated
});


// For final output + suffle array - [Protection algo]
// function suffleArr(array){
// let pass = "";
// for(let i = array.length-1; i>0; i--){
// let randomInd = getRandomInt(0,array.length);
// let temp = array[randomInd];
// array[randomInd] = array[i];
// array[i] = temp;
// pass = array[i] + pass ;
// }
// return pass;
// }


// Actual Brain
function generatePassword(){
let arr = [];
passWord = "";
if(uppercase.checked){
passWord+= getRandomUpperCase();
arr.push(getRandomUpperCase);
}
if(lowerCase.checked){
passWord+= getRandomLowerCase();
arr.push(getRandomLowerCase);
}
if(numberInput.checked){
passWord+= getRandomNumber();
arr.push(getRandomNumber);
}
if(symbol.checked){
passWord+= getRandomSymbol();
arr.push(getRandomSymbol);
}
// If any check box is not checked.
if(passWord.length<=0) {
content.placeholder = "Choose atleast one box";
return ;
}

for(let i=passWord.length; i<passWordLen; i++){
let fun = arr[getRandomInt(0, arr.length)]();
passWord+= fun;
}
//passWord = suffleArr(Array.from(passWord));
content.value = passWord;
calcStrength();
}

generate.addEventListener('click', generatePassword);

0 comments on commit f2353ec

Please sign in to comment.