script.js

import React, {useCallback, useEffect, useState} from "react"
import ReactDOM from "react-dom/client"


function PasswordGenerator(){
    const [password, setPassword] = useState(" ");
    const [length , setLength] = useState(5)
    const [charChanged , setCharChanged] = useState(false)
    const [numChanged , setNumChanged] = useState(false)


    const generatePassword = useCallback(()=>{
        let str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"

        if(numChanged){
            str+="1234567890"
        }
        if(charChanged){
            str+="!@#$%^&*(){}:<>"
        }

        let pass ="";
        for(let i=0;i<length;i++){
            pass+=str[Math.floor(Math.random()*str.length)]
        }
        setPassword(pass);
    } , [length,numChanged,charChanged])

    useEffect(()=>{
        generatePassword();
    },[length,numChanged,charChanged])


    return(
        <>
            <h1>{password}</h1>
            <div className="second">
                <input type="range" min={5} max={50} value={length} onChange={(event)=>{setLength(event.target.value)}}></input>
                <label>Length ({length})</label>

                <input type="checkbox" defaultChecked={charChanged} onChange={()=>setCharChanged(!charChanged)}></input>
                <label>Character</label>

                <input type="checkbox" defaultChecked={numChanged} onChange={()=>setNumChanged(!numChanged)}></input>
                <label>Number</label>
            </div>
            
        </>
    )
}

ReactDOM.createRoot(document.getElementById('root')).render(<PasswordGenerator/>)