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
     );

Well the body can’t have any dom elements according to the challenger

That means I had to create the dom elements as well and I was unable to figure out a way within the given character limit

    f.addEventListener('keypress',e=>{if(e.keyCode==000) etc()})

I found it difficult manipulate DOM with just js without hitting the limit, well done sir, you deserve a cookie

Too late. Golfing notes:

• Your `win` variable is unnecessary: window is approximately the global object (look into globalThis for the subtleties of how window isn’t quite the global object), so you can drop your “win.” every time, e.g. win.c.removeChild(b) can be just c.removeChild(b).

• parent.appendChild(child) → parent.append(child) and parent.removeChild(child) → child.remove(), using newer, shorter DOM methods.

• Skip quotes on attribute values, and trailing slashes are 100% superfluous in HTML (they’re explicitly ignored, as an XHTML compatibility mechanism; I reckon they’re actually a slightly bad thing rather than harmless).

It’s not last variable return such as you get in expression-oriented languages like Ruby or Rust; rather, it’s that if what follows the fat arrow is not a curly brace, it’s parsed as an expression, which is made to be the value returned. So `a => { a }` is the void function, but `a => { return a }` and `a => a` are identity functions. Expressed as an approximate grammar, it’s

  arrow-function = arrow-function-parameters "=>" ( "{" *statement "}" | expression-minus-object-literals )