Strong Random Password Generator Using Javascript

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.