ES6 and Redux (State Management)

by Farzad Cyrus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.5/redux.min.js"></script>
<main>
  <table>
    <tr>
      <td width="80">Counter</td>
      <td id="sec"><span></span></td>
    </tr>
    <tr>
      <td>Total</td>
      <td id="hms"><span></span></td>
    </tr>
  </table>

  <button id="button"></button>
	<button id="direction"></button>

</main>

CSS

* {
  font-family: sans-serif;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
  margin: 0;
  padding: 0;
	font-size: 1.4rem;
}

main {
  margin: 2.4rem auto;
  padding: 3.2rem;
}

table,
button {
  margin-bottom: 1.6rem;
}

table {
  border: none;
  border-collapse: collapse;
  width: 100%;
	border-radius: 0.2rem;
}

table td {
  padding: 0.8rem;
  border: 1px solid #ddd;
}

button {
  background: #234;
  color: #fff;
  border-radius: 0.2rem;
  border: none;
  height: auto;
  line-height: 3.2rem;
  padding: 0 1.2rem;
  font-size: 100%;
  font-weight: normal;
  text-transform: uppercase;
  outline: none;
}
button.warning {
	background: #fa0;
}
button.success {
	background: #0c0;
}

JavaScript

const INIT = 'INIT',
			INCREMENT = 'INCREMENT',
			DECREMENT = 'DECREMENT',
			START = 'START',
			STOP = 'STOP',
			INCREMENT_IT = 'INCREMENT_IT',
			DECREMENT_IT = 'DECREMENT_IT';
			
function toHMS(d) {
	d = Number(d);
	const h = Math.floor(d / 3600),
				m = Math.floor(d % 3600 / 60),
				s = Math.floor(d % 3600 % 60);
	const displayH = h > 0 ? '[ ' + h + ' ] HRS : ' : '',
				displayM = m > 0 ? '[ ' + m + ' ] MIN : ' : '',
				displayS = s >= 0 ? '[ ' + s + ' ] SEC' : '';
	return displayH + displayM + displayS;
}

const button = document.querySelector('#button'),
			direction = document.querySelector('#direction');

function counter(state, action) {
  if (typeof state == 'undefined') {
    state = {
      counter: 0,
      counting: false,
			incrementing: true,
      buttonText: ' ',
			buttonClass: ' ',
			directionText: ' '
    };
  }

  switch (action.type) {
		case INIT:
			state.buttonText = state.counter > 0 ? 'Continue' : 'Start';
			state.directionText = state.incrementing > 0 ? 'Incrementing ▲' : '▼ Decrementing';
			break;
    case INCREMENT:
      state.counter = state.counter + 1;
      break;
    case DECREMENT:
      state.counter = state.counter - 1;
      break;
    case START:
      state.counting = true;
			state.buttonText = 'Pause';
			state.buttonClass = 'warning';
      break;
    case STOP:
      state.counting = false;
			state.buttonText = 'Continue';
			state.buttonClass = 'success';
      break;
		case INCREMENT_IT:
      state.incrementing = true;
			state.directionText = 'Incrementing ▲';
      break;
		case DECREMENT_IT:
      state.incrementing = false;
			state.directionText = 'Decrementing ▼';
      break;
  }
  return state;
}

function render() {
  document.querySelector('#sec span').innerHTML = store.getState().counter;
  document.querySelector('#hms span').innerHTML = toHMS(store.getState().counter);
  button.innerHTML = store.getState().buttonText;
	button.className = store.getState().buttonClass;
	direction.innerHTML...