<!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>