Home Explore Help
Sign In
serg1557733
/
HomeWorks
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

add form

serg155alternate 2 years ago
parent
c4d4dbd0fd
commit
fa73cd5292
8 changed files with 251 additions and 1 deletions
Split View Show Diff Stats
  1. 16 0
      Class works/datatoTimeZone/index.html
  2. 103 0
      Class works/datatoTimeZone/script.js
  3. 0 0
      Class works/datatoTimeZone/style.css
  4. 16 0
      HW10 Closures and scopes/form OOP/index.html
  5. 103 0
      HW10 Closures and scopes/form OOP/script.js
  6. 0 0
      HW10 Closures and scopes/form OOP/style.css
  7. 1 1
      HW10 Closures and scopes/oop/oop-closures.js
  8. 12 0
      HW10 Closures and scopes/oop/style.css

+ 16 - 0
Class works/datatoTimeZone/index.html
View File 

@@ -0,0 +1,16 @@
 
+<!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>Document</title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+<body>
 
+    
+    <div id="formContainer">
 
+    </div>
 
+    <script src="script.js"></script>
 
+</body>
 
+</html>

+ 103 - 0
Class works/datatoTimeZone/script.js
View File 

@@ -0,0 +1,103 @@
 
+let date = new Date();
 
+
 
+
 
+function dataToDataTimeLocal(date) {
 
+    let timeStamp = date.getTime();
 
+    let timeZoneoffset = - date.getTimezoneOffset() * 60 * 1000;
 
+    let localTime = timeStamp + timeZoneoffset;
 
+    return new Date(localTime).toISOString().slice(0, -1);
 
+}
 
+
 
+console.log(dataToDataTimeLocal(date));
 
+
 
+/***********************************************/
 
+
 
+
 
+function Form(el, data, okCallback, cancelCallback){
 
+    let formBody = document.createElement('div')
 
+    let okButton = document.createElement('button')
 
+    okButton.innerHTML = 'OK'
 
+
 
+    let cancelButton = document.createElement('button')
 
+    cancelButton.innerHTML = 'Cancel'
 
+
 
+
 
+      
+  let inputCreators = {
 
+        String(key, value, oninput){
 
+            let input = document.createElement('input')
 
+            input.type = 'text'
 
+            input.placeholder = key
 
+            input.value       = value
 
+            input.oninput     = () => oninput(input.value)
 
+            return input
 
+        },
 
+        Boolean(key, value, oninput){
 
+            let input = document.createElement('input')
 
+            input.type = 'checkbox'
 
+            input.placeholder = key
 
+            input.checked     = value
 
+            input.oninput     = () => oninput(input.checked)
 
+            return input
 
+        },
 
+        Date(key, value, oninput){
 
+            let input = document.createElement('input')
 
+            input.type = 'datetime-local'
 
+            input.placeholder = key
 
+            input.value       = dataToDataTimeLocal(value) 
+            input.onchange    = () => oninput(new Date(input.value))
 
+            return input
 
+        },
 
+    }
 
+for (let [key, value] of Object.entries(data)){
 
+    let input = inputCreators[value.constructor.name](key, value, newValue => { 
+        if (typeof this.validators === 'function'){
 
+            this.validators[key]();
 
+        }
 
+        data[key] = newValue
 
+    }); 
+    let errorSpan = document.createElement('span');
 
+    errorSpan.innerText = 'Error'
 
+    input.placeholder = key;
 
+
 
+    formBody.append(input);
 
+    formBody.append(errorSpan);
 
+   
+}
 
+
 
+    if (typeof okCallback === 'function'){
 
+        formBody.appendChild(okButton);
 
+        okButton.onclick = (e) => {
 
+            console.log(this)
 
+            this.okCallback(e)
 
+        }
 
+    }
 
+
 
+    if (typeof cancelCallback === 'function'){
 
+        formBody.appendChild(cancelButton);
 
+        cancelButton.onclick = cancelCallback
 
+    }
 
+
 
+    el.appendChild(formBody)
 
+
 
+
 
+    this.okCallback     = okCallback
 
+    this.cancelCallback = cancelCallback
 
+
 
+    this.data           = data
 
+    this.validators     = {}
 
+}
 
+
 
+
 
+let form = new Form(formContainer, {
 
+    name: 'Anakin',
 
+    surname: 'Skywalker',
 
+    married: true,
 
+    birthday: new Date((new Date).getTime() - 86400000 * 30*365)
 
+}, () => console.log('ok'),() => console.log('cancel') )
 
+form.okCallback = () => console.log('ok2')
 
+
 
+form.validators.surname = (value, key, data, input) => value.length > 2 && 
+                                                     value[0].toUpperCase() == value[0] &&
 
+                                                    !value.includes(' ') ? true : 'Wrong name'
 
+console.log(form)

+ 0 - 0
Class works/datatoTimeZone/style.css
View File


+ 16 - 0
HW10 Closures and scopes/form OOP/index.html
View File 

@@ -0,0 +1,16 @@
 
+<!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>Document</title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+<body>
 
+    
+    <div id="formContainer">
 
