// Create Main State which includes all the application logic
  class MainState extends IF.State
  {
    // Declare this as default state
    static ROUTE = '/';

    // The template as native as possible to standard HTML
    static TMPL = `
            <input type="text" id="new-todo" />
            <button type="button" id="btn-add">Add</button>
            <ul>
                <% for ( i = 0; i < todos.length; i++ ) {   %>
                    <li><%= todos[ i ] %></li>
                <% }    %>
            </ul>
        `;

    enter()
    {
      // Our todo list as an simple array of strings
      this.todos = [];

      // Add action, no automatic data-binding hence no magic or black box
      this.app.container.addEventListener( 'click', (e) => {
        if ( !e.target.matches( '#btn-add' ) ) return;
        const input = this.app.container.querySelector( '#new-todo' );
        input.classList.remove("invalid-input" );
        if ( input.value === "" ) {
          setTimeout( () => input.classList.add("invalid-input" ), 10 );
        } else {
          this.todos.push( input.value );
          input.value = "";
          this.render();
        }
      });

      // Initial rendering
      this.render();
    }

    render()
    {
      // Optimized rendering using DOM diffing
      this.app.view.render( this.app.container, MainState.TMPL, { todos : this.todos } );
    }
  }

  // Settings for example environment
  const appSettings = { router : { basePath : "/02-todo-app/" } };

  // Creating the InfrontJS application and adding the MainState
  const myApp = new IF.App( document.getElementById( 'app' ), appSettings );
  myApp.states.add( MainState );
  myApp.run();