"Elmish" + Todo List Example?

[dwyl]

"Elmish" + Todo List Example?

[nelsonic]

While this is not a "high priority", I feel that it's good practice
and will help a complete beginner to understand TEA + TodoMVC a bit better.

So ... I'm thinking of tackling it.

[nelsonic]

http://todomvc.com/examples/vanillajs/

[nelsonic]

View Source of TodoMVC to analyse what HTML elements we need to create.

<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo" placeholder="What needs to be done?" autofocus="">
  </header>
  <section class="main" style="display: block;">
    <input id="toggle-all" class="toggle-all" type="checkbox">
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li data-id="1531397960010" class="completed">
        <div class="view">
          <input class="toggle" type="checkbox" checked="">
          <label>Learn The Elm Architecture ("TEA")</label>
          <button class="destroy"></button>
        </div>
      </li>
      <li data-id="1531397981603" class="">
        <div class="view">
          <input class="toggle" type="checkbox">
          <label>Build TEA Todo List App</label>
          <button class="destroy">
          </button>
        </div>
      </li>
    </ul>
  </section>
  <footer class="footer" style="display: block;">
    <span class="todo-count"><strong>1</strong> item left</span>
    <ul class="filters">
      <li>
        <a href="#/" class="selected">All</a>
      </li>
      <li>
        <a href="#/active" class="">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>
    <button class="clear-completed" style="display: block;">Clear completed</button>
  </footer>
</section>

[nelsonic]

localStorage sample code:

var model = { 'one': 1, 'two': 2, 'three': 3 };

// save the model (data) into storage as a stringified object:
localStorage.setItem('elmish_store', JSON.stringify(model));

// Retrieve the stringified object from localStorage:
var retrieved_model = localStorage.getItem('elmish_store');

console.log('Retrieved model: ', JSON.parse(retrieved_model));

[nelsonic]

It's occurred to me that I have the incorrect parameter order in the update function ...
The function signature in Elm is: update : Msg -> Model -> ( Model, Cmd Msg )
https://www.elm-tutorial.org/en/08-edit/05-update.html
We have update(model, action)
Let's "fix" this.