React Project for Beginners

 This project is a simple password generator created using React, a JavaScript library for building user   interfaces. Let's break it down step by step:

 Main Features:

Password Length Control: You can choose how long the password should be (between 6 and 100               characters).

Include Numbers or Special Characters: There are options to include numbers (like 123) and                   special  characters (like !@#$%) in the password.

Copy Password to Clipboard: Once a password is generated, you can click a button to copy it so                you  can use it elsewhere

                                                                                                                                                                                                                         How It Works:

1. React Hooks:

   • useState: This is used to store the state (or data) of different things:
     • length: The length of the password.
     • numberAllowed: Whether to include numbers.
     • charAllowed: Whether to include special characters.
     • password: The generated password.
   • useCallback: This helps create functions that don’t change unless their dependencies (things they rely on) change.
   • useRef: This is used to interact with the password input box, allowing the app to highlight the password when copying it.

2. Password Generator:

   • The passwordGenerator function creates a random password based on the chosen options (length, numbers, characters).
   • It starts with a basic string of letters ("ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz").
   • If you choose to allow numbers or characters, it adds them to the string.
   • Then, it generates a password by randomly picking characters from this string, one at a time, until it reaches the desired length.

3. Copy to Clipboard:

   • The copyPasswordToClipboard function allows you to copy the generated password by clicking the "copy" button.
   • It highlights the password in the input box and then copies it to the clipboard.

4. React Effect (useEffect):

   • This runs the password generator whenever the length, number, or character settings change, automatically creating a new password.

The User Interface:

• The user can see the generated password in an input box.
• There's a range slider to set the password length.
• There are two checkboxes to decide if the password should include numbers and special characters.
• A button allows the user to copy the generated password to their clipboard.
  
  
  

• React logics are as 
  
  import {useState, useCallback, useEffect, useRef} from "react"

  function App() {

    const [length, setLength] = useState(8)

    const[numberAllowed, setNumberAllowed] = useState(false);

    const[charAllowed, setCharAllowed] = useState(false);

    const[password, setPassword] = useState("");

    const passwordRef = useRef(null)

    const passwordGenerator = useCallback(()=>{

      let pass = ""

      let str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"

      if(numberAllowed) str+= "0123456789"

      if(charAllowed) str+= "!@#$%&*()[]{}-_`~"

  
  

      for(let i = 1; i <=length; i++){

        let char = Math.floor(Math.random() * str.length + 1 )

        pass += str.charAt(char)

      }

       setPassword(pass)

      }, [length, numberAllowed, charAllowed, setPassword])

  
  

     const copyPaaswordToClipboard = useCallback(() => {

      passwordRef.current?.select();

      passwordRef.current?.setSelectionRange(0, 8);

      window.navigator.clipboard.writeText(password)

     }, [password])

  
  

       useEffect(()=>{

        passwordGenerator()

        }, [length, numberAllowed, charAllowed, passwordGenerator])

    return (

      <>

        <div className="w-full h-screen flex items-center justify-center">

          <div className="w-full max-w-md shadow-md rounded-lg px-4 py-8 text-orange-500 bg-gray-700">

            <h1 className="text-white text-center my-3">Password Generator</h1>

            <div className="flex shadow rounded-lg overflow-hidden mb-4">

              <input

                type="text"

                value={password}

                className="outline-none w-full py-1 px-3"

                placeholder="password"

                readOnly

                ref={passwordRef}

              />

              <button className="outline-none bg-blue-700 text-white px-3 py-0.5 shrink-0" onClick={copyPaaswordToClipboard}>copy</button>

            </div>

              <div className="flex text-sm gap-x-2">

                <div className="flex items-center gap-x-1">

                  <input type="range"

                   name=""

                    id=""

                    min={6}

                    max={100}

                    value={length}

                    className="cursor-pointer" onChange={(e)=>{setLength(e.target.value)}}/>

                    <label>lemgth : {length}</label>

                </div>

                <div className="flex items-center gap-x-1">

                <input type="checkbox"

                  defaultChecked = {numberAllowed}

                    id="numberInput"

                     onChange={()=>{setNumberAllowed((prev) => !prev)}}/>

                     <label htmlFor="numberInput">numbers</label>

                </div>

                <div className="flex items-center gap-x-1">

                <input type="checkbox"

                  defaultChecked = {charAllowed}

                    id="characterInput"

                     onChange={()=>{setCharAllowed((prev) => !prev)}}/>

                     <label htmlFor="characterInput">characters</label>

                </div>

              </div>

  
  

          </div>

        </div>

      </>

    );

  }  

  
  

  export default App;