3 年之前 · ca086dd81b
--- a/src/index.html
+++ b/src/index.html
@@ -7,5 +7,44 @@
 
				     <title>Homework</title>
			
 
				     <link rel="stylesheet" href="styles.css" />
			
 
				   </head>
			
 
				-  <body></body>
			
 
				+  <body>
			
 
				+    <div class="handleCash">
			
 
				+      <input name="cash" type="number" placeholder="set Shop cash" />
			
 
				+      <input name="userCash" type="number" placeholder="set User cash" />
			
 
				+    </div>
			
 
				+    <div class="cashRegister">
			
 
				+      <h3 class="cashRegister__title"></h3>
			
 
				+      <h3 class="cashRegister__title"></h3>
			
 
				+    </div>
			
 
				+    <form class="shop" id="shop-form">
			
 
				+      <select class="shop__select" size="3" multiple name="shop-select">
			
 
				+        <option disabled>Chose a good</option>
			
 
				+        <option>Bar</option>
			
 
				+        <option>Cake</option>
			
 
				+        <option>Sandwich</option>
			
 
				+        <option>Toast</option>
			
 
				+      </select>
			
 
				+      <input class="shop__input" type="number" placeholder="Quantity" />
			
 
				+      <button class="shop__button" type="submit">Purchase</button>
			
 
				+    </form>
			
 
				+    <h3 class="shopTitle">Shop assortment</h3>
			
 
				+    <ul class="goodsList">
			
 
				+      <li class="goodsList__item" name="bar">
			
 
				+        Bar<span class="goodsList__item__span"></span>
			
 
				+        <span class="goodsList__item__span"></span>
			
 
				+      </li>
			
 
				+      <li class="goodsList__item" name="cake">
			
 
				+        Cake<span class="goodsList__item__span"></span>
			
 
				+        <span class="goodsList__item__span"></span>
			
 
				+      </li>
			
 
				+      <li class="goodsList__item" name="sandwich">
			
 
				+        Sandwich<span class="goodsList__item__span"></span>
			
 
				+        <span class="goodsList__item__span"></span>
			
 
				+      </li>
			
 
				+      <li class="goodsList__item" name="toast">
			
 
				+        Toast<span class="goodsList__item__span"></span>
			
 
				+        <span class="goodsList__item__span"></span>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </body>
			
 
				 </html>
			
--- a/src/java-script/hw.js
+++ b/src/java-script/hw.js
@@ -1,13 +1,57 @@
 
				 import { store } from './redux/store';
			
 
				+import { defaultState } from './redux/shop/reducer/';
			
 
				 
			
 
				-store.subscribe(() => console.log(store.getState()));
			
 
				+const shopGoods = document.getElementsByClassName('goodsList')[0];
			
 
				+const cashRegister = document.getElementsByClassName('cashRegister')[0];
			
 
				 
			
 
				-store.dispatch({ type: 'INCREMENT' });
			
 
				+const reDrawShop = state => {
			
 
				+  cashRegister.children[0].textContent = `Shop cash : "${state.cash} $"`;
			
 
				+  cashRegister.children[1].textContent = `User cash : "${state.userCash} $"`;
			
 
				+  for (const li in shopGoods.children) {
			
 
				+    const htmlLi = shopGoods.children[li];
			
 
				+    if (typeof htmlLi === 'object') {
			
 
				+      const name = htmlLi.attributes.name.value;
			
 
				+      const quantity = htmlLi.children[0];
			
 
				+      const price = htmlLi.children[1];
			
 
				+      quantity.textContent = `left : ${state[name].quantity} st ,`;
			
 
				+      price.textContent = `price : ${state[name].price} $ .`;
			
 
				+    }
			
 
				+  }
			
 
				+};
			
 
				 
			
 
				-store.dispatch({ type: 'INCREMENT' });
			
 
				+reDrawShop(defaultState);
			
 
				 
			
 
				-store.dispatch({ type: 'DECREMENT' });
			
 
				+store.subscribe(() => reDrawShop(store.getState().shop));
			
 
				 
			
 
				-store.dispatch({ type: 'DECREMENT' });
			
 
				+const shopForm = document.getElementById('shop-form');
			
 
				 
			
 
				-store.dispatch({ type: 'DECREMENT' });
			
 
				+const handelShopForm = function (e) {
			
 
				+  e.preventDefault();
			
 
				+  const form = this.children;
			
 
				+  const quantity = form[1].value;
			
 
				+  const select = form[0].children;
			
 
				+  for (const option in select) {
			
 
				+    if (select[option].selected && quantity) {
			
 
				+      store.dispatch({
			
 
				+        type: select[option].value.toLowerCase(),
			
 
				+        payload: quantity,
			
 
				+      });
			
 
				+    }
			
 
				+  }
			
 
				+};
			
 
				+
			
 
				+shopForm.addEventListener('submit', handelShopForm);
			
 
				+
			
 
				+const handleCashHtml =
			
 
				+  document.getElementsByClassName('handleCash')[0].children;
			
 
				+
			
 
				+const handleCash = function () {
			
 
				+  if (this.value < 0) return;
			
 
				+  store.dispatch({
			
 
				+    type: this.name,
			
 
				+    payload: this.value,
			
 
				+  });
			
 
				+};
			
 
				+
			
 
				+handleCashHtml[0].addEventListener('input', handleCash);
			
 
				+handleCashHtml[1].addEventListener('input', handleCash);
			
--- a/src/java-script/redux/counter/action/index.js
+++ b/src/java-script/redux/counter/action/index.js
@@ -1,4 +0,0 @@
 
				-export const counterAction = {
			
 
				-  INCREMENT: 'INCREMENT',
			
 
				-  DECREMENT: 'DECREMENT',
			
 
				-};
			
