Vladislav_Postnikov
/
HomeWork1


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
							<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Redux2</title>
	<style>
		td, th{
			border: 1px solid black;
		}
	</style>
</head>
<body>

	<!-- <input type="text" id="tovar"> -->
	<select id='tovar'>
		<option value="пиво">пиво</option>
		<option value="чипсы">чипсы</option>
		<option value="сиги">сиги</option>
	</select>
	<input type="number" id="skok" placeholder="сколько надо?">
	<input type="number" id="bablo" placeholder="сколько денег?">
	<button id="btn">Купить</button>
	<p id="error"></p>

	<script>
		function reducer(state, {type, ШО, СКОКА, БАБЛО}){
    	if (!state){ 
       		return {
            	пиво:{колво:100, цена: 10},
            	чипсы:{колво:100, цена:20},
            	сиги:{колво:100, цена:30},
            	касса:2700
        	}
    	}
    		if (type === 'КУПИТЬ'){ 
    			if((ШО in state) && БАБЛО >= state[ШО].цена * СКОКА  && state[ШО].колво - СКОКА >= 0){
    				return {
        				...state,
              			[ШО]:{колво:state[ШО].колво - СКОКА, цена: state[ШО].цена},
            			касса: +state.касса + (state[ШО].цена*СКОКА)
          			} 
      			}else{
      				error.innerHTML='\&#9785; что-то не так (нет данного товара или не хватает денег) \&#9785;';
      				setTimeout(()=>error.innerHTML='',2000);
      			}
    		}	
      		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 
    		}
		}

		let store=createStore(reducer);
		btn.onclick=function(){
			for(let [key] of Object.entries(store.getState())){
				if(tovar.value===key){
					store.dispatch({type: 'КУПИТЬ', ШО:tovar.value, СКОКА: skok.value, БАБЛО: bablo.value });
					console.log(store.getState());
				}
			}
		}

		let table=document.createElement('table');
		for(let [key,value] of Object.entries(store.getState())){
			let tr=document.createElement('tr');
			let td=document.createElement('th');
			let td2=document.createElement('td');
			let td3=document.createElement('td');
			td.innerText=key;
			if(typeof value==='object'){
				for(let i in value){
					if(i==='колво'){
						td2.innerText=+value[i];
					}
					if(i==='цена'){
						td3.innerText=value[i];
					}	
				}
			}else{
				td2.innerText=value;
			}
			tr.append(td,td2,td3);
			table.append(tr);
			table.style.border='1px solid black';	
		}
		document.body.append(table);

		const unsubscribe=store.subscribe(()=>{
			while (table.hasChildNodes()) {
    			table.removeChild(table.firstChild);
			}
			for(let [key,value] of Object.entries(store.getState())){
				let tr=document.createElement('tr');
				let td=document.createElement('td');
				let td2=document.createElement('td');
				let td3=document.createElement('td');
				td.innerText=key;
				if(typeof value==='object'){
					for(let i in value){
						if(i==='колво'){
							td2.innerText=value[i];
						}
						if(i==='цена'){
							td3.innerText=value[i];
						}		
					}
				}else{
					td2.innerText=value;
				}
				tr.append(td,td2,td3);
				table.append(tr);
			}
			document.body.append(table);
		})

	

	</script>
</body>
</html>