Show HN: A TO-DO app that fits inside a single tweet

But whoa, this is approach is really impressive. That "e" function for creation and appending elements is witty -- I wouldn't think it is possible to have such clean and terse JS element "factory" that in effect outperforms (in character count metric) literal HTML content.

(I must confess it took me a while to wrap my head around it, so if anyone is struggling like me, this is the above code unrolled:)

    var Doc = document;
    var FormElem;
    var BodyElem;
    var AppendElem =
    (
     aParentElem
     // reference
     ,
     aTagElemRet
     // tag name for new child, will become child itself
     ,
     aContent
     // (text) content for new child
    ) =>
    (
     aParentElem.append(aTagElemRet = Doc.createElement(aTagElemRet))
     // aTagElemRet tag name (string) becomes HTMLElement
     // and is immediately appended at the end of reference element
     ,
     // comma operator evaluates both sides, returns right
     aContent && aTagElemRet.append(aContent)
     // if third argument is truthy, put it into the new HTMLElement
     ,
     aTagElemRet
     // expression results in this so arrow function returns the new HTMLElement
    );
    var InputElem = AppendElem
     (
      FormElem = AppendElem
       (
        BodyElem = Doc.body, // = parent
        "form" // = tagName
       ), // = parent
      "input" //= tagName
      // no content
     );
    var ListElem = AppendElem(
     BodyElem, // = parent
     "ol" // = tagName
    );
    FormElem.onsubmit =
     pParamLI =>
     // event handler gets SubmitEvent object as a sole argument
     // but it is not needed, so parameter will be reassigned to
     // newly created LI element
     (
      AppendElem(
       pParamLI = AppendElem(
        ListElem, // = parent
        "li", // = tagName
        InputElem.value + " " // = (text) content
       ), // = parent
       "button", // = tagName
       "×" // = content
      ).onclick = _ => pParamLI.remove(), !1
      // inline handler attached to created button
      // ClickEvent passed in _ is not used
      // return !1 what evaluates to false
      // inline handler returning false prevents default action
      // in this case form submission
      // button is in default type, so "submit" would be dispatched
      // on its form otherwise
     );

document.write(`"+i.value'>+x`)

Demo: https://codepen.io/xem/pen/dypVzaw?editors=1100

Cheers :)

"+i.value'>+ X

There are 4 occurrences of "innerHTML" and 3 occurrences of " onclick='" so I replaced those two substrings with H and o.

The whole HTML is rendered using an ES6 template literal (document.write(` ... `))

Everytime a ${H} or a ${o} is present in the template, the value of H or o is copied here.

It's a native feature of JS since ES6.

Besides that, the second implicitly closes the first , so no need to use . The id's are global, that's why we can access i.value or u.innerHTML directly. In onclick, "this" (the current element) is implicit. Finally, the strikethrough is done using the (deprecated but still working) .strike() String method.