Arieg419/vanillaReduxFinal.html

## vanillaReduxFinal.html
<!DOCTYPE html>
<html>
  <head>
    <title>Omer's Workshop</title>
    <script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
  </head>
  <body>
    <div>
      <p>
        Counter: <span id="value">0</span> times
        <button id="increment">+</button>
        <button id="decrement">-</button>
        <button id="incrementIfOdd">Increment if odd</button>
        <button id="incrementAsync">Increment async</button>
      </p>
    </div>
    <script>
      const valueEl = document.getElementById('value')

      function counter(state = 0, action) {
        switch (action.type) {
          case 'INCREMENT':
            return state + 1
          case 'DECREMENT':
            return state - 1
          default:
            return state
        }
      }

      const store = Redux.createStore(counter)

      function render() {
        valueEl.innerHTML = store.getState().toString()
      }

      render()
      store.subscribe(render)

      document.getElementById('increment')
        .addEventListener('click', function () {
          store.dispatch({ type: 'INCREMENT' })
        })

      document.getElementById('decrement')
        .addEventListener('click', function () {
          store.dispatch({ type: 'DECREMENT' })
        })

      document.getElementById('incrementIfOdd')
        .addEventListener('click', function () {
          if (store.getState() % 2 !== 0) {
            store.dispatch({ type: 'INCREMENT' })
          }
        })

      document.getElementById('incrementAsync')
        .addEventListener('click', function () {
          setTimeout(function () {
            store.dispatch({ type: 'INCREMENT' })
          }, 1000)
        })


    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Omer's Workshop</title>
	<script src="https://unpkg.com/redux@latest/dist/redux.min.js"></script>
	</head>
	<body>
	<div>
	<p>
	Counter: <span id="value">0</span> times
	<button id="increment">+</button>
	<button id="decrement">-</button>
	<button id="incrementIfOdd">Increment if odd</button>
	<button id="incrementAsync">Increment async</button>
	</p>
	</div>
	<script>
	const valueEl = document.getElementById('value')

	function counter(state = 0, action) {
	switch (action.type) {
	case 'INCREMENT':
	return state + 1
	case 'DECREMENT':
	return state - 1
	default:
	return state
	}
	}

	const store = Redux.createStore(counter)

	function render() {
	valueEl.innerHTML = store.getState().toString()
	}

	render()
	store.subscribe(render)

	document.getElementById('increment')
	.addEventListener('click', function () {
	store.dispatch({ type: 'INCREMENT' })
	})

	document.getElementById('decrement')
	.addEventListener('click', function () {
	store.dispatch({ type: 'DECREMENT' })
	})

	document.getElementById('incrementIfOdd')
	.addEventListener('click', function () {
	if (store.getState() % 2 !== 0) {
	store.dispatch({ type: 'INCREMENT' })
	}
	})

	document.getElementById('incrementAsync')
	.addEventListener('click', function () {
	setTimeout(function () {
	store.dispatch({ type: 'INCREMENT' })
	}, 1000)
	})


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