{"size": 725, "ext": "js", "max_stars_repo_path": "src/01/index.js", "max_stars_repo_name": "raphaeltraviss/xstate_workshop", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/01/index.js", "max_issues_repo_name": "raphaeltraviss/xstate_workshop", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/01/index.js", "max_forks_repo_name": "raphaeltraviss/xstate_workshop", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 20.1388888889, "max_line_length": 49, "alphanum_fraction": 0.5986206897}
const elBox = document.querySelector('#box');

// Pure function that returns the next state,
// given the current state and sent event
function transition(state, event) {
  switch (state) {
    case 'inactive':
      switch (event) {
        case 'CLICK':
          return 'active';
        default:
          return state;
      }
    case 'active':
      switch (event) {
        case 'CLICK':
          return 'inactive';
        default:
          return state;
      }
  }
}

// Keep track of your current state
let currentState = 'inactive';

function send(event) {
  currentState = transition(currentState, event);

  elBox.dataset.state = currentState;
}

elBox.addEventListener('click', () => {
  send('CLICK');
});
