Browse Source

Загрузить файлы 'JS 5 Online Homework/Homework #13: redux'

stas.vladlenko 1 year ago
parent
commit
a3f60a9805

+ 101 - 0
JS 5 Online Homework/Homework #13: redux/hw13.js

@@ -0,0 +1,101 @@
+
+function reducer(state, {type, ШО, СКОКА, БАБЛО}){
+    if (!state){
+        return {
+                пиво: {
+                    колличество: 100,
+                    цена: 52
+                },
+                сиги: {
+                    колличество: 200,
+                    цена: 86
+                },
+                чипсы: {
+                    колличество: 50,
+                    цена: 43
+                },
+                ЧЕК: 0,
+                СДАЧА: 0,
+                КАССА: 0,
+        }
+    }
+
+    switch({type, ШО, СКОКА, БАБЛО}.type) {
+        case 'КУПИТЬ':
+            return {
+                ...state, 
+                [ШО]: {...state[ШО], колличество:  state[ШО].колличество >= СКОКА ?  state[ШО].колличество - СКОКА : (state.ЧЕК = 0) || state[ШО].колличество},
+                КАССА: state.ЧЕК <= БАБЛО ? state.ЧЕК : 0,
+                СДАЧА: (БАБЛО >= state.ЧЕК) ? БАБЛО - state.ЧЕК : turningIn.value = 'Не хватает БАБЛА!'
+            }
+        case 'СУММА ПОКУПКИ':
+            return {
+                ...state,
+                ЧЕК: state[ШО].цена * СКОКА,
+            }
+        default:
+            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
+    }
+}
+
+function createAction (){
+    return {
+        type: 'КУПИТЬ',
+        ШО: selectProduct.value,
+        СКОКА: +countGoods.value,
+        БАБЛО: +moneys.value,
+    }
+}
+
+const kiosk = reducer(undefined, {})
+const store = createStore(reducer)
+
+for (let i = 0; i < Object.keys(kiosk).length; i ++) {
+    if (typeof Object.values(kiosk)[i] === 'object') {
+        selectProduct.appendChild(document.createElement('option')).innerHTML = Object.keys(kiosk)[i]
+    } 
+}
+
+beerCount.value = kiosk.пиво.колличество
+sigiCount.value = kiosk.сиги.колличество
+chipsCount.value = kiosk.чипсы.колличество
+
+
+store.subscribe( () => beerCount.value = store.getState().пиво.колличество, beer.innerHTML += ` ${store.getState().пиво.цена} UAH/бут.` )
+store.subscribe( () => sigiCount.value = store.getState().сиги.колличество, sigi.innerHTML += ` ${store.getState().сиги.цена} UAH/пачку`)
+store.subscribe( () => chipsCount.value = store.getState().чипсы.колличество, chips.innerHTML += ` ${store.getState().чипсы.цена} UAH/пачку`)
+store.subscribe( () => giveMoney.value = store.getState().ЧЕК)
+store.subscribe( () => turningIn.value = store.getState().СДАЧА)
+
+countGoods.oninput = () => {
+    store.dispatch({...createAction(), type: 'СУММА ПОКУПКИ'})
+}
+
+buy.onclick  = () => {
+    store.dispatch(createAction())
+    console.log(store.getState())
+}

+ 79 - 0
JS 5 Online Homework/Homework #13: redux/index.html

