index.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Title</title>
  6. <style>
  7. body {
  8. background: oldlace;
  9. }
  10. img {
  11. width: 150px;
  12. margin-left: 20px;
  13. }
  14. h1 {
  15. text-align: center;
  16. color: brown;
  17. }
  18. #div {
  19. display: flex;
  20. flex-direction: column;
  21. justify-content: center;
  22. margin: 0 auto;
  23. align-items: center;
  24. }
  25. #img-block {
  26. display: flex;
  27. align-items: center;
  28. }
  29. #textBlock {
  30. display: flex;
  31. }
  32. p {
  33. padding-right: 20px;
  34. color: brown;
  35. font-size: 20px;
  36. }
  37. button {
  38. margin: 0 auto;
  39. width: 200px;
  40. height: 40px;
  41. background-color: bisque;
  42. box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.3);
  43. }
  44. button:hover {
  45. box-shadow: 0px;
  46. }
  47. .buttomP {
  48. color: red;
  49. margin: 0;
  50. text-align: center;
  51. font-size: 20px;
  52. padding-left: 15px;
  53. }
  54. #list,
  55. #amount,
  56. #sum {
  57. margin-bottom: 20px;
  58. width: 300px;
  59. height: 20px;
  60. background-color: bisque;
  61. }
  62. #amount,
  63. #sum {
  64. width: 294px;
  65. }
  66. #text {
  67. padding-left: 60px;
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <h1>ГОПОТА МАРКЕТ</h1>
  73. <div id="div">
  74. <div id="img-block">
  75. <div>
  76. <img
  77. src="data:image/jpeg;base64,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"
  78. alt=""
  79. />
  80. <p id="text">20 денег</p>
  81. </div>
  82. <div>
  83. <img
  84. src="https://euro-opt.shop/4119-large_default/chipsy-pringles-original-pringls-original-165g.jpg"
  85. alt=""
  86. width=""
  87. />
  88. <p id="text">10 денег</p>
  89. </div>
  90. <div>
  91. <img
  92. src="https://img3.zakaz.ua/1.1620828397.ad72436478c_2021-05-12_Tatiana/1.1620828397.SNCPSG10.obj.0.1.jpg.oe.jpg.pf.jpg.1350nowm.jpg.1350x.jpg"
  93. alt=""
  94. />
  95. <p id="text">30 денег</p>
  96. </div>
  97. </div>
  98. <div id="textBlock">
  99. <p>В наличии:</p>
  100. <br />
  101. </div>
  102. <p>Чё надо?</p>
  103. <select name="store" id="list" class="s-10">
  104. <option value="пиво">Пиво</option>
  105. <option value="чипсы">Чипсы</option>
  106. <option value="сиги">Сиги</option>
  107. </select>
  108. <p>Скок надо?</p>
  109. <input type="number" id="sum" class="i-3" />
  110. <p>Давай бабки! Сдачи нету!</p>
  111. <input type="number" id="amount" class="i-2" />
  112. <button id="button" class="b-2">
  113. <p class="buttomP">КУПИТЬ</p>
  114. </button>
  115. <p class="out-2" id="kassa">КАССА: 0 денег</p>
  116. </div>
  117. <script>
  118. setTimeout(function () {
  119. let parent = document.querySelector("#textBlock");
  120. parent.lastElementChild.remove();
  121. store.dispatch({ type: "КУПИТЬ", ШО: "пиво", СКОКА: 0 });
  122. }, 1);
  123. function reducer(state, { type, ШО, СКОКА, БАБЛО }) {
  124. //объект action деструктуризируется на три переменных
  125. if (!state) {
  126. //начальная уборка в ларьке:
  127. return {
  128. пиво: { price: 20, amount: 100 },
  129. чипсы: { price: 10, amount: 100 },
  130. сиги: { price: 30, amount: 100 },
  131. касса: { cash: 0 },
  132. };
  133. }
  134. let stateSHO = state[ШО].amount;
  135. let statePrice = state[ШО].price;
  136. if (
  137. type === "КУПИТЬ" &&
  138. stateSHO != 0 &&
  139. stateSHO >= 0 &&
  140. sum.value <= 100
  141. ) {
  142. if((stateSHO - sum.value) >= 0) {
  143. if (statePrice * sum.value <= amount.value) {
  144. return {
  145. ...state,
  146. [ШО]: {
  147. price: state[ШО].price,
  148. amount: stateSHO - СКОКА,
  149. },
  150. касса: {
  151. cash: +state.касса.cash + +amount.value,
  152. },
  153. };
  154. } else {
  155. alert("Мало денеге, пойди в мамы попроси!")
  156. }
  157. } else {
  158. alert("У нас нету столько товара")
  159. }
  160. } else {
  161. alert("Либо у нас нету столько товара, либо говорить научись!")
  162. }
  163. return state;
  164. //если мы не поняли, что от нас просят в `action` - оставляем все как есть
  165. }
  166. function createStore(reducer) {
  167. let state = reducer(undefined, {}); //стартовая инициализация состояния, запуск редьюсера со state === undefined
  168. let cbs = []; //массив подписчиков
  169. const getState = () => state; //функция, возвращающая переменную из замыкания
  170. const subscribe = (cb) => (
  171. cbs.push(cb), //запоминаем подписчиков в массиве
  172. () => (cbs = cbs.filter((c) => c !== cb))
  173. ); //возвращаем функцию unsubscribe, которая удаляет подписчика из списка
  174. const dispatch = (action) => {
  175. const newState = reducer(state, action); //пробуем запустить редьюсер
  176. if (newState !== state) {
  177. //проверяем, смог ли редьюсер обработать action
  178. state = newState; //если смог, то обновляем state
  179. for (let cb of cbs) cb(); //и запускаем подписчиков
  180. }
  181. };
  182. return {
  183. getState, //добавление функции getState в результирующий объект
  184. dispatch,
  185. subscribe, //добавление subscribe в объект
  186. };
  187. }
  188. const store = createStore(reducer);
  189. //запомнит функцию во внутреннем массиве cbs.
  190. //она будет запущена при любом успешном dispatch
  191. const unsubscribe = store.subscribe(() =>
  192. console.log(store.getState())
  193. );
  194. setTimeout(unsubscribe, 10000); //отпишемся через 10 секунд, например
  195. //происходит запуск редьюсера, который создает новый state.
  196. //dispatch запускает всех подписчиков из массива cbs
  197. console.log(store.getState());
  198. store.subscribe(() => console.log(store.getState()));
  199. for (let [good, amount] of Object.entries(store.getState())) {
  200. console.log(good, amount);
  201. let p = document.createElement("p");
  202. p.innerHTML = `${good} (${amount})`;
  203. textBlock.append(p);
  204. button.onclick = () => {
  205. store.dispatch({
  206. type: "КУПИТЬ",
  207. ШО: list.value,
  208. СКОКА: sum.value,
  209. });
  210. kassa.innerHTML =
  211. "КАССА: " + store.getState().касса.cash + " денег";
  212. };
  213. store.subscribe(
  214. () =>
  215. (p.innerText = `${good} (${
  216. store.getState()[good].amount
  217. })`)
  218. );
  219. }
  220. </script>
  221. </body>
  222. </html>