Marko
/
Homework.9


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A-Level</title>
</head>
<body>
    <script>
        
    function Password(parent, open){
    const pass = document.createElement('input')
    const btn = document.createElement('button')
    const lgn = document.createElement('input')
    const sbmt = document.createElement('button')
    sbmt.innerText = 'Submit'
    lgn.placeholder = "login"
    pass.placeholder = "password" 
    btn.innerText = 'Show'
    parent.prepend(sbmt)
    parent.prepend(btn)
    parent.prepend(pass)
    parent.prepend(lgn)
    btn.addEventListener('click', () => this.setOpen(!this.open))
    btn.addEventListener('click', () => {
        btn.innerText = (btn.innerText === 'Show') ? btn.innerText = 'Hide' : btn.innerText = 'Show';
    })
    sbmt.setAttribute('disabled', true)
    oninput = () =>{
        if(pass.value.length < 1 || lgn.value.length < 1 ){
            sbmt.setAttribute('disabled', true)
        } 
        else{
            sbmt.removeAttribute('disabled')
        }
    }
   
this.open = open
 this .setOpen = (value) => {
  this.open = value
        render()
    }
    this.getOpen = () => {
        return this.open
    }
    
    const render = () => {
        pass.setAttribute('type', `${this.open ? 'text' : 'password'}`);
        lgn.setAttribute('type', `${this.open ? 'text' : 'password'}` );
    }
    return render()
}

let p = new Password(document.body, false)

    </script>
</body>
</html>