Today, in this blog we are going to learn how to create a strong random password generator using javascript. As we know with using personal facts, such as your name, date of birth, home address or favourite singer or sports team, as a password, is this information is easily accessible on Facebook, Twitter and other social media accounts, meaning hackers will find it easy to crack these passwords. We recommend not using personal information as it’s so easily accessible through social networks, electoral rolls etc, so it’s easy for hackers to crack. Likewise, consecutive strings of numbers like ‘12345’ shouldn’t be used, either, as they’re too obvious. Why you should use the secure password A strong password is essential for protecting your personal and professional assets online. Security experts recommend users generate secure passwords for every website and account. Sadly, most online users choose bad passwords (e.g. their name, birthday, child’s name, or a predictable sequence of numbers) for all their accounts. These types of passwords are extremely easy to crack and once an account is compromised, there’s nothing the user can do about it. On the other hand, manually generating strong passwords can be a tedious task. This is exactly why you should use a random secure password online! You May Also Like: Take Image Snapshot from a webcam with Jquery and HTML How to decode JSON data and accessing the results in PHP Difference Between search() and indexOf() in Javascript Limit number of login attempt using PHP & MySQL What makes a password strong? A strong password should be at least 15 characters long and contain the following elements: Special symbols like: ! ” $ ? $ ? % ^ & * ( ) _ – + = { [ } ] # @ A mix between lowercase and uppercase letters (e.g. XiDmDKxlArosD) Random numbers (e.g. isX223Xdkd193xKss1) Words that aren’t in the dictionary (quckeldovas19d##92s) Now let’s begin and know how we can create a random password generator. First of all, we create an HTML file The HTML [pastacode manual=”%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang%3D%22en%22%3E%0D%0A%3Chead%3E%0D%0A%3Cmeta%20charset%3D%22UTF-8%22%3E%0D%0A%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1%22%3E%0D%0A%3Ctitle%3ECodePen%20-%20Password%20Generator%20-%20%23013%20of%20%23100Days100Projects%3C%2Ftitle%3E%0D%0A%3Clink%20rel%3D’stylesheet’%20href%3D’https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Ffont-awesome%2F5.10.2%2Fcss%2Fall.min.css’%3E%0D%0A%3Clink%20rel%3D’stylesheet’%20href%3D’style.css’%3E%0D%0A%3C%2Fhead%3E%0D%0A%0D%0A%3Cbody%20translate%3D%22no%22%3E%0D%0A%0D%0A%20%20%20%20%3Cdiv%20class%3D%22container%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Ch2%3EPassword%20Generator%3C%2Fh2%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22result-container%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20id%3D%22result%22%3E%3C%2Fspan%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%22%20id%3D%22clipboard%22%3E%0D%0A%09%09%09%3Ci%20class%3D%22far%20fa-clipboard%22%3E%3C%2Fi%3E%0D%0A%09%09%09%3C%2Fbutton%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22settings%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22setting%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Clabel%3EPassword%20length%3C%2Flabel%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22number%22%20id%3D%22length%22%20min%3D’4’%20max%3D’20’%20value%3D’20’%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22setting%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Clabel%3EInclude%20uppercase%20letters%3C%2Flabel%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20id%3D%22uppercase%22%20checked%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22setting%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Clabel%3EInclude%20lowercase%20letters%3C%2Flabel%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20id%3D%22lowercase%22%20checked%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22setting%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Clabel%3EInclude%20numbers%3C%2Flabel%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20id%3D%22numbers%22%20checked%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22setting%22%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Clabel%3EInclude%20symbols%3C%2Flabel%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20id%3D%22symbols%22%20checked%20%2F%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-large%22%20id%3D%22generate%22%3E%0D%0A%09%09Generate%20password%0D%0A%09%09%3C%2Fbutton%3E%0D%0A%20%20%20%20%3C%2Fdiv%3E%0D%0A%20%20%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fjquery%2F3.4.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E%0D%0A%20%20%20%20%3Cscript%20src%3D%22https%3A%2F%2Funpkg.com%2Fsweetalert%2Fdist%2Fsweetalert.min.js%22%3E%3C%2Fscript%3E%0D%0A%20%20%20%20%3Cscript%20src%3D%22main.js%22%3E%3C%2Fscript%3E%0D%0A%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E” provider=”manual” lang=”default”/] The CSS [pastacode manual=”%20%20%20%20%20%20%20%20%40import%20url(‘https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DMuli%26display%3Dswap’)%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20*%20%7B%0D%0A%20%20%20%20%20%20%20%20%09box-sizing%3A%20border-box%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20body%20%7B%0D%0A%20%20%20%20%20%20%20%20%09background-image%3A%20linear-gradient(to%20top%2C%20%23a18cd1%200%25%2C%20%23fbc2eb%20100%25)%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%23fff%3B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20flex%3B%0D%0A%20%20%20%20%20%20%20%20%09font-family%3A%20’Muli’%2C%20sans-serif%3B%0D%0A%20%20%20%20%20%20%20%20%09flex-direction%3A%20column%3B%0D%0A%20%20%20%20%20%20%20%20%09align-items%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09justify-content%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09padding%3A%2010px%3B%0D%0A%20%20%20%20%20%20%20%20%09min-height%3A%20100vh%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20p%20%7B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%205px%200%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20h2%20%7B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%2010px%200%2020px%3B%0D%0A%20%20%20%20%20%20%20%20%09text-align%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20input%5Btype%3Dcheckbox%5D%20%7B%0D%0A%20%20%20%20%20%20%20%20%09margin-right%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.container%20%7B%0D%0A%20%20%20%20%20%20%20%20%09background-image%3A%20radial-gradient(%20circle%20farthest-corner%20at%2010%25%2020%25%2C%20%20rgba(90%2C92%2C106%2C1)%200%25%2C%20rgba(32%2C45%2C58%2C1)%2081.3%25%20)%3B%0D%0A%20%20%20%20%20%20%20%20%09box-shadow%3A%200px%202px%2010px%20rgba(255%2C%20255%2C%20255%2C%200.2)%3B%0D%0A%20%20%20%20%20%20%20%20%09padding%3A%2020px%3B%0D%0A%20%20%20%20%20%20%20%20%09width%3A%20350px%3B%0D%0A%20%20%20%20%20%20%20%20%09max-width%3A%20100%25%3B%0D%0A%20%20%20%20%20%20%20%20%09border-radius%3A%2010px%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.result-container%20%7B%0D%0A%20%20%20%20%20%20%20%20%09background-color%3A%20rgba(0%2C%200%2C%200%2C%200.4)%3B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20flex%3B%0D%0A%20%20%20%20%20%20%20%20%09justify-content%3A%20flex-start%3B%0D%0A%20%20%20%20%20%20%20%20%09align-items%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09position%3A%20relative%3B%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2018px%3B%0D%0A%20%20%20%20%20%20%20%20%09letter-spacing%3A%201px%3B%0D%0A%20%20%20%20%20%20%20%20%09padding%3A%2012px%2010px%3B%0D%0A%20%20%20%20%20%20%20%20%09height%3A%2050px%3B%0D%0A%20%20%20%20%20%20%20%20%09width%3A%20100%25%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.result-container%20%23result%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%09word-wrap%3A%20break-word%3B%0D%0A%20%20%20%20%20%20%20%20%09max-width%3A%20calc(100%25%20-%2040px)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.result-container%20.btn%20%7B%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2020px%3B%0D%0A%20%20%20%20%20%20%20%20%09position%3A%20absolute%3B%0D%0A%20%20%20%20%20%20%20%20%09top%3A%205px%3B%0D%0A%20%20%20%20%20%20%20%20%09right%3A%205px%3B%0D%0A%20%20%20%20%20%20%20%20%09height%3A%2040px%3B%0D%0A%20%20%20%20%20%20%20%20%09width%3A%2040px%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.btn%20%7B%0D%0A%20%20%20%20%20%20%20%20%09border%3A%20none%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%23fff%3B%0D%0A%20%20%20%20%20%20%20%20%09cursor%3A%20pointer%3B%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2016px%3B%0D%0A%20%20%20%20%20%20%20%20%09padding%3A%208px%2012px%3B%0D%0A%20%20%20%20%20%20%20%20%09background%3A%20linear-gradient(to%20right%2C%20%23ff416c%2C%20%23ff4b2b)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.btn-large%20%7B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20block%3B%0D%0A%20%20%20%20%20%20%20%20%09width%3A%20100%25%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.setting%20%7B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20flex%3B%0D%0A%20%20%20%20%20%20%20%20%09justify-content%3A%20space-between%3B%0D%0A%20%20%20%20%20%20%20%20%09align-items%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%2015px%200%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%40media%20screen%20and%20(max-width%3A%20400px)%20%7B%0D%0A%20%20%20%20%20%20%20%20%09.result-container%20%7B%0D%0A%20%20%20%20%20%20%20%20%09%09font-size%3A%2014px%3B%0D%0A%20%20%20%20%20%20%20%20%09%7D%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%2F*%20SOCIAL%20PANEL%20CSS%20*%2F%0D%0A%20%20%20%20%20%20%20%20.social-panel-container%20%7B%0D%0A%20%20%20%20%20%20%20%20%09position%3A%20fixed%3B%0D%0A%20%20%20%20%20%20%20%20%09right%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%09bottom%3A%2080px%3B%0D%0A%20%20%20%20%20%20%20%20%09transform%3A%20translateX(100%25)%3B%0D%0A%20%20%20%20%20%20%20%20%09transition%3A%20transform%200.4s%20ease-in-out%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel-container.visible%20%7B%0D%0A%20%20%20%20%20%20%20%20%09transform%3A%20translateX(-10px)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20%7B%09%0D%0A%20%20%20%20%20%20%20%20%09background-color%3A%20%23fff%3B%0D%0A%20%20%20%20%20%20%20%20%09border-radius%3A%2016px%3B%0D%0A%20%20%20%20%20%20%20%20%09box-shadow%3A%200%2016px%2031px%20-17px%20rgba(0%2C31%2C97%2C0.6)%3B%0D%0A%20%20%20%20%20%20%20%20%09border%3A%205px%20solid%20%23001F61%3B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20flex%3B%0D%0A%20%20%20%20%20%20%20%20%09flex-direction%3A%20column%3B%0D%0A%20%20%20%20%20%20%20%20%09justify-content%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09align-items%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09font-family%3A%20’Muli’%3B%0D%0A%20%20%20%20%20%20%20%20%09position%3A%20relative%3B%0D%0A%20%20%20%20%20%20%20%20%09height%3A%20169px%3B%09%0D%0A%20%20%20%20%20%20%20%20%09width%3A%20370px%3B%0D%0A%20%20%20%20%20%20%20%20%09max-width%3A%20calc(100%25%20-%2010px)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20button.close-btn%20%7B%0D%0A%20%20%20%20%20%20%20%20%09border%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%2397A5CE%3B%0D%0A%20%20%20%20%20%20%20%20%09cursor%3A%20pointer%3B%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2020px%3B%0D%0A%20%20%20%20%20%20%20%20%09position%3A%20absolute%3B%0D%0A%20%20%20%20%20%20%20%20%09top%3A%205px%3B%0D%0A%20%20%20%20%20%20%20%20%09right%3A%205px%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20button.close-btn%3Afocus%20%7B%0D%0A%20%20%20%20%20%20%20%20%09outline%3A%20none%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20p%20%7B%0D%0A%20%20%20%20%20%20%20%20%09background-color%3A%20%23001F61%3B%0D%0A%20%20%20%20%20%20%20%20%09border-radius%3A%200%200%2010px%2010px%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%23fff%3B%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2014px%3B%0D%0A%20%20%20%20%20%20%20%20%09line-height%3A%2018px%3B%0D%0A%20%20%20%20%20%20%20%20%09padding%3A%202px%2017px%206px%3B%0D%0A%20%20%20%20%20%20%20%20%09position%3A%20absolute%3B%0D%0A%20%20%20%20%20%20%20%20%09top%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%09left%3A%2050%25%3B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%09transform%3A%20translateX(-50%25)%3B%0D%0A%20%20%20%20%20%20%20%20%09text-align%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09width%3A%20235px%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20p%20i%20%7B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%200%205px%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20p%20a%20%7B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%23FF7500%3B%0D%0A%20%20%20%20%20%20%20%20%09text-decoration%3A%20none%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20h4%20%7B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%2020px%200%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%2397A5CE%3B%09%0D%0A%20%20%20%20%20%20%20%20%09font-family%3A%20’Muli’%3B%09%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2014px%3B%09%0D%0A%20%20%20%20%20%20%20%20%09line-height%3A%2018px%3B%0D%0A%20%20%20%20%20%20%20%20%09text-transform%3A%20uppercase%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20ul%20%7B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20flex%3B%0D%0A%20%20%20%20%20%20%20%20%09list-style-type%3A%20none%3B%0D%0A%20%20%20%20%20%20%20%20%09padding%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%200%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20ul%20li%20%7B%0D%0A%20%20%20%20%20%20%20%20%09margin%3A%200%2010px%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20ul%20li%20a%20%7B%0D%0A%20%20%20%20%20%20%20%20%09border%3A%201px%20solid%20%23DCE1F2%3B%0D%0A%20%20%20%20%20%20%20%20%09border-radius%3A%2050%25%3B%0D%0A%20%20%20%20%20%20%20%20%09color%3A%20%23001F61%3B%0D%0A%20%20%20%20%20%20%20%20%09font-size%3A%2020px%3B%0D%0A%20%20%20%20%20%20%20%20%09display%3A%20flex%3B%0D%0A%20%20%20%20%20%20%20%20%09justify-content%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09align-items%3A%20center%3B%0D%0A%20%20%20%20%20%20%20%20%09height%3A%2050px%3B%0D%0A%20%20%20%20%20%20%20%20%09width%3A%2050px%3B%0D%0A%20%20%20%20%20%20%20%20%09text-decoration%3A%20none%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20.social-panel%20ul%20li%20a%3Ahover%20%7B%0D%0A%20%20%20%20%20%20%20%20%09border-color%3A%20%23FF6A00%3B%0D%0A%20%20%20%20%20%20%20%20%09box-shadow%3A%200%209px%2012px%20-9px%20%23FF6A00%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%40media%20screen%20and%20(max-width%3A%20480px)%20%7B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%09.social-panel-container.visible%20%7B%0D%0A%20%20%20%20%20%20%20%20%09%09transform%3A%20translateX(0px)%3B%0D%0A%20%20%20%20%20%20%20%20%09%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%7D” provider=”manual” lang=”default”/] The JavaScript [pastacode manual=”%20%20%20%20%20const%20resultEl%20%3D%20document.getElementById(‘result’)%3B%0D%0A%20%20%20%20%20const%20lengthEl%20%3D%20document.getElementById(‘length’)%3B%0D%0A%20%20%20%20%20const%20uppercaseEl%20%3D%20document.getElementById(‘uppercase’)%3B%0D%0A%20%20%20%20%20const%20lowercaseEl%20%3D%20document.getElementById(‘lowercase’)%3B%0D%0A%20%20%20%20%20const%20numbersEl%20%3D%20document.getElementById(‘numbers’)%3B%0D%0A%20%20%20%20%20const%20symbolsEl%20%3D%20document.getElementById(‘symbols’)%3B%0D%0A%20%20%20%20%20const%20generateEl%20%3D%20document.getElementById(‘generate’)%3B%0D%0A%20%20%20%20%20const%20clipboard%20%3D%20document.getElementById(‘clipboard’)%3B%0D%0A%20%20%20%20%20%20%20%20const%20randomFunc%20%3D%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20lower%3A%20getRandomLower%2C%0D%0A%20%20%20%20%20%20%20%20%20%20upper%3A%20getRandomUpper%2C%0D%0A%20%20%20%20%20%20%20%20%20%20number%3A%20getRandomNumber%2C%0D%0A%20%20%20%20%20%20%20%20%20%20symbol%3A%20getRandomSymbol%20%7D%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20clipboard.addEventListener(‘click’%2C%20()%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20const%20textarea%20%3D%20document.createElement(‘textarea’)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20const%20password%20%3D%20resultEl.innerText%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20if%20(!password)%20%7Breturn%3B%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20textarea.value%20%3D%20password%3B%0D%0A%20%20%20%20%20%20%20%20%20%20document.body.appendChild(textarea)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20textarea.select()%3B%0D%0A%20%20%20%20%20%20%20%20%20%20document.execCommand(‘copy’)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20textarea.remove()%3B%0D%0A%20%20%20%20%20%20%20%20%20%20swal(%22Success%22%2C%20%22Password%20copied%20to%20clipboard%22%2C%20%7Bicon%3A%20%22success%22%2C%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%2F%2Falert(”)%3B%0D%0A%20%20%20%20%20%20%20%20%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20generate.addEventListener(‘click’%2C%20()%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20const%20length%20%3D%20%2BlengthEl.value%3B%0D%0A%20%20%20%20%20%20%20%20%20%20const%20hasLower%20%3D%20lowercaseEl.checked%3B%0D%0A%20%20%20%20%20%20%20%20%20%20const%20hasUpper%20%3D%20uppercaseEl.checked%3B%0D%0A%20%20%20%20%20%20%20%20%20%20const%20hasNumber%20%3D%20numbersEl.checked%3B%0D%0A%20%20%20%20%20%20%20%20%20%20const%20hasSymbol%20%3D%20symbolsEl.checked%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20resultEl.innerText%20%3D%20generatePassword(hasLower%2C%20hasUpper%2C%20hasNumber%2C%20hasSymbol%2C%20length)%3B%0D%0A%20%20%20%20%20%20%20%20%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20function%20generatePassword(lower%2C%20upper%2C%20number%2C%20symbol%2C%20length)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20let%20generatedPassword%20%3D%20”%3B%0D%0A%20%20%20%20%20%20%20%20%20%20const%20typesCount%20%3D%20lower%20%2B%20upper%20%2B%20number%20%2B%20symbol%3B%0D%0A%20%20%20%20%20%20%20%20%20%20const%20typesArr%20%3D%20%5B%7B%20lower%20%7D%2C%20%7B%20upper%20%7D%2C%20%7B%20number%20%7D%2C%20%7B%20symbol%20%7D%5D.filter(item%20%3D%3E%20Object.values(item)%5B0%5D)%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%2F%2F%20Doesn’t%20have%20a%20selected%20type%0D%0A%20%20%20%20%20%20%20%20%20%20if%20(typesCount%20%3D%3D%3D%200)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20”%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%2F%2F%20create%20a%20loop%0D%0A%20%20%20%20%20%20%20%20%20%20for%20(let%20i%20%3D%200%3B%20i%20%3C%20length%3B%20i%20%2B%3D%20typesCount)%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20typesArr.forEach(type%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20funcName%20%3D%20Object.keys(type)%5B0%5D%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20generatedPassword%20%2B%3D%20randomFunc%5BfuncName%5D()%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0D%0A%20%20%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20const%20finalPassword%20%3D%20generatedPassword.slice(0%2C%20length)%3B%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20return%20finalPassword%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20function%20getRandomLower()%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20return%20String.fromCharCode(Math.floor(Math.random()%20*%2026)%20%2B%2097)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20function%20getRandomUpper()%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20return%20String.fromCharCode(Math.floor(Math.random()%20*%2026)%20%2B%2065)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20function%20getRandomNumber()%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20return%20%2BString.fromCharCode(Math.floor(Math.random()%20*%2010)%20%2B%2048)%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20function%20getRandomSymbol()%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20const%20symbols%20%3D%20’!%40%23%24%25%5E%26*()%7B%7D%5B%5D%3D%3C%3E%2F%2C.’%3B%0D%0A%20%20%20%20%20%20%20%20%20%20return%20symbols%5BMath.floor(Math.random()%20*%20symbols.length)%5D%3B%0D%0A%20%20%20%20%20%20%20%20%7D” provider=”manual” lang=”default”/] View Demo Thank you for reading this blog, share this blog as much as possible and also show it to your friends. If you have any questions, feel free to comment. Share this:Click to share on Twitter (Opens in new window)Click to share on Facebook (Opens in new window)Click to print (Opens in new window)Click to share on LinkedIn (Opens in new window)Click to share on Telegram (Opens in new window)Click to share on WhatsApp (Opens in new window)Like this:Like Loading... Post navigation Create awesome book style preloader using css Testimonials Design using HTML CSS and JavaScript