Hi Everyone! In this post I will be showing you how to make a Random Password Generator with HTML, CSS, and Javascript. Follow me if you want more projects. Enjoy!
Now let's make it functional using #"#0B1EDF",background:"rgba(255, 255, 255, 0.214)",};// Selecting the Range Slider container which will effect the LENGTH property of the password.constslider=document.querySelector(".range__slider");// Text which will show the value of the range slider.constsliderValue=document.querySelector(".length__title");// Using Event Listener to apply the fill and also change the value of the text.slider.querySelector("input").addEventListener("input",event=>{sliderValue.setAttribute("data-length",event.target.value);applyFill(event.target);});// Selecting the range input and passing it in the applyFill func.applyFill(slider.querySelector("input"));// This function is responsible to create the trailing color and setting the fill.functionapplyFill(slider){constpercentage=(100*(slider.value-slider.min))/(slider.max-slider.min);constbg=`linear-gradient(90deg,${sliderProps.fill}${percentage}%,${sliderProps.background}${percentage+0.1}%)`;slider.style.background=bg;sliderValue.setAttribute("data-length",slider.value);}// Object of all the function names that we will use to create random letters of passwordconstrandomFunc={lower:getRandomLower,upper:getRandomUpper,number:getRandomNumber,symbol:getRandomSymbol,};// Random more secure valuefunctionsecureMathRandom(){returnwindow.crypto.getRandomValues(newUint32Array(1))[0]/(Math.pow(2,32)-1);}// Generator Functions// All the functions that are responsible to return a random value taht we will use to create password.functiongetRandomLower(){returnString.fromCharCode(Math.floor(Math.random()*26)+97);}functiongetRandomUpper(){returnString.fromCharCode(Math.floor(Math.random()*26)+65);}functiongetRandomNumber(){returnString.fromCharCode(Math.floor(secureMathRandom()*10)+48);}functiongetRandomSymbol(){constsymbols='~!@#$%^&*()_+{}":?><;.,';returnsymbols[Math.floor(Math.random()*symbols.length)];}// Selecting all the DOM Elements that are necessary -->// The Viewbox where the result will be shownconstresultEl=document.getElementById("result");// The input slider, will use to change the length of the passwordconstlengthEl=document.getElementById("slider");// Checkboxes representing the options that is responsible to create differnt type of password based on userconstuppercaseEl=document.getElementById("uppercase");constlowercaseEl=document.getElementById("lowercase");constnumberEl=document.getElementById("number");constsymbolEl=document.getElementById("symbol");// Button to generate the passwordconstgenerateBtn=document.getElementById("generate");// Button to copy the textconstcopyBtn=document.getElementById("copy-btn");// Result viewbox containerconstresultContainer=document.querySelector(".result");// Text info showed after generate button is clickedconstcopyInfo=document.querySelector(".result__info.right");// Text appear after copy button is clickedconstcopiedInfo=document.querySelector(".result__info.left");// if this variable is trye only then the copyBtn will appear, i.e. when the user first click generate the copyBth will interact.letgeneratedPassword=false;// Update Css Props of the COPY button// Getting the bounds of the result viewbox containerletresultContainerBound={left:resultContainer.getBoundingClientRect().left,top:resultContainer.getBoundingClientRect().top,};// This will update the position of the copy button based on mouse PositionresultContainer.addEventListener("mousemove",e=>{resultContainerBound={left:resultContainer.getBoundingClientRect().left,top:resultContainer.getBoundingClientRect().top,};if(generatedPassword){copyBtn.style.opacity='1';copyBtn.style.pointerEvents='all';copyBtn.style.setProperty("--x",`${e.x-resultContainerBound.left}px`);copyBtn.style.setProperty("--y",`${e.y-resultContainerBound.top}px`);}else{copyBtn.style.opacity='0';copyBtn.style.pointerEvents='none';}});window.addEventListener("resize",e=>{resultContainerBound={left:resultContainer.getBoundingClientRect().left,top:resultContainer.getBoundingClientRect().top,};});// Copy Password in clipboardcopyBtn.addEventListener("click",()=>{consttextarea=document.createElement("textarea");constpassword=resultEl.innerText;if(!password||password=="CLICK GENERATE"){return;}textarea.value=password;document.body.appendChild(textarea);textarea.select();document.execCommand("copy");textarea.remove();copyInfo.style.transform="translateY(200%)";copyInfo.style.opacity="0";copiedInfo.style.transform="translateY(0%)";copiedInfo.style.opacity="0.75";});// When Generate is clicked Password id generated.generateBtn.addEventListener("click",()=>{constlength=+lengthEl.value;consthasLower=lowercaseEl.checked;consthasUpper=uppercaseEl.checked;consthasNumber=numberEl.checked;consthasSymbol=symbolEl.checked;generatedPassword=true;resultEl.innerText=generatePassword(length,hasLower,hasUpper,hasNumber,hasSymbol);copyInfo.style.transform="translateY(0%)";copyInfo.style.opacity="0.75";copiedInfo.style.transform="translateY(200%)";copiedInfo.style.opacity="0";});// Function responsible to generate password and then returning it.functiongeneratePassword(length,lower,upper,number,symbol){letgeneratedPassword="";consttypesCount=lower+upper+number+symbol;consttypesArr=[{lower},{upper},{number},{symbol}].filter(item=>Object.values(item)[0]);if(typesCount===0){return"";}for(leti=0;i<length;i++){typesArr.forEach(type=>{constfuncName=Object.keys(type)[0];generatedPassword+=randomFunc[funcName]();});}returngeneratedPassword.slice(0,length).split('').sort(()=>Math.random()-0.5).join('');}// function that handles the checkboxes state, so at least one needs to be selected. The last checkbox will be disabled.functiondisableOnlyCheckbox(){lettotalChecked=[uppercaseEl,lowercaseEl,numberEl,symbolEl].filter(el=>el.checked)totalChecked.forEach(el=>{if(totalChecked.length==1){el.disabled=true;}else{el.disabled=false;}})}[uppercaseEl,lowercaseEl,numberEl,symbolEl].forEach(el=>{el.addEventListener('click',()=>{disableOnlyCheckbox()})})
That's It! You have now successfully created a Random Password Generator.
While the shuffle at least prevents the password from following a clear order of character types, by iterating over the types you still enforce a balance of character types, which in turn reduces randomness. Other than that, this is really neat - especially explicitly using window.crypto!
