"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

• [x] Split any generic functions into a separate file called elmish.js (independently tested)
  • [x] empty - Empty all DOM nodes
  • [x] mount - mount the app to the root DOM node.
• [x] DOM Creation Functions
  • [x] <section>
  • [x] <div>
  • [x] <ul>
  • [x] <li>
  • [x] <input>
  • [x] text
  • [x] <h1>
  • [x] <header>
  • [x] <label>
  • [x] <footer>
  • [x] <span>
  • [x] <strong>
  • [x] <a>
• [x] Router: e.g: /#/active #46
• [x] localStorage #47
• [x] "Helpers"
  • [x] Attributes
  • [x] id
  • [x] class
  • [x] data-id
  • [x] for
  • [x] type
  • [x] autofocus
  • [x] style
  • [x] placeholder
  • [x] href
  • [x] checked
  • [x] Child Nodes
• [ ] Biz Logic! https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/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.