Alex 2 rokov pred
rodič
commit
e3218c3f32
4 zmenil súbory, kde vykonal 123 pridanie a 0 odobranie
  1. 1 0
      12/README.md
  2. 19 0
      12/index.html
  3. 78 0
      12/script.js
  4. 25 0
      12/style.css

+ 1 - 0
12/README.md

@@ -0,0 +1 @@
+### Redux Homework

+ 19 - 0
12/index.html

@@ -0,0 +1,19 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Change Me</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div id='shop'>
+    <select id='goods'></select>
+    <input placeholder="скока" type='number' id='quantity'/>
+    <input placeholder="скока бабла на руках" type='number' id='money'/>
+    <button id='buy'>Купить</button>
+</div>
+<script src="script.js"></script>
+</body>
+</html>

+ 78 - 0
12/script.js

@@ -0,0 +1,78 @@
+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 в объект
+    }
+}
+function reducer(state, {type, ШО, СКОКА, БАБЛО}){
+    if (!state){
+        return {
+            пиво: {count: 100, price: 50},
+            чипсы: {count: 100, price: 32},
+            сиги: {count: 100, price: 70},
+            касса: 0,
+        }
+    }
+    if (type === 'КУПИТЬ'){
+        if (ШО in state && БАБЛО > state[ШО].price * СКОКА && СКОКА <= state[ШО].count){
+            return {
+                ...state,
+                [ШО]: {count: state[ШО].count - СКОКА, price: state[ШО].price},
+                касса: +state.касса + (СКОКА * state[ШО].price),
+            }
+        }
+    }
+    return state
+}
+
+const store = createStore(reducer)
+for (let good of Object.entries(store.getState())) {
+    if (good[0] !== 'касса') {
+        let listOption = document.createElement('option');
+        listOption.textContent = good[0];
+        goods.append(listOption);
+    }
+}
+
+const buys = (product, count, money) => ({type: 'КУПИТЬ', ШО: product, СКОКА: count, БАБЛО: money});
+
+buy.onclick = () => {
+    store.dispatch(buys(goods.value, quantity.value, money.value));
+}
+const unsubscribe = store.subscribe(() => console.log(store.getState()))
+
+function product(){
+    for (let good of Object.entries(store.getState())) {
+        if (good[0] !== 'касса') {
+            let h1 = document.createElement('h1');
+            shop.append(h1);
+            store.subscribe(() => h1.innerText = `${good[0]}: количество ${store.getState()[good[0]].count}, цена: ${store.getState()[good[0]].price}`);
+            h1.innerText = `${good[0]}: количество ${store.getState()[good[0]].count}, цена ${store.getState()[good[0]].price}`;
+        }
+    }
+}
+function casa(){
+    const h1 = document.createElement('h1');
+    shop.append(h1);
+    store.subscribe(() => h1.innerText = `Денег в кассе = ${store.getState().касса}`);
+    h1.innerText = `Денег в кассе = ${store.getState().касса}`;
+}
+product()
+casa();
+

+ 25 - 0
12/style.css

@@ -0,0 +1,25 @@
+* {
+    box-sizing: border-box;
+}
+
+button{
+    width: 100%;
+    font-size: 2em;
+}
+input, button, select{
+    width: 100%;
+    font-size: 2em;
+}
+
+table {
+    border: 1px;
+    border-collapse: collapse;
+}
+
+td,th {
+    border: 1px solid black;
+}
+
+/*div#content {*/
+/*display: none;*/
+/*}*/