Exercise 01 - Creating a State Machine - object

01/index.js

@@ -1,33 +1,31 @@
 const elBox = document.querySelector('#box');
 
+// FSM: ->inactve <-CLICK-> active
+const machine = {
+  initial: "inactive",
+  states: {
+    inactive: {
+      on: {
+        CLICK: "active"
+      }
+    },
+    active: {
+      on: {
+        CLICK: "inactive"
+      }
+    }
+  }
+}
 
 // Pure function that returns the next state,
 // given the current state and sent event
 const transition = (state, event) => {
-  // FSM: ->inactve <-CLICK-> active
-  switch (state) {
-    case "inactive":
-      switch (event) {
-        case "CLICK":
-          return "active";
-        default:
-          return state;  
-      } 
-    case "active":
-      switch (event) {
-        case "CLICK":
-          return "inactive";
-        default:
-          return state;  
-      } 
-    default:
-      return state;  
-  }
+  return machine.states[state].on?.[event] || state ;
 }
 
 // Keep track of your current state
 // start with inactive initial state
-let currentState = "inactive";
+let currentState = machine.initial;
 
 const send = event => {
   // Determine the next value of `currentState`