--- a/src/java-script/redux/counter/reducer/index.js
+++ b/src/java-script/redux/counter/reducer/index.js
@@ -1,12 +0,0 @@
 
				-import { counterAction } from '../action';
			
 
				-
			
 
				-export function counterReducer(state = 0, action) {
			
 
				-  switch (action.type) {
			
 
				-    case counterAction.INCREMENT:
			
 
				-      return state + 1;
			
 
				-    case counterAction.DECREMENT:
			
 
				-      return state - 1;
			
 
				-    default:
			
 
				-      return state;
			
 
				-  }
			
 
				-}
			
--- a/src/java-script/redux/rootReducer/index.js
+++ b/src/java-script/redux/rootReducer/index.js
@@ -1,4 +1,4 @@
 
				 import { combineReducers } from 'redux';
			
 
				-import { counterReducer } from '../counter/reducer';
			
 
				+import { shopReducer } from '../shop/reducer';
			
 
				 
			
 
				-export const rootReducer = combineReducers({ count: counterReducer });
			
 
				+export const rootReducer = combineReducers({ shop: shopReducer });
			
--- a/src/java-script/redux/shop/action/index.js
+++ b/src/java-script/redux/shop/action/index.js
@@ -0,0 +1,8 @@
 
				+export const shopAction = {
			
 
				+  bar: 'bar',
			
 
				+  cake: 'cake',
			
 
				+  sandwich: 'sandwich',
			
 
				+  toast: 'toast',
			
 
				+  userCash: 'userCash',
			
 
				+  cash: 'cash',
			
 
				+};
			
--- a/src/java-script/redux/shop/reducer/index.js
+++ b/src/java-script/redux/shop/reducer/index.js
@@ -0,0 +1,44 @@
 
				+import { shopAction } from '../action';
			
 
				+
			
 
				+export const defaultState = {
			
 
				+  userCash: 12,
			
 
				+  cash: 0,
			
 
				+  bar: {
			
 
				+    quantity: 3,
			
 
				+    price: 5,
			
 
				+  },
			
 
				+  cake: {
			
 
				+    quantity: 5,
			
 
				+    price: 2,
			
 
				+  },
			
 
				+  sandwich: {
			
 
				+    quantity: 8,
			
 
				+    price: 6,
			
 
				+  },
			
 
				+  toast: {
			
 
				+    quantity: 11,
			
 
				+    price: 8,
			
 
				+  },
			
 
				+};
			
 
				+
			
 
				+export function shopReducer(state = defaultState, { type, payload }) {
			
 
				+  switch (type) {
			
 
				+    case shopAction.cash:
			
 
				+      state[type] = payload;
			
 
				+      return state;
			
 
				+    case shopAction.userCash:
			
 
				+      state[type] = payload;
			
 
				+      return state;
			
 
				+    case shopAction[type]:
			
 
				+      if (state[type].quantity - payload < 0 || payload <= 0) return state;
			
 
				+      const sold = state[type].price * payload;
			
 
				+      if (sold <= state.userCash) {
			
 
				+        state[type].quantity = state[type].quantity - payload;
			
 
				+        state.cash += sold;
			
 
				+        state.userCash -= sold;
			
 
				+      }
			
 
				+      return state;
			
 
				+    default:
			
 
				+      return state;
			
 
				+  }
			
 
				+}
			
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,3 +1,67 @@
 
				+.shop{
			
 
				+    width: 100%;
			
 
				+    padding: 30px 0;
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    background-color: gainsboro;
			
 
				+}
			
 
				+
			
 
				+.shop__select{
			
 
				+    margin-right: 1%;
			
 
				+}
			
 
				+
			
 
				+.shop__input{
			
 
				+    margin-right: 1%;
			
 
				+}
			
 
				+
			
 
				+.shopTitle{
			
 
				+    text-align: center;
			
 
				+    font-size: 40px;
			
 
				+    color: grey;
			
 
				+}
			
 
				+
			
 
				+.goodsList{
			
 
				+    padding: 50px;
			
 
				+    margin: 0 auto;
			
 
				+    background-color: lavender;
			
 
				+    width: 40%;
			
 
				+    border-radius: 10px;
			
 
				+    border: solid 3px black;
			
 
				+}
			
 
				+
			
 
				+.goodsList__item{
			
 
				+    font-size: 30px;
			
 
				+    list-style: none;
			
 
				+    color: orange;
			
 
				+    margin-bottom: 5px;
			
 
				+}
			
 
				+
			
 
				+.goodsList__item__span{
			
 
				+    margin-left: 30px;
			
 
				+    font-size: 20px;
			
 
				+    color: green;
			
 
				+    margin-bottom: 5px;
			
 
				+}
			
 
				+.cashRegister{
			
 
				+    width: 100%;
			
 
				+    background-color: gray;
			
 
				+    padding: 5px 0;
			
 
				+    display: flex;
			
 
				+    justify-content: space-around;
			
 
				+}
			
 
				+
			
 
				+.cashRegister__title{
			
 
				+    font-size: 25px;
			
 
				+    color: rgb(26, 226, 26);
			
 
				+}
			
 
				+
			
 
				 body {
			
 
				-    background-color: aquamarine;
			
 
				+    background-color: rgb(243, 243, 245);
			
 
				+}
			
 
				+
			
 
				+.handleCash{
			
 
				+    background-color: orange;
			
 
				+    padding: 10px 0;
			
 
				+    display: flex;
			
 
				+    justify-content: space-around;
			
 
				 }