anton123
/
Anton.Homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
							<!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>
    <header>
        <div class="header" style="text-align: center; background-color: #8091b4; padding: 5px;">
            <h1>ЛАРЁК</h1>
            <div id="money" style="margin: 8px;">Касса: 0 грн</div>
        </div>
    </header>
    <main style="background-color: #EEEFF1; text-align: center; padding: 15px;">
        <select id="myselect" style="width: 150px; height: 32px;text-align: center;background-color: #8091b4;">
            <option>ВЫБЕРИТЕ ТОВАР</option>
          </select> 
          <container id="container">
            <section id="section">
            </section>
          </container>
          
    </main>
    <main style="background-color: #8091b4; text-align: center; padding: 15px;">
        <div style="margin: 8px;">Выберите количество шт</div>
        <input id="inp" style="margin: 8px;" type="number"><br>
        <div style="margin: 8px;">Внесите сумму за покупку</div>
        <div id="priceDiv" style="margin: 8px;"></div>
        <input id="inp2" style="margin: 8px;" type="number"><br>
        <button onclick="send()" style="margin: 8px;">КУПИТЬ</button>
    </main>
    <script>
        function reducer(state, {type, ШО, number,money}){ 
            if (!state){ 
                return { // Добавление товара в этот обьект, не ломает код
                    касса: 0,
                    ПИВО: {amount:100, price: 55}, 
                    ЧИПСЫ: {amount:100, price: 30}, 
                    СИГИ: {amount:100, price: 80},
                    ВИСКИ: {amount:100, price: 180},
                    СУХАРИ: {amount:100, price: 20},
                    ОРЕШКИ: {amount:100, price: 25},
                    КОЛА: {amount:100, price: 20},
                }
            }
            if(number >state[ШО].amount){
                alert('В ларьке нет столько товара!')
             return state
            }
            if(money<number*state[ШО].price){
                alert(`Мало денег! Нужно минимум ${number*state[ШО].price} грн!`)
                return state
            }
            if (type === 'КУПИТЬ'){ 
                let buy = state[ШО].amount - number
                return {
                    ...state, 
                    [ШО]: {amount:buy, price:state[ШО].price}, 
                    касса: state.касса+money
                }
            }
            
            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 
            }
        }
        const store = createStore(reducer)
        const unsubscribe = store.subscribe(() => console.log(store.getState()))

        
        let arrKeys = Object.keys(store.getState()).slice(1) // Массив ключей, без ключа 'касса'

        for(let i = 0; i<=arrKeys.length-1 ;i++){ // Цикл для создания тегов option
            let optionTeg = document.createElement('option')
            optionTeg.innerHTML=`${arrKeys[i]} ${store.getState()[arrKeys[i]].price} грн`
            optionTeg.value=arrKeys[i]
            document.getElementById("myselect").append(optionTeg)
        }

        function update(){//Функция обновления колличества товара в дивах
            document.getElementById("section").remove()
            let section = document.createElement('section')
            section.id= 'section'
            document.getElementById("container").append(section)
            
            for(let i = 0; i<=arrKeys.length-1 ;i++){
                let balanceDiv = document.createElement('div')
                balanceDiv.innerHTML=`<br>${arrKeys[i]} ${store.getState()[arrKeys[i]].amount} шт`
                document.getElementById("section").append(balanceDiv)
            }
        }
        update()

        let buy
        document.getElementById("myselect").addEventListener("change", function(){ //Функция с циклом для создания action
            let price=0                                                            // И для динамического изминения цены в div
            for(let i = 0; i<=arrKeys.length ;i++){
                if(this.value==arrKeys[i]){
                price= store.getState()[arrKeys[i]].price
                buy= (number,money) => ({type: 'КУПИТЬ', ШО: arrKeys[i], number, money})
                }
            }
            document.getElementById('priceDiv').innerHTML = "Цена: "+price+" грн";
        });
        

        function send(){//Функция которая в онклике, передаём значения с инпутов, обновляем кассу, и обновляем товары в дивах.
            let result = store.dispatch(buy(+document.getElementById('inp').value,+document.getElementById('inp2').value))
            document.getElementById('money').innerHTML = "Касса: "+store.getState().касса+" грн";
            update()
            return result
        }
        
    </script>
</body>
</html>