Browse Source

HW<12> done

Евгения Акиншина 2 years ago
parent
commit
7bc8c508fe
4 changed files with 161 additions and 0 deletions
  1. 22 0
      js12/css/style.css
  2. BIN
      js12/img/kiosk.jpg
  3. 14 0
      js12/index.html
  4. 125 0
      js12/js/redux.js

+ 22 - 0
js12/css/style.css

@@ -0,0 +1,22 @@
+body {
+	background: url(../img/kiosk.jpg) no-repeat;
+	background-color: rgb(211, 210, 204);
+	margin-left: 830px;
+}
+
+button {
+	color: white;
+	padding: 5px 5px;
+	margin-top: 5px;
+	margin-left: 2px;
+	border-radius: 10px;
+	letter-spacing: 2px;
+	background-image: linear-gradient(to right, #9EEFE1 0%, #4830F0 51%, #9EEFE1 100%);
+	background-size: 200% auto;
+	box-shadow: 0 0 20px rgba(0, 0, 0, .1);
+	transition: .5s;
+}
+
+button:hover {
+	background-position: right center;
+}

BIN
js12/img/kiosk.jpg


+ 14 - 0
js12/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=\, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <title>HW12</title>
+</head>
+<body>
+    <div id="content"></div>
+    <script src='js/redux.js'></script>
+</body>
+</html>

+ 125 - 0
js12/js/redux.js

@@ -0,0 +1,125 @@
+function createStore(reducer){ 
+    let state = reducer(undefined, {})
+    let cbs   = []
+    return {
+        dispatch(action){
+            const newState = reducer(state, action)
+            if (newState !== state){
+                state = newState
+                for (let cb of cbs) 
+                    cb()
+            }
+        },
+        getState(){ 
+            return state
+        },
+        subscribe(cb){
+            cbs.push(cb)
+            return () => cbs = cbs.filter(c => c !== cb) 
+        }
+    }
+}
+
+function createKiosk(state){
+    let div = document.getElementById('content')
+    div.innerHTML = ''
+    let hello = document.createElement('span')
+    hello.innerHTML = 'ГАСТРОНОМ "У ЛЮСИ" <br />'
+    hello.style.color = '#4B0082'
+    div.appendChild(hello)
+
+    let pivo = document.createElement('span')
+    pivo.innerHTML = `- Пивасик по ${state.пивасик.БАБЛО} грн,\n`
+    div.appendChild(pivo)
+    let pivoAmount = document.createElement('span')
+    pivoAmount.innerHTML = `${state.пивасик.СКОКА}\n банок в наличии<br />`
+    div.appendChild(pivoAmount)
+
+    let chips = document.createElement('span')
+    chips.innerHTML = `- Чипсики по ${state.чипсики.БАБЛО} грн,\n`
+    div.appendChild(chips)
+    let chipsAmount = document.createElement('span')
+    chipsAmount.innerHTML = `${state.чипсики.СКОКА}\n пачек в наличии<br />`
+    div.appendChild(chipsAmount)
+
+    let cigi = document.createElement('span')
+    cigi.innerHTML = `- Сиги по ${state.сиги.БАБЛО} грн,\n`
+    div.appendChild(cigi)
+    let cigiAmount = document.createElement('span')
+    cigiAmount.innerHTML = `${state.сиги.СКОКА}\n пачек в наличии<br />`
+    div.appendChild(cigiAmount)
+
+    let kassa = document.createElement('span')
+    kassa.innerText = `- Бабосиков в кассе: ${state.касса} грн\n`
+    div.appendChild(kassa)
+    let select = document.createElement('select')
+    div.appendChild(select)
+
+    let pruduct = document.createElement('option')
+    pruduct.innerText = 'Выберите товар'
+    select.appendChild(pruduct)
+
+    let pivasik = document.createElement('option')
+    pivasik.innerText = 'пивасик'
+    select.appendChild(pivasik)
+
+    let chipsiki = document.createElement('option')
+    chipsiki.innerText = 'чипсики'
+    select.appendChild(chipsiki)
+
+    let cigarette = document.createElement('option')
+    cigarette.innerText = 'сиги'
+    select.appendChild(cigarette)
+
+    let inputAmount = document.createElement('input')
+    inputAmount.type = 'number'
+    inputAmount.min = '1'
+    div.appendChild(inputAmount)
+
+    let button = document.createElement('button')
+    button.innerText = "Купить"
+    div.appendChild(button)
+
+    button.onclick = () => {
+        if(state[select.value].СКОКА >= inputAmount.value){
+            let pieces = inputAmount.value
+            let price = select.value       
+            store.dispatch(купи(price, pieces))
+        } else{
+            alert("А ты не лопнишь, деточка?...ладно, шучу:D - такого количества товара в наличии попросту нет!")
+        }  
+    }   
+    return state
+}
+
+
+function reducer(state, {type, ШО, СКОКА, БАБЛО}){
+    if (!state){
+        return {
+            пивасик: {СКОКА: 100, БАБЛО: 30},
+            чипсики: {СКОКА: 100, БАБЛО: 20},
+            сиги: {СКОКА : 100, БАБЛО: 40},
+            касса: 0
+        }
+    }
+
+    if (type === 'КУПИТЬ'){
+        return {
+            ...state,
+            [ШО]: {...state[ШО], СКОКА: state[ШО].СКОКА - СКОКА},
+            касса: state[ШО].БАБЛО * СКОКА + state.касса
+        }
+    }
+    return state
+}
+
+const store = createStore(reducer)
+const unsubscribe1 = store.subscribe(() => console.log('подписчик 1', store.getState()))
+const kiosk = store.subscribe(() => createKiosk(store.getState()))
+const купиПивасик = СКОКА => ({type: 'КУПИТЬ', ШО: 'пивасик', СКОКА})
+const купиЧипсики = СКОКА => ({type: 'КУПИТЬ', ШО: 'чипсики', СКОКА})
+const купиСиги = СКОКА => ({type: 'КУПИТЬ', ШО: 'сиги', СКОКА})
+const купи = (ШО,СКОКА) => ({type: 'КУПИТЬ', ШО, СКОКА})
+store.dispatch(купиЧипсики(0))
+store.dispatch(купиПивасик(0))
+store.dispatch(купиСиги(0))