Marko
/
Homework.9


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
							<!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>     
    //  <!-- Password,LoginForm -->
    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)

// Password Verify

// function Password(parent,open){
// const pass1 = document.createElement('input')
// const pass2 = document.createElement('input')
// const btn = document.createElement('button')
// pass1.placeholder = 'password 1'
// pass2.placeholder = 'password 2'
// pass2.id = 'pass2'
// btn.innerText = 'Submit'
// btn.id = "btn"
// document.body.prepend(btn)
// document.body.prepend(pass2)
// document.body.prepend(pass1)
// btn.addEventListener('click', () => this.setOpen(!this.open))
// this.open = open
//  this .setOpen = (value) => {
//   this.open = value
//         render()
//     }
//     this.getOpen = () => {
//         return this.open
//     }
 
//     document.getElementById('btn')
//     .onclick = () => {
//         document.getElementById('pass2').style.display = 'none';
//     }
  

//     oninput = () =>{
//         if(pass1.value !== pass2.value){
//             btn.setAttribute('disabled', true)
//         } 
//         else{
//             btn.removeAttribute('disabled')
//         }

//     }
//     const render = () => {
//         pass1.setAttribute('type', `${this.open ? 'text' : 'password'}`);
//         pass2.setAttribute('type', `${this.open ? 'text' : 'password'}` );
//     }
//     return render()
// }
// let p = new Password(document.body, false)

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