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

redux

Iryna Bolbat 3 years ago
parent
98f332f0f4
commit
3475f9b090
3 changed files with 161 additions and 0 deletions
Unified View Show Diff Stats
  1. 19 0
      js_010_redux/index.html
  2. 127 0
      js_010_redux/main.js
  3. 15 0
      js_010_redux/style.css

+ 19 - 0
js_010_redux/index.html
View File 

@@ -0,0 +1,19 @@
 
+<!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">
 
+    <link rel="stylesheet" href="style.css">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <select id="sel"></select>
 
+    <input type="number" id="input">
 
+    <button id="btn">Купить</button>
 
+
 
+    <table id="table"></table>
 
+
 
+    <script src="main.js"></script>
 
+</body>
 
+</html>

+ 127 - 0
js_010_redux/main.js
View File 

@@ -0,0 +1,127 @@
 
+function reducer(state, {type, ШО, СКОКА, ДЕНЬГИ}){ //объект action деструктуризируется на три переменных
 
+    if (!state){ //начальная уборка в ларьке:
 
+        return {
 
+            пиво: {
 
+                count: 100,
 
+                price: 30
 
+            },
 
+            чипсы:{
 
+                count: 100,
 
+                price: 25
 
+            },
 
+            сиги:{
 
+                count: 100,
 
+                price: 60
 
+            },
 
+            КАССА: 0,
 
+            КОШЕЛЕК: 250
 
+        };
 
+    }
 
+    if (type === 'КУПИТЬ'){ //если тип action - КУПИТЬ, то:
 
+        if(state[ШО].count < СКОКА){
 
+            alert('У нас нет такого количества!');
 
+            return {
 
+                ...state,
 
+                [ШО]: {count: state[ШО].count, price: state[ШО].price},
 
+            }
 
+        };
 
+        if(state.КОШЕЛЕК < (state[ШО].price * СКОКА)){
 
+            alert('У Вас не хватает денег!');
 
+            return {
 
+                ...state,
 
+                [ШО]: {count: state[ШО].count, price: state[ШО].price},
 
+            }
 
+        };
 
+        if(СКОКА <= 0){
 
+            alert('Вы уверены, что ввели верное количество?');
 
+            return {
 
+                ...state,
 
+                [ШО]: {count: state[ШО].count, price: state[ШО].price},
 
+            }
 
+        }; 
+        //else{
 
+            //console.log(`${ШО} ${СКОКА} шт`);
 
+        //}
 
+        return {
 
+            ...state, //берем все что было из ассортимента
 
+            //[ШО]: state[ШО].count - СКОКА,//и уменьшаем то, что покупается на количество
 
+            [ШО]: {count: state[ШО].count - СКОКА, price: state[ШО].price},
 
+            КАССА: state.КАССА + state[ШО].price * СКОКА,
 
+            КОШЕЛЕК: state.КОШЕЛЕК - (state[ШО].price * СКОКА)
 
+        };
 
+    }
 
+    return state; //если мы не поняли, что от нас просят в `action` - оставляем все как есть
 
+}
 
+
 
+function createStore(reducer){
 
+    let state = reducer(undefined, {}); //стартовая инициализация состояния, запуск редьюсера со state === undefined
 
+    let cbs = [];                     //массив подписчиков
 
+    const getState  = () => state;            //функция, возвращающая переменную из замыкания
 
+    const subscribe = cb => (cbs.push(cb),   //запоминаем подписчиков в массиве
 
+                             () => cbs = cbs.filter(c => c !== cb)); //возвращаем функцию unsubscribe, которая удаляет подписчика из списка 
+    const dispatch  = action => { 
+        const newState = reducer(state, action); //пробуем запустить редьюсер
 
+        if (newState !== state){ //проверяем, смог ли редьюсер обработать action
 
+            state = newState; //если смог, то обновляем state 
+            for (let cb of cbs)  cb(); //и запускаем подписчиков
 
+        }
 
+    };
 
+        return {
 
+            getState, //добавление функции getState в результирующий объект
 
+            dispatch,
 
+            subscribe //добавление subscribe в объект
 
+        }
 
+}
 
+
 
+const store = createStore(reducer);
 
+
 
+function createGoods(select, store){
 
+    for(let key in store.getState()){
 
+        if(key === 'КАССА'){
 
+            return;
 
+        } else {
 
+            let option = document.createElement('option');
 
+            option.value = key;
 
+            option.innerHTML = key;
 
+            select.appendChild(option);
 
+        }
 
+    }
 
+}
 
+
 
+createGoods(sel, store);
 
+store.subscribe(() => console.log(store.getState()));
 
+
 
+
 
+btn.onclick = () => store.dispatch({type: 'КУПИТЬ', ШО: sel.value, СКОКА: +input.value});
 
+
 
+
 
+function drawTable () {
 
+    table.innerHTML = '<tr><th>Goods</th><th>Price</th><th>Total</th></tr>';
 
+
 
+    for(let good in store.getState()){
 
+        let tr = document.createElement('tr');
 
+        table.appendChild(tr);
 
+        tr.innerHTML = good;
 
+
 
+        for(let pr = 0; pr < 1; pr++){
 
+            let td = document.createElement('td');
 
+            tr.appendChild(td);
 
+            td.innerHTML = store.getState()[good].price + ' ' + 'грн';
 
+            if(good === 'КАССА' || good === 'КОШЕЛЕК'){
 
+                td.innerHTML ='';
 
+            }
 
+        }
 
+
 
+        for(let c = 0; c < 1; c++){
 
+            let td = document.createElement('td');
 
+            tr.appendChild(td);
 
+            td.innerHTML = store.getState()[good].count + ' ' + 'шт';
 
+            if(good === 'КАССА' || good === 'КОШЕЛЕК'){
 
+                td.innerHTML = store.getState()[good] + ' ' + 'грн';
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+drawTable();
 
+store.subscribe(() =>drawTable());

+ 15 - 0
js_010_redux/style.css
View File 

@@ -0,0 +1,15 @@
 
+#table {
 
+    margin-top: 5%;
 
+    border: 1px solid black;
 
+    border-collapse: collapse;
 
+}
 
+
 
+th {
 
+    color: rgb(195, 23, 23);
 
+}
 
+
 
+th, tr, td {
 
+    padding: 3px 8px;
 
+    border: 1px solid black;
 
+    border-collapse: collapse;
 
+}