"Elmish" + Todo List Example?

[nelsonic]

Can we split the DOM-creation and mount code into it's own file elmish.js and use it as an opportunity to create a basic Todo List using TodoMVC styles?

Tasks

• Split any generic functions into a separate file called elmish.js (independently tested)
  • empty - Empty all DOM nodes
  • mount - mount the app to the root DOM node.
• DOM Creation Functions
  • <section>
  • <div>
  • <ul>
  • <li>
  • <input>
  • text
  • <h1>
  • <header>
  • <label>
  • <footer>
  • <span>
  • <strong>
  • <a>
• Router: e.g: /#/active Rudimentary Routing in a Client-side Web Application: Why? What? How? #46
• localStorage Saving / Retrieving Data to/from localStorage #47
• "Helpers"
  • Attributes
    • id
    • class
    • data-id
    • for
    • type
    • autofocus
    • style
    • placeholder
    • href
    • checked
  • Child Nodes
• Biz Logic! [Epic] TodoMVC Feature List  #48

[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.