RedaX

HW10 Closures and scopes/form OOP/script.js

@@ -1,19 +1,15 @@
 let date = new Date();
 
-
 function dataToDataTimeLocal(date) {
     let timeStamp = date.getTime();
-    let timeZoneoffset = - date.getTimezoneOffset() * 60 * 1000;
+    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){
+function Form(el, data, okCallback, cancelCallback) {
     let formBody = document.createElement('div')
     let okButton = document.createElement('button')
     okButton.innerHTML = 'OK'
@@ -21,51 +17,64 @@ function Form(el, data, okCallback, cancelCallback){
     let cancelButton = document.createElement('button')
     cancelButton.innerHTML = 'Cancel'
 
-
-      
-  let inputCreators = {
-        String(key, value, oninput){
+    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)
+            input.value = value
+            input.oninput = () => {
+                if(value == '*****'){
+                    input.type = 'password'
+                } else input.type = 'text';
+                if (!value.trim()){
+                    return value;
+                }                oninput(input.value)
+            }
             return input
         },
-        Boolean(key, value, oninput){
+        Boolean(key, value, oninput) {
             let input = document.createElement('input')
             input.type = 'checkbox'
             input.placeholder = key
-            input.checked     = value
-            input.oninput     = () => oninput(input.checked)
+            input.checked = value
+            input.oninput = () => oninput(input.checked)
             return input
         },
-        Date(key, value, oninput){
+        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))
+            input.value = dataToDataTimeLocal(value)
+            input.onchange = () => {
+             
+             if (typeof this.validators === 'function') {
+                if(this.validators[key](value, key, data, input) === true){ 
+                    //validator use oninput or onchnge
+                    data[key] = newValue;
+                    console.log(key)
+                } else {
+                    errorSpan.style.backgroundColor = 'red';
+                    errorSpan.innerText =  `Error ${newValue}`;
+                }
+                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);
-   
-}
+    for (let [key, value] of Object.entries(data)) {
+        let errorSpan = document.createElement('span');
+        let input = inputCreators[value.constructor.name](key, value, newValue => {
+                data[key] = newValue;
+        });
+        input.placeholder = key;
+        formBody.append(input);
+        formBody.append(errorSpan);
+        //disabled for ok button and cancel
+
+    }
 
-    if (typeof okCallback === 'function'){
+    if (typeof okCallback === 'function') {
         formBody.appendChild(okButton);
         okButton.onclick = (e) => {
             console.log(this)
@@ -73,31 +82,34 @@ for (let [key, value] of Object.entries(data)){
         }
     }
 
-    if (typeof cancelCallback === 'function'){
+    if (typeof cancelCallback === 'function') {
         formBody.appendChild(cancelButton);
         cancelButton.onclick = cancelCallback
     }
 
     el.appendChild(formBody)
 
-
-    this.okCallback     = okCallback
+    this.okCallback = okCallback
     this.cancelCallback = cancelCallback
 
-    this.data           = data
-    this.validators     = {}
-}
+    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') )
+    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)
+form.validators.surname = (value, key, data, input) => value.length > 2 &&
+    value[0].toUpperCase() == value[0] &&
+    !value.includes(' ') ? true : 'Wrong name'
+
+
+    //if key[0] == '*' it is requred field
+

HW11 Redux/index.html

@@ -11,7 +11,12 @@
 
 <body>
     <div class="container">
-       
+        <select name="gods" id="goods">
+
+        </select>
+        <button id='btn'>Buy</button>
+       <input id='input'type="number">
+       <table id='table'></table>
     </div>
     <script src="script.js"></script>
 </body>

HW11 Redux/script.js

@@ -0,0 +1,77 @@
+function reducer(state, {type, ШО, СКОКА}){ 
+    if (!state){ 
+        return {
+            пиво: {
+                count: 10,
+                price: 20
+            },
+            чипсы: 100,
+            сиги: 100,
+            касса: 0
+
+        }
+    }
+    if (type === 'КУПИТЬ'){ 
+        //if (){} if enoth money
+        return {
+            ...state, 
+            [ШО]: state[ШО] - СКОКА 
+        }
+    }
+    return state 
+}
+
+function createStore(reducer){
+    let state       = reducer(undefined, {}) 
+    let cbs         = []                     
+    
+    const getState  = () => state           
+    const subscribe = cb => (cbs.push(cb),  
+                             () => cbs = cbs.filter(c => c !== cb)) 
+                             
+    const dispatch  = action => { 
+        const newState = reducer(state, action) 
+        if (newState !== state){ 
+            state = newState
+            for (let cb of cbs)  cb()
+        }
+    }
+    
+    return {
+        getState, 
+        dispatch,
+        subscribe 
+    }
+}
+const store = createStore(reducer);
+let select = document.querySelector('#goods');
+function createSelectItems(selectId, store){
+    for (let key of Object.keys(store.getState())){
+        let option = document.createElement('option');
+        option.value = key;
+        option.innerText = key;
+        select.append(option);
+    }
+}
+createSelectItems('goods', store);
+btn.addEventListener('click',() => {
+    store.dispatch({type: 'КУПИТЬ', 'ШО': select.value, 'СКОКА': input.value})
+    console.log(store.getState());
+});
+
+function drawTable(root, store) {
+    root.innerHTML = ''
+    for (let [item, pcs] of Object.entries(store.getState())) {
+        let tr = document.createElement('tr');
+        let td = document.createElement('td');
+        let th = document.createElement('th');
+                th.innerText = item;
+                td.innerText = pcs;
+                tr.append(th, td);
+                root.append(tr); 
+    }
+}
+drawTable(table,store);
+store.subscribe(() =>drawTable(table,store))
+
+

HW11 Redux/style.css

@@ -8,3 +8,14 @@
     margin: 0 auto;
     padding: 50px;
 }
+
+td {
+    border-style: ridge;
+    width: 40px;
+    height: 40px;
+    text-align: center;
+    vertical-align: middle;
+ }
+ tr:nth-child(2n + 1) {
+    background-color: rgb(223, 227, 235);
+ }