dwyl / learn-elm-architecture-in-javascript

:unicorn: Learn how to build web apps using the Elm Architecture in "vanilla" JavaScript (step-by-step TDD tutorial)!
https://todomvc-app.herokuapp.com
GNU General Public License v2.0
213 stars 19 forks source link

EDIT an item #60

Closed nelsonic closed 6 years ago

nelsonic commented 6 years ago

as a user I want to edit a todo list item so that I can change a mistake or update the copy

nelsonic commented 6 years ago

image

nelsonic commented 6 years ago

todo-edit-html

nelsonic commented 6 years ago

Sample code for Double Click Event Handler:

<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
<script>
  function doubleclick(el, onsingle, ondouble) {
    if (el.getAttribute("data-dblclick") == null) {
      el.setAttribute("data-dblclick", 1);
      setTimeout(function () {
        if (el.getAttribute("data-dblclick") == 1) {
          onsingle();
        }
        el.removeAttribute("data-dblclick");
      }, 300);
    } else {
      el.removeAttribute("data-dblclick");
      ondouble();
    }
  }
</script>

via: https://stackoverflow.com/a/16033129/1148249

nelsonic commented 6 years ago

image

image

nelsonic commented 6 years ago

edit-double-click-test-failing

nelsonic commented 6 years ago

edit-double-click-test-pass

nelsonic commented 6 years ago

edit-item-not-double-click

nelsonic commented 6 years ago

save-blank-title-test-failing

nelsonic commented 6 years ago

save-blank-title-test-pass