homework9

index.html

@@ -10,65 +10,34 @@
    
     <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')
-        }
-    }
+//     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
@@ -77,31 +46,60 @@ let p = new Password(document.body, false)
 //     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'}` );
+//         pass.setAttribute('type', `${this.open ? 'text' : 'password'}`);
+       
 //     }
 //     return render()
 // }
 // let p = new Password(document.body, false)
 
-    </script>
+ // 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>