Ларёк.html 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <header>
  11. <div class="header" style="text-align: center; background-color: #8091b4; padding: 5px;">
  12. <h1>ЛАРЁК</h1>
  13. <div id="money" style="margin: 8px;">Касса: 0 грн</div>
  14. </div>
  15. </header>
  16. <main style="background-color: #EEEFF1; text-align: center; padding: 15px;">
  17. <select id="myselect" style="width: 150px; height: 32px;text-align: center;background-color: #8091b4;">
  18. <option>ВЫБЕРИТЕ ТОВАР</option>
  19. </select>
  20. <container id="container">
  21. <section id="section">
  22. </section>
  23. </container>
  24. </main>
  25. <main style="background-color: #8091b4; text-align: center; padding: 15px;">
  26. <div style="margin: 8px;">Выберите количество шт</div>
  27. <input id="inp" style="margin: 8px;" type="number"><br>
  28. <div style="margin: 8px;">Внесите сумму за покупку</div>
  29. <div id="priceDiv" style="margin: 8px;"></div>
  30. <input id="inp2" style="margin: 8px;" type="number"><br>
  31. <button onclick="send()" style="margin: 8px;">КУПИТЬ</button>
  32. </main>
  33. <script>
  34. function reducer(state, {type, ШО, number,money}){
  35. if (!state){
  36. return { // Добавление товара в этот обьект, не ломает код
  37. касса: 0,
  38. ПИВО: {amount:100, price: 55},
  39. ЧИПСЫ: {amount:100, price: 30},
  40. СИГИ: {amount:100, price: 80},
  41. ВИСКИ: {amount:100, price: 180},
  42. СУХАРИ: {amount:100, price: 20},
  43. ОРЕШКИ: {amount:100, price: 25},
  44. КОЛА: {amount:100, price: 20},
  45. }
  46. }
  47. if(number >state[ШО].amount){
  48. alert('В ларьке нет столько товара!')
  49. return state
  50. }
  51. if(money<number*state[ШО].price){
  52. alert(`Мало денег! Нужно минимум ${number*state[ШО].price} грн!`)
  53. return state
  54. }
  55. if (type === 'КУПИТЬ'){
  56. let buy = state[ШО].amount - number
  57. return {
  58. ...state,
  59. [ШО]: {amount:buy, price:state[ШО].price},
  60. касса: state.касса+money
  61. }
  62. }
  63. return state
  64. }
  65. function createStore(reducer){
  66. let state = reducer(undefined, {})
  67. let cbs = []
  68. const getState = () => state
  69. const subscribe = cb => (cbs.push(cb),
  70. () => cbs = cbs.filter(c => c !== cb))
  71. const dispatch = action => {
  72. const newState = reducer(state, action)
  73. if (newState !== state){
  74. state = newState
  75. for (let cb of cbs) cb()
  76. }
  77. }
  78. return {
  79. getState,
  80. dispatch,
  81. subscribe
  82. }
  83. }
  84. const store = createStore(reducer)
  85. const unsubscribe = store.subscribe(() => console.log(store.getState()))
  86. let arrKeys = Object.keys(store.getState()).slice(1) // Массив ключей, без ключа 'касса'
  87. for(let i = 0; i<=arrKeys.length-1 ;i++){ // Цикл для создания тегов option
  88. let optionTeg = document.createElement('option')
  89. optionTeg.innerHTML=`${arrKeys[i]} ${store.getState()[arrKeys[i]].price} грн`
  90. optionTeg.value=arrKeys[i]
  91. document.getElementById("myselect").append(optionTeg)
  92. }
  93. function update(){//Функция обновления колличества товара в дивах
  94. document.getElementById("section").remove()
  95. let section = document.createElement('section')
  96. section.id= 'section'
  97. document.getElementById("container").append(section)
  98. for(let i = 0; i<=arrKeys.length-1 ;i++){
  99. let balanceDiv = document.createElement('div')
  100. balanceDiv.innerHTML=`<br>${arrKeys[i]} ${store.getState()[arrKeys[i]].amount} шт`
  101. document.getElementById("section").append(balanceDiv)
  102. }
  103. }
  104. update()
  105. let buy
  106. document.getElementById("myselect").addEventListener("change", function(){ //Функция с циклом для создания action
  107. let price=0 // И для динамического изминения цены в div
  108. for(let i = 0; i<=arrKeys.length ;i++){
  109. if(this.value==arrKeys[i]){
  110. price= store.getState()[arrKeys[i]].price
  111. buy= (number,money) => ({type: 'КУПИТЬ', ШО: arrKeys[i], number, money})
  112. }
  113. }
  114. document.getElementById('priceDiv').innerHTML = "Цена: "+price+" грн";
  115. });
  116. function send(){//Функция которая в онклике, передаём значения с инпутов, обновляем кассу, и обновляем товары в дивах.
  117. let result = store.dispatch(buy(+document.getElementById('inp').value,+document.getElementById('inp2').value))
  118. document.getElementById('money').innerHTML = "Касса: "+store.getState().касса+" грн";
  119. update()
  120. return result
  121. }
  122. </script>
  123. </body>
  124. </html>