Marko
/
Homework.9


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!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'}`);
       
//     }
//     return render()
// }
// let p = new Password(document.body, false)

 // Password Verify

function Password(parent, open){
const pass1 = document.createElement('input')
const btn = document.createElement('button')
const pass2 = document.createElement('input')
const sbmt = document.createElement('button')
sbmt.innerText = 'Submit'
pass1.placeholder = "password 1"
pass2.placeholder = "password 2" 
btn.innerText = 'Show'
parent.prepend(sbmt)
parent.prepend(btn)
parent.prepend(pass2)
parent.prepend(pass1)
btn.addEventListener('click', () => this.setOpen(!this.open))
btn.addEventListener('click', () => {
btn.innerText = (btn.innerText === 'Show') ? btn.innerText = 'Hide' : btn.innerText = 'Show'
    });
btn.addEventListener('click', () =>{
    pass2.style.display = (btn.innerText === 'Hide') ? pass2.style.display = 'none' : pass2.style.display = ''
});
this.open = open
 this .setOpen = (value) => {
  this.open = value
        render()
    }
this.getOpen = () => {
    return this.open
    }
oninput = () =>{
    if(pass1.value !== pass2.value){
        sbmt.setAttribute('disabled', true)
    }else{
        sbmt.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>