HW12 done

hw12/redux.js

@@ -0,0 +1,191 @@
+function createStore(reducer){
+    let state = reducer(undefined, {})
+    let cbs   = []
+    return {
+        dispatch(action){
+            const newState = reducer(state, action)
+            if (newState !== state){
+                state = newState
+                for (let cb of cbs) 
+                    cb()
+            }
+        },
+        getState(){
+            return state
+        },
+        subscribe(cb){
+            cbs.push(cb)
+            return () => cbs = cbs.filter(c => c !== cb)
+        }
+    }
+}
+
+function createDom (state) {
+    let content = document.getElementById('content')
+    content.innerHTML = ''
+    let spanBeerAmount = document.createElement('span')
+    spanBeerAmount = `Цена - ${state.пиво.БАБЛО} грн | В наличии:${state.пиво.СКОКА} шт.`
+    let spanImgBeer = document.createElement('span')
+    let imgBeer = document.createElement('img')
+    imgBeer.src = "https://www.meme-arsenal.com/memes/a47737a30a10732b77d522f44f43ea3d.jpg"
+    spanImgBeer.append(imgBeer)
+    imgBeer.style.width = '200px'
+    content.append(spanImgBeer)
+    content.append(spanBeerAmount)
+    
+    let spanChipsAmount = document.createElement('span')
+    spanChipsAmount = `Цена = ${state.чипсы.БАБЛО} грн | В наличии: ${state.чипсы.СКОКА} пачек`
+    let spanImgChips = document.createElement('span')
+    spanImgChips.style.marginLeft = '50px'
+    let imgChips = document.createElement('img')
+    imgChips.src = "chips.png"
+    imgChips.style.width = '150px'
+    imgChips.style.marginRight = '30px'
+    spanImgChips.append(imgChips)
+    content.append(spanImgChips)
+    content.append(spanChipsAmount)
+    
+    let spanCigarettesAmount = document.createElement('span')
+    spanCigarettesAmount = `Цена: ${state.сиги.БАБЛО} грн | В наличии: ${state.сиги.СКОКА} пачек`
+    let spanImgCigarettes = document.createElement('span')
+    let imgCigarettes = document.createElement('img')
+    imgCigarettes.src = 'cigi.png'
+    imgCigarettes.style.width = '200px'
+    spanImgCigarettes.style.marginLeft = '10px'
+    spanImgCigarettes.append(imgCigarettes)
+    content.append(spanImgCigarettes)
+    content.append(spanCigarettesAmount)
+
+    
+    let cashbox = document.createElement('span')
+    let cashboxImg = document.createElement('img')
+    cashboxImg.src = "kassa.png"
+    cashboxImg.style.width = '200px'
+    cashboxImg.style.position = 'relative'
+    cashboxImg.style.top = '60px'
+    cashboxImg.style.left = '50px'
+    cashbox.style.position = 'relative' 
+    cashbox.style.top = '5px'
+    cashbox.style.left = '100px'
+    cashbox.innerHTML = `В кассе: ${state.касса} грн. `
+    content.append(cashboxImg)
+    content.append(cashbox)
+    
+    let btnCashbox = document.createElement('button')
+    btnCashbox.innerHTML = "Посмотреть сколько в кассе"
+    btnCashbox.style.marginLeft = '80px'
+    content.append(btnCashbox)
+
+    let btnHidden = document.createElement('button')
+    btnHidden.hidden = true
+    btnHidden.innerHTML = 'Скрыть'
+    btnHidden.style.position = 'relative'
+    btnHidden.style.top = '40px'
+    btnHidden.style.left = '20px'
+    content.append(btnHidden)
+    
+    cashbox.hidden = true
+    btnCashbox.hidden = false
+    
+    btnCashbox.onclick = () => {
+        alert ("Только для продавщицы!!!")
+        let password = prompt('Введите пароль для продавщицы')
+        if (password == 'qwerty'){
+        cashbox.hidden = false
+        btnCashbox.hidden = true
+        btnHidden.hidden = false}
+        else {
+            alert ("Куда лезешь?")
+        }
+    }
+
+    btnHidden.onclick = () => {
+        cashbox.hidden = true
+        btnCashbox.hidden = false
+        btnHidden.hidden = true
+    }
+    
+    let selectProducts = document.createElement('select')
+    content.append(selectProducts)
+    selectProducts.style.marginLeft = '300px'
+    let option = document.createElement('option')
+    option.innerHTML = 'Выберите продукт'
+    selectProducts.append(option) 
+    let inputAmount = document.createElement('input')
+    inputAmount.type = 'number'
+    content.append(inputAmount)
+    inputAmount.style.marginLeft = '20px'
+    inputAmount.placeholder = 'Количество товара'
+
+    let beer = document.createElement('option')
+    beer.innerHTML = 'пиво'
+    selectProducts.append(beer)
+
+    let chips = document.createElement('option')
+    chips.innerHTML = 'чипсы'
+    selectProducts.append(chips)
+
+    let cigarettes = document.createElement('option')
+    cigarettes.innerHTML = 'сиги'
+    selectProducts.append(cigarettes)
+    
+    let btn = document.createElement('button')
+    content.append(btn)
+    btn.innerHTML = 'Купить'
+    btn.style.marginLeft = '20px'
+    
+    btn.onclick = () => {
+        if(state[selectProducts.value].СКОКА >= inputAmount.value){
+        let amount = inputAmount.value
+        let selectNum = selectProducts.value
+        
+        store.dispatch(купиШото(amount,selectNum))
+        }
+        else {
+            alert('В наличие столько нету!')
+        }
+    }
+    return state
+}
+function reducer(state, {type, ШО, СКОКА,БАБЛО}){
+    if (!state){
+        return {
+            пиво: {СКОКА:100,БАБЛО:60},
+            чипсы: {СКОКА:100,БАБЛО:30},
+            сиги: {СКОКА:100 , БАБЛО:50},
+            касса: 0
+        }
+    }
+    if (type === 'КУПИТЬ'){
+        return {
+            ...state,
+            [ШО]: {...state[ШО], СКОКА: state[ШО].СКОКА - СКОКА },
+            касса: state[ШО].БАБЛО * СКОКА + state.касса
+        }
+    }
+
+    return state
+}
+
+const store = createStore(reducer)
+const unsubscribe2 = store.subscribe(() => console.log('подписчик 2', store.getState()))
+const shop = store.subscribe(() => createDom(store.getState()))
+const купиПиво = СКОКА => ({type: 'КУПИТЬ', ШО: "пиво", СКОКА})
+const купиЧипсы = СКОКА => ({type: 'КУПИТЬ', ШО: "чипсы", СКОКА})
+const купиСиги = СКОКА => ({type: 'КУПИТЬ', ШО: "сиги", СКОКА})
+const купиШото = (СКОКА,ШО) => ({type: 'КУПИТЬ', ШО, СКОКА})
+store.dispatch(купиПиво(0))
+store.dispatch(купиЧипсы(0))
+store.dispatch(купиСиги(0))
+
+
+
+
+
+
+
+  
+
+
+
+