@@ -0,0 +1,79 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    
+    <div class="main-conteiner">
+        <div class="right-showCase">
+            <span class="showCase-text">СЕГОДНЯ В НАЛИЧИИ</span>
+            <ul>
+                <li class="showCase-product">
+                    <img class="showCase-product-img" src="/kioskData/beer.png">
+                    <div class="showCase-place">
+                        <span class="goodsTittle" id="beer">ПИВО</span>
+                        <input class="showCase-good" id="beerCount" disabled>
+                    </div>
+
+                </li>
+                <li class="showCase-product">
+                    <img class="showCase-product-img" src="/kioskData/sigi.png">
+                    <div class="showCase-place">
+                        <span class="goodsTittle" id="sigi">СИГИ</span>
+                        <input class="showCase-good" id="sigiCount" disabled>
+                    </div>
+                    
+                </li>
+                <li class="showCase-product">
+                    <img class="showCase-product-img" src="/kioskData/chips.png">
+                    <div class="showCase-place">
+                        <span class="goodsTittle" id="chips">ЧИПСИКИ</span>
+                        <input class="showCase-good" id="chipsCount" disabled>
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <div class="center-salesWoman">
+            <img class="salesWoman-img" src="/kioskData/salesWoman.png" alt="">
+            <span class="salesWoman-text">ЕСТЬ ТОЛЬКО ПИВО, СИГИ И ЧИПСИКИ</span>
+        </div>
+
+        <div class="left-buy">
+            <ul>
+                <li>
+                    <span class="left-buy-text">ЧЁ НАДА !!?</span>
+                    <select class="showCase-good" id="selectProduct">
+
+                    </select>
+                </li>
+                <li>
+                    <span>СКОКА !!?</span>
+                    <input class="showCase-good" id="countGoods" type="number">
+                </li>
+                <li>
+                    <span>С ТЕБЯ </span>
+                    <input class="showCase-good" id="giveMoney" type="number" disabled>
+                </li>
+                <li>
+                    <span>СКОКА ДЕНЕГ ДАШЬ ?</span>
+                    <input class="showCase-good" id="moneys" type="number">
+                </li>
+                <li>
+                    <button id="buy">К У П И Т Ь</button>
+                </li>
+                <li>
+                    <span>ТВОЯ СДАЧА</span>
+                    <input class="showCase-good" id="turningIn" disabled>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <script src="/hw13.js"></script>
+</body>
+</html>

+ 111 - 0
JS 5 Online Homework/Homework #13: redux/style.css

@@ -0,0 +1,111 @@
+@font-face {
+    font-family: kioskFont;
+    src: url(/kioskData/KellySlab-Regular.ttf);
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    font-family: kioskFont;
+}
+li{
+    list-style: none;
+}
+
+.main-conteiner {
+    display: flex;
+    width: 1080px;
+    height: 400px;
+    background-color: #DDAD7C;
+}
+
+.right-showCase {
+    display: flex;
+    flex-direction: column;
+    width: 310px;
+    height: 100%;
+}
+
+.center-salesWoman {
+    width: 485px;
+    height: 100%;
+}
+
+.left-buy {
+    width: 285px;
+    height: 100%;
+}
+
+.salesWoman-img {
+    width: 465px;
+    height: 305px;
+    margin-top: 20px;
+    margin-bottom: 15px;
+}
+
+.salesWoman-text {
+    font-size: 26px;
+    color: #2D211D;
+}
+
+.showCase-product {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    margin-bottom: 20px;
+}
+
+.showCase-place {
+    display: flex;
+    flex-direction: column;
+    font-size: 20px;
+}
+
+.showCase-product-img {
+    width: 65px;
+    margin-right: 15px;
+}
+
+.showCase-text {
+    margin-top: 20px;
+    font-size: 20px;
+    text-align: center;
+}
+
+.showCase-good {
+    display: flex;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    width: 150px;
+    height: 20px;
+    background-color: #FFEFC5;
+    border: 0px;
+    font-family: kioskFont;
+    font-weight: 800;
+}
+
+.left-buy {
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+}
+
+.left-buy-text {
+    margin-bottom: 10px;
+}
+
+#buy {
+    margin-top: 15px;
+    margin-bottom: 15px;
+    width: 100px;
+    height: 40px;
+    font-weight: 700;
+    font-family: kioskFont;
+    background-color: #6C473A;
+    color: white;
+    border-color: white;
+}
+
+.goodsTittle {
+    font-size: 16px;
+}