Create a Password Generator with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a password generator app with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app password-generator

with NPM to create our React project.

Create the Password Generator App

To create the password generator app, we write:

import React, { useState } from "react";
const string = "abcdefghijklmnopqrstuvwxyz";
const numeric = "0123456789";
const punctuation = "!@#$%^&*()_+~`|}{[]:;?><,./-=";

export default function App() {
  const [length, setLength] = useState(10);
  const [password, setPassword] = useState("");

  const generatePassword = (e) => {
    e.preventDefault();
    const formValid = +length > 0;
    if (!formValid) {
      return;
    }
    let character = "";
    let password = "";
    while (password.length < length) {
      const entity1 = Math.ceil(string.length * Math.random() * Math.random());
      const entity2 = Math.ceil(numeric.length * Math.random() * Math.random());
      const entity3 = Math.ceil(
        punctuation.length * Math.random() * Math.random()
      );
      let hold = string.charAt(entity1);
      hold = password.length % 2 === 0 ? hold.toUpperCase() : hold;
      character += hold;
      character += numeric.charAt(entity2);
      character += punctuation.charAt(entity3);
      password = character;
    }
    password = password
      .split("")
      .sort(() => {
        return 0.5 - Math.random();
      })
      .join("");
    setPassword(password.substr(0, length));
  };

  return (
    <div className="App">
      <form onSubmit={generatePassword}>
        <div>
          <label>length</label>
          <input value={length} onChange={(e) => setLength(e.target.value)} />
        </div>
        <button type="submit">generate password</button>
      </form>
      <div>{password}</div>
    </div>
  );
}

We define the length state to hold the length.

password has the generated password.

Next, we define the generatePassword function to generate the password.

In the function, we call e.preventDefault to do client-side form submission.

Then we check the length to see if it’s bigger than 0.

If it is, then we create the password.

To create it, we create 3 numbers and store them in entity1 , entity2 , and entity3 respectively.

Then we use them to get a value from string , numeric , and punctuation .

And then we append them to the character variable.

Then we assign the character value to password .

And then we shuffle the password characters with split , sort , and join .

The sort callback returns a random number between -0.5 and 0.5 to shuffle the numbers.

And finally, we call setPassword to set the password value.

Below that, we add a form with the onSubmit prop set to generatePassword to generate the password when we click the button with type submit .

The input hs the value and onChange props to get and set the length state respectively.

e.target.value has the input value.

Conclusion

We can create a password generator with React and JavaScript.