Browse Source

<hw_redux> done

Mark 1 year ago
parent
commit
3dd49255f1
2 changed files with 103 additions and 0 deletions
  1. 24 0
      11/index.html
  2. 79 0
      11/main.js

+ 24 - 0
11/index.html

@@ -0,0 +1,24 @@
+<!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>
+</head>
+
+<body>
+   <select name="select" id="select">
+      <option value="пиво">Пиво</option>
+      <option value="чипсы">Чипсы</option>
+      <option value="сиги">Сиги</option>
+   </select>
+   <input type='number' id='sum' placeholder='скока' />
+   <input type='number' id='money' placeholder='бабло' />
+   <button id='btn'>Buy</button>
+   <table id="table"></table>
+   <script src="main.js"></script>
+</body>
+
+</html>

+ 79 - 0
11/main.js

@@ -0,0 +1,79 @@
+function reducer(state, { type, ШО, СКОКА, БАБЛО }) {
+   if (!state) {
+      return {
+         пиво: {
+            count: 100,
+            price: 10
+         },
+         чипсы: {
+            count: 100,
+            price: 10
+         },
+         сиги: {
+            count: 100,
+            price: 10
+         },
+         касса: 0
+      }
+   }
+   if (type === 'КУПИТЬ' && СКОКА <= state[ШО].count && БАБЛО >= state[ШО].price * СКОКА) {
+      return {
+         ...state,
+         касса: state.касса + state[ШО].price * СКОКА,
+         [ШО]: { ...state[ШО], count: state[ШО].count - СКОКА }
+      }
+   }
+   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
+   }
+}
+function createTable(obj) {
+   table.innerText = ''
+   for (let [key, value] of Object.entries(obj)) {
+      let tr = document.createElement('tr');
+      let td = document.createElement('td');
+      td.innerText = key
+      tr.append(td);
+      table.append(tr);
+      if (typeof value === 'object') {
+         for (let [key1, value1] of Object.entries(value)) {
+            let td = document.createElement('td');
+            td.innerText = key1 + ' : ' + value1;
+            tr.append(td);
+         }
+      } else {
+         let td = document.createElement('td');
+         td.innerText = value;
+         tr.append(td);
+      }
+   }
+}
+const store = createStore(reducer);
+
+createTable(store.getState())
+store.subscribe(() => createTable(store.getState()));
+btn.onclick = (() => store.dispatch({ type: 'КУПИТЬ', ШО: select.value, СКОКА: sum.value, БАБЛО: money.value }))
+
+
+