HW13 done

js/13/HW13.js

@@ -0,0 +1,224 @@
+// create Store
+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
+    }
+}
+
+// create Reduser
+function reducer(state, { type, ШО, СКОКА, БАБЛО }) {
+    if (!state) {
+        return {
+            пиво: {
+                amount: 110,
+                price: 20
+            },
+            чипсы: {
+                amount: 120,
+                price: 30
+            },
+            сиги: {
+                amount: 130,
+                price: 50
+            },
+            касса: 200
+        }
+    }
+
+    if (type === 'КУПИТЬ' && СКОКА <= state[ШО].amount && БАБЛО >= (СКОКА * state[ШО].price)) {
+        return {
+            ...state,
+            [ШО]: {
+                amount: state[ШО].amount - СКОКА,
+                price: state[ШО].price
+            },
+            касса: state.касса + БАБЛО
+        }
+    }
+
+    return state
+}
+const store = createStore(reducer)
+
+// create divStore
+const divStore = document.createElement('div')
+divStore.style.cssText = `
+        min-width: 500px;
+        width: 50%;
+        border: 1px solid #A9A9A9;
+        border-radius: 8px;
+        box-shadow: rgb(0 0 0 / 50%) 5px 5px 5px 0px;
+        padding: 20px;`
+document.body.append(divStore)
+
+// create Table of Store
+let table, col, row
+
+const createTable = () => {
+    table = document.createElement('table')
+    divStore.append(table)
+
+    // create names of parametrs
+    const params = []
+    for (const child of Object.values(store.getState())) {
+        for (const key of Object.keys(child)) {
+            if (!params.includes(key)) {
+                params.push(key);
+            }
+        }
+    }
+
+    // create Header of table
+    row = document.createElement('tr')
+    table.append(row)
+
+    // create first cell in Header
+    col = document.createElement('td')
+    row.append(col)
+
+    // create header names
+    for (const key of params) {
+        col = document.createElement('td')
+        col.innerText = `${key}`
+        col.style.cssText = `
+                font-size: 1.5em;
+                padding: 5px 10px;
+                margin: 0 10px;
+                text-align: center;
+                background-color: #D9D9D9;`
+        row.append(col)
+    }
+
+    // create table body
+
+    for (const [key, values] of Object.entries(store.getState())) {
+
+        if (key !== 'касса') {
+            // рисуем строку заголовков
+            row = document.createElement('tr')
+            table.append(row)
+
+
+            col = document.createElement('td')
+            col.innerText = `${key.toUpperCase()}`
+            col.style.cssText = `
+                min-width: 150px;
+                font-size: 2em;
+                padding: 5px 10px;
+                text-align: left`
+            row.append(col)
+
+            // рисуем строки значений для товаров
+            for (const name of params) {
+                col = document.createElement('td')
+                col.innerText = `${(Object.keys(values)).includes(name) ? values[name] : ''}`
+                col.style.cssText = `
+                    font-size: 1.5em;
+                    text-align: center`
+                row.append(col)
+            }
+        } else {
+            row = document.createElement('tr')
+            table.append(row)
+
+            col = document.createElement('td')
+            col.innerText = `${key.toUpperCase()}`
+            col.style.cssText = `
+                min-width: 150px;
+                font-size: 2em;
+                padding: 5px 10px;
+                text-align: left`
+            row.append(col)
+
+            col = document.createElement('td')
+            col.innerText = `${values}`
+            col.style.cssText = `
+                font-size: 2em;
+                text-align: center;`
+            row.append(col)
+        }
+    }
+}
+createTable()
+
+// start test in console.log
+store.subscribe(() => console.log(store.getState()))
+
+// create divWindow
+const divWindow = document.createElement('div')
+divWindow.style.cssText = `
+        width: 50%;
+        padding: 10px;
+        margin-top: 30px;
+        text-align: ;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;`
+document.body.append(divWindow)
+
+// create inputAmount
+const inputAmount = document.createElement('input')
+inputAmount.type = 'number'
+inputAmount.min = 0
+inputAmount.placeholder = 'Количество товара'
+divWindow.append(inputAmount)
+
+// create selectProduct
+const selectProduct = document.createElement('select')
+divWindow.append(selectProduct)
+
+for (let key of Object.keys(store.getState())) {
+    if (key !== 'касса') {
+        let optionInput = document.createElement('option')
+        optionInput.innerText = `${key}`
+        selectProduct.append(optionInput)
+    }
+}
+
+// ceate inputMoney
+const inputMoney = document.createElement('input')
+inputMoney.type = 'number'
+inputMoney.min = 0
+inputMoney.placeholder = 'Сумма, которую отдаете'
+divWindow.append(inputMoney)
+
+// create buyButton 
+const buyButton = document.createElement('button')
+buyButton.innerText = 'Купить'
+divWindow.append(buyButton)
+
+// mistake alert
+buyButton.onclick = () => {
+    if (+inputAmount.value > store.getState()[selectProduct.value].amount) {
+        alert(`Количество товара, который вы хотите купить, больше, чем наличие на складе! На складе ${store.getState()[selectProduct.value].amount} единиц ${selectProduct.value}`)
+    } else if (+inputMoney.value < (+inputAmount.value * store.getState()[selectProduct.value].price)) {
+        alert(`Вы даете ${inputMoney.value}. А нужно ${+inputAmount.value * store.getState()[selectProduct.value].price}. Добавьте ${(+inputAmount.value * store.getState()[selectProduct.value].price) - +inputMoney.value}`)
+    }
+}
+
+// start buyButton
+buyButton.addEventListener('click', () => store.dispatch({ type: 'КУПИТЬ', ШО: selectProduct.value, СКОКА: +inputAmount.value, БАБЛО: +inputMoney.value }))
+
+// Relaod table with new datas
+store.subscribe(() => {
+    table.remove(),
+        createTable()
+
+})