Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/53 below:

render_footer renders the <footer> element of Todo App · Issue #53 · dwyl/learn-elm-architecture-in-javascript · GitHub

Referring to the rendered HTML on http://todomvc.com/examples/vanillajs as our "guide":

there is:

• a <footer> element with
  • a <span> element which contains
    • a text node with: "{count} item(s) left".
  • a <ul> containing
    • 3 <li> elements each with
    • a link (<a>) which allow the "user" to filter which items appear in the <view>.
  • a <button class="clear-completed"> which will Clear all Completed items when clicked.

I "copy-pasted" of the rendered HTML from the Dev Tools:

<footer class="footer" style="display: block;">
  <span class="todo-count">
    <strong>2</strong> items left
  </span>
  <ul class="filters">
    <li>
      <a href="#/" class="selected">All</a>
    </li>
    <li>
      <a href="#/active">Active</a>
    </li>
    <li>
      <a href="#/completed">Completed</a>
    </li>
  </ul>
  <button class="clear-completed" style="display: block;">
    Clear completed
  </button>
</footer>

• render_footer returns a <footer> DOM element which can be rendered directly to the document or nested in another DOM element.
• <footer> contains:
  • <span class="todo-count"> which contains
    • a text node with: "{count} item(s) left".
      pseudocode:
      {model.todos.filter(done==false)} item{model.todo.length > 1 ? 's' : '' } left
  • <ul> containing 3 <li> with the following links (<a>):
    • Show All: <a href="#/" class="selected">All</a>
      • class="selected" should only appear on the selected menu/navigation item.
        this should be "driven" by the model.hash property.
    • Show Active: <a href="#/active">Active</a>
    • Show Completed: <a href="#/completed">Completed</a>
  • <button class="clear-completed" style="display: block;"> will Clear all Completed items.
    pseudocode:
    var new_model = model.todos.filter(function(item) { return item.done === false})

This issue is part of the TodoMVC Feature List [Epic] #48

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4