+    </div>
 
+    <script src="script.js"></script>
 
+</body>
 
+</html>

+ 103 - 0
HW10 Closures and scopes/form OOP/script.js
View File 

@@ -0,0 +1,103 @@
 
+let date = new Date();
 
+
 
+
 
+function dataToDataTimeLocal(date) {
 
+    let timeStamp = date.getTime();
 
+    let timeZoneoffset = - date.getTimezoneOffset() * 60 * 1000;
 
+    let localTime = timeStamp + timeZoneoffset;
 
+    return new Date(localTime).toISOString().slice(0, -1);
 
+}
 
+
 
+console.log(dataToDataTimeLocal(date));
 
+
 
+/***********************************************/
 
+
 
+
 
+function Form(el, data, okCallback, cancelCallback){
 
+    let formBody = document.createElement('div')
 
+    let okButton = document.createElement('button')
 
+    okButton.innerHTML = 'OK'
 
+
 
+    let cancelButton = document.createElement('button')
 
+    cancelButton.innerHTML = 'Cancel'
 
+
 
+
 
+      
+  let inputCreators = {
 
+        String(key, value, oninput){
 
+            let input = document.createElement('input')
 
+            input.type = 'text'
 
+            input.placeholder = key
 
+            input.value       = value
 
+            input.oninput     = () => oninput(input.value)
 
+            return input
 
+        },
 
+        Boolean(key, value, oninput){
 
+            let input = document.createElement('input')
 
+            input.type = 'checkbox'
 
+            input.placeholder = key
 
+            input.checked     = value
 
+            input.oninput     = () => oninput(input.checked)
 
+            return input
 
+        },
 
+        Date(key, value, oninput){
 
+            let input = document.createElement('input')
 
+            input.type = 'datetime-local'
 
+            input.placeholder = key
 
+            input.value       = dataToDataTimeLocal(value) 
+            input.onchange    = () => oninput(new Date(input.value))
 
+            return input
 
+        },
 
+    }
 
+for (let [key, value] of Object.entries(data)){
 
+    let input = inputCreators[value.constructor.name](key, value, newValue => { 
+        if (typeof this.validators === 'function'){
 
+            this.validators[key]();
 
+        }
 
+        data[key] = newValue
 
+    }); 
+    let errorSpan = document.createElement('span');
 
+    errorSpan.innerText = 'Error'
 
+    input.placeholder = key;
 
+
 
+    formBody.append(input);
 
+    formBody.append(errorSpan);
 
+   
+}
 
+
 
+    if (typeof okCallback === 'function'){
 
+        formBody.appendChild(okButton);
 
+        okButton.onclick = (e) => {
 
+            console.log(this)
 
+            this.okCallback(e)
 
+        }
 
+    }
 
+
 
+    if (typeof cancelCallback === 'function'){
 
+        formBody.appendChild(cancelButton);
 
+        cancelButton.onclick = cancelCallback
 
+    }
 
+
 
+    el.appendChild(formBody)
 
+
 
+
 
+    this.okCallback     = okCallback
 
+    this.cancelCallback = cancelCallback
 
+
 
+    this.data           = data
 
+    this.validators     = {}
 
+}
 
+
 
+
 
+let form = new Form(formContainer, {
 
+    name: 'Anakin',
 
+    surname: 'Skywalker',
 
+    married: true,
 
+    birthday: new Date((new Date).getTime() - 86400000 * 30*365)
 
+}, () => console.log('ok'),() => console.log('cancel') )
 
+form.okCallback = () => console.log('ok2')
 
+
 
+form.validators.surname = (value, key, data, input) => value.length > 2 && 
+                                                     value[0].toUpperCase() == value[0] &&
 
+                                                    !value.includes(' ') ? true : 'Wrong name'
 
+console.log(form)

+ 0 - 0
HW10 Closures and scopes/form OOP/style.css
View File


+ 1 - 1
HW10 Closures and scopes/oop/oop-closures.js
View File 

@@ -297,6 +297,7 @@ function PasswordVerify(parent = document.body, open = false) {
 
     this.setPasswordVerify = newVerify => {
 
         passVerify = newVerify;
 
         if (newVerify && newVerify == value)
 
+        console.log(newVerify, value)
 
         console.log(newVerify == value)
 
             if (value && passVerify) {
 
                 btnActive = true;
 
@@ -329,7 +330,6 @@ function PasswordVerify(parent = document.body, open = false) {
 
 
     inputVerify.oninput = this.onChange = (inputVerify) => {
 
         passVerify = inputVerify.data;
 
-        
         this.setPasswordVerify(passVerify);
 
 
     }

+ 12 - 0
HW10 Closures and scopes/oop/style.css
View File 

@@ -8,3 +8,15 @@
 
     margin: 0 auto;
 
     padding: 50px;
 
 }
 
+form {
 
+    display: flex;
 
+    width: 300px;
 
+    height: 300px;
 
+    flex-direction: column;
 
+}
 
+input {
 
+    margin-bottom: 10px;
 
+}
 
+button {
 
+    margin-bottom: 10px;
 
+}