DEV Community

SteinarV-design
SteinarV-design

Posted on

2 1

Finite State Machine w. vanilla JavaScript example

Definition

The finite state machine can only have one single state active at the same time. This means that the machine has to transition from one state to another, in order to perform different actions.

Code excerpts

Html file

Script file

Panels

The state machine

const stateMachine = {
  state: 'localTime',
  transitions: {
localTime: {
      start() {
        this.state = 'stopWatch';
      },
      stop() {
        this.state = 'localTime';
      },
      setTab() {
        this.state = 'settings';
      },
      quotesTab() {
        this.state = 'quotes';
      },
      displayTab() {
        this.state = 'localTime';
      },
    },
    stopWatch: {
      start() {
        this.state = 'stopWatch';
      },
      stop() {
        this.state = 'localTime';
      },
      setTab() {
        this.state = 'stopWatch';
      },
      finish() {
        this.state = 'localTime';
      },
      quotesTab() {
        this.state = 'stopWatch';
      },
      displayTab() {
        this.state = 'stopWatch';
      },
    },
    settings: {
      start() {
        this.state = 'settings';
      },
      stop() {
        this.state = 'settings';
      },
      setTab() {
        this.state = 'settings';
      },
      quotesTab() {
        this.state = 'settings';
      },
      displayTab() {
        this.state = 'localTime';
      },
    },
    quotes: {
      start() {
        this.state = 'quotes';
      },
      stop() {
        this.state = 'quotes';
      },
      setTab() {
        this.state = 'quotes';
      },
      quotesTab() {
        this.state = 'quotes';
      },
      displayTab() {
        this.state = 'localTime';
      },
    },
  },
  dispatch(actionName) {
    const action = this.transitions[this.state][actionName];

    if (action) {
      action.call(this);
    } else {
      console.log('invalid action');
    }
  },
};
Enter fullscreen mode Exit fullscreen mode

Diagram of the machine

Visualisation

How to transition between states

let code = ``

code = `
          <button class="stop" onClick="stopClicked()">Stop</button>

          <button class="quotes" onClick="quotesOnTop()">Quotes</button>

          <button class="settings" onClick="settingsOnTop()">Settings</button>

          <button class="display" onClick="displayOnTop()">Display</button>

          <button class="start" onClick="startClicked()">Start</button>
`;

function startClicked() {
  if (stateMachine.state === 'localTime') {
    stateMachine.dispatch('start');
  }
}

function stopClicked() {
  if (stateMachine.state === 'stopWatch') {
    stateMachine.dispatch('stop');
  }
}

const displayOnTop = () => {
  if (
    stateMachine.state === 'settings' ||
    stateMachine.state === 'quotes'
  ) {
    stateMachine.dispatch('displayTab');
  }
};

const settingsOnTop = () => {
  if (stateMachine.state === 'localTime') {
    stateMachine.dispatch('setTab');
  }
};

const quotesOnTop = () => {
  if (stateMachine.state === 'localTime') {
    stateMachine.dispatch('quotesTab');
  }
};
Enter fullscreen mode Exit fullscreen mode

The function createPanels( ) creates 5 buttons - Stop, Quote, Settings, Display and Start. Clicking one of these buttons will change the state of the machine. You can only click on buttons that are active. Active buttons are dependent of the state of the machine.

Codepen

"Codepen" - https://codepen.io/ - is a social development environment, an online code editor for developers of any skill, that allows people to write code in the browser, and see the results of it as they build. Codepen is particularly useful for people learning to code.

View the full code for the state machine at
https://codepen.io/steinarV/pen/eYBowaw?editors=0010

Here is a link to my blog : https://steinarv.design/blog

Thanks for watching !

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (1)

Collapse
 
artydev profile image
artydev •

Nice, thank you

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More