52 ms·

Op here: you can’t do it with plain js Plus it’s ok to use frameworks according to the tweet

• numlock86 6y ago
  Care to elaborate? There are some nifty tricks when it comes to golfing JS.
  • rukshn 6y ago
    Well sorry I was in a hurry when I typed the above comment 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
    • tdeck 6y ago
      I wonder if document.write() would work for you. The old-fashioned APIs from before the DOM era (e.g innerHTML, innerText) generally seem to be a lot shorter although they're still a bit verbose.
      • rukshn 6y ago
        Yes I guess that was the right way all along, I saw a comment on this thread using innerHtml and write
  • bamboleo 6y ago
    JS is ok, it’s the DOM APIs that are verbose. I mean this is just to handle the enter key: f.addEventListener('keypress',e=>{if(e.keyCode==000) etc()})
    • rukshn 6y ago
      Exactly these were the challenges I faced when using plain js
    • tdeck 6y ago
      Just a fun note: You can replace this f.addEventListener('keypress',e=>{...}) With the older but essentially equivalent f.onkeypress=e=>{...} and save 18 characters. You can even use `onkeyup` and save 3 more characters.
• jacquesm 6y ago
  Then that means it doesn't fit.
• shrew 6y ago
  I don't mean to make this into a code golf thread, but saying it "can't" be done in plain JS was too enticing not to try it. Does this meet the requirements? <body><script>let win=window;document.body.innerHTML=`<input id="a"/><b id="b"></b><ul id="c"></ul>`,win.b.onclick=a=>{let b=win.c.appendChild(document.createElement("p"));b.innerText=win.a.value,win.a.value="",b.onclick=()=>win.c.removeChild(b)};</script> JS Fiddle: https://jsfiddle.net/2z0bus8d/ https://jsfiddle.net/2z0bus8d/ While I think there's always the standard caveat around code golf in JS (you're building on a vast set of APIs and an often resource hungry platform), reaching for a framework really doesn't feel in the spirit of this kind of puzzle.
  • rukshn 6y ago
    This has to be the best solution I have seen, I feel it ticks all boxes and better yet it doesn’t use any external libraries like I did I found it difficult manipulate DOM with just js without hitting the limit, well done sir, you deserve a cookie
  • chrismorgan 6y ago
    > I don't mean to make this into a code golf thread 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).
    • shrew 6y ago
      And this is why code golf is fun regardless of language! The first two are new to me, so thank you, I'll read up. The third succinctly explains a quirk I've never bothered to check the legitimacy of, so thank you again. With your changes, that brings us way below the character limit, sitting at 208 characters with the <body> and <script> tags the challenge dictates. I had to rejig things to use parent.append(child) as it doesn't return the element, but using the child.remove() method directly means there's no parameter and therefore one less character there, so it all balances out. I also had to rename the event variable as it caused a scoping conflict for the variable `a`. With all that space left over you could certainly add in the clear all and strike-through behaviour properly. Maybe even some real state! Updated fiddle: https://jsfiddle.net/2z0bus8d/1/ https://jsfiddle.net/2z0bus8d/1/