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