anton123
/
Anton.Homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!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 
        }
        class Store{
    #reducer;
    #state;
    #cbs = []
    
    constructor(reducer){
        this.#reducer=reducer
        this.#state= this.#reducer(undefined, {}) 
    }
    get state(){
        return this.#state
    }
    getState(){
        return this.#state
    }
    
    subscribe(cb){
        (this.#cbs.push(cb), () => this.#cbs = this.#cbs.filter(c => c !== cb))
    }
    
    dispatch(action){ 
        const newState = this.#reducer(this.#state, action) 
        if (newState !== this.#state){ 
            this.#state = newState 
            for (let cb of cbs)  cb() 
        }
    }
}
        const store = new Store(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>